码农教程 - 一技在手,衣食无忧! tools

Bootstrap 开始使用

❮ 上一节 下一节 ❯

什么是Bootstrap？

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

什么是响应式网页设计？

响应式网页设计是指创建能够自动调整自身以在从小型手机到大型台式机的所有设备上看起来良好的网站。

Bootstrap 示例

<div class="jumbotron text-center">
  <h1>My First Bootstrap Page</h1>
  <p>Resize this responsive page to see the effect!</p>
</div>

<div class="container">
  <div class="row">
    <div class="col-sm-4">
      <h3>Column 1</h3>
      <p>Lorem ipsum dolor..</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 2</h3>
      <p>Lorem ipsum dolor..</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 3</h3>
      <p>Lorem ipsum dolor..</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版本

本教程如下Bootstrap3，于 2013 年发布。不过，我们也涵盖较新的版本；Bootstrap 4（2018 年发布）和Bootstrap 5（2021 年发布）。

Bootstrap5是最新版本的Bootstrap;具有新的组件、更快的样式表、更快的响应能力等。它支持所有主要浏览器和平台的最新、稳定版本。但是，不支持 Internet Explorer 11 及更低版本。

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

笔记：Bootstrap3并且 Bootstrap 4 仍然受到团队的支持，以进行关键的错误修复和文档更改，并且继续使用它们是完全安全的。但是，不会向其中添加新功能。

哪里可以获得Bootstrap？

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

你可以：

  • 从 getbootstrap.com 下载 Bootstrap
  • 包含来自 CDN 的 Bootstrap

下载Bootstrap

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

BootstrapCDN

如果您不想自己下载和托管 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.7.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类提供了一个全宽容器，跨越视口的整个宽度
。容器
.容器流体

两个基本Bootstrap页面

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

示例

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</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.7.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>My First Bootstrap Page</h1>
  <p>This is some text.</p>
</div>

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

以下示例显示了基本 Bootstrap 页面的代码（带有全宽容器）：

示例

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</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.7.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>My First Bootstrap Page</h1>
  <p>This is some text.</p>
</div>

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

❮ 上一节 下一节 ❯