文章标题
2017-12-11 08:48
344 查看
排版样式
页面主体Bootstrap 将全局 font-size 设置为 14px,line-height 行高设置为 1.428(即20px);
段落元素被设置等于 1/2 行高(即 10px);颜色被设置为#333。
创建包含段落突出的文本
Bootstrap框架
Bootstrap框架
标题
Bootstrap框架
Bootstrap框架
Bootstrap框架
Bootstrap框架
Bootstrap框架Bootstrap框架
我们从 Firebug 查看元素了解到,Bootstrap 分别对 h1 ~ h6进行了 CSS 样式的重构,并且还支持普通内联元素定义class=(.h1 ~ h6)来实现相同的功能。
内联元素使用标题字体
Bootstrap框架
在 h1 ~ h6 元素之间,还可以嵌入一个 small 元素作为副标题,//在标题元素内插入 small 元素
<h1>Bootstrap框架<small>Bootstrap框架</small></h1> <h2>Bootstrap框架<small>Bootstrap框架</small></h2> <h3>Bootstrap框架<small>Bootstrap框架</small></h3> <h4>Bootstrap框架<small>Bootstrap框架</small></h4> <h5>Bootstrap框架<small>Bootstrap框架</small></h5> <h6>Bootstrap框架<small>Bootstrap框架</small></h6>
对齐
Bootstrap框架
Bootstrap框架
Bootstrap框架
Bootstrap框架//浏览器支持有问题
列表排版
Bootstrap框架
Bootstrap框架
Bootstrap框架
Bootstrap框架
Bootstrap框架
Bootstrap框架
Bootstrap框架
Bootstrap框架
代码
For example,
<section>should be wrapped as inline.
To switch directories, type cd followed by the name of the directory.
To edit settings, press ctrl + ,
表格
Bootstrap 提供了一些丰富的表格样式供开发者使用。
基本格式
注:我们可以通过 Firebug 查看相应的 CSS。
条纹状表格
带边框的表格
注:一共五种不同的样式可供选择。
隐藏某一行
响应式表格
在小于768px,为表格加上边框
Bootstrap 提供了很多丰富按钮供开发者使用。
可作为按钮使用的标签或元素
转化成普通按钮
Button
Link
注意事项有三点:
虽然按钮类可以应用到 和 元素上,但是,导航和导航条组件只支持 元素。
链接被作为按钮使用时的注意事项如果 元素被作为按钮使用 – 并用于在当前页面触发某些功能 – 而不是用于链接其他页面或链接当前页面中的其他部分,那么,务必为其设置 role=”button” 属性。
我们总结的最佳实践是:强烈建议尽可能使用元素来获得在各个浏览器上获得相匹配的绘制效果。
预定义式
使用下面列出的类可以快速创建一个带有预定义样式的按钮。
类名 解释
btn-default 默认样式
btn-success 成功样式
btn-info 一般信息样式
btn-warning 警告样式
btn-danger 危险样式
btn-primary 首选项样式
btn-link 链接样式
Button
Button
Button
Button
Button
Button
Button
尺寸大小
从大到小的尺寸
(大按钮)Large button
(大按钮)Large button
<p> <button type="button" class="btn btn-primary">(默认尺寸)Default button</button> <button type="button" class="btn btn-default">(默认尺寸)Default button</button> </p> <p> <button type="button" class="btn btn-primary btn-sm">(小按钮)Small button</button> <button type="button" class="btn btn-default btn-sm">(小按钮)Small button</button> </p> <p> <button type="button" class="btn btn-primary btn-xs">(超小尺寸)Extra small button</button> <button type="button" class="btn btn-default btn-xs">(超小尺寸)Extra small button</button> </p>
块级按钮
块级换行
Button
激活状态
Button
禁用状态
Button