垦荒学园
  • 中文

      • Bootstrap 安装使用

      安装方式

      Bootstrap 提供多种安装和使用方式，你可以根据项目需求选择最适合的方法。

      1. CDN 方式（推荐新手）

      这是最简单快捷的方式，直接在 HTML 文件中引入 CDN 链接。

      基本模板

      <!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 href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <h1>Hello, Bootstrap!</h1>
        <p>这是一个 Bootstrap 示例页面。</p>
    </div>
    
    <!-- Bootstrap JavaScript -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

      CDN 优势

      • 无需下载文件
      • 自动获得最新版本
      • 利用 CDN 缓存加速加载
      • 适合快速原型开发

      2. 下载文件方式

      从 Bootstrap 官网下载编译好的文件到本地项目。

      下载步骤

      1. 访问 Bootstrap 官网
      2. 点击 "Download" 按钮
      3. 下载编译版本（Compiled CSS and JS）
      4. 解压文件到项目目录

      文件结构

      bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   └── bootstrap.min.css.map
└── js/
    ├── bootstrap.bundle.js
    ├── bootstrap.bundle.js.map
    ├── bootstrap.bundle.min.js
    └── bootstrap.bundle.min.js.map

      引入本地文件

      <!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 href="./bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <!-- 页面内容 -->
    
    <!-- 本地 Bootstrap JavaScript -->
    <script src="./bootstrap/js/bootstrap.bundle.min.js"></script>
</body>
</html>

      3. npm 包管理器

      适合使用构建工具的项目。

      安装命令

      npm install bootstrap

      在项目中使用

      // 引入 CSS
import 'bootstrap/dist/css/bootstrap.min.css';

// 引入 JavaScript
import 'bootstrap/dist/js/bootstrap.bundle.min.js';

      4. Yarn 包管理器

      yarn add bootstrap

      重要的 HTML 设置

      1. HTML5 文档类型

      <!DOCTYPE html>

      2. 响应式 meta 标签

      <meta name="viewport" content="width=device-width, initial-scale=1">

      这个标签确保页面在移动设备上正确显示。

      3. Box-sizing 设置

      Bootstrap 使用 box-sizing: border-box，确保元素的宽度和高度包含内边距和边框。

      完整的起始模板

      <!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 起始模板</title>
    
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    
    <!-- 自定义 CSS -->
    <style>
        body {
            padding-top: 20px;
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container">
            <a class="navbar-brand" href="#">我的网站</a>
        </div>
    </nav>
    
    <!-- 主要内容 -->
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <h1>欢迎使用 Bootstrap</h1>
                <p class="lead">这是一个使用 Bootstrap 构建的响应式网页。</p>
                <button type="button" class="btn btn-primary">开始使用</button>
            </div>
        </div>
    </div>
    
    <!-- Bootstrap JavaScript -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

      验证安装

      创建上述 HTML 文件并在浏览器中打开，如果看到：

      • 页面使用了 Bootstrap 的默认字体
      • 按钮具有 Bootstrap 样式
      • 页面在不同设备上响应式显示

      说明 Bootstrap 已成功安装和配置。

      常见问题

      1. 样式不生效

      • 检查 CSS 文件路径是否正确
      • 确保 CSS 文件在 <head> 标签中引入
      • 检查网络连接（CDN 方式）

      2. JavaScript 功能不工作

      • 确保 JavaScript 文件在 </body> 标签前引入
      • 检查浏览器控制台是否有错误信息

      3. 移动端显示异常

      • 确保包含了响应式 meta 标签
      • 检查 CSS 文件是否完整加载

      下一步

      现在你已经成功安装了 Bootstrap，接下来我们将学习 Bootstrap 的容器系统。

      下一章：Bootstrap 容器 →