BootStrap--全局CSS样式

jQuery是一个JS框架；

jQueryUI是一个HTML组件库；

Twitter Bootstrap是一个HTML/CSS/JS框架，适用于移动设备优先的响应式网页。

V2：面向PC进行了样式设定，同时兼顾PAD和PHONE

V3：面向Phone进行样式设定，同时兼顾了PC

主要涉及：

(1)HTML：为H5已有的标签扩展了一些自定义属性 data-*

(2)CSS： CSS Reset + 几千个class

(3)JS：基于jQuery提供了十几个插件函数

内容分为五部分：

(1)起步：下载、模板、Bootlint、示例、禁用响应式、

(2)全局CSS样式

(3)组件

(4)插件

(5)定制

2.Bootstrap提供的CSS Reset

* { box-sizing: border-box; }

body { font ...; color: #333; background: ...; margin: 0;}

h1 { font-size: ; margin-top: 20px; margin-bottom: 10px;}

h2 { font-size: ; margin-top: 20px; margin-bottom: 10px;}

h3 { font-size: ; margin-top: 20px; margin-bottom: 10px;}

h4 { font-size: ; margin-top: 10px; margin-bottom: 10px;}

h5 { font-size: ; margin-top: 10px; margin-bottom: 10px;}

h6 { font-size: ; margin-top: 10px; margin-bottom: 10px;}

a { color:; text-decoration: ;}

img { border: 0; vertical-align: middle; }

p { margin-bottom:10px; }

......

CSS补充知识点：

盒子模型的计算方法 box-sizing

div {

box-sizing: content-box; /*默认值*/

box-sizing: border-box; /*推荐使用*/

}

content-box: 一个盒子的总宽度=margin+border+padding+width

border-box: 一个盒子的总宽度=margin+width

3.Bootstrap全局CSS样式——按钮——简单&有趣

.btn { padding:; border: ;}

.btn-default { color:; background:; border-color:;}

----------------------

.btn-danger

.btn-success

.btn-warning

.btn-info

.btn-primary

---------------------

.btn-lg

.btn-sm

.btn-xs

----------------------

.btn-block

----------------------

.pull-left { float: left; }

.pull-right { float: right; }

4.Bootstrap全局CSS样式——图片——简单&有趣

.img-rounded

.img-circle

.img-thumbnail 缩略图片/拇指图片

.img-responsive 响应式图片

5.Bootstrap全局CSS样式——排版和代码——仅作了解

.text-danger

.text-success

.text.warning

.text-info

.text-primary

.bg-danger

.bg-success

.bg-warning

.bg-info

.bg-primary

.text-left

.text-right

.text-center

.text-justify 文本两端调整对齐

.text-uppercase

.text-lowercase

.text-capitalize

.list-unstyled

.list-inline

Bootlint工具:

是一个js，由Bootstrap官方提供，用于检测使用Bootstrap的页面中常见的HTML错误、class使用方面的错误——默认情况下浏览器是检查不出来的。

6.Bootstrap全局CSS样式——表格——简单&有趣

.table

.table-bordered 带边框的表格

.table-responsive 响应式表格 注意：使用在table的父元素上，而不是table上

.table-striped 隔行变色的表格

.table-hover 带悬停效果的表格

7.Bootstrap全局CSS样式——栅格布局系统——最重点&稍难

Web开发中页面布局可以采用的方式：

(1)使用TABLE做布局

优势：简单不易出错不足：加载效率

(2)使用DIV+CSS做布局

优势：加载速度快、灵活不足：不易控制

(3)使用Bootstrap提供的栅格(Grid Layout)布局系统

优势：加载速度快、灵活、支持响应式功能、容易控制（有行/列的概念，但使用DIV+CSS实现）

栅格布局系统的特点：

(1)所有的行必须放在容器中： .container或.container-fluid

(2)分为多行(row)，一行中平均分为12列(col)

(3)网页内容只能放在列(col)中，不能直接放在行(row)

(4)可以在col中再嵌套row

(5)col分为四大类： col-xs col-sm col-md col-lg

(6)col-md-* *值可为1~12，值就为某个列的宽度( */12 )

(7)可以为一个列指定不同屏幕下的不同宽度

(8) col-lg-* 只对大PC屏幕有效

col-md-* 对普通PC和大PC屏幕都有效

col-sm-* 对平板、PC、大PC屏幕都有效

col-xs-* 对手机、平板、PC大PC屏幕都有效

(9) .hidden-lg 当前列只在大PC屏幕下隐藏

.hidden-md 当前列只在PC屏幕下隐藏

.hidden-sm 当前列只在平板屏幕下隐藏

.hidden-xs 当前列只在手机屏幕下隐藏

(10) .col-md-offset-1~12——自学

.container的宽度问题：

当屏幕宽度>1200px（超大PC显示器-lg）：容器宽1170px

当屏幕宽度>992px（普通PC显示器-md）: 容器宽970px

当屏幕宽度>768px（平板显示器-sm）: 容器宽750px

当屏幕宽度<768px（手机显示器-xs）: 容器宽auto

.container-fluid的宽度： auto; + before + after

Bootstrap布局系统中容器的特点？

(1)宽度做了媒体查询。

(2)添加了前置和后置内容生成，可以防止子元素的越界、浮动造成的影响。

8.补充：CSS相关知识

(1)如何解决父元素的第一个子元素的margin-top越界问题

1)为父元素加border-top: 1px;——有副作用

2)为父元素指定padding-top: 1px;——有副作用

3)为父元素指定overflow:hidden;——有副作用

4)为父元素添加前置内容生成——推荐使用

.parent:before {

content: ' ';

display: table;

}

(2)如何解决所有的子元素浮动后父元素高度变为0，且影响后续元素

1)为父元素指定overflow:hidden;——有副作用

2)为父元素指定高度：height: xxx;——有局限性

3)为父元素添加后置内容生成——推荐使用

.parent:after {

content: ' ';

display: table;

clear: both;

}

9.Bootstrap全局CSS样式——表单——次重点&最难