Bootstrap 的基本实现

bootstrap:   UI插件  YUI,  ElementUI

Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。

响应式布局:  根据屏幕大小,自适应页面的布局

简洁、直观、强悍的前端开发框架，让web开发更迅速、简单

导包

第一种：本地使用

1. 搜索Bootstrap官网
2. 点击下载Bootstrap
3. 在你项目导入 bootsrap压缩文件中dist目录下css/bootsrap.css（css）   fonts （字体）  js/bootstrap.js（js）
• 选择需要导入的包（必须先导入jquery.js，再导入bootsrap.js）

• 引入bootstrap.css    <link type="text/css" rel="stylesheet" href="./bootstrap-3.3.7/dist/css/bootstrap.css">
• 引入jquery.js: 使用jquery1.10以上  <script src="./jquery/jquery.js"></script>
• 引入bootsrap.js文件  <script src="./bootstrap-3.3.7/dist/js/bootstrap.js"></script>

第二种：外部使用

　　复制Bootstrap官网

• <!-- 1、最新版本的 Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
• <!-- 2、引入jquery.js -->
• <!-- 3、最新的 Bootstrap 核心 JavaScript 文件 --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

栅格系统

bootstrap 其实 是把 网页等 分为 了 12分，bootstrap把 根据屏幕大小把屏幕分 为了 4个层级

超小屏幕 手机 (<768px) .col-xs-
小屏幕 平板 (≥768px) .col-sm-
中等屏幕 桌面显示器 (≥992px) .col-md-
大屏幕 大桌面显示器 (≥1200px) .col-lg-

详情请看官网https://v3.bootcss.com/css/#grid