BootStrap入门教程(2)

流式布局代码如下：

如果对Bootstrap提供的布局不够满意，可以参见Less Frame Work 提供的模板。

最后，再次强调，官方文档极其优秀，强烈推荐各位直接参考和学习之。http://twitter.github.com/bootstrap/index.html

参考文献与延伸阅读：

1.Bootstrap的来由和发展。http://www.alistapart.com/articles/building-twitter-bootstrap/

2.Less与Sass的介绍与对比.http://coding.smashingmagazine.com/2011/09/09/an-introduction-to-less-and-comparison-to-sass/

3.Html5模板 http://html5boilerplate.com/

4.Html5与Bootstrap混合项目(H5BP)https://gist.github.com/1422879

5.20个有用的Bootstrap资源 http://www.webresourcesdepot.com/20-beautiful-resources-that-complement-twitter-bootstrap/

6.Bootstrap按钮生成器 http://charliepark.org/bootstrap_buttons/

7.前后端结合讨论 http://stackoverflow.com/questions/9525170/backend-technology-for-front-end-technologies-like-twitter-bootstrap

8. Bootstrap英文教程 http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/stepping-out-with-bootstrap-from-twitter/

BootStrap入门教程 (二)

上讲回顾：Bootstrap的手脚架(Scaffolding)提供了固定(fixed)和流式(fluid)两种布局，它同时建立了一个宽达940px和12列的格网系统。

基于手脚架(Scaffolding)之上，Bootstrap的基础CSS(Base CSS)提供了一系列的基础Html页面要素，旨在为用户提供新鲜、一致的页面外观和感觉。本文将主要深入讲解排版(Typography),表格(Table),表单(Forms),按钮(Buttons)这四个方面的内容。

? 排版 (Typography)，它囊括标题(Headings),段落 (paragraphs), 列表(lists)以及其他内联要素。我们可以通过修改variables.less的两个变量:@baseFontSize 和 @baseLineHeight来控制整体排版的样式。Bootstrap同时还用了一些其他的算术方法来创建所有类型要素的margin,padding,line-height等。

1.1 标题和段落使用常见的html和

即可表现,可以不必考虑margin,padding。两者显示效果如图2-1所示：

图2-1 标题与段落(Headings¶graphs)

1.2 强调(Emphasis).使用和两个标签，前者使用粗体，后者使用斜体来强调标签内容。请注意标签在html4中定义语气更重的强调文本；在 HTML 5 中， 定义重要的文本。这些短语标签也可以通过定义CSS的方式来丰富效果。更多短语标签请参见[1].缩写(abbreviations ).使用，它重新封装了该标签，鼠标滑过会异步地显示缩写的含义。引入title属性来显示原文，使用.initialism类对缩写以大写方式显示。

1.3 引用文字(Blockquotes).使用

标签和两个标签，前者

是引用的文字内容，后者是可选的要素，能够添加书写式的引用，比如内容作者。如图2-2所示

图2-2 引用(Blockquotes)

代码片段如下所示：

凌冬将至. 我是黑暗中的利剑，长城上的守卫，抵御寒冷的烈焰，破晓时分的光线，唤醒眠者的号角，守护王国的坚盾。

守夜人军团总司令.蒙奇.D.

凌冬将至.

我是黑暗中的利剑，长城上的守卫，抵御寒冷的烈焰，破晓时分的光线，唤醒眠者的号角，守护王国的坚盾。

守夜人军

团总司令.蒙奇.D.

1.4列表(lists).Bootstrap提供三种标签来表现不同类型的列表。表示无序列表，

表示有序列表，

表示描述列表，

图2-3 列表(lists)

2.表格(Table).依然使用等标签来表现表格。主要提供了四个css的类来控制表格的边和结构。表2-1显示了bootstrap的table可选项。 名字 Default Basic Bordered Zebra-stripe Condensed

表2-1 表格选项(Table Options)

我们可以将这些CSS类结合起来使用，如图2-4所示，显示一个混合的表格：

Class None .table .table-bordered .table-striped .table-condensed 描述 没有样式，只有行和列 只有在行间有竖线 圆角和添加外边框 为奇数行添加淡灰色的背景色 将横向的 padding 对切

图2-4 表格(Table)

代码片段如下所示：

View Code