您的位置:首页 > Web前端 > BootStrap

文章标题

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。

条纹状表格
注:表格效果需要基于基本格式.table

带边框的表格
悬停鼠标
状态类

注:一共五种不同的样式可供选择。

隐藏某一行

响应式表格
在小于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
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  bootstrap