知識點：
1、按鈕組件
2科侈、輸入框
1载佳、按鈕組件
1）基本的按鈕組
<div class="btn-group">
<button class="btn btn-default">left</button>
<button class="btn btn-default">middle</button>
<button class="btn btn-default">right</button>
</div>
2）按鈕工具欄
<div class="btn-toolbar">
<div class="btn-group">
<button class="btn btn-default">left</button>
<button class="btn btn-default">middle</button>
<button class="btn btn-default">right</button>
</div>
<div class="btn-group">
<button class="btn btn-default">left</button>
<button class="btn btn-default">middle</button>
<button class="btn btn-default">right</button>
</div>
<div class="btn-group">
<button class="btn btn-default">更多</button>
</div>
</div>
3）按鈕的大小
<div class="btn-group btn-group-lg">
<button class="btn btn-default">left</button>
<button class="btn btn-default">middle</button>
<button class="btn btn-default">right</button>
</div>
<div class="btn-group btn-group-sm">
<button class="btn btn-default">left</button>
<button class="btn btn-default">middle</button>
<button class="btn btn-default">right</button>
</div>
<div class="btn-group btn-group-xs">
<button class="btn btn-default">left</button>
<button class="btn btn-default">middle</button>
<button class="btn btn-default">right</button>
</div>
4）嵌套
<div class="btn-group">
<button class="btn btn-default">left</button>
<button class="btn btn-default">middle</button>
<div class="btn-group">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">按鈕 <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
</ul>
</div>
</div>
5）垂直的按鈕組
<div class="btn-group-vertical">
<button class="btn btn-default">left</button>
<button class="btn btn-default">middle</button>
<div class="btn-group">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">按鈕 <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
</ul>
</div>
</div>
6）兩端對齊排列的按鈕組
<div class="btn-group btn-group-justified">
<div class="btn-group">
<button class="btn btn-default">left</button>
</div>
<div class="btn-group">
<button class="btn btn-default">middle</button>
</div>
<div class="btn-group">
<button class="btn btn-default">right</button>
</div>
</div>
<div class="btn-group btn-group-justified">
<!--<div class="btn-group">--> 為了瀏覽器兼容問題使用btn-group包裹
<a href="" class="btn btn-default">left</a>
<!--</div>-->
<!--<div class="btn-group">-->
<a href="" class="btn btn-default">middle</a>
<!--</div>-->
<!--<div class="btn-group">-->
<a href="" class="btn btn-default">right</a>
<!--</div>-->
</div>
7）按鈕式下拉菜單
a）單按鈕下拉菜單 btn-default btn-success btn-primary btn-info btn-danger btn-warning
<div class="btn-group">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">Default <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="">html</a></li>
<li><a href="">javascript</a></li>
<li><a href="">jQuery</a></li>
</ul>
</div>
b）分裂式按鈕下拉菜單
<div class="btn-group">
<button class="btn btn-default">Default</button>
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="">html</a></li>
<li><a href="">javascript</a></li>
<li><a href="">jQuery</a></li>
</ul>
</div>
####c）按鈕下拉菜單的大小 btn-lg btn-sm btn-xs
<div class="btn-group">
<button class="btn btn-default btn-lg dropdown-toggle" data-toggle="dropdown">Default <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="">html</a></li>
<li><a href="">javascript</a></li>
<li><a href="">jQuery</a></li>
</ul>
</div>
#### d）向上彈出式菜單 dropup
<div class="btn-group dropup">
<button class="btn btn-default btn-lg dropdown-toggle" data-toggle="dropdown">Default <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="">html</a></li>
<li><a href="">javascript</a></li>
<li><a href="">jQuery</a></li>
</ul>
</div>
2、輸入框
1）基本的輸入框組
<form action="">
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control"/>
</div>
<div class="input-group">
<input type="text" class="form-control"/>
<span class="input-group-addon">.00</span>
</div>
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control"/>
<span class="input-group-addon">.00</span>
</div>
</form>
2）輸入框組的大小 input-group-lg input-group-xs input-group-sm
<form action="">
<div class="input-group input-group-lg">
<span class="input-group-addon">@</span>
<input type="text" class="form-control"/>
</div>
</form>
3）復(fù)選框和單選框插件
<form action="">
<div class="row">
<div class="col-md-6">
<div class="input-group">
<span class="input-group-addon">
<input type="checkbox"/>
</span>
<input type="text" class="form-control"/>
</div>
</div>
</div>
</form>
4）按鈕插件 input-group-btn
<form action="">
<div class="row">
<div class="col-md-6">
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default">Go</button>
</span>
<input class="form-control" type="text"/>
</div>
</div>
</div>
</form>
5）按鈕式下拉菜單
<form action="">
<div class="row">
<div class="col-md-6">
<div class="input-group">
<div class="input-group-btn">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">dropdown<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="">資訊</a></li>
<li><a href="">新聞</a></li>
<li><a href="">關(guān)于</a></li>
</ul>
</div>
<input class="form-control" type="text"/>
</div>
</div>
</div>
</form>
6）分裂式按鈕下拉菜單
<form action="">
<div class="row">
<div class="col-md-6">
<div class="input-group">
<div class="input-group-btn">
<button class="btn btn-default">dropdown</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="">關(guān)于</a></li>
</ul>
</div>
<input class="form-control" type="text"/>
</div>
</div>
</div>
</form>
