bootstrap

1.BootStrap概述.

1.1何为BootStrap.

Bootstrap是一个用于快速开发Web应用程序和网站的前端框架，它是在2011年由美国Twitter公司(和微博性质一样的)的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架。

总结：Bootstrap是基于HTML、CSS、JavaScript 开发的，并且时下非常流行的一种用于前端开发的框架技术(其实：Bootstrap就是一个样式代码库，用来设置样式的)。

注，BootStrap目前已经更新到 v5.3版本(2023年4月11日)。

---

1.2为什么要使用Bootstrap.

1.2.1移动设备优先.

自Bootstrap3起，框架包含了贯穿于整个库的移动设备优先样式。

---

1.2.2浏览器支持.

该特点我们称之为跨浏览器，几乎所有的浏览器都支持Bootstrap，因为Bootstrap对不同浏览器的兼容性特别强，如果你想要做出一个跨浏览器的web项目，那么Bootstrap将会是你最好的选择。

---

1.2.3容易上手.

只要具备HTML和CSS的基础知识，就可以学习Bootstrap，没有很复杂的逻辑。

---

1.2.4响应式设计.

Bootstrap的响应式CSS能够自适应于台式电脑、平板电脑和手机；

何为响应式？就是一个网站能够兼容多个终端(PC&移动)—而不是为每个终端做一个特定的版本，响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验；

演示响应式效果：BootStrap官网。

响应式网页设计技术的意义：同一个网站不用专门为不用的终端开发对应的版本，网站加入响应式可以在不同的终端上完美运行。

---

2.BootStrap环境搭建.

添加 BootStrap相关文件库："bootstrap-5.0.2" 文件夹到项目 js 目录；

在页面引入 jQuery库：<script type="text/javascript" src="js/jquery-3.3.1.js"></script>；

在页面引入BootStrap的js库：<script type="text/javascript" src="js/bootstrap-4.6.1/dist/js/bootstrap.js"></script>；

在head里面引入 BootStrap 样式库：<link rel="stylesheet" type="text/css" href="js/bootstrap-4.6.1/dist/css/bootstrap.css"/>；

注意引入文件先后顺序。

---

---