Bootstrap入门笔记之（三）栅格系统_html/css_WEB-ITnose

程序员文章站 2024-04-06 09:17:19

...

实现原理

栅格系统是Bootstrap中的核心，正是因为栅格系统的存在，Bootstrap才能有着如此强大的响应式布局方案。下面是官方文档中的解说：

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。包含了用于简单的布局选项的预定义类，也包含了用于生成更多语义布局的功能强大的混合类。

我们来理解一下这一段话，可以发现其中最重要的部分就是 移动设备优先 ，那么什么是移动设备优先呢？

Bootstrap的基础CSS代码 默认从小屏幕设备 （比如移动设备、平板电脑）开始，然后使用 媒体查询扩展到大屏幕设备 （比如笔记本电脑、台式电脑）上的组件和网格。

有着如下策略：

内容：决定什么是最重要的。
布局：优先设计更小的宽度。
渐进增强：随着屏幕大小增加而添加元素。

工作原理

数据行（ .row ）必须包含在容器 .container （固定宽度）或 .container-fluid （100%宽度）中，以便为其赋予合适的排列（aligment）和内填充（padding）。如：
```
    

    
```

在数据行（ .row )中可以添加列（column），但列数之和不能超过平分的总列数（在超过时，多余部分会换行显示），默认12。（使用Less或者Sass可以进行自定义设置）如：

                                                 页面上的 具体内容 应当放置于列（column）内，并且 只有列 （column）可以作为数据行 .row 容器的 直接子元素 。 
 
      预定义的网格类，比如 .row 和 .col-xs-4 ，可用于快速创建网格布局。 
      栅格系统中的列是通过指定 1到12 的值来表示其跨越的范围。例如，三个等宽的列可以使用三个 .col-xs-4 来创建。 
        注意事项：
     正如上面在注释部分所展现的一样的 .container （固定宽度）是固定宽度的布局方式。通过查看源码，在查看 .container 类的时候我们会发现，它的宽度是响应式的：（如下） 
             
           
.container { padding-right: 15px; padding-left: 15px; margin-right: auto;margin-left: auto;}@media (min-width: 768px) {  .container { width: 750px; }}@media (min-width: 992px) {  .container { width: 970px; }}/*........*/
             从上面的css代码可以看到，该类默认为整个父元素的宽度（最小屏幕），但是在大屏幕下有着不同的宽度，并且在不同宽度下左右margin会同时增加或减少（水平居中）。
     .container-fluid 类就和 .container 的默认情况一样，为100%宽度。 （CSS代码一样） 
    除此之外
    从源码中我们还可以发现，除了有左右margin外，还可以看到该类是有着左右填充（padding）存在的。
     如果我们继续查看源码，可以发现数据行 .row 中的每一个列也有着左右填充（padding）的存在，如下： 
             
           
.col-md-1, .col-lg-12 /*......*/{ position: relative; min-height: 1px; padding-right: 15px; padding-left: 15px;}
              看到这里，大家应该都能想到会有什么样的情况出现！我们在第一个和最后一个列因为 双填充 的存在， 实际上对于内容的隔离 已经到了 30px 。我们需要怎么消除影响呢？ 
     Bootstrap是通过 .rows 上的外边距（margin）取负 margin-left: -15px;margin-right: -15px; ，表示第一列和最后一列的行偏移，用来抵消第一个列的左内距和最后一列的右内距。 
    基本用法
     一图胜千言，通过下表可以详细查看 Bootstrap 的栅格系统是如何在多种屏幕设备上工作的。使用方法我想应该不用再多说了，已经有提到过，直接一起来看看区别吧。（图片扒自 Bootstrap中文官网 ） 
      
    通过源码可以发现，如下： 
             
           
.col-md-1/*......*/{ float: left;}/*所有的列都是默认向左浮动的*/.col-md-1 { width: 8.33333333%;}.col-md-2 { width: 16.66666667%;}/*.....*/.col-md-12 { width: 100%;}
             从这些CSS代码也就不难发现，Bootstrap中每一列所占的宽度，以及为何在列数设置超过12时，超过部分会换行显示了。
    在下面所有的示例中每一列的背景颜色与边框的效果由如下CSS代码控制：
             
           
