|
一、什么是bootstrap?
- Bootstrap是当下最流行的前端框架（界面工具集）；
- 移动端优先的设计理念
- 特点就是灵活简洁，代码优雅，美观大方；
- 其目的是为了让Web开发更敏捷；
- 是Twitter公司的两名前端工程师Mark Otto和Jacob Thornton在2011年发起的，并利用业余时间完成第一个版本的开发；
?二、为什么使用bootstrap?
- 生态圈火，不断地更新迭代；
- 提供一套美观大方地界面组件；
- 提供一套优雅的HTML+CSS编码规范；
- 让我们的 Web 开发更简单，更快捷；
注意:使用 Bootstrap 并不代表不用写 CSS 样式，而是不用写绝大多数大家都会用到的样式。?
三、下载Bootstrap
四、引入bootstrap
1.<!-- 引入Bootstrap核心样式文件（必须） -->
??<link rel="stylesheet" href="css/bootstrap.min.css">
2.?<!-- 引入所有的Bootstrap的JS插件 -->
??<script src="bootstrap.min.js"></script>
?注意：bootstrap依赖于jquery，引入bootstrap的js的插件前，要引入jquery的js插件
官方文档 -?https://getbootstrap.com/
中文文档 -?https://v3.bootcss.com/
五、Bootstrap基础模板?
?
<!DOCTYPE html>
<html lang="zh-CN">
<head>
????<!-- 设置当前HTML文件字符编码 -->
????<meta charset="utf-8">
????<!-- 设置浏览器兼容模式版本(让IE使用最新的渲染引擎工作) -->
????<meta http-equiv="X-UA-Compatible" content="IE=edge">
????<!-- 声明当前网页在移动端浏览器中展示的相关配置 -->
????<meta name="viewport" content="width=device-width, initial-scale=1">
????<!-- 标题 -->
????<title>天亮教育</title>
????<!-- Bootstrap改成本地的 -->
????<link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
????<!-- HTML5 shim和Respond.js是为了让IE8支持HTML5元素和媒体查询(media queries)功能 -->
????<!-- 警告：通过 file://协议访问页面时 Respond.js 不起作用 -->
<!-- 条件注释：条件注释的作用就是当判断条件满足时，就会执行注释中的HTML代码，不满足时会当做注释忽略掉-->
????<!--[if lt IE 9]>
????<script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
????<script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
????<![endif]-->
?
六、视口
<meta name="viewport" content="width=device-width, initial-scale=1.0">?
- 视口的作用：在移动浏览器中，当页面宽度超出设备，浏览器内部虚拟的一个页面容器，将页面容器缩放到设备这么大，然后展示
- 目前大多数手机浏览器的视口（承载页面的容器）宽度都是980
- 视口的宽度可以通过meta标签设置
- 此属性为移动端页面视口设置，当前值表示在移动端页面的宽度为设备的宽度，并且不缩放（缩放级别为1）
- width:视口的宽度
- initial-scale：初始化缩放
- user-scalable:是否允许用户自行缩放（值：yes/no; 1/0）
- minimum-scale:最小缩放，一般设置了用户不允许缩放，就没必要设置最小和最大缩放
- maximum-scale:最大缩放
|