什么是Bootstrap?
- Bootstrap 是当下最流行的前端框架(界面工具集);
-特点就是灵活简洁,代码优雅,美观大方;
- 其目的是为了让 Web 开发更敏捷;
- 是 Twitter 公司的两名前端工程师 Mark Otto 和 Jacob Thornton 在 2011 - 年发起的,并利用业余时间完成第一个版本的开发。
使用 Bootstrap 并不代表不用写 CSS 样式,而是不用写绝大多数大家都会用到的样式
下载Bootstrap:- [官方文档](http://getbootstrap.com/)
- [中文文档](http://v3.bootcss.com/)
* 视口声明:<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
- 视口的作用:在移动浏览器中,当页面宽度超出设备,浏览器内部虚拟的一个页面容器,将页面容器缩放到设备这么大,然后展示
- 目前大多数手机浏览器的视口(承载页面的容器)宽度都是980;
- 视口的宽度可以通过meta标签设置
- 此属性为移动端页面视口设置,当前值表示在移动端页面的宽度为设备的宽度,并且不缩放(缩放级别为1)
+ width:视口的宽度
+ initial-scale:初始化缩放
+ user-scalable:是否允许用户自行缩放(值:yes/no; 1/0)
+ minimum-scale:最小缩放,一般设置了用户不允许缩放,就没必要设置最小和最大缩放
+ maximum-scale:最大缩放
*条件注释:条件注释的作用就是当判断条件满足时,就会执行注释中的HTML代码,不满足时会当做注释忽略掉
### 第三方依赖
- [jQuery](https://github.com/jquery/jquery)
> Bootstrap框架中的所有JS组件都依赖于jQuery实现
- [html5shiv](https://github.com/aFarkas/html5shiv)
> 让低版本浏览器可以识别HTML5的新标签,如header、footer、section等
- [respond](https://github.com/scottjehl/Respond)
> 让低版本浏览器可以支持CSS媒体查询功能
## 建议以后在HTML中将脚步的引入放到页面最底下
CSS媒体查询:
@media (判断条件(针对于当前窗口的判断)){
/*这里的代码只有当判断条件满足时才会执行*/
}
@media (min-width: 768px) and (max-width: 992px) {
/*这里的代码只有当(min-width: 1280px)满足时才会执行*/
.container {
width: 750px;
}
}
- 当使用min-width作为判断条件一定要从小到大,其原因是CSS从上往下执行
## 基础CSS样式
- [概要](http://v3.bootcss.com/css/#overview)
- [预置排版样式](http://v3.bootcss.com/css/#type)
+ 统一预制标签样式
- [按钮样式](http://v3.bootcss.com/css/#buttons)
- [表格样式](http://v3.bootcss.com/css/#tables)
- [表单样式](http://v3.bootcss.com/css/#forms)
- [图片样式](http://v3.bootcss.com/css/#images)
- [辅助工具类](http://v3.bootcss.com/css/#helper-classes)
- [代码样式](http://v3.bootcss.com/css/#code)
- [栅格系统](http://v3.bootcss.com/css/#grid)
+ __xs__ : 超小屏幕 手机 (<768px)
+ __sm__ : 小屏幕 平板 (≥768px)
+ __md__ : 中等屏幕 桌面显示器 (≥992px)
+ __lg__ : 大屏幕 大桌面显示器 (≥1200px)
- [响应式工具类](http://v3.bootcss.com/css/#responsive-utilities)
+ __hidden-xx__ : 在某种屏幕下隐藏
+ __visible-xx__ : 在某种屏幕尺寸下显示
## 预置界面组件
- [导航](http://v3.bootcss.com/components/#nav)
- [导航条](http://v3.bootcss.com/components/#navbar)
- [面包屑导航](http://v3.bootcss.com/components/#breadcrumbs)
- [下拉菜单](http://v3.bootcss.com/components/#dropdowns)
- [按钮式下拉菜单](http://v3.bootcss.com/components/#btn-
- 目前大多数手机浏览器的视口(承载页面的容器)宽度都是980;
- 视口的宽度可以通过meta标签设置
- 此属性为移动端页面视口设置,当前值表示在移动端页面的宽度为设备的宽度,并且不缩放(缩放级别为1)
+ width:视口的宽度
+ initial-scale:初始化缩放
+ user-scalable:是否允许用户自行缩放(值:yes/no; 1/0)
+ minimum-scale:最小缩放,一般设置了用户不允许缩放,就没必要设置最小和最大缩放
+ maximum-scale:最大缩放
*条件注释:条件注释的作用就是当判断条件满足时,就会执行注释中的HTML代码,不满足时会当做注释忽略掉
### 第三方依赖
- [jQuery](https://github.com/jquery/jquery)
> Bootstrap框架中的所有JS组件都依赖于jQuery实现
- [html5shiv](https://github.com/aFarkas/html5shiv)
> 让低版本浏览器可以识别HTML5的新标签,如header、footer、section等
- [respond](https://github.com/scottjehl/Respond)
> 让低版本浏览器可以支持CSS媒体查询功能
## 建议以后在HTML中将脚步的引入放到页面最底下
CSS媒体查询:
@media (判断条件(针对于当前窗口的判断)){
/*这里的代码只有当判断条件满足时才会执行*/
}
@media (min-width: 768px) and (max-width: 992px) {
/*这里的代码只有当(min-width: 1280px)满足时才会执行*/
.container {
width: 750px;
}
}
- 当使用min-width作为判断条件一定要从小到大,其原因是CSS从上往下执行
## 基础CSS样式
- [概要](http://v3.bootcss.com/css/#overview)
- [预置排版样式](http://v3.bootcss.com/css/#type)
+ 统一预制标签样式
- [按钮样式](http://v3.bootcss.com/css/#buttons)
- [表格样式](http://v3.bootcss.com/css/#tables)
- [表单样式](http://v3.bootcss.com/css/#forms)
- [图片样式](http://v3.bootcss.com/css/#images)
- [辅助工具类](http://v3.bootcss.com/css/#helper-classes)
- [代码样式](http://v3.bootcss.com/css/#code)
- [栅格系统](http://v3.bootcss.com/css/#grid)
+ __xs__ : 超小屏幕 手机 (<768px)
+ __sm__ : 小屏幕 平板 (≥768px)
+ __md__ : 中等屏幕 桌面显示器 (≥992px)
+ __lg__ : 大屏幕 大桌面显示器 (≥1200px)
- [响应式工具类](http://v3.bootcss.com/css/#responsive-utilities)
+ __hidden-xx__ : 在某种屏幕下隐藏
+ __visible-xx__ : 在某种屏幕尺寸下显示
## 预置界面组件
- [导航](http://v3.bootcss.com/components/#nav)
- [导航条](http://v3.bootcss.com/components/#navbar)
- [面包屑导航](http://v3.bootcss.com/components/#breadcrumbs)
- [下拉菜单](http://v3.bootcss.com/components/#dropdowns)
- [按钮式下拉菜单](http://v3.bootcss.com/components/#btn-