在上个章节中，我们对知道了bootstrap 的几个常用排版布局方式。从固定布局到不固定布局、grid的使用。
1、bootstrap 格式
1.1文本格式
大家是不是都想想了<b> <h1> 等等用来控制文字有显示效果的标签 。我们先来看<h1> - <h6> 标签的效果吧 ！
1.2文本语气
常用有的是 <em> 和 <strong> 都表示强调气 。<strong> 显示比<em> 更强调。
还记的 <b> 也是表示强调的意思。但在 html5 中 <b> 只表示单词 或 短句了。
上面是使用 <addr> <address>组合显示的在 。 注意 <addr> 是xhtml4.0 才出现的。支持IE6 以上的IE浏览器 。
1.3文本引用
长引用<blockquote>，用点类型如在论坛中引用他人的评论。
Bootstrap 中引用的效果 。 请到大家看到最后一行的灰色的小字。那是用<small>的效果 。
当我看到左边的小条，在想有没有一个在右边的小条了。答案是有的。bootstrap 提供了class="pull-right"添加完后效果如下
1.4列表
我们先来使用一下 无序排序的<ul>
好像与普通的<ul>没变化。 从图中可以看出，使用了两个<ul>相嵌。不由自主的看到了class="unstyled"大家一看就是知道这是用来删掉<ul>前面小点的样式。
接下来，我们看看有序示效果吧!
下面我们来操作一下描述列表。
效果还不错。要是还有一个水平显示的描述列表显示那更方便了。在bootstrap 中也为你提供 class="dl-horizontal"下面主是我们要的效果啦！
2、内联和块的代码显示
2.1内联显示
代码内联显示 <code> 下面我写了 public 用的 <code>标签。
2.2块显示代码<pre>
块代码中可以显示你 滚动条 。请加上.pre-scrollable
2.3 Google 代码美化包
在bootstrap中提到了Google 代码美化包
下载Google 代码美化包地址
http://code.google.com/p/google-code-prettify/
详细使用请点击进入下面地址阅读
http://google-code-prettify.googlecode.com/svn/trunk/README.html
3、table数据块
在bootstrap中的grid 是一种布局器 。 那我们的数据显示应该放到什么标签里？是不是在 table 里面了，没错就是在 table 里面。下面我们来看看，bootstrap中的效果。
看上去很不错吧！ 我们下面来看看bootstrap中的 table 结构吧！
大家都明白是 html 元素 。这里只讲讲bootstrap、css样式 。
有5种table 样式 。
3.1 table 基本样式
我们先做用一个.table样式看看<table>会有什么变化。下面是效果
从图片中我们看到<table>标签中的<td>多了top 边框。图片上是我选中了第二行，td 出现上background-color 样式 。
3.2 table 边框样式
按照上面的table option，我添加了.table-bordered 样式 。
边框有了，为什么 top 边框怎么不显示啦 ！要不我再添加一下table的基本样式看能显示出来吗？ class="table table-bordered"
还真可以。没错，bootstrap中就是这样把几个样式叠加起来显示不同的效果的 。
3.3 table斑马条显示
平常我们看到一条灰一条白，看起来想斑马路似的。只需要添加 table-striped 样式
3.4 table缩小行高
都用bootstrap做完了一个项目啦！ 还不知道调整 行高 。 在写文档时才看到这个样式 。 温故可以新，这话真有道理。
4、bootstrap 表单
Bootstrap表单，是不是在很多地方都看到过样在表单的样式了。
蓝色小边框的 text 输入框。下面bootstrap的四种 from样式
4.1 from默认样式
下面的为了强显示有效果添加了 class=”well”
4.2 from 查询样式
平常我们看到的都一个text输入框一个lable 和一个按钮。
4.3 from 内联样式
内联样式，我不怎么明白为什么这样叫。为什么不叫行内样式的。
4.4 from 组合显示
我们一般使用的，一个lable和一个<input>的怎么实现了。 我在有bootstrap发现了组合显示
看效果图片。上面是的代码用了分组的方法 。 .control-group 分成组 。 然后用control-label显示文字。 最后用 controls 填写表单。
1. <formclass="form-horizontal">
2. <fieldset>
3. <legend>Legend text</legend>
4. <div class="control-group">
5. <label class="control-label"for="input01">Text input</label>
6. <div class="controls">
7. <input type="text"class="input-xlarge" id="input01">
8. <pclass="help-block">Supporting help text</p>
9. </div>
10. </div>
11. </fieldset>
12.</form>
4.5 from 状态控制
控制单个控件，选中，只读和不可用 。
控制一组控件，分别在class="control-groupwarning" 组上添加 warning。Error和 success
4.6 from 伸长操作
Text,select 怎么都是一样宽 ？ 我们可以拉伸他吗？我们可不可以使用之前的grid的span* ,来控制了 。 这里是可以的 。
除了使用 span* 外还可以用input-mini ，input-small和input-medium
如果在前面想添加小图标可以使用 from 的form-horizontal 然后就可以出显示下面的效果了
<div class="input-prepend">
<spanclass="add-on">@</span><input type="text"size="16" id="prependedInput" class="span2">
</div>
添加 add-on 样式 。 我们也可以前后都添加在一起。效果
input-prepend 样式也可以和基他标签组合在一起的 。 下面是和 button 组显示的
5、bootstrap 按钮
按钮这个控件应该使用的比较多的。按钮的种类也比较多的。
这些按钮大家一看就能明白的。 我们主要是用什么标签来做了 。
<a> 标签 <input>和<button>
5.1按钮的大小
按钮的大小是不是也可以使用 grid 中的 span* 了。 当然是可以的。不过用的多是
Btn-large , btn-small ,btn-mini 。
6、bootstrap 小图标
小图标我比较看好的小控件 。在bootstrap中还挺多的 。 分别有 黑 和 白 。 两种显示 。 默认为黑 。 使用白色的添加 “icon-white”
这里用 ＜ｉ＞ 添加class 添 .icon- 前缀加上后的作用 。
6. icon 组合使用。
使用icon组合使用可以更精准的描述作用 。
代码地址
http://pan.baidu.com/share/link?shareid=142078&uk=1862801370