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)定制
<div id="" class="" style="" title="" data-old-width="500">
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样式——表单——次重点&最难