Bootstrap-全局CSS样式
1.“行(row)”必须包含在 .container (固定宽度)或 .container-fluid (100% 宽度)中,以便为其赋予合适的排列(aligment)和内补(padding)
2.内容应当放置于“列(column)”内,并且,只有“列(column)”可以作为行(row)”的直接子元素
3.通过为 .row
元素设置负值 margin
从而抵消掉为 .container
元素设置的 padding
,也就间接为“行(row)”所包含的“列(column)”抵消掉了padding
4.设置不同宽度屏幕时不同展示, 栅格类适用于与屏幕宽度大于或等于分界点大小的设备
<div class="row"> <span class="col-md-4 col-xs-8">col-md-4</span> <span class="col-md-8 col-xs-4">col-md-8</span> </div>
5.xs:手机(<768px), sm:平板(≥768px), md:桌面显示器(≥992px), lg:大桌面显示器(≥1200px)
6.col-lg|md|sm|xs-* 表示栅格中占几列(左右都有15px的padding)
7.col-lg|md|sm|xs-offset-* 表示栅格中偏移几列
8.col-lg|md|sm|xs-push-* 表示栅格中列向右移动多少列(相对定位 left: 16.6666%)
9.col-lg|md|sm|xs-pull-* 表示栅格中列向左移动多少列(相对定位 right: 16.6666%)
10.hn(n为1-6), 其中1-3的margin: 20px 0px 10px; 4-6的margin:10px 0px; 其中还有 .h1-.h6 的类
11.全局font-size: 14px; line-height: 1.428; 其中p元素还被设置了等于 1/2 行高(即 10px)的底部外边距(margin: 0px 0px 10px)
12.
.lead 加黑字体显示
<small> 将字体大小设置为父容器字体大小的85%, 对应类 .small
<mark> 高亮字体背景显示, 对应类 .lead
<del> 被删除的文本
<s> 无用文本 类似 <del>
<u> 为字体加下划线
<ins> 插入的文本(底部有下划线, 类似<u>)
<strong> 加粗文本(更改font-weight)
<em> 斜体
<abbr title="aaaaa"> 缩略语(bootstrap 会在其下加虚线 鼠标悬停时显示其title)
.initialism 配合<abbr> (font-size: 90%; 所有字母会大写)
<address> 专用来写地址的标签(margin-bottom: 20px;)
<blockquote> 引用(border-left: 5px solid #eee; padding: 10px 20px;)
blockquote footer, blockquote small {font-size: 80%; color: #777; 且之前会加"--"}
.blockquote-reverse 右对齐
13.文本对齐
.text-left, .text-center, .text-right, .text-justify, .text-nowrap
14.改变大小写
text-lowercase(小写), text-uppercase(大写), text-capitalize(单词首字母大写)
15.ul li
.list-unstyled 无前缀
.list-inline li {display: inline-block; padding: 0px 5px;} 无前缀 且水平排列
16.
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。