首页 > 编程笔记 > 通用技能 阅读：1

Bootstrap下载和安装教程（附带实例）

Bootstrap 是由 Twitter 设计师 Mark Otto 与 Jacob Thornton 于 2011 年开源发布的前端框架，旨在让开发者“写更少代码，做更多页面”。

Bootstrap 以 HTML、CSS 为基础，配合 JavaScript 插件，提供响应式网格、按钮、表单、导航、模态框等现成组件，一次编写即可在手机、平板、桌面端自动适配，是目前 GitHub Star 数最高的 CSS 框架之一。

Bootstrap 框架完全免费，核心特性包括移动优先的流式栅格、Sass 变量与 mixin、按需引入的组件和插件、主题定制系统，以及详尽的官方文档。

Bootstrap 的使用非常灵活，开发者既可直接引用编译好的 CDN 文件快速上线，也能基于源码变量自定义主题色、圆角、阴影，生成专属设计系统，保持品牌一致性。

Bootstrap 的使用场景覆盖企业官网、管理后台、营销落地页、数据可视化大屏等。与 Vue、React、Angular 结合时，只需安装对应封装组件库即可无缝使用 Bootstrap 样式；Java 后端可借助 Spring Boot 的 spring-webmvc 自动集成静态资源，前后端并行开发效率显著提升。

下载Bootstrap

这里为大家提供了 Bootstrap 最新版的安装包：

网盘下载：https://pan.quark.cn/s/e0f26aab40e1

网盘里提供了编译好的和源代码形式的 Bootstrap 压缩包。

安装Bootstrap

1) 下载已编译版的 bootstrap-5.3.8-dist.zip 压缩包，解压后的文件夹如下图所示：


2) 将此文件夹放在你的网站目录，例如 static 目录下，考虑书写的时候简单，避免输错，建议将文件夹的名字手动调整为 bootstrap。

3) 在你的网页<head> </head>之间，添加： 
<meta name="viewport" content="width=device-width, initial-scale=1">
和： 
<link href="xxx/bootstrap/css/bootstrap.min.css" >

4) 在网页中添加 <script src="xxx/bootstrap.bundle.min.js" ></script>，注意要将路径修改正确。

下面是一个 Bootstrap5 开发的简易模板，使用的 bootstrap5 编译版： 
<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="./bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Bootstrap使用实例</h1>
   <div class="text-center text-success fs-1">看到我居中，颜色绿色表示起作用了！</div>

    <script src="./bootstrap/js/bootstrap.bundle.min.js" ></script>
  </body>
</html>
将上述 HTML 代码保存到名为 test.html 的文件里，将其和 bootstrap 文件夹放在一起，例如我直接将它们放在桌面上：


打开 test.html，可以看到下图的效果：

相关文章