本文共 2606 字，大约阅读时间需要 8 分钟。
BootStrap的下载与安装
在官网进行下载即可。在这里直接下载3这个版本的BootStrap，这个版本相对于来说比较稳定。选择下载用于生产的BootStrap，如下图所示
下载完成之后进行解压缩即可。 标题排版
在html当中是存在h1到h6这六个标题，在BootStrap当中这也是可以使用的，其中还提供了.h1到.h6类。使用代码如下：
标题 标题一 小标题
标题二 小标题
span标题一
在导入bootStrap之后标题可以直接获取类进行设置，效果图如下
段落排版
段落排版，使用html当中的p标签。其中还有其他的标签用来表示文本的不同的样式，如 ：
- 对于被删除的文本使用 del 标签
- 对于没用的文本使用 s 标签。
- 额外插入的文本使用 ins 标签。
- 对于不需要强调的inline或block类型的文本，使用 small 标签包裹，其内的文本将被设置为父容器字体大小的 85%。标题元素中嵌套的 small 元素被设置不同的 font-size 。
- 通过增加 font-weight 值强调一段文本。使用strong标签
- 通过设置斜体对文本设置倾斜属性，使用em标签
- 通过文本对齐类，可以简单方便的将文字重新对齐。text-left 、text-center 、text-right
- 通过这几个类可以改变文本的大小写，text-lowercase、text-uppercase、text-capitalize
- 通过abbr标签实现缩略语
- 默认样式的引用将任何 HTML 元素包裹在 blockquote 标签中即可表现为引用样式。
- 对于标准样式的 blockquote，可以通过几个简单的变体就能改变风格和内容。添加 footer 用于标明引用来源。来源的名称可以包裹进 cite标签中。通过赋予 .blockquote-reverse 类可以让引用呈现内容右对齐的效果。
通过以下代码可以清晰的看到这些属性及其类的样式显示效果。
demo 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，
响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着大屏幕移动设备的普及，用“大势所趋”来形容也不为过。随着越来越多的设计师采用这个技术，我们不仅看到很多的创新，还看到了一些成形的模式。简单来说就是做到屏幕自适应。attr简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。BootStrap
BootStrap-right
HELLO changsha
HELLO changsha
hello changsha
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
this is blockquote
运行效果图如下
表格排版
在使用table表格的时候，在bootstrap当中也给定了很多的类。为任意 table 标签添加 .table 类可以为其赋予基本的样式 少量的内补（padding）和水平方向的分隔线。这种方式看起来很多余！？但是我们觉得，表格元素使用的很广泛，如果我们为其赋予默认样式可能会影响例如日历和日期选择之类的插件，所以我们选择将此样式独立出来。
table
YZM YZM YZM YZM YZM YZM YZM YZM YZM YZM YZM YZM YZM YZM YZM YZM YZM YZM YZM YZM
看到效果，在这里也不做过多的解释，在中文文档当中进行查看属性与类的含义
表单与按钮排版
a标签按钮表单
效果图如下：这里也就不进行过多赘述类的样式了
图标的排版
在bootstrap当中提供了一个图标库：在这个图标库当中可以直接进行class引用图标即可进行设置，这个图标本质是一个font，所以还可以通过font-size等进行设置。
图标
给图标设置大小和颜色之后，进行查看效果
转载地址：http://wzqzi.baihongyu.com/