Bootstrap中包含了丰富的Web组件，根据这些组件，可以快速的搭建一个漂亮、功能完备的网站。其中包括以下组件：

下拉菜单、按钮组、按钮下拉菜单、导航、导航条、路径导航、分页、排版、缩略图、警告对话框、进度条、媒体对象等

下面主要讲的是bootstrap中的 排版，css样式：

我们可以查看这些类名的样式：例如 text-left ，其实就是通过类名添加样，使我们更加方便，工作效率更高

         <h2>文本样式:</h2>
		<p class="text-left">左对齐文本</p>
		<p class="text-right">右对齐文本</p>
		<p class="text-center">居中对<code>突出文字为红色</code>齐文本</p>
		<p class="text-muted">.text-muted 柔和色#777</p>
		<p class="text-primary">.text-primary 主色#337ab7，显示深蓝色</p>
		<p class="text-success">.text-success  成功色 #3c763d，为绿色</p>
		<p class="text-info">.text-info  "text-info"  一般消息#31708f，为浅蓝色</p>
		<p class="text-warning">.text-warning  警告信息，颜色#8a6d3b，为褐色</p>
		<p class="text-danger">.text-danger  "text-danger"  强调色#a94442 ，为红色</p>
		
	<h3>背景颜色样式:</h3>
		<p class="bg-primary">.bg-primary 背景样色为主色#337ab7，显示深蓝色</p>
		<p class="bg-success">.bg-success  成功色 #3c763d，为绿色</p>
		<p class="bg-info">.bg-info   一般消息#31708f，为浅蓝色</p>
		<p class="bg-warning">.bg-warning  警告信息，颜色#8a6d3b，为褐色</p>
		<p class="bg-danger">.bg-danger   强调色#a94442 ，为红色</p>

结果如下：

结：

其他的样式：

pull-left左浮动（常用） pull-right右浮动（常用） center-block 设置元素为 display:block 并居中显示（常用）

clearfix  清除浮动（常用） show 强制元素显示（少用） hidden 强制元素隐藏（少用）close 显示关闭按钮（常用）

caret 显示下拉式功能(常用) text-hide 隐藏文本，而不是元素(几乎不用)

                <div class="pull-left"></div>
		<div class="pull-left"></div>
		<div class="clearfix"></div>
		<div class="three"></div>
		<!--.close 显示关闭按钮（常用）一般显示在右边 -->
		<div class="close"><span class="close">关闭&times;</span></div>
		<div><!--.caret  显示下拉式功能(常用)-->更多<span class="caret"></span></div>
		<div class="text-hide">隐藏文本 (只是将字体文字颜色改为透明色)</div>
		<!--end-->

我们看下clearfix的样式：及通过伪类样式清楚浮动

大家可以通过上面的，自己动手试试，理解的更加深刻