Bootstrap常用控件整合

https://www.tutorialspoint.com//bootstrap/bootstrap_input_groups.htm --------Bootstrap API

---

因为公司需要，从iOS转到了前端开发
有一点点的html基础，所以直接就开始从搭好的h5框架里做了，但是刚看到这种css是崩溃的

屏幕快照 2017-01-11 下午3.13.25.png

后来发现原来是调的Bootstrap库，去官网看了一下使用方法
拨开云雾见青天啊，哈哈。稍微看了下，果然强大的不行。估计以后开发还会用到，所以在这里做一个整合，也方便自己查看。

---

Bootstrap网格系统

这个网格系统在 逆心 博客里看到的解释还是很通俗易懂的
Bootstrap把一个页面分为12列，通过指定数字就能够设置宽度。

  <div class="row">
        <div class="col-xs-3">3</div>
        <div class="col-xs-6">6</div>
        <div class="col-xs-3">3</div>
    </div>

效果是这样

221905544717473.jpg

当浏览器的宽度缩小时，显示效果如下：

221907104714558-1.jpg

这就是响应式布局，尺寸有下面几种

221857453318536.jpg

比如

 <div class="row">
        <div class="col-xs-12 col-sm-6 col-md-3">3</div>
        <div class="col-xs-12 col-sm-6 col-md-3">3</div>
        <div class="col-xs-12 col-sm-6 col-md-3">3</div>
        <div class="col-xs-12 col-sm-6 col-md-3">3</div>
    </div>```

效果

![屏幕快照 2017-01-12 下午2.00.12.png](https://img.haomeiwen.com/i904629/4f4807683bccc05c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
###Input Groups

<div class = "input-group">
<span class = "input-group-addon">@</span>
<input type = "text" class = "form-control" placeholder = "twitterhandle"> </div>

是这种效果

![屏幕快照 2017-01-11 下午2.46.52.png](https://img.haomeiwen.com/i904629/452fc2725833df0e.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

span标签的位置和样式可以按需求添加摆放，比如把  @  改成 <input type = "radio">

![屏幕快照 2017-01-11 下午2.59.50.png](https://img.haomeiwen.com/i904629/f749aedc48282013.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
修改样式大小,比如

<div class = "input-group input-group-lg">
<div class = "input-group ">
<div class = "input-group input-group-sm">

![屏幕快照 2017-01-11 下午2.52.29.png](https://img.haomeiwen.com/i904629/82020fecde85eed8.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)


###Button  Drop downs
下拉框，这个也用的挺多

<div class = "btn-group"> <button type = "button" class = "btn btn-primary">Primary</button> <button type = "button" class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown"> <span class = "caret"></span> <span class = "sr-only">Toggle Dropdown</span> </button> <ul class = "dropdown-menu" role = "menu"> <li><a href = "#">Action</a></li> <li><a href = "#">Another action</a></li> <li><a href = "#">Something else here</a></li> <li class = "divider"></li> <li><a href = "#">Separated link</a></li> </ul></div>

效果

![屏幕快照 2017-01-11 下午3.27.38.png](https://img.haomeiwen.com/i904629/f7d6ab3851432e52.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
按钮的状态可以修改
分开写是这种效果

<button type = "button" class = "btn btn-default">Default</button><button type = "button" class = "btn btn-default dropdown-toggle" data-toggle = "dropdown"> <span class = "caret"></span> </button>

![屏幕快照 2017-01-11 下午3.34.43.png](https://img.haomeiwen.com/i904629/5627cb2158102c96.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

然后按钮的大小状态，比如

class = "btn btn-default dropdown-toggle btn-lg"
class = "btn btn-primary dropdown-toggle btn-sm"
class = "btn btn-success dropdown-toggle btn-xs"

效果

![屏幕快照 2017-01-11 下午3.37.47.png](https://img.haomeiwen.com/i904629/c55eea19a6ba8e0a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

箭头的样式

<div class = "btn-group dropup">

![屏幕快照 2017-01-11 下午3.39.32.png](https://img.haomeiwen.com/i904629/f63c515b396a333f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

###List Group
这个类似iOS的tableview，不过不需要复用之类的，简单粗暴的叠加，一般是获取到数据然后嵌套模板循环添加数据

<ul class = "list-group">
<li class = "list-group-item">Free Domain Name Registration</li>
<li class = "list-group-item">Free Window Space hosting</li>
<li class = "list-group-item">Number of Images</li>
<li class = "list-group-item">24*7 support</li>
<li class = "list-group-item">Renewal cost per year</li>
</ul>

![屏幕快照 2017-01-11 下午3.52.00.png](https://img.haomeiwen.com/i904629/4a961b46d2149f61.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

<li class = "list-group-item">
<span class = "badge">New</span> 24*7 support
</li>

![屏幕快照 2017-01-11 下午3.58.44.png](https://img.haomeiwen.com/i904629/5fdacdad8d81416a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

选中状态

<a href = "#" class = "list-group-item active"> Free Domain Name Registration</a>

![屏幕快照 2017-01-11 下午4.01.03.png](https://img.haomeiwen.com/i904629/9ab659aba879b352.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)


主副标题

<a href = "#" class="list-group-item"> <h4 class = "list-group-item-heading"> Free Domain Name Registration </h4> <p class = "list-group-item-text"> You will get a free domain registration with website pages. </p> </a>

![屏幕快照 2017-01-11 下午4.09.50.png](https://img.haomeiwen.com/i904629/f1aad68fabbab187.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)


今天暂时先到这，续更............