zoukankan      html  css  js  c++  java
  • bootstrap基础(三)

    网格系统

    一、工作原理

    Bootstrap框架中的网格系统就是将容器平分成12份。

    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>

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

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

    <body>
    <div class="container">
      <div class="row">
        <div class="col-md-4">.col-md-4</div>
        <div class="col-md-8">.col-md-8</div>
      </div>
      <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 class="row">
        <div class="col-md-3">.col-md-3</div>
        <div class="col-md-6">.col-md-6</div>
        <div class="col-md-3">.col-md-3</div>
      </div>
    </div>
    </body>

    大屏幕:

    小屏幕:

    <div class="container">
    <h4>列向右移动四列的间距</h4>
      <div class="row">
        <div class="col-md-4">.col-md-4</div>
        <div class="col-md-2 col-md-offset-4">列向右移动四列的间距</div>
        <div class="col-md-2">.col-md-3</div>
      </div>
      <div class="row">
        <div class="col-md-4">.col-md-4</div>
        <div class="col-md-4 col-md-offset-4">列向右移动四列的间距</div>
      </div>
    </div>
    <br />
    <h4>发生行断裂</h4>
    <div class="container">
      <div class="row">
        <div class="col-md-4">.col-md-4</div>
        <div class="col-md-2 col-md-offset-4">列向右移动四列的间距</div>
        <div class="col-md-2">.col-md-3</div>
      </div>
      <div class="row">
        <div class="col-md-4">.col-md-4</div>
        <div class="col-md-4 col-md-offset-4">列向右移动四列的间距</div>
      </div>
      <div class="row">
        <div class="col-md-3">.col-md-3</div>
        <div class="col-md-3 col-md-offset-3">col-md-offset-3</div>
        <div class="col-md-4">col-md-4</div>
      </div>
    </div>

  • 相关阅读:
    关于跨域名访问,反向代理系列话题集锦
    中国B2C电子商务最新发展状况调查分析(转)
    顶部导航条(Top Navigation Bar)_Yahoo_Pattern(翻译)
    google,百度,yahoo,msn,ASK网址登录和网站地图提交地址
    如何安装PE到硬盘(包括移动硬盘)分区
    ASP.NET SQL 注入免费解决方案
    O2O循环圈
    B2C暴利行业之保健品行业
    在SQLserver2005中如何对运行慢的查询进行分析?
    互联网产品设计之需求管理
  • 原文地址:https://www.cnblogs.com/wangyuxue/p/13266087.html
Copyright © 2011-2022 走看看