Bootstrap输入框

Bootstrap输入框

---

基本用法

1.新建一个web项目ch13，将ch12里面的css文件和js文件拷贝过来。

2.打开ch13的demo01.html将头文件导入进来。

3.Bootstrap输入框的基本用法实例

   <div class="container">

<h1>基本用法</h1>

     <div class="input-group">

//首先给它一个样式说明它是文本框和小图标的组合

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

//头部的显示文本

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

//中间加一个文本框，占满整个容器。

<span class="input-group-addon">.00</span>

//尾部的显示文本

   </div>

4.运行效果

5.我们也可以将前面设置成小图标

<div class="input-group">

<span class="input-group-addon glyphicon glyphicon-user"></span>

//前面也可以用小图标来代替

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

</div>

6.运行效果

---

尺寸设置

1.设置尺寸大、中、小

（只需要在在input-group容器上加一个“input-group-lg”或者“input-group-sm”）

2.运行效果

---

复选框加addon

1.不使用小图标，在addon里面加一个复选框checkbox。

<div class="input-group">

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

<input type="checkbox" />

</span>

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

</div>

2.运行效果

---

按钮加addon

1.按钮加addon实例

<hr/>

   <div class="input-group">

//首先给出<div>并给出它的样式

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

//按钮加addon

//input-group里面btn这个样式自动会给你做成圆角，也就是addon的样式。

<button type="button" class="btn btn-danger">OK</button>

//按钮我们要给个样式，比如：btn-danger。

</span>

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

</div>

2.运行效果

---

下拉菜单按钮作为addon

1.下拉菜单按钮作为addon实例

<div class="input-group">

//首先是一个input-group的容器

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

//"input-group-btn"里面允许有多个按钮

 <button type="button" 

 class="btn btn-default dropdown-toggle"

 data-toggle="dropdown">

       Action

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

//向下的小三角

 </button>

//其实这个地上是"input-group-btn"，然后它相当于组合了两个按钮，

//一个是Action这个按钮，一个是下拉箭头的按钮。

//我们只是把下拉箭头的按钮放在里面了，当点击它的时候要出现个下拉框。

 <ul class="dropdown-menu">

     <li><a href="#">项目</a></li>

      <li><a href="#">项目</a></li>

      <li><a href="#">项目</a></li>

     </ul>

    </div>

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

  </div>

</div>

2.运行效果

---

分段按钮作为addon

1.在input-group-btn这个样式里面我们可以给多个按钮

2.运行效果

(第一个个按钮的左上角和左下角都会是圆角，后面两个按钮会取消圆角。