bootstrap解析-排版

2024年4月5日 160次阅读 来源: 陈帅

标题

<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. <body>默认

font-size: 14px;
line-height: 1.42857143;(倍字体)
color: #333;
background: #fff;

  1. <p>默认

margin-top: 10px

.lead

margin-bottom: 20px;
font-weight: 300;
line-height: 1.4;
margin-top: 10px

1. 屏幕宽768px以上font-size: 21px;
2. 屏幕宽768px以下font-size: 16px;

inline文本元素

<mark>标记标签

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

<del>删除线，删除的文本 | <s>无用的文本

text-decoration: line-through;

两个标签展示的效果一样，只是是给搜索引擎看的，<s>是给用户看的。

<ins>插入的文本 | <u>带下划线的文本

text-decoration: underline

两个标签展示的效果也一样，<ins>是给搜索引擎看的，<u>是给用户看的

<small> | .small ( 小号文本 )

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

在inline文本内为当前字体的85%，和在<h*>内展示不同。

<strong> 和 <em> (着重强调和斜体强调)

对齐

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

文本大小写

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

<abbr> 缩列语

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

.initialism (首字母缩略语)

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

给<abbr>添加会比当前字体小一些。

<blockquote> 引用

默认左边

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

.blockquote-reverse右边

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

列表

.list-unstyled ( 移除默认list-style )

只针对直接<li>

.inline-block内联
.display:inline-block;

只针对直接<li>

.dl-horizontal

使得<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%;
}

本篇博文首发于本人个人博客，查看更多点这里

    原文作者：陈帅
    原文地址: https://segmentfault.com/a/1190000009675251
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