bootstrap五列布局怎么写
文章标签
布局
我们知道,在使用bootstrap栅格的时候,我们可以对网页方便的进行模块分割。bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统,可以随着设备或视口大小的增加而适当地扩展到12列。
它包含了用于简单的布局选项的预定义类,也包含了用于生成更多语义布局的功能强大的混合类。如果要2等分,使用col-md-6即可;要3等分,使用col-md-4即可;但如果我们要5等分或者8等分怎么办呢?下面的示例是bootstrap五等分布局:
nbsp;html> <meta> <!--视口的设置,让网页能等比例的缩放到对应设备中--> <meta> <!--告诉ie浏览器用最新内核去渲染网页--> <meta> <title>Document</title> <link> <style> .col-xs-1-5, .col-sm-1-5, .col-md-1-5, .col-lg-1-5 { position: relative; min-height: 1px; padding-right: 10px; padding-left: 10px; } .col-xs-1-5 { width: 20%; float: left; } @media (min-width: 768px) { .col-sm-1-5 { width: 20%; float: left; } } @media (min-width: 992px) { .col-md-1-5 { width: 20%; float: left; } } @media (min-width: 1200px) { .col-lg-1-5 { width: 20%; float: left; } } </style> <script></script> <script></script> <div> <div> <div> <div> @@##@@ <div> <div>姓名:<span>王婷</span></div> </div> <div> <div>性别:<span>女</span></div> </div> <div> <div>部门:<span>宣传部</span></div> </div> </div> </div> <div> <div> @@##@@ <div> <div>姓名:<span>王婷</span></div> </div> <div> <div>性别:<span>女</span></div> </div> <div> <div>部门:<span>宣传部</span></div> </div> </div> </div> <div> <div> @@##@@ <div> <div>姓名:<span>王婷</span></div> </div> <div> <div>性别:<span>女</span></div> </div> <div> <div>部门:<span>宣传部</span></div> </div> </div> </div> <div> <div> @@##@@ <div> <div>姓名:<span>王婷</span></div> </div> <div> <div>性别:<span>女</span></div> </div> <div> <div>部门:<span>宣传部</span></div> </div> </div> </div> <div> <div> @@##@@ <div> <div>姓名:<span>王婷</span></div> </div> <div> <div>性别:<span>女</span></div> </div> <div> <div>部门:<span>宣传部</span></div> </div> </div> </div> </div> </div>
推荐:bootstrap入门教程