bootstrap讲义.doc

排版样式 一．页面排版 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 liBootstrap 框架/li liBootstrap 框架/li /ul //水平排列描述列表 dl class=dl-horizontal dtBootstrap/dt ddBootstrap 提供了一些常规设计好的页面排版的样式供开发者使用。/dd /dl 10.代码 //内联代码 codelt;sectiongt;/code //用户输入 press kbdctrl + ,/kbd //代码块 prelt;pgt;Please input...lt;/pgt;/pre Bootstrap 还列举了var表示标记变量，samp表示程序输出，只不过没有重新复写CSS。 表格和按钮 一．表格 Bootstrap 提供了一些丰富的表格样式供开发者使用。 1.基本格式 //实现基本的表格样式 table class=table 注：我们可以通过Firebug 查看相应的CSS。 2.条纹状表格 //让tbody里的行产生一行