CSS全局样式
概览
移动设备优先
<meta name="viewport" content="width=device-width,initial-scale=1">
布局容器
1、container类用于固定宽度并支持响应式布局的容器
2、container-fluid类用于100%宽度，占据全部视口（viewport）的容器。
栅格系统
1、最多12列
2、行（row）必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中。
3、为.column设置padding属性，从而创建列与列之间的间隔（gutter）
4、为.row元素设置负值margin从而抵消掉为.container元素设置的padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。
5、“列（column）”大于12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。
6、某些列可能会出现比别的列高的情况。为了克服这一问题，建议联合使用.clearfix和响应式工具类。
<!-- Add the extra clearfix for only the required viewport -->
<div class="clearfix visible-xs-block"></div>
列偏移
.col-md-offset-4类将.col-md-4元素向右侧偏移了4个列（column）的宽度
列排序
.col-md-push-*和.col-md-pull-*类就可以很容易的改变列（column）的顺序
排版
1、.h1到.h6类，为的是给内联（inline）属性的文本赋予标题的样式。
在标题内还可以包含标签或赋予.small类的元素，可以用来标记副标题
2、页面主题<p>...</p>中心内容.lead
3、内联文本元素
标记文本<mark>
被删除的文本<del>
无用文本<s>
插入文本<ins>
带下划线的文本<u>
小号文本<small>
着重<strong>
斜体<em>
4、对齐.text-
left|center|right|justify|nowrap
5、大小写.text-
lowercase|uppercase|capitalize
6、缩略语<abbr>、地址<address>
7、引用
默认
<blockquote><p>...</p></blockquote>
命名来源<footer>。来源名称可以包裹进<cite>标签中
.blockquote-reverse类可以让引用呈现内容右对齐的效果
8、无样式列表.list-unstyled
内联列表.list-inline
描述dl>dt+dd(水平.dl-horizontal)
<kbd>标签标记用户通过键盘输入的内容
表格
1、为任意标签添加.table类可以为其赋予基本的样式—少量的内补（padding）和水平方向的分隔线。
2、.table-striped类可以给<tbody>之内的每一行增加斑马条纹样式
3、.table-bordered类为表格和其中的每个单元格增加边框
4、.table-hover类可以让<tbody>中的每一行对鼠标悬停状态做出响应
5、.table-condensed类可以让表格更加紧凑，单元格中的内补（padding）均会减半
6、<tr>|<td>:.active|.success|.info|.warning|.danger
响应式表格
1、.table元素包裹在.table-responsive元素内，即可创建响应式表格，其会在小屏幕设备上（小于768px）水平滚动
2、Firefox浏览器对fieldset元素设置了一些影响width属性的样式，导致响应式表格出现问题。可以使用下面提供的针对Firefox的hack代码解决，但是以下代码并未集成在Bootstrap中：
@-moz-document url-prefix() {
fieldset { display: table-cell; }
}
表单
1、将label元素和前面提到的控件包裹在.form-group中可以获得最好的排列。所有设置了.form-control类的<input>、<textarea>和<select>元素都将被默认设置宽度属性为width:100%(截图或代码上来)
form>div.form-group>(label for="exampleInputEmail1")+(input.form-control#exampleInputEmail1)
内联表单
1、为元素添加.form-inline类可使其内容左对齐并且表现为inline-block级别的控件
2、一定要添加label标签，可以通过为label设置.sr-only类将其隐藏
3、水平排列的表单.form-horizontal
4、内联单选和多选框.checkbox-inline或.radio-inline
5、添加额外的图标设置相应的.has-feedback类并添加正确的图标即可。
6、反馈图标（feedback icon）只能使用在文本输入框<input class="form-control">元素上
7、.input-lg类似的类可以为控件设置高度，通过.col-lg-*类似的类可以为控件设置宽度
8、用栅格系统中的列（column）包裹输入框或其任何父元素，都可很容易的为其设置宽度
按钮
1、预定义样式.btn.default/.btn-primary/.btn-success/.btn-info/.btn-warning/.btn-danger/.btn-link
2、尺寸.btn-lg、.btn-sm或.btn-xs就可以获得不同尺寸的按钮
3、、给按钮添加.btn-block类可以将其拉伸至父元素100%的宽度，而且按钮也变为了块级（block）元素
激活状态
对于<button>元素，是通过:active状态实现的，对于<a>元素，是通过.active类实现的。然而，你还可以将 .active 应用到<button>上（包含aria-pressed="true"属性)），并通过编程的方式使其处于激活状态
图片
1、响应式图片<img src="..." class="img-response" alt="Responsive image">
2、图片形状.img-round/.img-circle/.img-thumbnail
辅助类
1、情境文本颜色<p>.text-muted/text-primary/text-success/text-info/text-warning/text-danger
2、情境背景色.bg-primary/.bg-success/.bg-info/.bg-warning/.bg-danger
3、关闭按钮
<button type="button" class="close" aria-label="Close"><span aria-hidden="true"></span></button>
4、三角符号<span class="caret">
5、快速浮动.pull-left/.pull-right
6、让内容块居中为任意元素设置display: block属性并通过margin属性让其中的内容居中
.center-block
7、清除浮动.clearfix
8、显示隐藏内容.show/.hidden
9、图片替换使用.text-hide类或对应的mixin可以用来将元素的文本内容替换为一张背景图
�<h1 class="text-hide">
组件
字体图标
1、所有图标都需要一个基类和对应每个图标的类
2、务必在图标和文本之间添加一个空格
3、不要和其他组件混合使用：图标类不能和其它组件直接联合使用。它们不能在同一个元素上与其他类共同存在。应该创建一个嵌套的标签，并将图标类应用到这个标签上。
4、图标类只能应用在不包含任何文本内容或子元素的元素上。
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
下拉菜单
1、将下拉菜单触发器和下拉菜单都包裹在.dropdown里，或者另一个声明了position: relative;的元素(代码)
2、通过为下拉菜单的父元素设置 .dropup 类，可以让菜单向上弹出
3、为.dropdown-menu添加.dropdown-menu-right类可以让菜单右对齐
4、在任何下拉菜单中均可通过添加标题来标明一组动作
<li class="dropdown-header">
5、为下拉菜单添加一条分割线，用于将多个链接分组。
<li role="separator" class="divider">
按钮组
<div class="btn-group" role="group" aria-label="...">包裹buttons
1、当为 .btn-group 中的元素应用工具提示或弹出框时，必须指定 container: 'body' 选项，这样可以避免不必要的副作用（例如工具提示或弹出框触发时，会让页面元素变宽和/或失去圆角）。
2、按钮工具栏
把一组<div >组合进一个<div class="btn-toolbar">中就组合进一个<div class="btn-toolbar">可以做成更复杂的组件
3、把下拉菜单混合到一系列按钮中，只须把.btn-group放入另一个.btn-group中
4、让一组按钮垂直堆叠排列显示而不是水平排列.btn-group-vertical
5、两端对齐排列的按钮组
<a>元素只须将一系列.btn元素包裹到.btn-group.btn-group-justified中即可
将<button>元素用于两端对齐的按钮组中，必须将每个按钮包裹进一个按钮组中
输入框组
1、为.input-group赋予.input-group-addon或.input-group-btn类，可以给.form-control的前面或后面添加额外的元素
2、不支持在输入框的单独一侧添加多个额外元素（.input-group-addon或.input-group-btn）。
不支持在单个输入框组中添加多个表单控件
导航.nav
1、必须使用 标签页组件的 JavaScript 插件。另外还要添加 role 和 ARIA 属性
2、导航组件实现导航条功能，务必在<ul>的最外侧的逻辑父元素上添加role="navigation"属性，或者用一个<nav>元素包裹整个导航组件。不要将role属性添加到<ul>上.
3、标签页.nav-tabs
4、胶囊式标签页.nav-pills垂直方向添加.nav-stacked
5、两端对齐的标签页.nav-justified
导航条.navbar
1、表单.navbar-form和.form-inline
2、按妞:对于不包含在中的<button>元素，加上.navbar-btn后，可以让它在导航条里垂直居中
4、文本：.navbar-text通常使用<p>标签
5、非导航的链接：.navbar-link
6、组件排列：.navbar-left和.navbar-right工具类让导航链接、表单、按钮或文本对齐
7、固定在顶部：.navbar-fixed-top类可以让导航条固定在顶部，还可包含一个.container或.container-fluid容器，从而让导航条居中(需要为body元素设置内补（padding）body { padding-top: 70px; })
固定在底部：.navbar-fixed-bottom(body{padding-bottom:70px;})
静止在顶部：.navbar-static-top(不用给body添加内补)
8、反色的导航条：.navbar-inverse
9、路径导航：.breadcrumb
10、分页
<nav aria-label="Page navigation">>ul.pagination>li>a aria-label="Previous|Next"
11、标签span.label
徽章span.badge
巨幕div.jumbotrom
12、缩略图div.row>div.col-sm-6>div.thumbnail>img+div.caption>h3+p
13、警告框div.alert role="alert">button.close data-dismiss="alert" aria-label="Close">span aria-hidden="true"
14、进度条
div.progress>div.progress-bar role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width:60%;/min-widht:2em">span.sr-only
情境.progress-bar-success...、条纹.progress-bar-striped、动画效果.active、堆叠效果
15、媒体对象
div.media>
.div.media-left>a>img.media-object
.div.media-body>h4.media-heading
16、媒体对象列表
ul.media-list>li.media>
div.media-left>a>img.media-object
div.media-body>h4.media-heading
17、列表组
ul.list-group>li.list-group-item
18、徽章
ul.list-group>li.list-group-item>span.badge
19、链接ul改div li改a类不变
按钮ul改div li改button类不变（不要使用标准的.btn类）
20、情境类list-group-item-success
21、定制内容
div.list-group>a.list-group-item>h4.list-item-heading+p.list-group-text
面板
.panel>panel-heading+.panel-body+.panel-footer
具有响应式特性的嵌入内容
直接应用在<iframe>、<embed>、<video>和<object>元素上，果你希望让最终样式与其他属性相匹配，还可以明确地使用一个派生出来的.embed-responsive-item类
不需要为<iframe>元素设置frameborder="0"属性
div.embed-response.embed-responsive-16by9">iframe.embed-responsive-item src="..."
JavaScript 插件
//文档结构简写（复制到sublime或webstorm中再去掉一些属性，按tab键可直接生成HTML代码）
//modal.js
button.btn.btn-primary data-toggle="modal" data-target="#"
div.modal.fade role="dialog">.modal-dialog role="document">.modal-content>.modal-header+.modal-body+.modal-footer
$('#example').on('show.bs.modal', function(event) {
var button = $(event.relatedTarget);
var recipient = button.data('whatever');
var modal = $(this);
modal.find('modal-title').text('new message to:' + recipient);
modal.find('modal-body input').val(recipient);
});
//dropdown.js
div.dropdown>button data-toggle="dropdown"+ul.dropdown-menu
//tab.js
div>(ul.nav.nav-tabs role="tablist">li role="presentation">a data-toggle="tab" role="tab")+(div.tab-content>div.tab-pane role="tabpanel")
//tooltip.js
button data-toggle="tooltip" data-placement="left" title="tooltip on left"
div.tooltip.top role="tooltip">div.tooltip-arrow+div.tooltip-inner
//popover.js
button data-toggle="popover" title="popover title" data-content="content"
//button.js
button data-toggle="button"
div.btn-group data-toggle="buttons"
//collapse.js
a data-toggle="collapse" href="#"|button data-toggle="collapse" data-target="#"
div.collapse#
div.panel-group#parent role="tablist">div.panel.panel-default>(div.panel-heading role="tab">h4.panel-title>a data-toggle="collapse" data-parent="#parent" href="#One" aria-controls="#One")+(div#One.panel-collapse.collapse role="tabpanel">div.panel-body)
//carousel.js
div#example.carousel.slide data-ride="carousel">(ol.carousel-indicators>li data-target="#example" data-slide-to="index")+(div.carousel-inner role="listbox">div.item>(img+div.carousel-caption))+(a.left.carousel-control href="#example" role="button" data-slide="prev">span)
data属性（部分）
data-toggle="{
modul,
dropdown,
tab,
tooltip,
popover,
button,
buttons,
collapse
}"
modal:
data-{
backdrop,
keyboard,
show,
remote
}
scroll:
data-spy
popover:
data-{
animation,
container,
content,
delay,
html,
placement,
selector,
template,
title,
trigger,
viewport
}
alert:
data-dismiss="alert"
collapse:
data-{
parent,
toggle
}
carousel:
data-{
interval,
pause,
wrap,
keyboard
}
网友评论