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 不管上下拉都是这个属性.