Bootstrap3简易学习

1.Bootstrap3简介：

一套写好了的开源css样式，依赖jquery。它的使用文档、组件、插件、网站实例非常丰富，加起来的总量超过了其他前端框架，简单易用，外观样式漂亮，可以说在github上一直广受欢迎是靠这些优势。官网这么介绍：Bootstrap是最受欢迎的HTML、CSS和JS框架，用于开发响应式布局、移动设备优先的WEB项目。

2.Bootstrap布局核心就是表格和栅格系统。

（一）bootstrap表格

在标签加入table类，可以给表格设置bootstrap表格样式，带有少量内补（padding）和分隔线。

例子：

...

源码介绍：

“.table”主要有三个作用：

  ☑  给表格设置了margin-bottom:20px以及设置单元内距

  ☑  在thead底部设置了一个2px的浅灰实线

  ☑  每个单元格顶部设置了一个1px的浅灰实线

（二）bootstrap栅格系统

简介：响应式、移动设备优先的流式栅格系统。通过一系列的行和列的组合创建布局。

栅格参数：

超小屏幕 手机 (<768px)小屏幕 平板 (≥768px)中等屏幕 桌面显示器 (≥992px)大屏幕 大桌面显示器 (≥1200px)栅格系统行为总是水平排列开始是堆叠在一起的，当大于这些阈值时将变为水平排列C.container 最大宽度None （自动）750px970px1170px类前缀.col-xs-.col-sm-.col-md-.col-lg-列（column）数12最大列（column）宽自动~62px~81px~97px槽（gutter）宽30px （每列左右均有 15px）可嵌套是偏移（Offsets）是列排序是

使用：添加类.col-xs-x、col-sm-x、col-md-x在列（column）属性，即可达到自适应效果，x取值0-12.

实例：

将最外面的布局元素 .container 修改为 .container-fluid，就可以将固定宽度的栅格布局转换为 100% 宽度的布局。

 class="container-fluid">

 

 class="row">

    

     

     

    

 

转载请注明作者web_harry和网址，谢谢。新浪博客地址：http://blog.sina.com.cn/s/blog_c2d1ee970102xcy1.html

http://blog.sina.com.cn/s/blog_c2d1ee970102xcy1.html