[class *= col-]{ background-color: #eee; border: 1px solid #ccc;}
             基础
    那么我们就来看看一些示例吧，下面这种方式是最基本的用法：
             
           
            .col-md-6
        .col-md-6
    
            .col-md-4
        .col-md-4
        .col-md-4
    
            .col-md-2
        .col-md-6
        .col-md-4
    
             实现的效果如下：
      
    Bootstrap作为一个响应式框架当然不会只有那么简单的功能，我们继续往下走吧！
    列偏移
    在某些情况下，我们不希望相邻的列紧靠在一起，如果你希望不通过额外的margin或其他的手段来实现的话，Bootstrap内置为我们提供了列偏移（offset），这一系列的类来帮助我们实现想要的效果。
             
 只需要给需要偏移的列元素上添加类名 col-md-offset-* ( 星号代表要偏移的列组合数 )，那么具有这个类名的列就会向右偏移。 
      这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距（margin）。例如：在列元素中添加 .col-md-offset-6 类将 .col-md-6 元素向右侧偏移了6个列（column）的宽度。 
        现在我们的代码是这样的：
             
           
            col-md-8 
        col-md-4 col-md-offset-2
        col-md-4 col-md-offset-1
    
    
            col-md-4 
        col-md-3 col-md-offset-4
        col-md-4 col-md-offset-4
    
             可以实现的效果如下：
      
             
 从实现的效果我们就能发现一些东西，注意 第二段的显示效果与代码 ，从那里我们可以发现：使用 col-md-offset-* 对列进行向右偏移时，要保证列与偏移列的总数不超过12，不然会致列断行显示。 
      其实原因也很简单：因为该类是对于列设置 margin-left ，并且我们在上面的源码展示中，也可以看有每一列都有着 float:left 的属性，从这些地方我们就不难发现在（偏移+列宽）超过12时，为何会换行显示了 
        列排序
     列排序其实就是改变列的方向（顺序），就是改变左右浮动，并且设置浮动的距离。在Bootstrap框架的网格系统中是通过添加类名 col-md-push-* 和 col-md-pull-* (和上面一样，星号代表移动的列组合数)。 
    Bootstrap仅通过设置left和right来实现定位效果。通过查看源码，我们可以看到基本设置比较简单，如下：
             
           
.col-md-pull-12 { right: 100%;}/*...*/.col-md-push-1 { left: 8.33333333%;}.col-md-push-0 { left: auto;}
             还是继续看看我们的实际效果吧！代码如下
             
           
            .col-md-4  col-md-push-8 
        .col-md-8  col-md-pull-4 
    
            .col-md-4  默认
        .col-md-8  默认
    
               
    我们可以发现列的位置已经发生了改变
    列嵌套
     Bootstrap框架的网格系统还支持列的嵌套。你可以在一个列中添加一个或者多个行（ .row ）容器，然后在这个行容器中插入列（像前面介绍的一样使用列）。但在列容器中的行容器（ .row ），宽度为100%时，就是当前外部列的宽度。（其实就是在列中嵌套多个列，下面会有实际效果展示） 
     注意：被嵌套的行（ .row ）所包含的列（column）的个数不能超过12（其实，没有要求你必须占满12列 -_- ）。 
    我们现在有这样一个需求：
    
创建一个8-4列网格。（备注：以中屏md（970px）为例）。
     在第一个8列网格中插入8-4列网格。
     在第二个4列网格中插入9-3列网格。
    
效果如下：
      
    该如何实现呢？
             
           
                                     我的里面嵌套了一个网格                                                col-md-8
                            col-md-4
                    
            
                                我的里面嵌套了一个网格                                                col-md-9
                            col-md-3
                    
            
     
             是不是很简单呢？当然为了完全实现和效果图一样的展示，我们还需要对CSS进行一些添加：
             
           
[class *= col-] [class *= col-] { background-color: #f36; border:1px dashed #fff; color: #fff;}
声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn核实处理。

相关文章
相关视频



html下拉菜单文字怎么变小


html5中元素能拉伸宽度吗


HTML里怎么设置thead表头的颜色


html5怎么创建跳转页尾超链接


Bootstrap入门笔记之（三）栅格系统_htm...




datatable的前后端配置实战03


datatable的前后端配置实战02


datatable的前后端配置实战01


搭建完美的后台首页（iframe）02




网友评论
文明上网理性发言，请遵守 新闻评论服务协议
我要评论










专题推荐


独孤九贱-php全栈开发教程全栈  170W+
主讲：Peter-Zhu  轻松幽默、简短易学，非常适合PHP学习入门


玉女心经-web前端开发教程入门  80W+
主讲：灭绝师太  由浅入深、明快简洁，非常适合前端学习入门


天龙八部-实战开发教程实战  120W+
主讲：西门大官人 思路清晰、严谨规范，适合有一定web编程基础学习