Bootstrap 组件

Bootstrap 组件

 

1.字体图标

Bootstrap3与Bootstrap2的最大差异在于使用了font文件来替代图片，用于显示图标，这些font图片称为Glyphicons--象形文字图标。

可以使用<i>或<span>标签来配合使用，具体如下：

//使用小图标

<i class="glyphicon glyphicon-star"></i>

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

//也可以结合按钮

<button class="btn btn-default btn-lg">

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

</button>

注：可以对字体图标设置字体尺寸font-size、颜色color和应用文本阴影text-shadow。

 

2.按钮组 

按钮组就是多个按钮集成在一个容器里形成独有的效果。

//基本格式

<div class="btn-group">

  <button type="button"class="btn btn-default">左</button>

  <button type="button"class="btn btn-default">中</button>

  <button type="button"class="btn btn-default">右</button>

</div>

//将多个按钮组整合起来便于管理

<div class="btn-toolbar">

  <div class="btn-group">

    <button type="button"class="btn btn-default">左</button>

    <button type="button"class="btn btn-default">中</button>

    <button type="button"class="btn btn-default">右</button>

  </div>

  <div class="btn-group">

    <button type="button"class="btn btn-default">1</button>

    <button type="button"class="btn btn-default">2</button>

    <button type="button"class="btn btn-default">3</button>

  </div>

 </div>

//设置按钮组大小                          

<div class="btn-group btn-group-lg">

<div class="btn-group>

<div class="btn-group btn-group-sm">

<div class="btn-group btn-group-xs">

 

 

3.下拉菜单

.dropdown {  position:relatie;  }

.dropdown-menu {  position:absolute; top:100%;  ... }

.dropdown-toggle 出现点击效果

data-toggle="dropdown"  JS选择器用

使用：保证下拉菜单与触发(button或nav)在同一父元素下。

3.1按钮的下拉菜单

<div class="dropdown">

  <button class="btn btn-default dropdown-toggle"data-toggle="dropdown">

    下拉菜单<span class="caret"></span>

  </button>

  <ul class="dropdown-menu">

    <li><a href="#">首页</a></li>

    <li><a href="#">资讯</a></li>

    <li><a href="#">产品</a></li>

    <li><a href="#">关于</a></li>

  </ul>

</div>

//设置向上触发

<div class="dropup">

//菜单项居右对齐，默认值是dropdown-menu-left

<ul class="dropdown-menu dropdown-menu-right">

//设置菜单的标题，不要加超链接

<li class="dropdown-header">网站导航</li>

//设置菜单的分割线

<li class="divider"></li>

//设置菜单的禁用项

<li class="disabled"><a href="#">产品</a></li>

//让菜单默认显示

<div class="dropdown open">

 

3.2按钮组的下拉菜单

<div class="btn-group">

  <button type="button"class="btn btn-default">左</button>

  <button type="button"class="btn btn-default">中</button>

  <button type="button"class="btn btn-default">右</button>

  <button class="btn btn-default dropdown-toggle"data-toggle="dropdown">

    下拉菜单<span class="caret"></span>

  </button>

  <ul class="dropdown-menu">

    <li><a href="#">首页</a></li>

    <li><a href="#">资讯</a></li>

    <li><a href="#">产品</a></li>

  </ul>

</div>

注：没有class="dropdown"，因为.btn-group有定位{  position:relatie;  }

//分裂式按钮下拉菜单

<div class="btn-group">

  <button type="button"class="btn btn-default">下拉菜单</button>

  <button class="btn btn-default dropdown-toggle"data-toggle="dropdown">

    <span class="caret"></span>

  </button>

  <ul class="dropdown-menu">

    <li><a href="#">首页</a></li>

    <li><a href="#">资讯</a></li>

    <li><a href="#">产品</a></li>

  </ul>

</div>

 

3.3导航栏的下拉菜单

<ul class="nav nav-tabs">

  <li class="active"><a href="#">Home</a></li>

  <li><a href="#">iOS</a></li>

  <li class="dropdown">

    <a class="dropdown-toggle" data-toggle="dropdown" href="#">

      Java <span class="caret"></span>

    </a>

    <ul class="dropdown-menu">

      <li><a href="#">Swing</a></li>

      <li><a href="#">jMeter</a></li>

    </ul>

  </li>

  <li><a href="#">PHP</a></li>

</ul>

 

4.输入框

·向 <form> 元素添加 role="form"。

·把标签和控件放在一个带有 class .form-group 的<div> 中。这是获取最佳间距所必需的。

·向所有的文本元素 <input>、<textarea>和 <select>添加 class ="form-control" (焦点事件)

·<div class="input-group-addon">￥</div>或<span class="input-group-addon">￥</span>放置额外内容，二者是完全等效的。

 

4.1向input输入框添加文本或单复选框

//添加文本

<div class="input-group">  //为input添加边距

<span class="input-group-addon">￥</span>

<input type="text" class="form-control">

</div>

//添加复选框

<div class="input-group">

<span class="input-group-addon">

<input type="checkbox">

</span>

<input type="text" class="form-control">

</div>

 

 

4.2向input输入框添加按钮与下拉菜单

用 .input-group-btn代替 .input-group-addon

//添加按钮

<div class="input-group">

<span class="input-group-btn">

<button class="btn btn-default" type="button">Go!</button>

</span>

<input type="text" class="form-control">

</div>

//添加下拉菜单

<div class="input-group">

<input type="text" class="form-control">

<span class="input-group-btn">

        <button type="button" class="btn btn-default dropdown-toggle"data-toggle="dropdown">下拉菜单<span class="caret"></span></button>

        <ul class="dropdown-menu pull-right">

            <li> <a href="#">功能</a> </li>

            <li> <a href="#">另一个功能</a> </li>

        </ul>

</span>

</div>

 

 

4.3输入框组的大小

您可以通过向 .input-group 添加相对表单大小的class（比如 .input-group-lg、input-group-sm）来改变输入框组的大小。输入框中的内容会自动调整大小。

 

5.导航元素

5.1基本

对ul添加.nav .nav-tabs或.nav-pills

//标签式的导航菜单

<ul class="nav nav-tabs">

  <li class="active"><a href="#"