Bootstrap概述和使用

迷南。 2023-06-16 07:52 14阅读 0赞

## Bootstrap概述和使用 ##

### 1.Bootstrap概述 ###

##### 1.1Bootstrap简介 #####

Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使得 Web 开发更加快捷。它是一个 CSS/HTML 框架。Bootstrap 提供了优雅的 HTML 和 CSS规范。Bootstrap 一经推出后颇受欢迎，一直是 GitHub 上的热门开源项目。  
bootstrap 中文官网：https://www.bootcss.com/  
![在这里插入图片描述][20191125104535690.png]

##### 1.2 Bootstrap的作用 #####

1.  用于前端的开发，提⾼高开发前端效率，降低难度
2.  基于技术HTML、CSS、JavaScript

##### 1.3 Bootstrap的优势 #####

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

1.  浏览器器支持：Bootstrap⽀支持所有的主流浏览器器。如：Internet Explorer、 Firefox、 Opera、Google Chrome、Safari。

![在这里插入图片描述][2019112510472112.png]  
2. 容易易上手：只要您具备 HTML 和 CSS 的基础知识，您就可以开始学习 Bootstrap。  
3. 移动设备优先：自Bootstrap3起，框架包含了了贯穿于整个库的移动设备优先的样式。  
4. 响应式设计：Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。

### 2.Bootstrap的使用 ###

##### 2.1 Bootstrap下载 #####

下载地址：http://www.bootcss.com，下载用于生产环境的 Bootstrap即可  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbl9kYXJr_size_16_color_FFFFFF_t_70]

##### 2.2 Bootstrap包含的内容 #####

![在这里插入图片描述][20191125105227307.png]

##### 2.3 Bootstrap的目录结构 #####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbl9kYXJr_size_16_color_FFFFFF_t_70 1]  
压缩版与标准版的区别：  
![!\[在这里插入图片描述\](https://img-blog.csdnimg.cn/20191125105403659.pn][https_img-blog.csdnimg.cn_20191125105403659.pn]

##### 2.4 创建Bootstrap模板 #####

2.4.1 模板文件创建步骤

1.  将 bootstrap 中解压出来的三个文件夹：css、js、fonts 复制到工程中。
2.  将 jquery-3.2.1.min.js 复制到 js 文件夹下
3.  创建一个HTML 文件，将"起步->基本模板"中的代码复制到 HTML 中。  
    只需要创建一次，以后可以直接复制这个模板来使用

2.4.2 模板文件解释

<!DOCTYPE html>
    <html lang="zh-CN">
    <head>
    <meta charset="utf-8">
    
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <title>标题</title>
    
    <link href="css/bootstrap.min.css" rel="stylesheet">
    </head>
    <body>
    
    <script src="js/jquery-3.2.1.min.js"></script>
    
    <script src="js/bootstrap.min.js"></script>
    </body>
    </html>

[20191125104535690.png]: https://img-blog.csdnimg.cn/20191125104535690.png
[2019112510472112.png]: https://img-blog.csdnimg.cn/2019112510472112.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbl9kYXJr_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191125105149517.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbl9kYXJr,size_16,color_FFFFFF,t_70
[20191125105227307.png]: https://img-blog.csdnimg.cn/20191125105227307.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbl9kYXJr_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191125105319462.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbl9kYXJr,size_16,color_FFFFFF,t_70
[https_img-blog.csdnimg.cn_20191125105403659.pn]: https://img-blog.csdnimg.cn/20191125105424182.png