Bootstrap前端开发框架#
Bootstrap简介#
Bootstrap来自Twitter(推特)，是目前最受欢迎的前端框架之一。Bootstrap是基于前端三剑客的，它简洁灵活，使得Web开发更加快捷
框架： 顾名思义就是一套架构，它有一套比较完整的网页功能解决方案，而且控制权在框架本身，有预制样式库、组件和插件。使用者要按照框架所规定的某种规范进行开发。
1.优点#
- 标准化的html+css编码规范
- 提供了一套简介、直观、强悍的组件
- 有自己的生态圈，不断地更新迭代
- 让开发更简单，提高了开发效率
2.版本#
- 2.x.x：停止维护，兼容性好，代码不够简洁，功能不够完善。
- 3.x.x：目前使用最多，稳定，但是放弃了IE6-IE7，对IE8支持但是界面效果不好，偏向用于开发响应式布局 移动设备优先的WEB项目
- 4.x.x：最新版（当前2023年已更新至5.3.0版本）
Bootstrap使用#
在现阶段只考虑它的样式库
控制权在框架本身，使用者要按照框架所规定的某种规范进行开发
Bootstrap使用四步：
创建文件夹结构#
bootstrap>css+js
+
css
+
images
+
index.html
创建html骨架结构#
vscode直接生成骨架（IE浏览器已经停止维护）
引入相关样式文件#
<!-- Bootstrap核心样式 -->
<link rel="stylesheet" href="/globalsrc/components/bootstrap/css/bootstrap.min.css">
书写内容#
- 直接拿Bootstrap预先定义好的样式来用
- 修改Bootstrap原来的样式，要注意权重问题
- 学好Bootstrap的关键在于知道 它定义了哪些样式，以及这些样式能实现什么样的效果
<button type="button" class="btn btn-primary">Primary</button>
<!-- 相同类名使用相同样式 -->
<div class="btn btn-primary">Primary2</div>
布局容器#
Bootstrap需要为页面内容和栅格系统包裹一个.container容器，Bootstrap预先定义好了这个类，叫.container，它提供了两个作此用处的类。
1.container类(bootstrap v3)#
- 响应式布局的容器，固定宽度
- 大屏（>=1200px）宽度定为1170px
- 中屏（>=992px）宽度定为970px
- 小屏（>=768px）宽度定为750px
- 超小屏（100%）
container-fluid类#
- 流式布局容器，百分百宽度
- 占据全部视口（viewport）的容器
- 适合于单独做移动端开发