文章标题

来源:互联网 发布:数学建模常用算法 编辑:程序博客网 时间:2024/06/06 20:13

排版样式

页面主体
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。条纹状表格注:表格效果需要基于基本格式.table带边框的表格悬停鼠标状态类注:一共五种不同的样式可供选择。隐藏某一行响应式表格在小于768px,为表格加上边框按钮Bootstrap 提供了很多丰富按钮供开发者使用。可作为按钮使用的标签或元素转化成普通按钮ButtonLink注意事项有三点:虽然按钮类可以应用到 和 元素上,但是,导航和导航条组件只支持 元素。链接被作为按钮使用时的注意事项如果 元素被作为按钮使用 – 并用于在当前页面触发某些功能 – 而不是用于链接其他页面或链接当前页面中的其他部分,那么,务必为其设置 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

原创粉丝点击