Bootstrap表单与导航汇总

一、Bootstrap表单

1、表单类 - 水平效果

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

2、表单类 - 内联

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

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

• multiple：直接添加在<select>中
  示例：

<select multiple class="form-control"> 
 <option>1</option> 
 <option>2</option> 
 <option>3</option> 
 <option>4</option> 
</select>

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这样的语言来处理。对于<a>标签也存在类似问题，如果通过类名“.disable”来禁用按钮，其链接行为是无法禁止。而在元素标签中添加“disabled”属性的方法是可以禁止元素>的默认行为的。

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

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

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

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

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

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

<div class="form-group has-error has-feedback">
 <label class="control-label" for="inputError1">错误状态</label>
 <input type="text" class="form-control" id="inputError1" placeholder="错误状态">
 <span class="glyphicon glyphicon-remove form-control-feedback"></span>         //尾部的icon
</div>

error.jpg

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

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

<span class="help-block">输入正确</span>

14、图像类

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

15、Bootstrap自带图标

icon.jpg

<span class="glyphicon glyphicon-search"></span>

二、Bootstrap网格系统

列偏移

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

<h4>列向右移动四列的间距</h4>
 <div class="row">
   <div class="col-md-4">.col-md-4</div>
   <div class="col-md-2 col-md-offset-4">列向右移动四列的间距</div>
   <div class="col-md-2">.col-md-3</div>
 </div>
 <div class="row">
   <div class="col-md-4">.col-md-4</div>
   <div class="col-md-4 col-md-offset-4">列向右移动四列的间距</div>
 </div>

col-md-offset-x.jpg

三、Bootstrap菜单、按钮及导航

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

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

<div class="dropdown">
 <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
   下拉菜单<span class="caret"></span>
 </button>
 <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
   <li role="presentation"><a role="menuitem" tabindex="-1" href="#">选项1</a></li>
   <li role="presentation"><a role="menuitem" tabindex="-1" href="#">选项2</a></li>
   <li role="presentation"><a role="menuitem" tabindex="-1" href="#">选项3</a></li>
 </ul>
</div>
/*role：值（自定义，但需一致）*/

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

• .divider：添加在<li>中，使之变为分割线
  

  示例： divider.PNG

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

• .dropdown-header：添加在<li>中，使之变为下拉选项的小标题
  

  示例： dropdown-header.PNG

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

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

• .dropdown-menu-right：同上
  

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

• .dropdown-menu-left：同上
  

  示例： pull-left和dropdown-menu-left.PNG

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

• .active：添加在<li>中，使之呈现当前状态
  

  示例： active.PNG

• .disabled：添加在<li>中，使之呈现禁用状态
  

  示例： 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标签中添加<span class="caret"></span>
  

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

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

• .nav-tabs：在<ul>中“nav”上追加一个“nav-tabs”类名
  

  示例： nav-tab.png

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

• .nav-pills：在<ul>中“nav”上追加一个“nav-pills”类名
  

  示例： nav-pills.png

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

• .nav-stacked：在<ul>中“nav”上追加一个“nav-stacked”类名
  

  示例： nav-stacked.png

12、导航（自适应导航）

• .nav-justified：在<ul>中“nav”上追加一个“nav-justified”类名
  

  示例1： nav-justified.png
  示例2： nav-justified2.png

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

1. 在<li>中加上“dropdown”类名
2. 给<li>中<a>加“dropdown-toggle”类名
3. 二级<ul>加“dropdown-menu”类名
   代码示例：

<li class="dropdown">
       <a href="##" class="dropdown-toggle" data-toggle="dropdown">菜单项<span class="caret"></span>></a>
       <ul class="dropdown-menu">
           <li><a href="##">二级菜单1</a></li>
           …
      </ul>
</li>

示例： dropdown.png

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

• .breadcrumb：在<ol>中加上此类名
  

  示例： breadcrumb.png

四、Bootstrap导航条、分页导航

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

首先在制作导航的列表(<ul class=”nav”>)基础上添加类名“navbar-nav”，同时在列表外部添加一个带类名“navbar”和“navbar-default”的容器（div）
代码示例：

<div class="navbar navbar-default" role="navigation">
    <ul class="nav navbar-nav">
       <li><a href="##">导航1</a></li>
       <li><a href="##">导航2</a></li>
       <li><a href="##">导航3</a></li>
       <li><a href="##">导航4</a></li>
       <li><a href="##">导航5</a></li>
   </ul>
