11
2020
01

Bootstrap流式布局

流布局是一种适应屏幕的做法。即不固定块的宽度,而是采用百分比作为单位来确定每一块的宽度。这种布局非常适合一次编写,然后自适应各种不同大小的屏幕(手机,PAD…)。


<div class="container-fluid">
  <div class="row-fluid">
    <div class="span2">
    </div>
    <div class="span10">
    </div> 
  </div> 
</div>


最外面包含块有 container-fluid类,表明内容布局是流布局,其主要作用是作为一个包含块来容纳流布局内容。里面包含块的内容有 row-fluid类(非常重要),决定是否是流布局。然后里面的内容块代码编写与网格系统一致,依然是从span1到span12,分别对应于不同的百分比。


<div class="row-fluid">

  <div class="span12">

    流动 12

    <div class="row-fluid">

      <div class="span6">

        流动 6

        <div class="row-fluid">

          <div class="span6">流动 6</div>

          <div class="span6">流动 6</div>

        </div>

      </div>

      <div class="span6">流动 6</div>

    </div>

  </div>

</div>

从这个例子我们可以看到,流式布局的包容性非常的强,也很好用,1最小 - 12最大,可以在一层套一层的制作,不管父类是多少,对于子类来说都是百分之百 在6的div里在包裹两个6其实就相当于 100% 里面包裹了 两个50%,只要层级关系,写好基本就没有什么错误

« 上一篇 下一篇 »

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。