Bootstrap 简明教程

Bootstrap Tutorial

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

Twitter Bootstrap is the most popular front end framework in the recent time. It is sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development. It uses HTML, CSS and Javascript. This tutorial will teach you the basics of Bootstrap 5 Framework using which you can create web projects with ease. The tutorial is divided into sections such as Bootstrap Basic Structure, Bootstrap Layout, Bootstrap Content, Bootstrap Components, Bootstrap Forms, Bootstrap Grids, Bootstrap Helpers, Bootstrap Utilities and Bootstrap Examples. Each of these sections contain related topics with simple and useful examples.

Why to Learn Bootstrap?

First program using Bootstrap.

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

Just to give you a little excitement about Bootstrap, I’m going to give you a small Bootstrap Program. You can edit and try running this code using *Edit & Run * option.

<!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 项目方面的专业知识达到中等水平。

This tutorial has been prepared for anyone who has a basic knowledge of HTML and CSS and has an urge to develop websites. After completing this tutorial you will find yourself at a moderate level of expertise in developing web projects using Twitter Bootstrap.

Prerequisites

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

Before you start proceeding with this tutorial, we are assuming that you are already aware about the basics of HTML and CSS. If you are not well aware of these concepts then we will suggest you to go through our short tutorials on HTML and CSS.