zoukankan      html  css  js  c++  java
  • BootStrap网格布局

      如何使用BootStrap样式

      BootStrap与其他的开源库类似,直接引用它的css样式文件就可以使用了。

    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

      在代码中,直接使用class就可以使用其定义的样式,例如使用它button样式,就可以按照下面的方式:

    <button class="btn btn-primary" type="button">Reset</button>

      什么是网格布局

      目前流行的响应式布局,在显示界面设定了集中宽度,当宽度满足一定的标准时,就是用当前宽度支持下的样式。

      这样就可以使一种开发,支持移动端、以及各种分辨率的显示器,达到良好的使用效果。

      BootStrap把网页分成12个网格,并有下面四中宽度:自动、750px、970px和1170px

      当屏幕属于其中某个区间时,自动使用对应的样式。

      使用的基本语法,类似下面:container---->row---->column

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

      提供个简单的样例:

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="utf-8">
    <title>基本用法</title>
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    </head>
    
    <body>
    <div class="container">
      <div class="row">
        <button class="btn btn-primary col-md-4" type="button">test</button>
        <button class="btn btn-primary col-md-8" type="button">test</button>
      </div>
      <div class="row">
        <button class="btn btn-info col-md-4" type="button">test</button>
        <button class="btn btn-info col-md-4" type="button">test</button>
        <button class="btn btn-info col-md-4" type="button">test</button>
      </div>
      <div class="row">
        <button class="btn btn-primary col-md-3" type="button">test</button>
        <button class="btn btn-primary col-md-6" type="button">test</button>
        <button class="btn btn-primary col-md-3" type="button">test</button>
      </div>
    </div>
    </body>
    </html>

      主要要满足网格数目不超过12个,超过的部分会自动挤到下一列!

      样式运行效果分别如下:

      最大的宽度下:

      中等宽度下:

      最小宽度下:

      网格列偏移

      BootStrap中支持网格的列偏移:直接在样式中col-md-offset-*就可以达到偏移效果。

      例如下面的代码:

    <div class="container">
      <div class="row">
        <button class="btn btn-primary col-md-4" type="button">test</button>
        <button class="btn btn-primary col-md-4 col-md-offset-4" type="button">test</button>
      </div>
      <div class="row">
        <button class="btn btn-info col-md-4" type="button">test</button>
        <button class="btn btn-info col-md-4" type="button">test</button>
        <button class="btn btn-info col-md-4" type="button">test</button>
      </div>
    </div>

      第一行的第二个button就达到了列偏移4个网格的效果:

      网格嵌套

      在BootStrap中也支持网格的嵌套,同样也需要嵌套中的网格满足12格的划分原则

    <div class="container">
      <div class="row">
        <button class="btn btn-primary col-md-4" type="button">test</button>
        <div class="col-md-8">
            <div class="row">
                <button class="btn btn-info col-md-4" type="button">test</button>
                <button class="btn btn-info col-md-4" type="button">test</button>
                <button class="btn btn-info col-md-4" type="button">test</button>
              </div>
        </div>
      </div>
      <div class="row">
        <button class="btn btn-info col-md-4" type="button">test</button>
        <button class="btn btn-info col-md-4" type="button">test</button>
        <button class="btn btn-info col-md-4" type="button">test</button>
      </div>
    </div>

      效果如下:

  • 相关阅读:
    topcoder srm 681 div1
    topcoder srm 683 div1
    topcoder srm 684 div1
    topcoder srm 715 div1
    topcoder srm 685 div1
    topcoder srm 687 div1
    topcoder srm 688 div1
    topcoder srm 689 div1
    topcoder srm 686 div1
    topcoder srm 690 div1 -3
  • 原文地址:https://www.cnblogs.com/xing901022/p/4367774.html
Copyright © 2011-2022 走看看