Bootstrap表单与导航汇总

一、Bootstrap表单

1、表单类 - 水平效果

• .form-horizontal：添加在
  中（需配合Bootstrap框架的网格系统）

2、表单类 - 内联

• .form-inline：添加在中（为了让控件在各种表单风格中样式不出错，需要添加类名form-control）

3、表单类 - 多行下拉选择框

• multiple：直接添加在中
  示例：
  1 2 3 4
  

  multiple.jpg
  
  （textarea元素中添加 form-control类名，则无需设置cols属性，因为Bootstrap框架中的 form-control样式的表单控件宽度为100%或auto）

4、表单类 - 复选框和单选框

1. 不管是checkbox还是radio都使用label包起来了
2. checkbox连同label标签放置在一个名为“.checkbox”的容器内
   （如果checkbox需要水平排列，只需要在label标签上添加类名checkbox-inline）
3. radio连同label标签放置在一个名为“.radio”的容器内
   （如果radio需要水平排列，只需要在label标签上添加类名radio-inline）

5、表单类 - 按钮风格

btn.jpg

6、表单类 - 按钮大小

• .btn-lg：大按钮
• .btn-sm：小按钮
• .btn-xs：超小按钮

7、表单类 - 块状按钮（充满整个父容器：width:100%）

• .btn-block

8、表单类 - 按钮活动状态

• 悬浮状态 :hover
• 点击状态 :active
• 焦点状态 :focus

9、表单类 - 按钮禁用状态

• 方法1：在标签中添加disabled属性
• 方法2：在元素标签中添加类名“disabled”
  区别：
  “.disabled”样式不会禁止按钮的默认行为，比如说提交和重置行为等。如果想要让这样的禁用按钮也能禁止>按钮的默认行为，则需要通过JavaScript这样的语言来处理。对于标签也存在类似问题，如果通过类名“.disable”来禁用按钮，其链接行为是无法禁止。而在元素标签中添加“disabled”属性的方法是可以禁止元素>的默认行为的。

10、表单类 - 表单控件高度

• .input-sm：使控件变小
• .input-lg：使控件变大

11、表单类 - 表单控件宽度

• .col-xs-数字：在input的父div添加以控制表单宽度

12、表单类 - 控件验证状态样式

• .has-warning：警告状态（黄色）
• .has-error：错误状态（红色）
• .has-success：成功状态（绿色）
  （显示尾部icon可加上.has-feedback）
  示例：

 错误状态
 
          //尾部的icon

error.jpg

13、表单类 - 控件提示信息

• .help-block：在input后加上带此类的span，可通过“.col-xs-数字”控制提示是否在同一行

输入正确

14、图像类

• .img-responsive：响应式图片，主要针对于响应式设计
• .img-rounded：圆角图片
• .img-circle：圆形图片
• .img-thumbnail：缩略图片

15、Bootstrap自带图标

icon.jpg

二、Bootstrap网格系统

列偏移

有的时候，我们不希望相邻的两个列紧靠在一起，但又不想使用margin或者其他的技术手段来。这个时候就>可以使用列偏移（offset）功能来实现。使用列偏移也非常简单，只需要在列元素上添加类名“col-md-offset->*”(其中星号代表要偏移的列组合数)，那么具有这个类名的列就会向右偏移。

列向右移动四列的间距
 

   
.col-md-4
   
列向右移动四列的间距
   
.col-md-3
 
 

   
.col-md-4
   
列向右移动四列的间距
 

col-md-offset-x.jpg

三、Bootstrap菜单、按钮及导航

1、下拉菜单类（基本用法）

1. 使用一个名为“dropdown”的容器（div）包裹了整个下拉菜单元素
2. 使用一个按钮做为父菜单，并且定义类名“dropdown-toggle”和自定义“data-toggle”属性，且值必须和最外容器类名一致
3. 下拉菜单项使用一个ul列表，并且定义一个类名为“dropdown-menu”
   代码示例：

 
   下拉菜单
 
 

   
选项1
   
选项2
   
选项3
 

/*role：值（自定义，但需一致）*/

2、下拉菜单（下拉分隔线）

• .divider：添加在

• 中，使之变为分割线
  
  示例：
  

  divider.PNG

3、下拉菜单（菜单标题）

• .dropdown-header：添加在

• 中，使之变为下拉选项的小标题
  
  示例：
  

  dropdown-header.PNG

4、下拉菜单（对齐方式）

• .pull-right：添加在
  中，使之相对于父容器右对齐

  • .dropdown-menu-right：同上
    

    示例：
    

    pull-right和dropdown-menu-right.PNG
  • .pull-left：添加在
    中，使之相对于父容器左对齐

    • .dropdown-menu-left：同上
      

      示例：
      

      pull-left和dropdown-menu-left.PNG

5、下拉菜单（菜单项状态）

• .active：添加在

• 中，使之呈现当前状态
  
  示例：
  

  active.PNG

• .disabled：添加在

• 中，使之呈现禁用状态
  
  示例：
  

  disabled.PNG

