主要学习Bootstrap全局CSS中的排版样式,包括了标题、页面主体、对齐、列表等常规内容。
一、页面排版
1.页面主体
Bootstrap将全局font-size设置未14pix,line-height行高设置为1.428(20pix),
段落元素被设置等于1/2行高(10pix),颜色设置为#333(深灰色)。
事例 标标签p 和class="lead"配合使用
Bootstrap
Bootstrap
Bootstrap
Bootstrap
lead css.png
lead显示样式.png
2.标题
可直接用h1-h6标签,也可使用 类来表示 class="h1" ,可在标题内容中插入
Bootstrap框架
Bootstrop框架
Bootstrap框架
Bootstrap框架
Bootstrap框架
Bootstrap框架
Bootstrap框架
图片.png
3.内联文本元素
添加标签或class="mark"类 mark类会把整行都改变
添加各种线条的文本 删除 下划线
强调文本使用标签 small 字体变小 strong字体变粗 em斜体
Bootstrap框架
Bootstrap
Bootstrap
Bootstrap框架
Bootstrap框架
Bootstrap框架
Bootstrap框架
Bootstrap框架
Bootstrap框架
Bootstrap框架
mark.png
线条+强调文本.png
4.对齐
class="text-left"
class="text-center"
class="text-right"
class="text-justify" 两端对齐
class="text-nowrap" 不换行
div右对齐
DIV
框架
框架
框架
框架框架hdhjhajdhjshdjahdjhgkdjfkejfkfkdfknbnhdfjdhfjhsjjshjfhsjhjshfjsfsfd dsjhdjshjhjadjaj
框架hdhjhajdhjshdjahdjhgkdjfkejfkfkdfknbnhdfjdhfjhsjjshjfhsjhjshfjsfsfd dsjhdjshjhjadjaj
图片.png
5.大小写
class="text-lowercase"
class="text-uppercase"
class="text-capitalize" , 首字母大写
6.缩略语
bs
字母会变成大写
7. 地址文本
中国北京去掉了倾斜,设置了行高
8.引用文本
blockquote标签
居右 class=“blockquote-reverse” / class="pull-right"
这是引用文本
这是引用文本居右
这是引用文本居右
图片.png
9.列表排版
ul ol移除默认样式 class="list-unstyled"
class="list-inline"变成一行
- cat
- dog
- fish
水平排列描述列表 dl dt dd,class="dl-horizontal"
-
Bootstrap
- Bootstrap提供了一些常规设计好的页面排版的样式供开发者使用
图片.png
-
Bootstrap
- Bootstrap提供了一些常规设计好的页面排版的样式供开发者使用
图片.png
10.代码
内联代码 code
用户输入 kbd
代码块 pre
<section>
press ctrl+,
<p>Please input...</p>
图片.png