Bootstrap的基本模板:
<html>
<head lang="en">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0/>
<link href="css/bootstrap.css" rel="stylesheet">
</head>
<body>
<h1>这是一个Bootstrap框架的最基本HTML模板</h1>
<script src="js/jquery-1.12.4.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>
列组合:
<div class="container">
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
</div>
以下为界面效果:
列嵌套:
<div class="row">
<div class="col-md-9">Level 1: .col-md-9
<div class="row">
<div class="col-md-6"> Level 2: .col-md-6</div>
<div class="col-md-6">Level 2: .col-md-6</div>
</div>
</div>
<div class="col-md-3"></div>
</div>
效果:
列排序:
<div class="row">
<div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
<div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>
效果:
列偏移:
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
Bootstrap 样式的中栅格系统的使用主要就是指:列组合、列偏移、列嵌套、列排序 四种方式,以上就是四种方式的介绍和使用方法,其中使用到的js文件大家可以去官网去下载!