最适合网络开发者的网站
适合初学者的 Bootstrap 教程。W3Schools 英文版

尿素

引导 立即开始


什么是 Bootstrap?

  • Bootstrap 是一个免费的前端框架,可实现更快、更轻松的 Web 开发
  • Bootstrap 包括基于 HTML 和 CSS 的设计模板,用于排版、表单、按钮、表格、导航、模式、图像轮播等,以及可选的 JavaScript 插件
  • Bootstrap 还使您能够轻松创建响应式设计

什么是响应式网页设计?

响应式网页设计是指创建能够自动调整以在所有设备(从小型手机到大型台式机)上显示美观的网站。

Bootstrap 示例

<div class="jumbotron text-center">
<h1>我的第一个 Bootstrap 页面</h1>
<p>调整此响应页面的大小来查看效果!</p>
</div>

<div class="container">
  <div class="row">
    <div class="col-sm-4">
<h3>第 1 列</h3>
<p>Lorem ipsum 痛苦..</p>
    </div>
    <div class="col-sm-4">
<h3>第 2 列</h3>
<p>Lorem ipsum 痛苦..</p>
    </div>
    <div class="col-sm-4">
<h3>第 3 列</h3>
<p>Lorem ipsum 痛苦..</p>
    </div>
  </div>
</div>
亲自尝试 »

Bootstrap 历史

Bootstrap 由 Twitter 的 Mark Otto 和 Jacob Thornton 开发,并于 2011 年 8 月在 GitHub 上作为开源产品发布。

2014 年 6 月,Bootstrap 成为 GitHub 上排名第一的项目!


为什么使用 Bootstrap?

Bootstrap 的优点:

  • 便于使用: 任何仅具有 HTML 和 CSS 基础知识的人都可以开始使用 Bootstrap
  • 响应功能: Bootstrap 的响应式 CSS 可适应手机、平板电脑和台式机
  • 移动优先方法: 在 Bootstrap 3 中,移动优先样式是核心框架的一部分
  • 浏览器兼容性: Bootstrap 与所有现代浏览器兼容(Chrome、Firefox、Internet Explorer、Edge、Safari 和 Opera)

Bootstrap 版本

本教程遵循 Bootstrap 3,于 2013 年发布。但是,我们也涵盖了较新的版本; Bootstrap 4(2018 年发布)Bootstrap 5(2021 年发布).

Bootstrap 5 是最新版本的引导;具有新组件、更快的样式表、更灵敏等。它支持所有主流浏览器和平台的最新稳定版本。但是,不支持 Internet Explorer 11 及以下版本。

Bootstrap 5 与 Bootstrap 3 & 4 之间的主要区别在于,Bootstrap 5 已切换到 JavaScript 代替jQuery.

笔记: Bootstrap 3 并且 Bootstrap 4 仍由团队提供支持,包括关键错误修复和文档更改,继续使用它们是完全安全的。但是,不会向其中添加新功能。

在哪里可以获取 Bootstrap?

有两种方法可以开始在您自己的网站上使用 Bootstrap。

你可以:


下载 Bootstrap

如果你想自己下载并托管 Bootstrap,请访问 getbootstrap.com,并按照那里的说明进行操作。


Bootstrap CDN

如果您不想自己下载和托管 Bootstrap,您可以从 CDN(内容分发网络)中引入它。

MaxCDN 为 Bootstrap 的 CSS 和 JavaScript 提供 CDN 支持。您还必须包含 jQuery:

最大CDN:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

使用 Bootstrap CDN 的一个优点:
许多用户在访问其他网站时已经从 MaxCDN 下载了 Bootstrap。因此,当他们访问您的网站时,它将从缓存中加载,从而缩短加载时间。此外,大多数 CDN 都会确保一旦用户从中请求文件,它将从最靠近他们的服务器提供,这也会缩短加载时间。

jQuery
Bootstrap 用途 jQuery 用于 JavaScript 插件(如模式、工具提示等)。但是,如果您只使用 Bootstrap 的 CSS 部分,则不需要 jQuery。


使用 Bootstrap 创建第一个网页

1. 添加 HTML5 文档类型

Bootstrap 使用需要 HTML5 文档类型的 HTML 元素和 CSS 属性。

始终在页面开头包含 HTML5 文档类型,以及 lang 属性和正确的字符集:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
  </head>
</html>

2. Bootstrap 3 是移动优先的

Bootstrap 3 的设计旨在响应移动设备。移动优先样式是核心框架的一部分。

为了确保正确渲染和触摸缩放,请添加以下内容 <meta> 标签内的<head> 元素:

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

width=device-width 部分设置页面的宽度以跟随设备的屏幕宽度(这将根据设备而变化)。

initial-scale=1 部分设置浏览器首次加载页面时的初始缩放级别。

3.容器

Bootstrap 还需要一个包含元素来包装网站内容。

有两种容器类别可供选择:

  1. .container 类提供了一个响应固定宽度容器
  2. .container-fluid 类提供了一个全宽容器,覆盖视口的整个宽度
。容器
.container-fluid

两个基本的 Bootstrap 页面

以下示例显示了基本 Bootstrap 页面(具有响应式固定宽度容器)的代码:

例子

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 示例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
<h1>我的第一个 Bootstrap 页面</h1>
<p>这是一些文本。</p>
</div>

</body>
</html>
亲自尝试 »

以下示例显示了基本 Bootstrap 页面(带有全宽容器)的代码:

例子

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 示例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container-fluid">
<h1>我的第一个 Bootstrap 页面</h1>
<p>这是一些文本。</p>
</div>

</body>
</html>
亲自尝试 »