2.0 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

Bootstrap文档

• 官方文档
• 中文文档

基础的Bootstrap模板

  
    
    
    
    
    
    
    
    
    
    
    
  
  
    
Hello, world!
    
    
    
    
  

Compatible

• 此属性为文档兼容模式声明，表示如果在IE浏览器下则使用最新的标准渲染当前文档

视口

• 视口的作用：在移动浏览器中，当页面宽度超出设备，浏览器内部虚拟的一个页面容器，将页面容器缩放到设备这么大，然后展示
• 目前大多数手机浏览器的视口（承载页面的容器）宽度都是980；
• 视口的宽度可以通过meta标签设置
• 此属性为移动端页面视口设置，当前值表示在移动端页面的宽度为设备的宽度，并且不缩放（缩放级别为1）
  • width:视口的宽度
  • initial-scale：初始化缩放
  • user-scalable:是否允许用户自行缩放（值：yes/no; 1/0）
  • minimum-scale:最小缩放，一般设置了用户不允许缩放，就没必要设置最小和最大缩放
  • maximum-scale:最大缩放

条件注释

• 条件注释的作用就是当判断条件满足时，就会执行注释中的HTML代码，不满足时会当做注释忽略掉

第三方依赖

• jQuery

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

• html5shiv

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

• respond

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

建议以后在HTML中将脚步的引入放到页面最底下

mediaquery

根据我们自己写的判断条件，来决定css是否执行；

@media (判断条件（针对于当前窗口的判断）){
    /*这里的代码只有当判断条件满足时才会执行*/
}

@media (min-width: 768px) and (max-width: 992px) {
  /*这里的代码只有当(min-width: 1280px)满足时才会执行*/
  .container {
    width: 750px;
  }
}

• 当使用min-width作为判断条件一定要从小到大，其原因是CSS从上往下执行

基础CSS样式：

帮我们把以前用到的标签，做了一些美化；如果需要，找到响应的类名加入class即可；

• 概要
• 预置排版样式
  • 统一预制标签样式
• 按钮样式
• 表格样式
• 表单样式
• 图片样式
• 辅助工具类
• 代码样式
• 栅格系统
  • xs : 超小屏幕 手机 (<768px)
  • sm : 小屏幕 平板 (≥768px)
  • md : 中等屏幕 桌面显示器 (≥992px)
  • lg : 大屏幕 大桌面显示器 (≥1200px)
• 响应式工具类
  • hidden-xx : 在某种屏幕下隐藏
  • visible-xx : 在某种屏幕尺寸下显示

预置界面组件

就是将日常使用的一些功能块，例如下拉菜单提前写好，我们使用时直接找到对应的demo，做响应调整即可；

• 导航
• 导航条
• 面包屑导航
• 下拉菜单
• 按钮式下拉菜单
• 按钮组
• 输入框组
• 警告框
• 页头
• 分页
• 列表组
• 面板
• 媒体对象
• 进度条
• Glyphicons
• 标签
• 徽章
• 缩略图
• 大屏幕
• 嵌入内容
• 内嵌

JavaScript插件

JavaScript插件的依赖情况

如何使用Javascript插件

内置组件

• 模态对话框
• 下拉菜单
• 滚动监听
• 标签页
• 工具提示
• 弹出框
• 警告框
• 按钮
• 折叠面板
• 轮播图
• 吸顶效果
  • data-spy="affix"
  • data-offset-top="什么位置出现"
  • data-offset-bottom="什么位置消失"

深度自定义 Bootstrap

在线自定义

• 官网在线
• 中文网在线

源码编译

LESS语言

• 官方文档
• 中文文档