首页 > 代码库 > bootstrap总结

bootstrap总结

1,列表 

    .unstyled(无样式列表),.dl-horizontal(dl列表水平排列) 

2,代码 

    code(行级),pre(块级),.pre-scrollable(显示滚动条), 显示行号和美化: .prettyprint,.linenums 

3,表格 
    .table(基础样式)  .table-bordered(样式边框) , .table-striped(间隔效果) , .table-condensed(缩小表格) 

4,表单 
    .from-inline(所有元素在一列) , .form-horizontal(没一横排一个表单项) 

    .form-horizontal -->需要结合组件: 

        fieldset.control-group 
            | 
            |-->label.control-label 
            | 
            |-->.controls 

5,按钮 

    .btn(基础样式) , .btn-primary(重要,蓝色) , .btn-info(信息,浅蓝), .btn-success(成功,绿色), .btn-warning(警告,黄色)  .btn-danger(危险,红色) , .btn-inverse(相反,黑色) 

6,标签 

    .label(基础样式), .label-important(重要,红色) , .label-success(成功, 蓝色), .label-warning(警告,黄色), .label-info(信息,浅蓝色) .label-inverse(相反,黑色) 

7,标记 

    .badge(基础样式), .badge-success(成功,绿色), .badge-warning(警告,黄色),badge-error(错误,红色), .badge-info(信息,浅蓝色) 

8,警告 

     .alert(基础样式), .alert-success(成功,绿色), .alert-error(错误,红色), .alert-info(信息,蓝色) , .alert-block(获得更多的padding), 里面可以 .alert-heading(标题) , <a class="close" data-dismiss="alert">&times;</a>(关闭按钮)

9,图标 

    .icon-user(用户), .icon-drash(删除), .icon-refrash(刷新), .icon-cog(齿轮) icon-white(反白) 

10,手风琴 

    .accordion 
        | 
        |->.accordion-group 
        |    | 
        |    |->.accordion-heading 
        |    |    | 
        |    |    |->.accordion-toggle (data-toggle="collapse" href="http://www.mamicode.com/#demo1"  data-parent="#accordion2") 
        |    |     
        |    |->accordion-body 
        |    |    | 
        |    |    |->accordion-inner 

组件。 

1,导航 

    .navbar (.navbar-fixed-top|.navbar-fixed-bottom) 
       | 
       |-->.navbar-inner 
            | 
            |->container 
                | 
                |->brand (项目名) 
                | 
                |->ul.nav (菜单) 
                |    | 
                |    |->li.divider-vertical 竖分割线 
                | 
                |->form.navbar-form(搜索框) 
                |    | 
                |    |->search-query 
                | 
                |->.dropdown (下拉菜单) 
                | 
                |->pull-right(使元素有右浮动) 


2,面包屑 

    ul.breadcrumb 
        | 
        |->li 
            | 
            |->a 
            | 
            |->span.divider(分割线<span class="divider">/</div>) 
3,排版 

    (1) 主角元素 
    .hero-unit 
        | 
        |->h1(主标题) 
        | 
        |->p(副内容) 


    (2) 页面标题,有下边框 
    .page-header 
        | 
        |->h1 
           |->small 

4,tab页 


    div.tabbable  (tabs-below|tabs-left|tabs-bottom) 
        | 
        |->ul.nav (nav-tabs|nav-pills|nav-list) nav-stracked(竖立折叠式) 
        |        | 
        |        |->li.active 
        |        |    | 
        |        |    |->a--> href="http://www.mamicode.com/#id", data-toggle="tab" 
        |        | 
        |        |->li.nav-header (nav-list时用,表示一个菜单头) 
        |        | 
        |        |->li.divider(nav-list时用,分割线) 
        |        | 
        |        |->li.dropdown 
        | 
        |->tab-content 
        |    | 
        |    |->div#id .tab-pane (active)              

5,缩略列表 

    ul.thumbnails 
        | 
        |->li.span* 
            | 
            |->.thumbnail 
                | 
                |->(.caption) 详情描述 

6,按钮组 

    .btn-toolbar 
        | 
        |->.btn-group 
            | 
            |->.btn 

7,下拉菜单 
     
    .btn-group | .dropdown |.dropup 
        | 
        |->.btn .dropdown-toggle (data-toggle="dropdown") 
        |    | 
        |    |->span.caret 
        |     
        |->ul.dropdown-menu 
            | 
            |->li.divider 

8,进度条 

    .progress (.progress-striped| .actvie) 
        | 
        |->.bar (style="width:20%") 

9,页码 

    .pagination (.pagination-centered|.paginaction-right) 
        | 
        |->ul 
             | 
             |->li(.active) 


javascript: 

1,对话框 

    (1)对话框组件: 

    .modal  (设置宽度) 
       | 
       |->.modal-header 
       |    | 
       |    |->.close (data-dismiss="modal")  [注,.close必须放在前面] 
       |    | 
       |    |->h3 
       | 
       |->.modal-body 
       | 
       |->.modal-footer 
       |     | 
       |    |->.btn 

       (2)标记触发 

       <a href="http://www.mamicode.com/#mymodal" data-toggle="modal" data-backdrop="false" data-keyboard="false">打开对话框</a> 

       (3)javascript 

       a)初始化: 

       $("#mymodal").modal({ 
           dropback:true, 
           keyboard:true, 
           show:true 
       }); 

       b) 触发 

       $("#mymodal").modal();

bootstrap总结