Paste_Image.png
Bootstrap中包含了丰富的Web组件,根据这些组件,可以快速的搭建一个漂亮、功能完备的网站。
以下是bootstrap--排版样式的知识,希望对你们有所帮助:
1.Bootstrap将全局foot-size设置为14px,line-height行高设置为1.428(即20px);段落元素被设置等于1/2行高(即10px);颜色被设置为#333;
2.从Firebug查看元素了解到,Bootstrap分别对h1h6进行了css样式的重构,并且还支持普通内联定义class=(h1h6)来实现相同的功能
例子:
(1)
Paste_Image.png
引入bootstrap样式前
Paste_Image.png
引入bootstrap样式后
Paste_Image.png
(2)
Paste_Image.png
引入bootstrap样式前
Paste_Image.png
引入bootstrap样式后
Paste_Image.png
3.内联文本元素
//添加标记,元素或.mark类
Bootstrap框架
//各种加线条的文本
Bootstrap框架 //删除的文本
Bootstrap框架 //无用的文本
Bootstrap框架 //插入的文本,即下划线文本
Bootstrap框架 //效果同上,下划线文本
//各种强调的文本
Bootstrap框架 //标准字号的85%
Bootstrap框架 //加粗了700
Bootstrap框架 //倾斜
例子
Paste_Image.png
引入bootstrap样式前
Paste_Image.png
引入bootstrap样式后
Paste_Image.png
4.对齐
//设置文本对齐
Bootstrap框架
//居左Bootstrap框架
//居中Bootstrap框架
//居右Bootstrap框架
//两端对齐Bootstrap框架
//不换行例子
Paste_Image.png
引入bootstrap样式前
Paste_Image.png
引入bootstrap样式后
Paste_Image.png
5.大小写
//设置英文文本大小写
Bootstrap框架
//小写Bootstrap框架
//大写Bootstrap框架
//首字母大写例子
Paste_Image.png
引入bootstrap样式前
Paste_Image.png
引入bootstrap样式后
Paste_Image.png
6.缩略语
Bootstrap框架
例子
Paste_Image.png
引入bootstrap样式前
Paste_Image.png
引入bootstrap样式后
Paste_Image.png
7.地址文本
//设置地址,去掉了倾斜,设置了行高,底部20px
Twitter,Inc
Twitter,Inc
p:(123) 456-7890
例子
Paste_Image.png
引入bootstrap样式前
Paste_Image.png
引入bootstrap样式后
Paste_Image.png
8.引入文本
//默认样式引用,增加了做边线,设定了字体大小和内外边距
Bootstrap框架
//反向
Bootstrap框架
例子
Paste_Image.png
引入bootstrap样式前
Paste_Image.png
引入bootstrap样式后
Paste_Image.png
9.列表排版
//移出默认样式
- 框架
- 框架
- 框架
例子
Paste_Image.png
引入bootstrap样式前
Paste_Image.png
引入bootstrap样式后
Paste_Image.png
设置成内联
- 框架
- 框架
- 框架
例子
Paste_Image.png
引入bootstrap样式前
Paste_Image.png
引入bootstrap样式后
Paste_Image.png
水平排列描述列表
-
框架
- 框架
例子
Paste_Image.png
引入bootstrap样式前
Paste_Image.png
引入bootstrap样式后
Paste_Image.png
10.代码
//内联代码
< ;section> ;
例子
Paste_Image.png
引入bootstrap样式前
Paste_Image.png
引入bootstrap样式后
Paste_Image.png
用户输入
pressctrl+,
例子
Paste_Image.png
引入bootstrap样式前
Paste_Image.png
引入bootstrap样式后
Paste_Image.png
代码块
Please input...
例子
Paste_Image.png
引入bootstrap样式前
Paste_Image.png
引入bootstrap样式后
Paste_Image.png
Bootstrap还列举了表示标记变量,表示程序输出,只不过没有重新复写Css