Bootstrap常用控件整合

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


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


Bootstrap常用控件整合_第1张图片
屏幕快照 2017-01-11 下午3.13.25.png

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


Bootstrap网格系统

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

  
3
6
3

效果是这样

221905544717473.jpg

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


221907104714558-1.jpg

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

Bootstrap常用控件整合_第2张图片
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
下拉框,这个也用的挺多

效果

![屏幕快照 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)
按钮的状态可以修改
分开写是这种效果


![屏幕快照 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)
    
    
    今天暂时先到这,续更............

    你可能感兴趣的:(Bootstrap常用控件整合)