什么是bootstrap12栅格

本篇文章为大家展示了什么是bootstrap12栅格，代码简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。

创新互联服务紧随时代发展步伐，进行技术革新和技术进步，经过十年的发展和积累，已经汇集了一批资深网站策划师、设计师、专业的网站实施团队以及高素质售后服务人员，并且完全形成了一套成熟的业务流程，能够完全依照客户要求对网站进行成都做网站、成都网站建设、建设、维护、更新和改版，实现客户网站对外宣传展示的首要目的，并为客户企业品牌互联网化提供全面的解决方案。

栅格系统简介

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。

栅格系统通过一系列行（row）与列（column）的组合来创建页面的布局，设置的内容可以放在创建好的布局中。

栅格系统的实现原理

栅格系统的实现原理非常简单，仅仅是通过定义容器的大小，平分为 12 份，再调整内外边距，最后结合媒体查询，就制作出了强大的响应式的栅格系统。

栅格系统的主要工作原理：

➣ 一行数据（row）必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的对齐方式和内边距（padding）。

➣ 通过 “行（row）” 在水平方向创建一组 “列（column）”。

➣ 你的具体内容应当放置于 “列（column）” 内，而且只有 “列（column）” 可以作为行（row）”的直接子元素。

➣ 内置一大堆样式，可以使用如 .row 和 .col-xs-4（占四列宽度）这样的样式（即预定义的类），来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。

➣ 通过为 “列（column）”设置 padding 属性，从而创建列与列之间的间隔（gutter）。通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。

➣ 栅格系统中的列是通过指定 1 到 12 的值来表示其跨越的范围。例如，三个等宽的列可以使用三个 .col-xs-4 来创建。

➣ 如果一 “行（row）” 中包含的 “列（column）” 大于 12，多余的 “列（column）” 所在的元素将被作为一个整体另起一行排列。

➣ 栅格类适用于与屏幕宽度大于或等于分界点大小的设备，并且针对小屏幕设备覆盖栅格类。因此，在元素上应用任何 .col-md-* 栅格类适用于与屏幕宽度大于或等于分界点大小的设备，并且针对小屏幕设备覆盖栅格类。因此，在元素上应用任何 .col-lg-* 不存在，也影响大屏幕设备。

栅格系统布局容器

Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类。注意，由于 padding 等属性的原因，这两种容器类不能互相嵌套。

.container 类用于固定宽度并支持响应式布局的容器

...

.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器

...

栅格系统的使用

栅格系统的使用，其实就是列的各种组合。在基本用法里有四种特性，即列组合、列偏移、列嵌套和列排序。由于不同的屏幕尺寸使用不同的样式，我们以中等屏幕（md）为例进行介绍，其他屏幕用法也是类似。

1、列组合

列组合就是通过更改数字来合并列，类似表格里的 colspan 。列组合的实现方式很简单，只涉及两个 CSS 特性：左浮动和百分比。

说明：在使用栅格系统的时候，只要记住每行的总格数是 12 个，根据实际项目自由组合即可。

        
            
                .col-md-1
                .col-md-1
                .col-md-1
                .col-md-1
                .col-md-1
                .col-md-1
                .col-md-1
                .col-md-1
                .col-md-1
                .col-md-1
                .col-md-1
                .col-md-1
            
            
                .col-md-8
                .col-md-4
            
            
                .col-md-4
                .col-md-4
                .col-md-4
            
            
                .col-md-6
                .col-md-6

什么是bootstrap12栅格

2、列偏移

有时候我们不想让两个相邻的列挨在一起，这时候利用栅格系统的列偏移（offset）功能来实现，而不必再定义 margin 值。对于中等屏幕，可以使用 .col-md-offset-* 形式的样式将列偏移到右侧。

例如，.col-md-offset-2 的意思是将元素向右移动了两个列的宽度。

　　　 
　　　　
            
                .col-md-4
                .col-md-4 .col-md-offset-4
            
            
                .col-md-3 .col-md-offset-3
                .col-md-3 .col-md-offset-3
            
            
                .col-md-6 .col-md-offset-3

什么是bootstrap12栅格

3、列嵌套

栅格系统也支持列嵌套，即在一个列里再声明一个或多个行（row），但是要注意，内部所嵌套的 row 的宽度为 100% 时，就是当前外部列的宽度。被嵌套的行（row）所包含的列（column）的个数不能超过12。

        
        
            
                
                    Level 1：col-md-8
                    
                    
                        Level 2：col-md-6
                        Level 2：col-md-6
                    
                    
                    
                         Level 3：col-md-3 
                         Level 3：col-md-6 
                    
                
                Level 1：col-md-4

什么是bootstrap12栅格

说明：可以看到，在第一个列(col-md-8)里面，嵌套了一个新行(row)，然后在新行里，又放置了两个等宽的(col-md-6)列，并且两个 col-md-6 加起来是12，但是总宽度和外面的 col-md-8 列的宽度一样，也就是说在 row 里的列宽度是按照百分比分配的。在任何一个嵌套列里，不管宽度是多少，都可以再进行 12 等分，并可以进一步组合。

4、列排序

列排序就是改变列的方向，也就是改变左右浮动，并设置浮动的距离。在栅格系统里，可以通过 .col-md-push-* 和 .col-md-pull-* 来实现这一目的。

　　　　　
        
            
            　　.col-md-9 .col-md-push-3
            　　.col-md-3 .col-md-pull-9

什么是bootstrap12栅格

说明：默认情况下，col-md-9 在左边，col-md-3 在右边，如果要互换位置，需要将 col-md-9 列向右移动三个列的距离，也就是推三个列的 offset，样式用 col-md-push-3；而 col-md-3 需要向左移动，也就是拉九个 offset，样式用 col-md-pull-9。

响应式栅格

我们都知道，Bootstrap 可以制作响应式页面。它能为不同屏幕尺寸提供不同栅格样式。在前面的例子中，我们一直都在使用中等屏幕(md)，既然是响应式页面，当然还应该包括超小屏幕(xs)、小型屏幕(sm)、大屏幕(lg)等。

Bootstrap 栅格参数

说明：通过下表可以详细查看 Bootstrap 的栅格系统是如何在多种屏幕设备上工作的。

什么是bootstrap12栅格

上述内容就是什么是bootstrap12栅格，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注创新互联行业资讯频道。

本文名称：什么是bootstrap12栅格
URL分享：http://scjbc.cn/article/gioooi.html

什么是bootstrap12栅格

其他资讯