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.

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。