6、按钮（垂直分组）

• .btn-group-vertical：将button的父div水平分组的“btn-group”类名换成“btn-group-vertical”
  

  示例：
  

  btn-group-vertical.PNG

7、按钮（等分按钮）

• .btn-group-justified：在按钮组“btn-group”上追加一个“btn-group-justified”类名
  

  示例：
  

  btn-group-justified.PNG

8、按钮（末尾的上/下三角形）

• 在button标签中添加
  

  示例：
  

  caret.PNG
  
  （在button中添加dropup控制三角向上+弹起）

9、导航（标签形tab导航）

• .nav-tabs：在

  中“nav”上追加一个“nav-tabs”类名
  
  示例：
  
  nav-tab.png

10、导航（胶囊形(pills)导航）

• .nav-pills：在

  中“nav”上追加一个“nav-pills”类名
  
  示例：
  
  nav-pills.png

11、导航（垂直堆叠的导航）

• .nav-stacked：在

  中“nav”上追加一个“nav-stacked”类名
  
  示例：
  
  nav-stacked.png

12、导航（自适应导航）

• .nav-justified：在

  中“nav”上追加一个“nav-justified”类名
  
  示例1：
  
  nav-justified.png
  
  示例2：
  
  nav-justified2.png

13、导航（下拉菜单二级导航）

1. 在
2. 中加上“dropdown”类名
3. 给
4. 中加“dropdown-toggle”类名
5. 二级
   加“dropdown-menu”类名
   代码示例：

       菜单项>
       

           
二级菜单1
           …
      

示例：

dropdown.png

14、导航（面包屑式导航）

• .breadcrumb：在

  中加上此类名
  
  示例：
  
  breadcrumb.png

四、Bootstrap导航条、分页导航

1、导航条（基础导航条）

首先在制作导航的列表(

)基础上添加类名“navbar-nav”，同时在列表外部添加一个带类名“navbar”和“navbar-default”的容器（div）
代码示例：

    

       
导航1
       
导航2
       
导航3
       
导航4
       
导航5
   

示例：

navbar-nav.png

2、导航条（标题）

1. 首先在制作导航的列表前添加带类名“navbar-brand”的
2. 在外部添加一个带类名“navbar-header”的容器（div）
   代码示例：

 　

 　    导航条标题
 　
   

      
导航1
      
导航2
      
导航3
      
导航4
      
导航5
   

示例：

navbar-header.png

3、导航条（二级菜单）

语法与下拉菜单二级导航同

4、导航条（表单）

• .navbar-form：在navbar容器中放置一个带有此类名的表单
  代码示例：

   

       
   
   搜索

示例：

navbar-form.png

导航条（按钮、文本和链接）

• .navbar-btn：导航条中的按钮
• .navbar-text：导航条中的文本
• .navbar-link：导航条中的普通链接
  （三者都需要和navbar-brand、navbar-nav配合起来使用。而且对数量也有一定的限制，一般只使用一到两个）

 　

 　    导航条标题
 　
   

      选项1
      选项2
      选项3
   

示例：

navbar-btn-text-link.png

导航条（固定导航条）

• .navbar-fixed-top：导航条固定在浏览器窗口顶部
• .navbar-fixed-bottom：导航条固定在浏览器窗口底部

 　

 　    导航条标题
 　
   

      选项1
   

示例：

navbar-fixed-top.gif

导航条（响应式导航条）

1. 首先将窄屏时需要折叠的内容放在一个带collapse和navbar-collapse类名的div内，再添加一个class类名或者id名
2. 添加在窄屏时要显示的图标样式（固定写法）：
   
   Toggle Navigation
   
   
   
   
3. 为button添加data-target=".类名/#id名"，由需要折叠的div来决定
   代码示例：

 

    　
      
        Toggle Navigation
        
        
        
      
      
      标题
 
 
 

      

          
选项1
          
选项2
          
选项3
      
 

示例：

宽屏.png

窄屏.png

导航条（反色导航条）

• .navbar-inverse：将导航div的navbar-deafult类名换成navbar-inverse

 

    标题
 
 

   
选项1
   
选项2
 

示例：

navbar-inverse.png

导航条（带页码的分页导航）

• .pagination：在
  上添加pagination类名

  
   
  «第一页
   
  11
   
  12
   
  13
   
  14
   
  15
   
  最后一页»
   
  

  示例：
  

  pagination.png

导航条（翻页分页导航）

• .pager：在
  上添加pager类名

  
   
  «上一页
   
  下一页»
   
  

  示例：
  

  pager.png

导航条（标签）

• .label-deafult：默认标签，深灰色
• .label-primary：主要标签，深蓝色
• .label-success：成功标签，绿色
• .label-info：信息标签，浅蓝色
• .label-warning：警告标签，橙色
• .label-danger：错误标签，红色

默认标签
主要标签
成功标签
信息标签
警告标签
错误标签 

示例：

label-XX.png

导航条（标记徽章）

• .badge：在上添加badge类名

Messages 3

示例：

badge.png