Bootstrap页面布局3 - BS布局以及流动布局

1、

  <h1 class='page-header'>布局<small> 使用bootstrap网格系统布局网页</small></h1>

  得到如图所示:

        Bootstrap页面布局3 - BS布局以及流动布局

2、给需要的元素添加一个容器,使其居中显示

  <div class='container'>

    <h1 class='page-header'>布局<small> 使用bootstrap网格系统布局网页</small></h1>

  </div>

  得到如图所示:如果需要更确切的效果请自行给上面的div设置border查看,是否是.container容器使其中间的元素居中了

        Bootstrap页面布局3 - BS布局以及流动布局

3、设置3段文字,让这三段文字在同一行显示

<div class='container'>

  <h1>布局 <small>bootstrap 布局</small></h1>

  <h2>栏目一</h2>

  <p>段落1</p>

  <h2>栏目二</h2>

  <p>段落2</p>

  <h2>栏目三</h2>     

  <p>段落3</p>

</div>

  以上标签显示效果如图:

      Bootstrap页面布局3 - BS布局以及流动布局

 

首先请了解bs的栅格系统:http://wrongwaycn.github.io/bootstrap/docs/scaffolding.html

<div class='container'>

  <h1>布局 <small>bootstrap 布局</small></h1>

    <!--在需要调整的元素外包围一个class位'row'的div-->

    <div class='row'>

      <div class='span4'>

        <h2>栏目一</h2>

        <p>段落1</p>

      </div>

      <div class='span4'>

        <h2>栏目二</h2>

        <p>段落2</p>

      </div>

      <div class='span4'>

        <h2>栏目三</h2>     

        <p>段落3</p>

      </div>

    </div>

</div>

    说明:注意查看class='span4', 这里的例子是将“栏目一”,‘栏目二’,‘栏目三’这三个段落显示在1行中,那么首先在这三个元素外围包围一个div且class='row',其次 每个"栏目"设定一个合适的值,作为每个段落外围包围的div的class中 spanN 中N,但是要保证 N+N+N = 12 ;这里的即是4+4+4 = 12;

    效果如图:(将每个栏目的布局平均分成了4份,所以给的class='span4')你也可以根据需求或偏好自行设定,但要保证在一行中,所设定的所有spanN中的N相加之和等于12;

      Bootstrap页面布局3 - BS布局以及流动布局

固定布局:不会随着浏览器窗口大小的改变而改变布局

  应用的class是上面用到的class='container',class='row'

流动布局:会随着浏览器窗口的大小改变布局

  应用到class是则应该为class='container-fluid', class='row-fluid'

上一篇:webpack模块加载css文件及图片地址


下一篇:支付宝移动端 Hybrid 解决方案探索与实践