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{
50%;
}
.search-input-group button{
border:0;
background:transparent;
}
.search-input-group input:focus + button{
z-index:3;
}
手风琴 快捷 .aa>.card>((.card-header>a[href='#a'].card-link[data-toggle="collapse"]{$})+(#a.collapse[data-parent='.aa']>.card-body{$})) 记忆 .aa .card .card-header a[href="#a"].card-link[data-toggle="collapse"]{标题} .collapse#a[data-parent=".aa"] .card-body{内容} .card .card-header a[href="#b"].card-link[data-toggle="collapse"]{标题} .collapse.show#b[data-parent=".aa"] .card-body{内容} .card .card-header a[href="#c"].card-link[data-toggle="collapse"]{标题} .collapse.show#c[data-parent=".aa"] .card-body{内容}