bootstrap的按钮特性

bootstrap为我们提供了<a> <button> <input> 元素的类属性,

<a class="btn btn-default" href="#" >Link</a><button class="btn btn-default" >按钮</button><input class="btn btn-default" value="Input">

*<a> 元素被作为按钮使用的时候，务必设置一条属性role=”button”

除此之外,bootstrap还为我们提供了不同的样式的按钮

<button type="button" class="btn btn-default">默认样式</button><button type="button" class="btn btn-primary">首选项</button><button type="button" class="btn btn-success">成功</button><button type="button" class="btn btn-info">一般信息</button><button type="button" class="btn btn-warning">警告</button><button type="button" class="btn btn-danger">危险</button><button type="button" class="btn btn-link">链接</button>

在样式的基础上还能添加btn-lg btn-sm btn-xs 类来改变button的尺寸，还能加上btn-block 来将按钮设置为块元素;

我们可以用一个div将按钮包起来，添加btn-group 类做一个按钮组，然后可以将按钮组包在btn-toolbar 中做成更复杂的组件。可以通过btn-group-lg/sm/xs 类来改变组中按钮的大小

<div class="btn-group" role="group">  <button type="button" class="btn btn-default">Left</button>  <button type="button" class="btn btn-default">Middle</button>  <button type="button" class="btn btn-default">Right</button></div>//  btn-toolbar 部分<div class="btn-toolbar" role="toolbar" aria-label="...">  <div class="btn-group" role="group" aria-label="...">...</div>  <div class="btn-group" role="group" aria-label="...">...</div>  <div class="btn-group" role="group" aria-label="...">...</div></div

---

缓解视力部分

bootstrap提供了三种图片形状类img-rounded img-circle img-thumbnail 来帮助我们切换图片的外观

给大家放张照片缓解一哈视力,

缓解视力到此结束

---

前面提了一下下拉菜单的form-control类，现在不用select如何制作下拉菜单呢？v3中文文档给出了这样一段代码

<div class="dropdown">  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">    Dropdown    <span class="caret"></span>  </button>  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">    <li><a href="#" class=dropdown-header>提示</li>    <li><a href="#">Action</a></li>    <li><a href="#">Another action</a></li>    <li><a href="#">Something else here</a></li>    <li role="separator" class="divider"></li>    <li><a href="#">Separated link</a></li>  </ul></div>

效果是这样的

首先需要给父元素div设置类名dropdown 还有向上的dropup 然后最重要的是要给按钮增加一个data-toggle 属性,值为dropdown 不管上下拉都是这个属性.