Bootstrap怎么搭建？导进JS项目？怎么用？是什么？（前端开发框架）

左手的ㄟ右手 2024-03-23 09:56 8阅读 0赞

## Bootstrap 基本介绍 ##

### 概述 ###

*  Bootstrap4是一套用于HTML、CSS、JavaScript的开源工具集，它简洁灵活，使得web开发更加的便捷.
 *  Bootstrap 由 Mark Otto 和 Jacob Thornton 在 **Twitter公司** 上开发，并于 **2011** 年 8 月 在 GitHub 上作为开源产品发布。

> **概述: Bootstrap是一个建立一个页面,就可以在3三个终端(PC端、平板、手机)上完美展示的响应式前端框架**

**Bootstrap 更易于使用、响应功能等**

### Bootstrap 三大核心 ###

*  **基本CSS**
    
     *  设置全局的CSS样式，基本的HTML元素均可以通过class设置样式并得到增强效果；还有先进的栅格系统；
 *  **组件**
    
     *  无数可以复用的组件，包括字体图标、下拉菜单、导航、警告条、弹出框等更多功能；
 *  **JS插件**
    
     *  Bootstrap自带了13个jQuery插件，这些插件为Bootstrap中的组件赋予了“生命”。
 *  **其它**
    
     *  **基本结构**：Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。
     *  **定制**：您可以定制Bootstrap的组件、LESS 变量和jQuery 插件来得到您自己的版本。

### 怎么去搭建？ ###

1.  首先我们要去下载[**bootstrap库**][bootstrap]
2.  我们提前创建项目，我是用的**idea**，项目类型我是选的**bootstrap**  
    ![在这里插入图片描述][f4f3ac351f254259bc225e88eadd780a.png]  
    ，所以为了更好的效果我就把**css、js里面的文件删掉**  
    ![在这里插入图片描述][e043c7c62c91472f8eeb1da84f6feee6.png]
3.  下载好后的**bootstrap**去解压  
    ![在这里插入图片描述][a2d8e16a2f614cf88a30d5f144226764.png]  
    解压后我们双击进去后打开**dist**文件  
    ![在这里插入图片描述][0fdf53bbbfe04fbd81702a978e2a4ecb.png]
4.  进去后我们选中这两个**复制**  
    ![在这里插入图片描述][8651c62fb4494930a096a0d847f0e6a6.png]
5.  进去ieda里面**粘贴**![在这里插入图片描述][8c4b279defad4075ab20ed51bd26ef31.png]
6.  然后我们新建一个**html文件**就是导入我们的**bootstrap**，首先导入`css`然后就是`js`  
    ![在这里插入图片描述][d88dc4eb2219495eaf039a38c0e42d20.png]  
    我们导入`bootstrap`之前要先导入我们的`jQuery`的文件再导入我们的`bootstrap`文件

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>demo</title>
    </head>
    <body>
    <link href="css/bootstrap.css">
    <script src="js/jquery-3.3.1.js"></script>
    <script src="js/bootstrap.js"></script>
    </body>
    </html>

有许多功能可以参考[bootstrap API文档][bootstrap API]，里面有许多的框架可以供我们使用。

[bootstrap]: https://v4.bootcss.com/
[f4f3ac351f254259bc225e88eadd780a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/e7dfea6cbda34e8893550a15674f7f94.png
[e043c7c62c91472f8eeb1da84f6feee6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/cef41b1600964f478177090440e16746.png
[a2d8e16a2f614cf88a30d5f144226764.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/b2c4a5f7678d4777b58b7e21a3782bd5.png
[0fdf53bbbfe04fbd81702a978e2a4ecb.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/e2366bcc00b14dd1a643253de9c0263a.png
[8651c62fb4494930a096a0d847f0e6a6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/c9b6287293814c53912f463fab445dd4.png
[8c4b279defad4075ab20ed51bd26ef31.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/3ce732e3acb34159abe4c0d5a190af4d.png
[d88dc4eb2219495eaf039a38c0e42d20.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/f97d56a5710c4ea8bc44c389bd5cef1f.png
[bootstrap API]: https://v4.bootcss.com/docs/getting-started/introduction/