bootstrap讲义备课讲稿.pdf

排版样式 一．页面排版 Bootstrap 提供了一些常规设计好的页面排版的样式供开发者使用。 1. 页面主体 Bootstrap 将全局 font-size 设置为 14px，line-height 行高设置为 1.428( 即 20px) ；p段落元素被设置等于 1/2 行高 ( 即 10px) ；颜色被设置为 #333。 2. 标题 // 内联元素使用标题字体 span class=h1Bootstrap/span 在 h1 ~ h6 元素之间，还可以嵌入一个 small 元素作为副标题， // 在标题元素内插入 small 元素 h1Bootstrap 框架 smallBootstrap 小标题 /small/h1 在 h1 ~ h6 下的 small 样式也进行了改变，颜色变成淡灰色： #777 ，行高为 1，粗 度为 400。 3. 内联文本元素 // 添加标记， mark元素或 .mark 类 pBootstrapmark 框架 /mark/p // 各种加线条的文本 delBootstrap 框架 /del // 删除的文本 sBootstrap 框架 /s // 无用的文本 insBootstrap 框架 /ins // 插入的文本 uBootstrap 框架 /u // 效果同上，下划线文本 // 各种强调的文本 smallBootstrap 框架 /small // 标准字号的 85% strongBootstrap 框架 /strong // 加粗 700 emBootstrap 框架 /em // 倾斜 4. 对齐 // 设置文本对齐 p class=text-leftBootstrap 框架 /p // 居左 p class=text-centerBootstrap 框架 /p // 居中 p class=text-rightBootstrap 框架 /p // 居右 p class=text-justifyBootstrap 框架 /p // 两端对齐，支持度不佳 p class=text-nowrapBootstrap 框架 /p // 不换行 5. 大小写 // 设置英文文本大小写 p class=text-lowercaseBootstrap 框架 /p // 小写 p class=text-uppercaseBootstrap 框架 /p // 大写 p class=text-capitalizeBootstrap 框架 /p // 首字母大写 6. 缩略语 // 缩略语 Bootstrapabbr title=Bootstrap class=initialism 框架 /abbr 7. 地址文本 // 设置地址，去掉了倾斜，设置了行高，底部 20px address strongTwitter, Inc./strongbr 795 Folsom Ave, Suite 600br San Francisco, CA 94107br abbr title=PhoneP:/abbr (123) 456-7890 /address 8. 引用文本 // 默认样式引用，增加了做边线，设定了字体大小和内外边距 blockquote Bootstrap 框架 /blockquote // 反向 blockquote class=blockquote-reverse Bootstrap 框架 /blockquote 9. 列表排版 // 移出默认样式 ul class=list-unstyled liBootstrap 框架 /li liBootstrap 框架 /li liBootstrap 框架 /li liBootstrap 框架 /li liBootstrap 框架 /li /ul // 设置成内联 ul class=list-inline liBootstrap 框架 /li liBootstrap 框架 /li liBootstrap 框架 /li