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列，通过指定数字就能够设置宽度。

  

        
3
        
6
        
3
    

效果是这样

221905544717473.jpg

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

221907104714558-1.jpg

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

221857453318536.jpg

比如

 

        
3
        
3
        
3
        
3
    
```

效果

![屏幕快照 2017-01-12 下午2.00.12.png](http://upload-images.jianshu.io/upload_images/904629-4f4807683bccc05c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
###Input Groups

@

是这种效果

![屏幕快照 2017-01-11 下午2.46.52.png](http://upload-images.jianshu.io/upload_images/904629-452fc2725833df0e.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

span标签的位置和样式可以按需求添加摆放，比如把  @  改成 

![屏幕快照 2017-01-11 下午2.59.50.png](http://upload-images.jianshu.io/upload_images/904629-f749aedc48282013.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
修改样式大小,比如

![屏幕快照 2017-01-11 下午2.52.29.png](http://upload-images.jianshu.io/upload_images/904629-82020fecde85eed8.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)


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

Primary Toggle Dropdown

• Action
• Another action
• Something else here
• Separated link

效果

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

Default

![屏幕快照 2017-01-11 下午3.34.43.png](http://upload-images.jianshu.io/upload_images/904629-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](http://upload-images.jianshu.io/upload_images/904629-c55eea19a6ba8e0a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

箭头的样式

![屏幕快照 2017-01-11 下午3.39.32.png](http://upload-images.jianshu.io/upload_images/904629-f63c515b396a333f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

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

• Free Domain Name Registration


• Free Window Space hosting


• Number of Images


• 24*7 support


• Renewal cost per year

![屏幕快照 2017-01-11 下午3.52.00.png](http://upload-images.jianshu.io/upload_images/904629-4a961b46d2149f61.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

New 24*7 support

![屏幕快照 2017-01-11 下午3.58.44.png](http://upload-images.jianshu.io/upload_images/904629-5fdacdad8d81416a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

选中状态

Free Domain Name Registration

![屏幕快照 2017-01-11 下午4.01.03.png](http://upload-images.jianshu.io/upload_images/904629-9ab659aba879b352.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)


主副标题

Free Domain Name Registration

You will get a free domain registration with website pages.

![屏幕快照 2017-01-11 下午4.09.50.png](http://upload-images.jianshu.io/upload_images/904629-f1aad68fabbab187.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)


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