zoukankan      html  css  js  c++  java
  • Bootstrap网格系统

    1.工作原理

    1)、数据行(.row)必须包含在容器(.container)中,以便为其赋予合适的对齐方式和内距(padding)。

    代码如下:

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

    2)、在行(.row)中可以添加列(.column),但列数之和不能超过平分的总列数,比如12。

    代码如下:

      <div class="container">
            <div class="row">
                <div class="col-md-4"></div>
                <div class="col-md-8"></div>
            </div>
      </div>

    3)、具体内容应当放置在列容器(column)之内,而且只有列(column)才可以作为行容器(.row)的直接子元素。

    4)、通过设置内距(padding)从而创建列与列之间的间距。然后通过为第一列和最后一列设置负值的外距(margin)来抵消内距(padding)的影响。

     

    2.基本用法

    3.列偏移(col-md-offset-*)

    其中*号代表要偏移的列组合数。你在列元素上添加“col-md-offset-4”,表示该列向右移动4个列的宽度。

    4.列排序(col-md-push-*和col-md-pull-* (其中星号代表移动的列组合数))

    5.列的嵌套

    代码如下:

    <div class="container">
        <div class="row">
            <div class="col-md-8">
            我的里面嵌套了一个网格
                <div class="row">
                <div class="col-md-6">col-md-6</div>
                <div class="col-md-6">col-md-6</div>
              </div>
            </div>
        <div class="col-md-4">col-md-4</div>
        </div>
        <div class="row">
            <div class="col-md-4">.col-md-4</div>
        <div class="col-md-8">
        我的里面嵌套了一个网格
            <div class="row">
              <div class="col-md-4">col-md-4</div>
              <div class="col-md-4">col-md-4</div>
              <div class="col-md-4">col-md-4</div>
            </div>
        </div>
        </div>
    </div>

     

  • 相关阅读:
    控制asp.net 中文本框中只能输入数字
    数据导出到Excel的方法
    NET 2.0中泛型
    DateTime类常用技巧
    CodeSmith是一个基于模板的代码生成器
    WCF学习第一天
    asp.net mvc中DropDownList,CheckBox,RadioButton
    wcf实现可靠性传输
    cookie
    asp.net mvc3 异步Controller
  • 原文地址:https://www.cnblogs.com/www20081028/p/5157057.html
Copyright © 2011-2022 走看看