bootstrap讲义.docx

《bootstrap讲义.docx》由会员分享，可在线阅读，更多相关《bootstrap讲义.docx（22页珍藏版）》请在冰点文库上搜索。

bootstrap讲义

排版样式

一．页面排版

Bootstrap提供了一些常规设计好的页面排版的样式供开发者使用。

1.页面主体

Bootstrap将全局font-size设置为14px，line-height行高设置为1.428（即

20px）；

段落元素被设置等于1/2行高（即10px）；颜色被设置为#333。

2.标题

//内联元素使用标题字体

Bootstrap

在h1~h6元素之间，还可以嵌入一个small元素作为副标题，

//在标题元素内插入small元素

Bootstrap框架Bootstrap小标题

在h1~h6下的small样式也进行了改变，颜色变成淡灰色：

#777，行高为1，粗度为400。

3.内联文本元素

//添加标记，元素或.mark类

Bootstrap框架

//各种加线条的文本

Bootstrap框架//删除的文本

Bootstrap框架//无用的文本

Bootstrap框架//插入的文本

Bootstrap框架//效果同上，下划线文本

//各种强调的文本

Bootstrap框架//标准字号的85%

Bootstrap框架//加粗700

Bootstrap框架//倾斜

4.对齐

//设置文本对齐

Bootstrap框架

Bootstrap框架

Bootstrap框架

Bootstrap框架

Bootstrap框架

5.大小写

//设置英文文本大小写

Bootstrap框架

Bootstrap框架

Bootstrap框架

6.缩略语

//缩略语

Bootstrap框架

7.地址文本

//设置地址，去掉了倾斜，设置了行高，底部20px

8.引用文本

//默认样式引用，增加了做边线，设定了字体大小和内外边距

Bootstrap框架

//反向

Bootstrap框架

9.列表排版

//移出默认样式

//设置成内联

//水平排列描述列表

10.代码

//内联代码

<section>

//用户输入

pressctrl+,

//代码块

<p>Pleaseinput...</p>

Bootstrap还列举了表示标记变量，表示程序输出，只不过没有重新复写CSS。

表格和按钮

一．表格

Bootstrap提供了一些丰富的表格样式供开发者使用。

1.基本格式

//实现基本的表格样式

注：

我们可以通过Firebug查看相应的CSS。

2.条纹状表格

//让里的行产生一行隔一行加单色背景效果

注：

表格效果需要基于基本格式.table

3.带边框的表格

//给表格增加边框

4.悬停鼠标

//让下的表格悬停鼠标实现背景效果

5.状态类

//可以单独设置每一行的背景样式

注：

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

样式说明

active鼠标悬停在行或单元格上

success标识成功或积极的动作

info标识普通的提示信息或动作

warning标识警告或需要用户注意

danger表示危险或潜在的带来负面影响的动作

6.隐藏某一行

//隐藏行

7.响应式表格

//表格父元素设置响应式，小于768px出现边框

二．按钮

Bootstrap提供了很多丰富按钮供开发者使用。

1.可作为按钮使用的标签或元素

//转化成普通按钮

Link

Button

注意事项有三点：

（1）.针对组件的注意事项

虽然按钮类可以应用到和元素上，但是，导航和导航条组件只支持

元素。

（2）.链接被作为按钮使用时的注意事项

如果元素被作为按钮使用--并用于在当前页面触发某些功能--而不是用于

链接其他页面或链接当前页面中的其他部分，那么，务必为其设置role="button"属性。

（3）.跨浏览器展现

我们总结的最佳实践是：

强烈建议尽可能使用

元素来获得在各个浏览器上获得相匹配的绘制效果。

另外，我们还发现了Firefox<30版本的浏览器上出现的一个bug，其表现是：

阻

止我们为基于元素所创建的按钮设置line-height属性，这就导致在

Firefox浏览器上不能完全和其他按钮保持一致的高度。

2.预定义样式

//一般信息

Button

样式说明

btn-default默认样式

btn-success成功样式

btn-info一般信息样式

btn-warning警告样式

btn-danger危险样式

btn-primary首选项样式

btn-link链接样式

3.尺寸大小

//从大到小的尺寸

Button

Button

Button

Button

4.块级按钮

//块级换行

Button

Button

5.激活状态

//激活按钮

Button

6.禁用状态

//禁用按钮

Button

表单和图片

一．表单

Bootstrap提供了一些丰富的表单样式供开发者使用。

1.基本格式

//实现基本的表单样式