Bootstrap

一.Bootstrap简介

什么是Bootstrap?

Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。

为什么使用Bootstrap?

1. 快速开发：Bootstrap 提供了一套预设的CSS样式和JavaScript组件，如网格系统、按钮、表单控件、导航栏、警告框等，这使得开发者能够快速搭建页面布局和功能，无需从零开始编写基础样式和脚本。
2. 响应式设计：Bootstrap 基于移动优先的理念设计，这意味着它默认支持各种设备的屏幕尺寸，从手机到平板再到桌面显示器，都能自动适配，大大简化了响应式网页设计的复杂度。
3. 一致性：使用Bootstrap可以确保网站或应用的界面元素在不同页面间保持一致的外观和交互体验，这对于提升用户体验至关重要。
4. 易于学习和使用：Bootstrap 文档齐全，提供了丰富的示例和教程，即便是前端开发的新手也能快速上手，减少学习成本。
5. 定制性：Bootstrap 提供了一个定制工具，允许开发者根据项目需求选择和下载所需的组件和JavaScript插件，甚至可以自定义颜色、字体等，以符合品牌风格。
6. 社区支持：作为一个成熟且流行的框架，Bootstrap拥有庞大的开发者社区，这意味着你可以很容易地找到问题解答、插件、主题和第三方资源。
7. 持续更新：Bootstrap团队不断维护和更新框架，确保其与最新的技术和浏览器兼容，同时引入新的特性和优化现有功能。

二、Bootstrap 环境安装

下载 Bootstrap

可以从(https://www.bootcss.com/)上下载 Bootstrap 的最新版本

当您下载了 Bootstrap 的已编译的版本，解压缩 ZIP 文件，您将看到下面的文件/目录结构：

bootstrap/
├── css/
│ ├── bootstrap-grid.css
│ ├── bootstrap-grid.css.map
│ ├── bootstrap-grid.min.css
│ ├── bootstrap-grid.min.css.map
│ ├── bootstrap-grid.rtl.css
│ ├── bootstrap-grid.rtl.css.map
│ ├── bootstrap-grid.rtl.min.css
│ ├── bootstrap-grid.rtl.min.css.map
│ ├── bootstrap-reboot.css
│ ├── bootstrap-reboot.css.map
│ ├── bootstrap-reboot.min.css
│ ├── bootstrap-reboot.min.css.map
│ ├── bootstrap-reboot.rtl.css
│ ├── bootstrap-reboot.rtl.css.map
│ ├── bootstrap-reboot.rtl.min.css
│ ├── bootstrap-reboot.rtl.min.css.map
│ ├── bootstrap-utilities.css
│ ├── bootstrap-utilities.css.map
│ ├── bootstrap-utilities.min.css
│ ├── bootstrap-utilities.min.css.map
│ ├── bootstrap-utilities.rtl.css
│ ├── bootstrap-utilities.rtl.css.map
│ ├── bootstrap-utilities.rtl.min.css
│ ├── bootstrap-utilities.rtl.min.css.map
│ ├── bootstrap.css
│ ├── bootstrap.css.map

│ ├── $\textcolor{red}{bootstrap.min.css} $
│ ├── bootstrap.min.css.map
│ ├── bootstrap.rtl.css
│ ├── bootstrap.rtl.css.map
│ ├── bootstrap.rtl.min.css
│ └── bootstrap.rtl.min.css.map
└── js/
├── bootstrap.bundle.js
├── bootstrap.bundle.js.map
├── bootstrap.bundle.min.js
├── bootstrap.bundle.min.js.map
├── bootstrap.esm.js
├── bootstrap.esm.js.map
├── bootstrap.esm.min.js
├── bootstrap.esm.min.js.map
├── bootstrap.js
├── bootstrap.js.map
├── $\textcolor{red}{bootstrap.min.js} $
└── bootstrap.min.js.map

下载jQuery

从(https://jquery.com/)下载

Staticfile CDN 推荐

<!-- 新 Bootstrap 核心 CSS 文件 --><link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 --><script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> 
<!-- 最新的 Bootstrap 核心 JavaScript 文件 --> 
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

三.Bootstrap使用？