Bootstrap 简明教程

Bootstrap Tutorial

Twitter Bootstrap 是近期最流行的前端框架。它是一款精巧、直观且强大的移动设备优先前端框架，可实现更快速、更简单的 Web 开发。它使用 HTML、CSS 和 Javascript。本教程将向您传授 Bootstrap 5 框架的基础知识，您可以使用它轻松创建 Web 项目。本教程分为 Bootstrap 基本结构、Bootstrap 布局、Bootstrap 内容、Bootstrap 组件、Bootstrap 表单、Bootstrap 网格、Bootstrap 帮助器、Bootstrap 实用程序和 Bootstrap 示例等部分。这些部分中的每一个都包含相关主题以及简单而有用的示例。

Why to Learn Bootstrap?

First program using Bootstrap.

为了让您对 Bootstrap 有点兴奋，我将为您提供一个小型 Bootstrap 程序。您可以使用“编辑和运行”选项编辑并尝试运行此代码。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
  </head>
  <body>
    <h1>Welcome to Tutorialspoint!</h1>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
  </body>
</html>

Audience

本教程专为具有 HTML 和 CSS 基本知识并渴望开发网站的人员编写。完成本教程后，您将在使用 Twitter Bootstrap 开发 Web 项目方面的专业知识达到中等水平。

Prerequisites

在您开始学习本教程之前，我们假定您已经了解 HTML 和 CSS 的基础知识。如果您不熟悉这些概念，那么我们建议您学习有关 HTML 和 CSS 的简短教程。