</div>

示例： navbar-nav.png

2、导航条（标题）

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

<div class="navbar navbar-default" role="navigation">
 　<div class="navbar-header">
 　    <a href="##" class="navbar-brand">导航条标题</a>
 　</div>
   <ul class="nav navbar-nav">
      <li><a href="##">导航1</a></li>
      <li><a href="##">导航2</a></li>
      <li><a href="##">导航3</a></li>
      <li><a href="##">导航4</a></li>
      <li><a href="##">导航5</a></li>
   </ul>
</div>

示例： navbar-header.png

3、导航条（二级菜单）

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

4、导航条（表单）

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

<form action="##" class="navbar-form navbar-left" rol="search">
   <div class="form-group">
       <input type="text" class="form-control" placeholder="请输入关键词" />
   </div>
   <button type="submit" class="btn btn-default">搜索</button>
</form>

示例： navbar-form.png

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

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

<div class="navbar navbar-default" role="navigation">
 　<div class="navbar-header">
 　    <a href="##" class="navbar-brand">导航条标题</a>
 　</div>
   <div class="nav navbar-nav">
      <a href="##" class="navbar-btn">选项1</a>
      <a href="##" class="navbar-text">选项2</a>
      <a href="##" class="navbar-link">选项3</a>
   </div>
</div>

示例： navbar-btn-text-link.png

导航条（固定导航条）

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

<div class="navbar navbar-default navbar-fixed-top" role="navigation">
 　<div class="navbar-header">
 　    <a href="##" class="navbar-brand">导航条标题</a>
 　</div>
   <div class="nav navbar-nav">
      <a href="##" class="navbar-btn">选项1</a>
   </div>
</div>

示例： navbar-fixed-top.gif

导航条（响应式导航条）

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

<div class="navbar navbar-default" role="navigation">
 <div class="navbar-header">
    　<!-- .navbar-toggle样式用于toggle收缩的内容，即nav-collapse collapse样式所在元素 -->
      <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-responsive-collapse">
        <span class="sr-only">Toggle Navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <!-- 确保无论是宽屏还是窄屏，navbar-brand都显示 -->
      <a href="##" class="navbar-brand">标题</a>
 </div>
 <!-- 屏幕宽度小于768px时，div.navbar-responsive-collapse容器里的内容都会隐藏，显示icon-bar图标，当点击icon-bar图标时，再展开。屏幕大于768px时，默认显示。 -->
 <div class="collapse navbar-collapse navbar-responsive-collapse">
      <ul class="nav navbar-nav">
          <li class="active"><a href="##">选项1</a></li>
          <li><a href="##">选项2</a></li>
          <li><a href="##">选项3</a></li>
      </ul>
 </div>
</div>

示例： 宽屏.png
窄屏.png

导航条（反色导航条）

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

<div class="navbar navbar-inverse" role="navigation">
 <div class="navbar-header">
    <a href="##" class="navbar-brand">标题</a>
 </div>
 <ul class="nav navbar-nav">
   <li class="active"><a href="">选项1</a></li>
   <li><a href="">选项2</a></li>
 </ul>
</div>

示例： navbar-inverse.png

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

• .pagination：在<ul>上添加pagination类名

<ul class="pagination pagination-lg">
 <li><a href="#">&laquo;第一页</a></li>
 <li><a href="#">11</a></li>
 <li><a href="#">12</a></li>
 <li><a href="#">13</a></li>
 <li><a href="#">14</a></li>
 <li><a href="#">15</a></li>
 <li><a href="#">最后一页&raquo;</a></li>
</ul> 

示例： pagination.png

导航条（翻页分页导航）

• .pager：在<ul>上添加pager类名

<ul class="pager">
 <li><a href="#">&laquo;上一页</a></li>
 <li><a href="#">下一页&raquo;</a></li>
</ul> 

示例： pager.png

导航条（标签）

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

<span class="label label-default">默认标签</span>
<span class="label label-primary">主要标签</span>
<span class="label label-success">成功标签</span>
<span class="label label-info">信息标签</span>
<span class="label label-warning">警告标签</span>
<span class="label label-danger">错误标签</span> 

示例： label-XX.png

导航条（标记徽章）

• .badge：在<span>上添加badge类名

<li><a href="#">Messages <span class="badge">3</span></a></li>

示例： badge.png