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;
    }

　　

 

 

表格

            

            

                
a
                
a
            

            

                

                    
 b 
                    
b
                
            
        

　　show:

 

 

其他属性

table-bordered 表格边框
table-hover 表格悬浮

　　

 

表单

隐藏：.sr-only

 

 

 

 

 

 

 

 

 

搜索栏

    

                     

        

                      

        

    

            

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;

}

　　

 

转载于:https://www.cnblogs.com/chargeworld/p/11470454.html