Bootstrap本次知识点
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）按钮式下拉菜单
<1>单按钮下拉菜单
<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><2>分裂式按钮下拉菜单
<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><3>按钮下拉菜单的大小
<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><4>向上弹出式菜单
<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）输入框组的大小
<form action="">
<div class="input-group input-group-lg">
<span class="input-group-addon">@</span>
<input type="text" class="form-control"/>
</div>
</form>（3）复选框和单选框的插件
<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）按钮插件
<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="">关于</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="">关于</a></li>
</ul>
</div>
<input class="form-control" type="text"/>
</div>
</div>
</div>
</form>
作者：Roger_CoderLife
链接：https://blog.csdn.net/Roger_CoderLife/article/details/80451109
本文为Roger_CoderLife的原创文章，著作权归作者所有，转载请注明原文出处，欢迎转载！
