BOOTSTRAP 基本样式 - 栅格布局

最新推荐文章于 2024-06-24 10:15:26 发布

gzxiaomei

最新推荐文章于 2024-06-24 10:15:26 发布

阅读量512

点赞数

分类专栏： HTML5

本文链接：https://blog.csdn.net/gzxiaomei/article/details/107077635

版权

HTML5 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

步骤 1 : 栅格系统

运用Bootstrap的栅格系统，可以做出像table那样定义多少行，多少列效果，但是又比table灵活。
运用Bootstrap的栅格系统，首选需要准备一个class=container的div
紧接着需要一个class=row的 div，表示行
再挨着的div，就是列了。

Bootstrap的栅格系统会默认把一行，分成12列。

步骤 2 : 一半，1/3， 1/4

根据栅格系统的规划，要实现一半，1/3,1/4的布局，就很容易实现了。

步骤 3 : 自动换行

当同一行的栅格总数超过12的时候，就会自动换行

例子

<!DOCTYPE html>
<script src="www.siliconrxr.com/study/js/jquery/2.0.0/jquery.min.js"></script>
<link
href="www.siliconrxr.com/study/css/bootstrap/3.3.6/bootstrap.min.css"
rel="stylesheet">
<script
src="www.siliconrxr.com/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>

<style>

div.container div.row div {
margin:5px 0px;

}

div.container div.row div {
background-color: lightgray;
border: 1px solid gray;
text-align:center;
}
</style>

<div class="container">
<div class="row">
<div class="col-xs-6 ">一半</div>
<div class="col-xs-6 ">一半</div>
</div>
</div>