bootstrap学习

 

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;

}

 

 

 

 

手风琴



快捷
.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{内容}