简书的css排版,Bootstrap排版样式（二）

主要学习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