一，使用规则总结：（这篇文章，完全靠自己摸的，大家转载请标明出处！）
首先看一个实例：
<body class="text-content"> <h1 class="btn btn-success btn-large"><i class="glyphicon glyphicon-user"></i>hello world</h1> </body>
在bootstrap中，btn表示的是按钮样式，btn-success表示成功的动作，btn-large表示大按钮的效果。当然这两个可以一起加在class里面，如上面所显示的样子。图标使用I标签。
二，设计Tabs组件：
<ul class="nav nav-tabs"> <li class="active"><a href="#tab01" data-toggle="tab">苍生涂涂</a> </li> <li><a href="#tab02" data-toggle="tab">天下寥寥</a> </li> <li><a href="#tab03" data-toggle="tab">诸子百家</a> </li> <li><a href="#tab04" data-toggle="tab">唯我纵横</a> </li> </ul> <div class="tab-content"> <div class="tab-pane active" id="tab01"><img src="image/1.png"> </div> <div class="tab-pane" id="tab02"><img src="image/2.png"> </div> <div class="tab-pane" id="tab03"><img src="image/3.png"> </div> <div class="tab-pane" id="tab04"><img src="image/4.png"> </div> </div>
1，在上面的结构中，类nav清除默认的列表样式， 类nav-tabs定义Tabs标题栏样式，类tab-content定义Tabs组件的内容框。在内容框中，每个子框必须包括tab-pane类。
在上方标题栏的超链接中定义<a>标签中的href属性值和下方的内容框中的id值一一对应，实现标题项与字内容绑定，并且确保一一对应。
类active定义活动的Tab项，同时为每一个标题中的每个<a>标签定义data-toggle=“tab“属性的说明,
2，如果需要设计更加复杂的交互行为，需要调用jQuery插件，在官网上下载bootstrap-tabs.js文件，并导入到页面中，放在bootstrap.js的后面：
<script src="http://code.jquery.com/jquery.js"></script> <script src="bootstrap/js/bootstrap.min.js"></script> <script src="bootstrap/js/bootstrap-tab.js"></script>
自定义jq代码：调用Tab组件，开启Tab功能，代码如下：
<script type="text/javascript">
$(function () {
$(‘.nav-tabs a:last‘).tab(‘show‘) //初始化显示哪个tab
$(‘.nav-tabs a‘).click(function (e) {
e.preventDefault();//阻止a链接的跳转行为
$(this).tab(‘show‘);//显示当前选中的链接及关联的content
})
}) </script>
这个就是默认的nav-tabs样式，如果换成其他样式的话也是很简单，只需要替换nav-tabs即可，例如：
换成nav-pills即可
样式即可变为：
（图片源自拷贝）
<div class="container"> <div class="jumbotron">jumbotron标签为大屏幕</div> <div class="row"> <div class="col-md-4"></div> <div class="col-md-4"></div> <div class="col-md-4"></div> </div> <hr> <footer> </footer> </div>
3，在第一层也是最外层引入container类样式，栅格，第二层引用class=jumbotron样式这种样式是大屏幕，可以将放置最底部，row就是一行，这下面包含三个div代表就是一行下面有三个div。
4，完成细节设计。比方超链接<a>标签引入按钮样式，例如：
<a class="btn" href="#">
5,
<style type="text/css"> .jumbotron { /*重写大屏幕视图框的样式*/ background: url(images/bg.png) no-repeat; /*设计背景图的Banner效果*/ height: 450px; /*固定高度*/ width: 1000px; /*覆盖默认值940像素*/ position: relative; /* 设计定位包含框，以方便内部定位 */ padding: 0; /* 清除默认样式的60像素 */ margin: 0; /* 清除默认样式中的margin-bottom默认值30像素 */ border-color: gray; /* 覆盖默认值红色边框 */ } .jumbotron h1 { /* 隐藏标题*/ display: none; } .jumbotron .banner { /* 定位广告文本在左下角显示 */ position: absolute; bottom: 0; left: 10px; } .jumbotron .btn { /* 定位按钮在右下角显示 */ position: absolute; bottom: 14px; right: 20px; } </style>
============================================7月19日=========================================
三，bootstrap的栅格系统
原文：https://www.cnblogs.com/zhoulixiansen/p/9339109.html