标签：
之前只是大概预览了下Bootstrap中涉及到的相关元素，插件等的使用。接下来将通过实例演练加强对Bootstrap的了解。实例来自http://www.runoob.com/有兴趣的可以上去学习跟w3cschool上的差不多。 为了加深理解，决定先在本地用google浏览器测试后，再写到这里。加深印象。
第一：首先是基本的网页标签的定义。采用的是html5的写法如下：
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例<title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="script/jquery.min.js" type="text/javascript" > </script>
<script src="script/boostrap.min.js" type="text/javascript" /></script>
</head>
<body>
</body>
</html>
第二： 我们将在<body></body>里面写class="jumbotron"所对应的代码：
<div class="container">
<div class="jumbotron">
<h2>这是我的第一个Bootstap 页面</h2>
<p>重置窗口大小查看响应式效果！</p>
</div>
</div>
第三：一行三列的div布局代码：
<div class="container">
<div class="row">
<div class="col-sm-4"> <h3>第一列<h3><p>学的不仅是技术，更是梦想</p></div>
<div class="col-sm-4"><h3>第二列</h3><p>长的丑不是你的错，不努力就是你的不对了</p></div>
<div class="col-sm-4"><h3>第三列</h3><p>梦想是要有的，万一实现了呢？</p></div>
</div>
</div>
第四：表格的基本呈现(响应式表格、加边框、行颜色的切换)：
<div class="container">
<div class="table-responsive">
<div class="table table-striped table-bordered">
<caption>我是表格的标题</caption>
<thead>
<tr>
<th>序号</th>
<th>手机</th>
<th>理财</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>小米</td>
<td>股票</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>num</td>
<td>phone</td>
<td>money</td>
</tr>
<tfoot>
</div>
</div>
</div>
大体效果图如下：
Bootstrap中样式Jumbotron，row, table的实例应用
标签：
原文地址：http://www.cnblogs.com/professional-NET/p/4716032.html
