Bootstrap学习第一天笔记

Bootstrap
简介
什么是Bootstrap？
Bootstrap 官网

框架：库 lib library
jQuery作为一个框架来讲，提供一套比较便捷的操作DOM的方式
把大家都需要的功能预先写好到一些文件 这就是一个框架
Bootstrap 让我们的 Web 开发更简单，更快捷；

注意是 Bootstrap 不是 BootStrap！这是一个词，不是合成词，其含义为：n. 引导指令,引导程序

Bootstrap 是当下最流行的前端框架（界面工具集）；
特点就是灵活简洁，代码优雅，美观大方；
其目的是为了让 Web 开发更敏捷；
是 Twitter 公司的两名前端工程师 Mark Otto 和 Jacob Thornton 在 2011 - 年发起的，并利用业余时间完成第一个版本的开发；
为什么使用Bootstarp？
生态圈火，不断地更新迭代；
提供一套美观大方地界面组件；
提供一套优雅的 HTML+CSS 编码规范；
让我们的 Web 开发更简单，更快捷；
注意：
使用 Bootstrap 并不代表不用写 CSS 样式，而是不用写绝大多数大家都会用到的样式

准备
下载Bootstrap
https://github.com/twbs/bootstrap/releases/download/v3.3.6/bootstrap-3.3.6-dist.zip
https://github.com/twbs/bootstrap/releases/download/v4.0.0-alpha.2/bootstrap-4.0.0-alpha.2-dist.zip
安装Bootstrap

Compatible 此属性为文档兼容模式声明，表示如果在IE浏览器下则使用最新的标准渲染当前文档 视口 视口的作用：在移动浏览器中，当页面宽度超出设备，浏览器内部虚拟的一个页面容器，将页面容器缩放到设备这么大，然后展示 目前大多数手机浏览器的视口（承载页面的容器）宽度都是980； 视口的宽度可以通过meta标签设置 此属性为移动端页面视口设置，当前值表示在移动端页面的宽度为设备的宽度，并且不缩放（缩放级别为1） width:视口的宽度 initial-scale：初始化缩放 user-scalable:是否允许用户自行缩放（值：yes/no; 1/0） minimun-scale:最小缩放initial-scale 第三方依赖 jQuery

Bootstrap框架中的所有JS组件都依赖于jQuery实现

html5shiv

让低版本浏览器可以识别HTML5的新标签，如header、footer、section等

respond

让低版本浏览器可以支持CSS媒体查询功能

基础CSS样式
概要
预置排版样式
统一预制标签样式
按钮样式
表格样式
表单样式
图片样式
辅助工具类
代码样式
栅格系统
响应式工具类
预置界面组件
导航
导航条
面包屑导航
下拉菜单
按钮式下拉菜单
按钮组
输入框组
警告框
页头
分页
列表组
面板
媒体对象
进度条
Glyphicons
标签
徽章
缩略图
大屏幕
嵌入内容
内嵌
JavaScript插件
JavaScript插件的依赖情况
如何使用Javascript插件
内置组件
模态对话框
下拉菜单
滚动监听
标签页
工具提示
弹出框
警告框
按钮
折叠面板
轮播图
吸顶效果
data-spy=”affix”
data-offset-top=”什么位置出现”
data-offset-bottom=”什么位置消失”
深度自定义 Bootstrap
在线自定义
官网在线
中文网在线
源码编译
LESS语言
官方文档
中文文档