bootstrap基础教程：Bootstrap基础教程，从入门到精通

来源：网络作者：日期：2025-11-01 07:14:11

Bootstrap是一个流行的前端框架，它提供了丰富的工具和组件，帮助开发者快速构建响应式、美观的网站，本文将带你从零开始学习Bootstrap的基础知识，包括安装、核心概念、常用组件的使用以及一些实用技巧。

Bootstrap简介

Bootstrap是一个开源的前端工具包，由Twitter开发并于2011年首次发布，它基于HTML、CSS和JavaScript，提供了大量预定义的样式和组件，能够快速构建响应式网站,Bootstrap的核心特点是：

响应式设计：适配各种设备（桌面、平板、手机）。
组件丰富：提供导航栏、按钮、卡片、模态框等常用组件。
易于定制：可以通过SASS变量或自定义CSS进行个性化修改。

安装Bootstrap

使用Bootstrap非常简单,主要有两种方式：

使用CDN（推荐）

在HTML文件的<head>标签中引入Bootstrap的CSS和JS文件：

bootstrap基础教程：Bootstrap基础教程，从入门到精通

<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap JS Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

使用npm或yarn

如果你使用前端构建工具,可以通过npm或yarn安装Bootstrap：

npm install bootstrap

然后在项目中引入：

<link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.min.css">
<script src="/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>

核心概念

网格系统

Bootstrap的网格系统是响应式设计的核心，它将页面分为12列,每列可以自适应不同屏幕宽度。

bootstrap基础教程：Bootstrap基础教程，从入门到精通

<div class="container">
  <div class="row">
    <div class="col-md-4">第一列</div>
    <div class="col-md-4">第二列</div>
    <div class="col-md-4">第三列</div>
  </div>
</div>

col-md-4表示在中等屏幕（md）上占4列宽度。
常见的断点有：sm（小屏幕）、md（中等屏幕）、lg（大屏幕）、xl（超大屏幕）。

布局工具

Bootstrap提供了多种布局工具，如container、row、col等,用于构建页面结构。

<div class="container">
  <div class="row">
    <div class="col-12">
      <h1>欢迎使用Bootstrap</h1>
    </div>
  </div>
</div>

组件

Bootstrap提供了丰富的组件，如导航栏、按钮、卡片、模态框等。

示例：导航栏

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Features</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Pricing</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

示例：按钮

<button class="btn btn-primary">Primary Button</button>
<button class="btn btn-secondary">Secondary Button</button>
<button class="btn btn-success">Success Button</button>

常用组件

卡片（Card）

卡片组件用于展示内容块，常用于博客、产品展示等。

bootstrap基础教程：Bootstrap基础教程，从入门到精通

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card Title</h5>
    <p class="card-text">Some example text.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

模态框（Modal）

模态框用于显示弹出窗口，常用于登录、确认操作等。

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

表单

Bootstrap提供了美观的表单样式,简化了表单开发。

<form>
  <div class="mb-3">
    <label for="exampleInputEmail1" class="form-label">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
    <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
  </div>
  <div class="mb-3">
    <label for="exampleInputPassword1" class="form-label">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1">
  </div>
  <div class="form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1">Check me out</label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>