通过这个我们可以了解bootstarp 常用的一些知识点。
栅格
.row 在.container 或者 .container-fluid.col-md-* ,.col-lg-*,.col-xs-*,col-sm-*列的偏移 .col-md-offset-*可以嵌套，嵌套后再分为12格
排版
h1~h6<small></small>.lead 可以让包裹的p段落凸显出来<mark>内链的凸显出来方案无用的文本<s>插入的文本<ins><u>下划线语句加强<strong><em> 斜体文本的对齐方式，text-left,text-center,text-right,text-justify,text-nowrap.text-lowercase,.text-uppercase,.text-capitalize 大小写以及驼峰地址引用：<blockquote class=".blockquote-reverse">，多引用<cite class="source Title">列表<ul><li> 有序<ol><li> 无样式.list-unstyled 内连.list-inline 描述<dl><dt><dd>，水平的描述:.dl-horizontal 使用text-overflow 可以截断太长的短语
代码
内连代码<code>用于输入<kbd>多行<pre>变量<var>程序输出<samp>
表格
.table .table-striped斑马线 .table-borded框子 .table-hover鼠标悬停.table-condensed紧凑给<tr><td>设置的颜色:.active,.success,.info,.warning,.danger表格响应式：.table-responsive
表单
基础例子
.form-control 来修饰<input>,<textarea>,<select>，默认的宽度为100%<label>包裹在div.form-group内链表单.form-inline用来修饰<form>前后扩展div.input-group-addon水平.form-horizontal<textarea> 中row 属性来修饰几行多选择&单选
禁用状态div.disabled，div.checkbox>labl>input checkbox 的内链label.checkbox-inline,label.radio-inline不带文字的checkbox 或者radio,就是label 包裹的时候不写label>input下拉框
.form-control修饰<select>属性multiple表示多选静态文本
使用水平.form-horizontal修饰<form>:<form class='form-horizontal'>用栅格和.control-label来修饰<label>：<label class='col-md-2 control-label'>禁用 .disabled ，如果是checkbox 或者 radio 的时候，也要使用disabled，最好不要使用form表单中的<fieldset disabled>,原因：<a>标签不受影响只读 readonly 属性给输入框加上颜色div.has-success,div.has-warning,div.has-error给输入框加上图标
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span> 加上的是图标 <span class="input-group-addon">@</span>加上文字设置输出框的大小input.form-control input-lg设置输出组的大小(有label的时候),div.form-group form-group-sm水平上的大小通过栅格设置
按钮
.btn 设置基础按钮样式，如背景以及点击反馈设置按钮的颜色
.btn-default：白色.btn-primary：深蓝色.btn-success：绿色.btn-info:蓝色.btn-warning:黄色.btn-link:链接透明大小 .btn-lg>没有描述>.btn-sm>.btn-xs块状的框度100% .btn-block激活状态 .active禁用 <button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>a 标签的禁用<a class='diabled'>
图片
圆角的，.img-round圆的，.img-circle画布.img-thumbnail图片响应式剧中 .img-responsive .center-block
辅助
文本颜色
<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>
背景颜色
<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>
关闭的按钮
<button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></button> 使用.close 来修饰<button>
三角
`<span class="caret"></span>`
div 的浮动
<div class="pull-left">...</div>
<div class="pull-right">...</div>
内容居中
<div class="center-block">...</div> 说明：
// Class
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
// Usage as a mixin
.element {
.center-block();
}
浮动取消
<div class='clearfix'> 说明 ```css // Mixin itself .clearfix() { &:before, &:after { content: " "; display: table; } &:after { clear: both; } }
// Usage as a mixin .element { .clearfix(); } ```
显示隐藏
.show.hide 说明:
// Classes
.show {
display: block !important;
}
.hidden {
display: none !important;
}
.invisible {
visibility: hidden;
}
// Usage as mixins
.element {
.show();
}
.another-element {
.hidden();
}
使用 .text-hide 类或对应的 mixin 可以用来将元素的文本内容替换为一张背景图。
<h1 class="text-hide">Custom heading</h1>
响应
根据屏幕宽度设置是否隐藏
1 .visible-*-* 2 .hidden-*
根据屏幕宽度设置display的属性
.visible-*-block：display: block;.visible-*-inline：display: inline;.visible-*-inline-block：display: inline-block;
以下为组件的知识
组件
字体
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
下拉菜单
使用.dropdown修饰<div>.dropdown-toggle 作为js的事件绑定data-toggle 绑定div内的列表dropdown-menu修饰<ul><li> 列表可以用.dropdown-header 来分组使用.divider 在分隔列表使用.disabled来禁用
按钮组
用.btn-group 来修饰div包裹多个.btn-group的工具组，使用.btn-toolbar来修饰对按钮组大小设置
btn-group-xs btn-group-md wu btn-group-lg垂直上的按钮 .btn-group-vertical对齐.btn-group-justified
下拉菜单
下拉菜单的关键在于data-toggle='dropdown'使用.dropup来修饰div实现向上
导航
<ul class="nav nav-tabs">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li>
</ul>
用nav nav-tabs 来修饰导航标签用nav nav-pills 胶囊，垂直时候加上.nav-stacked去掉间隙，加上nav-justified
导航条
用navbar navbar-default来修饰div或者nav如果导航条上存在form,那么给form 表单加上navbar-form按钮navbar-btn文本navbar-text链接 navbar-link固定在顶部navbar-fixed-top或者底部 navbar-fixed-bottomnavbar 中可包裹一个container|container-fluid反色 navbar-inverse
路径导航
原理通过css的：before和content添加的 使用：
<ol class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Library</a></li>
<li class="active">Data</li>
</ol>
输入组
.input-group 修饰div.input-group-addon 修饰span 加载输入框上.form-control 修饰input ，表示框度为100%label 标签包裹
分页
使用.pagination来修饰<ul>可使用pagination-[size]来修饰大小
翻页
使用.pager来修饰ul对齐使用.previous,.next来修饰上页和下页
标签
<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>
违章
<span class="badge">
巨幕
<div class="jumbotron">划分出空间来
面板
.panel 颜色 .panel-primary 结构：.panel-heading,.panel-body,.panel-footer
列表
.list-group 修饰<ul>
well
设置一个嵌入的效果.well
转载于:https://www.cnblogs.com/enicz/p/bootstrap-xue-xi.html
相关资源：bootstrap学习心得总结-css样式设计分享
