容器布局
<!--这样的格式表示是采用了bootstrap的容器,不会占满浏览器-->
<div class="container">
</div>
<!--表示占满浏览器-->
<div class="container-fluid">
</div>
排版样式
<!--bootstrap对html中的字体什么的都进行了优化,可以用class=""的形式来使用css样式-->
<!--span没有任何属性,-->
<span class="h1">这是h1</span>
<p class="h2">这是h2</p>
<p><strong>加粗</strogn>正常</p>
<em>斜体</em>
<del>删除线</del>
<ins>下划线</ins>
<p class="text-left">实现文本的水平居左对齐</p>
<p class="text-center">实现文本水平居中对齐</p>
<p class="text-right">实现文本的水平居右对齐</p>
<p class="text-uppercase">abcdefg</p>
<p class="text-capitalize">hello world</p>
列表样式
<!--无序列表-->
<!--去掉黑点,去掉padding值-->
<ul class="list-unstyled">
<li>西游记</li>
<li>三国演义</li>
<li>水浒传</li>
<li>红楼梦</li>
</ul>
<!--摆成一行显示,没有黑点,有边距-->
<ul class="list-inline">
<li>西游记</li>
<li>三国演义</li>
<li>水浒传</li>
<li>红楼梦</li>
</ul>
表格样式
<!--表格-->
<!--设置表格中tr的颜色,只有在设置了table-striped才会有用-->
<style type="text/css">
table.table-striped tr:nth-child(odd){
background: skyblue;
}
table.table-striped tr:nth-child(even){
background: red
}
</style>
<!--table-bordered是给表格加左右的分割线,table-striped使得表格相邻的使用不同的颜色显示,
table-hover使得表格在鼠标放上去的时候会有颜色改变,table-condensed设置为紧凑型表格使上下边距减
半,这些属性都是继承于table,所以要先等于table类-->
<table class="table table-bordered table-striped table-hover table-condensed">
<!--状态栏颜色,只能给th,tr,td设置,设置以后的表格会具有相应的颜色
、有.active,.warning,.danger,.info,.success-->