在上一篇文章中，我们详细讲解了如何使用 Sass 定制 Bootstrap 主题。在本篇中，我们将探索如何使用现成的 Bootstrap 主题，以快速实现美观且响应式的网站设计。

介绍 Bootstrap 主题

Bootstrap 主题是对 Bootstrap 基础样式的再创作。这些主题一般包含了修改后的样式 CSS 文件、JavaScript 文件以及一些额外的资源（如图标、图片等），可以帮助我们快速构建出具有个性化风格的网页。

获取 Bootstrap 主题

我们可以从多个资源网站获取 Bootstrap 主题，以下是一些常用的平台：

Bootstrap 官网: 访问 Bootstrap Themes 获取官方主题。
ThemeForest: 提供了广泛的商业 Bootstrap 主题。
Bootstrapious: 一个包含免费和收费主题的网站。
Start Bootstrap: 提供多种免版税的 Bootstrap 模板和主题。

安装 Bootstrap 主题

以 AdminLTE 为例，这是一款流行的 Bootstrap 管理面板主题。我们将演示如何快速集成这个主题。

步骤 1: 下载主题

首先，访问 AdminLTE 官网，下载主题包。解压之后，你将看到类似的文件夹结构：

AdminLTE-3.1.0/
├── index.html
├── dist/
│   ├── css/
│   ├── js/
│   └── img/
└── plugins/

步骤 2: 引入 CSS 和 JS 文件

在我们的 HTML 文件中，需要引入主题的 CSS 和 JavaScript 文件。下面是一个简单的模板：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>使用 Bootstrap 主题</title>
    
    <!-- 引入 Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <!-- 引入 AdminLTE CSS -->
    <link rel="stylesheet" href="dist/css/adminlte.min.css">
</head>
<body>

    <div class="wrapper">
        <!-- 内容 -->
        <div class="content-wrapper">
            <section class="content">
                <div class="container-fluid">
                    <h1>欢迎使用 AdminLTE</h1>
                    <p>这是一个示例页面，展示如何使用 AdminLTE 主题。</p>
                </div>
            </section>
        </div>
    </div>

    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.4.4/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <!-- AdminLTE JS -->
    <script src="dist/js/adminlte.min.js"></script>
</body>
</html>

步骤 3: 修改主题

你可以根据需求对主题进行进一步定制，比如调整配色、字体、边距等。这可以通过直接修改 dist/css/adminlte.min.css 或编写自定义 CSS 文件来实现。

自定义 CSS 示例

/* custom.css */
body {
    background-color: #f4f6f9;
}

.content-wrapper {
    padding: 20px;
    border-radius: 5px;
    background-color: #fff;
}

然后在HTML中引入自定义的 CSS 文件：

<link rel="stylesheet" href="path/to/your/custom.css">

其他主题应用示例

除了 AdminLTE，许多其他 Bootstrap 主题能够快速上手。例如，Bootswatch 提供了多种风格的免费主题，只需更改 Bootstrap 的 bootstrap.min.css 文件为 Bootswatch 提供的主题 CSS 文件即可。

以下是使用 Bootswatch 主题的示例：

<!-- Bootswatch - Sandstone -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootswatch/4.5.2/sandstone/bootstrap.min.css">

结论

通过使用现成的 Bootstrap 主题，我们可以在短时间内创建出具有现代感和响应式特性的网页，同时节省了设计和编码的时间。选择合适的主题，并根据需要进行适当的定制，可以使我们的项目更具吸引力。

在下篇文章中，我们将深入探讨如何使用 Bootstrap 的自定义组件和布局，帮助你更灵活地使用 Bootstrap 框架。

Jupyter AI

17 Bootstrap 定制主题之使用 Bootstrap 主题