class值
caret 下拉符号
divider 分割符号
下拉菜单
div.dropdown
(a|bottton).dropdow-toggle[data-toggle="dropdown"]>b.caret
ul.dropdown-menu
.container 除了固定padding还有自适应margin
.container-fluid固定padding
表格
便捷
table.table>((thead>tr>td*2{$})+(tbody>tr*3>td*2{$}))
记忆
table.table(.table.table-bordered.table-condensed.table-hover.table-striped )
thead
tr
td*2{$}
tbody
tr*3
td*2{$}
导航
nav.navbar.navbar-default( .navbar-static-top .navbar-fixed-top .navbar-fixed-bottom .navbar-inverse .navbar-right .navbar-left )
div.navbar-header>a.navbar-brand
ul.nav.navbar-nav
li.active
快捷
nav.navbar.navbar-default>((div.navbar-header>a.navbar-brand{头部})+(ul.nav.navbar-nav>li*5>a{$}))
导航栏
.nav.(nav-tabs+nav-pills)(.nav-justified .nav-stacked)
li*?
分页
记忆
.pagination(.pagination-sm .pagination-lg)
li>a{«}
li*5>a{$}
li.active
li.disabled
li>a{«}
快捷
.pagination>((li>a{«})+(li*5>a{$})+(li>a{»}))
»大于
«小于
表单
标准居中
form.form-horizontal>.form-group>((label[for="名称"].col-md-2.control-label{lable})+(.col-md-8>input.form-control#名称))
记忆
form.form-horizontal
.form-group
label[for="名称"].col-md-2.control-label{lable}
.col-md-8>input.form-control#名称
元素行
快捷
.form-group.form-inline>((label.control-label[for="name"]{$})+(input[id="name"].form-control))
记忆
.form-group.form-inline
label.control-label[for="name"]{$}
input[id="name"].form-control
面包屑
记忆
ol.breadcrumb
li*2>a{$}
li.active{$}
快捷
ol.breadcrumb>((li*2>a{$})+(li.active{$}))
响应式
快捷代码
.navbar.navbar-default>((.navbar-header>(botton.navbar-toggle[data-toggle="collapse" data-target=".a"]>.icon-bar*3)+(a.navbar-brand{首页}))+(div.collapse.navbar-collapse.a>ul.nav.navbar-nav>li*5>a{$}))
记忆:
.navbar.navbar-default
.navbar-header
botton.navbar-toggle[data-toggle="collapse" data-target=".a"]
.icon-bar*3
a.navbar-brand{首页}
div.collapse.navbar-collapse.a
ul.nav.navbar-nav
li*5>a{$}))
css通配符:
[class*="col-"]{
background: rosybrown;
}
表格
<table class="table table-striped ">
<thead>
<tr>
<th>a</th>
<th>a</th>
</tr></thead>
<tbody>
<tr>
<td> b </td>
<td>b</td>
</tr>
</tbody>
</table>
show:
其他属性
table-bordered 表格边框
table-hover 表格悬浮
表单
隐藏:.sr-only
搜索栏
<form class=" form-horizontal col-xs-12 col-xs-offset-3">
<div class="form-group input-group search-input-group ">
<input type="text" class="form-control" placeholder="搜索开源库,例如:jquery">
<span class="input-group-addon">
<button type="submit"><span class="glyphicon glyphicon-search"></span></button>
</span>
</div>
</form>
css
.search-input-group .input-group-addon{
background: white !important;
}
.search-input-group .form-control{
border-right:0;
box-shadow:0 0 0;
border-color:#ccc;
}
.search-input-group{
width: 50%;
}
.search-input-group button{
border:0;
background:transparent;
}
.search-input-group input:focus + button{
z-index:3;
}