bootstrap容器布局和排版样式和列表样式和表格样式

容器布局

<!--这样的格式表示是采用了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-->