bootstrap解析-排版

visitors 0   •     •   2017.06.06

标题

1
2
3
4
5
6
7
8
<h1>36px .h1
<h2>30px .h2
<h3>24px .h3
<h4>18px .h4
<h5>14px .h5
<h6>12px .h6
<small> 当前字体的65% .small
  1. 前面4个各差6px,h4-h5差4px,h5-h6差2px
  2. .h*是为了给inline的文本赋予标题的样式
  3. 为副标题,.small也可以定义副标题或给inline的文本定义副标题样式

全局

  1. 1
    2
    3
    4
    5
    ```
    font-size: 14px;
    line-height: 1.42857143;(倍字体)
    color: #333;
    background: #fff;
  2. 1
    2

margin-top: 10px

1
### ```.lead

1
2
3
4
5
6
7
margin-bottom: 20px;
font-weight: 300;
line-height: 1.4;
margin-top: 10px
1. 屏幕宽768px以上font-size: 21px;
2. 屏幕宽768px以下font-size: 16px;

1
#### ```<mark>```标记标签

padding: .2em;
background-color: #fcf8e3;
color:#000;

1
#### ```<del>```删除线,删除的文本 | ```<s>```无用的文本

text-decoration: line-through;

1
2
3
两个标签展示的效果一样,只是<del>是给搜索引擎看的,<s>是给用户看的。
#### ```<ins>```插入的文本 | ```<u>```带下划线的文本

text-decoration: underline

1
2
3
两个标签展示的效果也一样,<ins>是给搜索引擎看的,<u>是给用户看的
#### ```<small>``` | ```.small``` ( 小号文本 )

font-size: 85% // 当前字体的85%

1
2
3
4
在```inline```文本内为当前字体的85%,和在```<h*>```内展示不同。
#### ```<strong>``` 和 ```<em>``` (着重强调和斜体强调)
#### 对齐

.text-left // 左对齐
.text-center // 居中对齐
.text-right // 右对齐
.text-justify // 分散对齐
.text-noerap // 不换行

1
#### 文本大小写

.text-lowercase // 转小写
.text-uppercase // 转大写
.text-capitalize // 首字母大写

1
#### ```<abbr>``` 缩列语

cursor: help;
border-bottom: 1px dotted #777;
text-decoration:none; // 取消浏览器默认样式

1
```.initialism``` (首字母缩略语)

font-size: 90%;
text-transform: uppercase;

1
2
3
给```<abbr>```添加会比当前字体小一些。
#### ```<blockquote>``` 引用
默认左边

padding: 10px 20px;
margin: 0 0 20px;
font-size: 17.5px;
border-left: 5px solid #eee;

1
```.blockquote-reverse```右边

padding-right: 15px;
padding-left: 0;
text-align: right;
border-right: 5px solid #eee;
border-left: 0;

1
2
3
4
#### 列表
##### ```.list-unstyled``` ( 移除默认```list-style``` )
只针对直接```<li>

1
2

.display:inline-block;

1
只针对直接```<li>

1
2
使得```<dl><dt><dd>```水平排列
  1. 屏幕width>768px时
    dt style
    .dl-horizontal dt {
    width:180px;(超出会出现三个小点的省列号)
    float: left;
    overflow: hidden;
    clear: left;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
    }
    dl style
    .dl-horizontal dd {
    margin-left: 180px;
    }

  2. 屏幕width<768px时
    .dl-horizontal dt,.dl-horizontal dd {
    width:100%;
    }
    ```

 /  / 
  • 微信

  • 支付宝