[转载]Understanding the Bootstrap 3 Grid System
https://scotch.io/tutorials/understanding-the-bootstrap-3-grid-system
With the 3rd version of the great Bootstrap out for about 4 and a half months now, people have had their time to play around with it, learn the changes, find new features, and build amazing things.
The Difference
The most interesting change for me was the difference in the grid system. Bootstrap 2 catered to two different browser sizes (desktop and then mobile). With Bootstrap 3, you now build with mobile in mind first, and the grid system lets you create different grid systems based on browser size.
Bootstrap 2
The grid you create works on desktops and then stacks on top of each other when browser size is below 767px. This is limited since you can only define 1 grid on desktop sized browsers. You are left with a stacked grid on mobile devices.
Bootstrap 3
The new Bootstrap grid system applies to mobile first. When you declare a specific grid size, that is the grid for that size and above. This can be a little hard to grasp at first so here’s an example.
For example, let’s say you want a site that has:
- 1 column on extra small devices
- 2 columns on small AND medium devices
- 4 columns on large devices
Since the grid system now cascades up from mobile devices, this is how this code will look.
<div class="row">
<div class="col-sm-6 col-lg-3">
This is part of our grid.
</div>
<div class="col-sm-6 col-lg-3">
This is part of our grid.
</div>
<div class="col-sm-6 col-lg-3">
This is part of our grid.
</div>
<div class="col-sm-6 col-lg-3">
This is part of our grid.
</div>
</div>
We don’t have to define anything for extra small devices since the default is one column. We have to define a grid size for small devices, but not for medium devices. This is because the grid cascades up. So if you define a size at sm
, then it will be that grid size for sm
, md
, and lg
.
We’ll explain the different grid sizes and how you create them and then show examples.
The Grid Sizes
This is the best part about the new grid system. You could realistically have your site show a different grid on 4 different browser sizes. Below is the breakdown of the different sizes.
.col-xs-$ |
Extra Small | Phones Less than 768px |
.col-sm-$ |
Small Devices | Tablets 768px and Up |
.col-md-$ |
Medium Devices | Desktops 992px and Up |
.col-lg-$ |
Large Devices | Large Desktops 1200px and Up |
The official Bootstrap docs offer a much more comprehensive understanding of how the grid works. Take a look at those to get a more solid overview of column sizes, gutter sizes, maximum column sizes, and the max-width of your overall site based on browser size.
Default Sizes for the Bootstrap Grid
Sometimes you will need to use media queries to get your site to act the way you’d like it to. Knowing the default grid sizes is essential to extending the Bootstrap grid. We’ve written up a quick tip to show you the default sizes so take a look if you need the Bootstrap media queries and breakpoints.
Responsive Utilities
Just like Bootstrap 2, Bootstrap 3 provides responsive utilities for hiding and showing elements based on the browser size. This will also help us in defining our grid system.
.visible-xs
.visible-sm
.visible-md
.visible-lg
.hidden-xs
.hidden-sm
.hidden-md
.hidden-lg
This helps because we are able to show certain elements based on size. In our examples today, we’ll be showing an extra sidebar on large desktops.
Examples
Here are a few examples of the grids that you can create. We’ll go through some basic sites that some people might want and show how easy it is to build that site with the Bootstrap 3 grid.
Simple: Large Desktop vs Mobile
Let’s say you wanted a site to have 1 column on extra small (phone) and small (tablet) devices, 2 columns on medium (medium desktop) devices, and 4 columns on large (desktop) devices.
Here is the code for that example:
<div class="row">
<div class="col-md-6 col-lg-3">
<div class="visible-lg text-success">Large Devices!</div>
<div class="visible-md text-warning">Medium Devices!</div>
<div class="visible-xs visible-sm text-danger">Extra Small and Small Devices</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="visible-lg text-success">Large Devices!</div>
<div class="visible-md text-warning">Medium Devices!</div>
<div class="visible-xs visible-sm text-danger">Extra Small and Small Devices</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="visible-lg text-success">Large Devices!</div>
<div class="visible-md text-warning">Medium Devices!</div>
<div class="visible-xs visible-sm text-danger">Extra Small and Small Devices</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="visible-lg text-success">Large Devices!</div>
<div class="visible-md text-warning">Medium Devices!</div>
<div class="visible-xs visible-sm text-danger">Extra Small and Small Devices</div>
</div>
</div>
Intermediate: Show Extra Column on Large Desktops
This is an interesting example and one that the new grid excels at. Let’s say you have a site that has a sidebar and a main content section. For extra small devices, you want one column, main content with the sidebar stacked below it. For small and medium devices, we want sidebar and main content to sit side by side. Now for large devices, we want to utilize the space on larger devices. We want to add an extra sidebar to show more content.
We change the size of the main content to span 6 columns on large devices to make room for our second sidebar. This is a great way to utilize the space on larger desktops. And here is the code for that example.
<div class="row">
<div class="col-sm-9 col-lg-6 text-danger">
I am the main content.
</div>
<div class="col-sm-3 text-warning">
I am the main sidebar.
</div>
<div class="col-lg-3 visible-lg text-success">
I am the secondary sidebar that only shows up on LARGE devices.
</div>
</div>
Advanced: Different Grid For Every Size
This will be a more complex example. Let’s say that at no point in our grid system do we want all of our columns to stack. For extra small devices, we want 2 columns. For small devices, we want 3 columns. For medium devices, we want 4 columns. For large devices, we want 6 columns (one that only shows on large devices).
You get the drill now. Let’s just straight into the example and code.
<div class="row">
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
I'm content!
</div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
I'm content!
</div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
I'm content!
</div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
I'm content!
</div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
I'm content!
</div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 visible-lg">
I'm content only visible on large devices!
</div>
</div>
You can see that as the browser size gets smaller, the columns start to form. Also, the content inside each will begin stacking.
It’s Gridtastic!
You can see how easily it is to build complex and dynamic sites with the Bootstrap 3 grid. From mobile 2 column sites to complex hiding and showing elements on large desktops, you can build any type of site. Hopefully these examples will give you an idea of the flexibility of the new grid system and all the great things you can create.
[转载]Understanding the Bootstrap 3 Grid System的更多相关文章
- Bootstrap 网格系统(Grid System)实例5
Bootstrap 网格系统(Grid System)实例5:手机,平板电脑,笔记本或台式电脑 <!DOCTYPE html><html><head><met ...
- Bootstrap 网格系统(Grid System)实例4
Bootstrap 网格系统(Grid System)实例4:中型和大型设备 <!DOCTYPE html><html><head><meta http-eq ...
- Bootstrap 网格系统(Grid System)实例3
Bootstrap 网格系统(Grid System)实例:堆叠水平 <!DOCTYPE html><html><head><meta http-equiv= ...
- Bootstrap 网格系统(Grid System)实例2
Bootstrap 网格系统(Grid System):堆叠水平,两种样式 <!DOCTYPE html><html><head><meta http-equ ...
- Bootstrap 网格系统(Grid System)实例1
Bootstrap 网格系统(Grid System)实例:堆叠水平 <!DOCTYPE html><html><head><meta http-equiv= ...
- Bootstrap 网格系统(Grid System)
Bootstrap 网格系统(Grid System) Bootstrap提供了一套响应式,移动设备优先的流式网格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列. 什么是 ...
- [转] Understanding Twitter Bootstrap 3
Bootstrap is a popular, open source framework. Complete with pre-built components it allows web desi ...
- BootStrap -- Grid System
<script src="jquery.1.9.js"></script> <script src="js/bootstrap.min.js ...
- BootStrap入门教程 (一) :手脚架Scaffolding(全局样式(Global Style),格网系统(Grid System),流式格网(Fluid grid System),自定义(Customing),布局(Layouts))
2011年,twitter的“一小撮”工程师为了提高他们内部的分析和管理能力,用业余时间为他们的产品构建了一套易用.优雅.灵活.可扩展的前端工具集--BootStrap.Bootstrap由MARK ...
随机推荐
- 2014.9.11 Research Meeting Report
Dear All: Yesterday when we read INFOCOM papers, you have seen how damage it is to have careless wri ...
- linux重启tomcat的shell脚本
基本思路: 先检查待重启的tomcat的进程是否存在 存在则执行shutdown. 然后再次检查进程是否还存在,不存在则执行kill 然后删除工作空间及10天前的日志. 最后执行启动. #!/bin/ ...
- LintCode——交叉字符串
描述:给出三个字符串:s1.s2.s3,判断s3是否由s1和s2交叉构成. 样例:s1 = "aabcc" s2 = "dbbca" - 当 s3 = &quo ...
- 从零系列--开发npm包(一)
一.目的 主要是纪录和回顾自己开发的一些步骤以及遇到的一些问题和解决方案 二.准备工作 1.IDE 选择 VS Code 2.安装node 环境 (https://nodejs.org/zh-cn/) ...
- win10系统安装web3js的正确方法
在安装web3的时候 用npm install web3 –save-dev 在win10系统下会一直安装不成功.后来换用了 cnpm install web3 –save-dev 安装时候报出:C ...
- 一篇带你读懂TCP之“滑动窗口”协议
前言 你现在的努力,是为了以后有更多的选择. 在上一篇文章通过"表白"方式,让我们快速了解网络七层协议了解了网络七层协议. 接下来我们要把重心放在网络传输的可靠性上面.一起来看TC ...
- oozie 编译与安装
oozie:4.3.1 hadoop 2.7.6 hive编译使用2.0.0参与编译不通过,但是可以指定为1.2.0,编译可以通过,后期不使用hive的action即可(也可以使用,但是可能会出现异 ...
- 2-Thirteenth Scrum Meeting-10151213
任务安排 成员 今日完成 明日任务 闫昊 获取视频播放进度 用本地数据库记录课程结构和学习进度 唐彬 阅读IOS代码+阅读上届网络核心代码 请假(编译……) 史烨轩 下载service开发 ...
- Linux内核分析——第一周学习笔记20135308
第一周 计算机是如何工作的 第一节 存储程序计算机工作模型 1.冯·诺依曼结构模型:冯·诺依曼结构也称普林斯顿结构,是一种将程序指令存储器和数据存储器合并在一起的存储器结构.程序指令存储地址和数据存储 ...
- 重温httpsession①
Session—HTTPSession 服务器创建的,Javaweb提供的 与HTTP协议无关是服务器端对象,保存在服务器端.用来会话跟踪. Cookie与服务器创建,与HTTP协议相关,保存在客户端 ...