BootStrap之基础-3 组件

一、组件

字体图标

  - 注意事项

      - 不要和其他组件混合使用

      - 只对内容为空的元素起作用

         

      - 可访问性

        aria-hidden="true"

        aria-label=""

        .sr-only

        

下拉菜单

  - 基本格式

      -

         

         

          

  - 对齐

      - dropdown-menu-left | right

  - 标题

      -

•   - 分割线

        -

 - 禁用

      -

•         

  
  

  按钮组

    - 基本按钮组

        -

          

    - 按钮工具栏

        -

         

    - 尺寸

        - .btn-group-lg | sm | xs

    - 自适应

    - 垂直排列

        -

          

  
  

  按钮式下拉菜单
  

    - 按钮式下拉菜单依赖下拉菜单插件
  

    - 单按钮下拉菜单

        -

           

         

  - 分裂按钮下拉菜单



  - 尺寸

  - 向上弹出菜单

      -




列表组



Well

  - 把 Well 用在元素上，能有嵌入(inset)的简单效果

  -

  -




分页

  -

      -

  - 状态

      - 

•          

      - 

•   - 尺寸

        - .pagination-lg

        - .pagination-sm

  
  

    - 翻页

        - 

           

  •          

  • 
    

    标签
    

      - Default

      - Primary

      - Success

      - Info

      - Warning

      - Danger

    
    

    

    
    

    徽章
    

    
    

    

    

    
    

    巨幕

      - 展示网站上的关键内容

    

    页头

    

    
    

    缩略图

      - 基于栅格系统实现

    

    

      - 自定义内容

          -

          -

           

           

    
    

    
    

    警告框

    

    
    

    进度条

      -

          -

          - 情景

            progress-bar-sucess | info | danger | success

          - 条纹

            progress-bar-striped

          - 动画

            active

          - 堆叠

    
    

    面板 

      -

          - .panel-primary

          - .panel-sucess

          - .panel-info

          - .panel-warning

          - .panel-danger

    

    
    

    导航

      - 标签页上使用导航需要依赖JavaScript标签页插件

      - 标签页

          -

           

    •   - 胶囊式标签页

            -

        - 垂直标签

            -

        - 两端对齐

            -

      
      

      导航条

        - 基本导航条

        - 导航条表单

            -

        - 导航条按钮

            -

  - 导航条文本

      -

  - 非导航链接

      -

  - 排列

      - .navbar-left | right

  - 固定

      - .navbar-fixed-top | bottom

导航路径

  - 在一个带有层次的导航结构中标明当前页面的位置

总结：本章内容主要介绍了 BootStrap 组件