Bootstrap入门（二）栅格

时间：2016-09-07 01:08:11 阅读：145 评论：0 收藏：0 [点我收藏+]

标签：

Bootstrap入门（二）栅格

全局CSS样式--栅格

先引入本地的CSS文件（根据自己的文件夹，有不同的引入地址，我是放在一个新建的名为css的文件夹中）

<link href="css/bootstrap.min.css" rel="stylesheet">

container 容器，栅格系统是依赖容器存在的

<div class="container">
  ...
</div>

Bootstrap 提供的栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局。参数：

	超小屏幕手机 (<768px)	小屏幕平板 (≥768px)	中等屏幕桌面显示器 (≥992px)	大屏幕大桌面显示器 (≥1200px)
栅格系统行为	总是水平排列	开始是堆叠在一起的，当大于这些阈值时将变为水平排列C	开始是堆叠在一起的，当大于这些阈值时将变为水平排列C	开始是堆叠在一起的，当大于这些阈值时将变为水平排列C
`.container` 最大宽度	None （自动）	750px	970px	1170px
类前缀	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`

代码操作

为方便查看栅格效果，为栅格添加一组样式

        <style>
            .row{
                margin-bottom: 20px;
            }
 
            .row .row{
                margin-top: 10px;
                margin-bottom: 0;
            }
 
            [class*="col-"]{
                padding-top: 15px;
                padding-bottom: 15px;
                background-color: #eee;
                background-color: rgba(86,61,124,.15);
                border:1px solid #ddd;
                border:1px solid rgba(86,61,124,.2);
            }
        </style>

先创建一个class为container的div

<div class="container">
     ...
</div>

然后添加13个小栅格

<div class="row">
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
</div>

第13个自动换行，确实一行最多12份，效果：

再添加两组div

            <div class="row">
                <div class="col-md-3">col-md-3</div>
                <div class="col-md-3">col-md-3</div>
                <div class="col-md-3">col-md-3</div>
                <div class="col-md-3">col-md-3</div>
            </div>
 
            <div class="row">
                <div class="col-md-3">col-md-3</div>
                <div class="col-md-3">col-md-3</div>
                <div class="col-md-3">col-md-3</div>
            </div>

发现少了的，是不会有任何显示的，效果：

添加其中一个栅格的内容量，发现自动换行，效果：

添加两组带偏移效果的div（“col-md-offset-X”属性 X为将分成12份后，偏移多少的位置）

　　　　　　　<div class="row">
                <div class="col-md-4 col-md-offset-1">col-md-4 col-md-offset-1</div>
            </div>
 
            <div class="row">
                <div class="col-md-4 col-md-offset-4">col-md-4 col-md-offset-4</div>
            </div>

效果：

嵌套使用

           <div class="row">
                <div class="col-sm-9">
                    col-sm-9
                    <div class="row">
                        <div class="col-xs-8">
                            col-xs-8
                        </div>
                        <div class="col-xs-4">
                            col-xs-4
                        </div>
                    </div>   
                </div>
            </div>

效果：

列排序（“col-md-push- ”、“col-md-pull- ”属性改变列的排序，“col-md-push- X” 向后移动X个单位，“col-md-pull- X”向前移动X个单位）

            <div class="row">
                <div class="col-md-9">col-md-9</div>
                <div class="col-md-3">col-md-3</div>
            </div>
 
            <div class="row">
                <div class="col-md-9 col-md-push-3">col-md-9 col-md-push-3</div>
                <div class="col-md-3 col-md-pull-9">col-md-3 col-md-pull-9</div>
            </div>

效果：

Bootstrap入门（二）栅格

标签：

原文地址：http://www.cnblogs.com/hnnydxgjj/p/5847646.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行