https://www.tutorialspoint.com//bootstrap/bootstrap_input_groups.htm --------Bootstrap API
因为公司需要，从iOS转到了前端开发
有一点点的html基础，所以直接就开始从搭好的h5框架里做了，但是刚看到这种css是崩溃的
后来发现原来是调的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>
效果是这样
当浏览器的宽度缩小时，显示效果如下：
这就是响应式布局，尺寸有下面几种
比如
<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>```
效果
###Input Groups
<div class = "input-group">
<span class = "input-group-addon">@</span>
<input type = "text" class = "form-control" placeholder = "twitterhandle"> </div>
是这种效果
span标签的位置和样式可以按需求添加摆放，比如把 @ 改成 <input type = "radio">
修改样式大小,比如
<div class = "input-group input-group-lg">
<div class = "input-group ">
<div class = "input-group input-group-sm">
###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>
效果
按钮的状态可以修改
分开写是这种效果
<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>
然后按钮的大小状态，比如
class = "btn btn-default dropdown-toggle btn-lg"
class = "btn btn-primary dropdown-toggle btn-sm"
class = "btn btn-success dropdown-toggle btn-xs"
效果
箭头的样式
<div class = "btn-group dropup">
###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>
<li class = "list-group-item">
<span class = "badge">New</span> 24*7 support
</li>
选中状态
<a href = "#" class = "list-group-item active"> Free Domain Name Registration</a>
主副标题
<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>
今天暂时先到这，续更............