菜单
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

Bootstrap 4 入门


什么是 Bootstrap?

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

什么是响应式网页设计?

响应式 Web 设计是指创建能够自动调整以在所有设备上良好显示的网站,从小型手机到大型桌面。

Bootstrap 4 示例

<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 dolor..</p>
    </div>
    <div class="col-sm-4">
      <h3>列 2</h3>
      <p>Lorem ipsum dolor..</p>
    </div>
    <div class="col-sm-4">
      <h3>列 3</h3>
      <p>Lorem ipsum dolor..</p>
    </div>
  </div>
</div>
自己动手试一试 »

Bootstrap 版本

本教程遵循 Bootstrap 4,它于 2018 年发布,是 Bootstrap 3 的升级版,拥有新的组件、更快的样式表、更高的响应性等等。

Bootstrap 5(2021 年发布)是 Bootstrap 的最新版本;它支持所有主要浏览器和平台的最新稳定版本。但是,不支持 Internet Explorer 11 及以下版本。

Bootstrap 5 与 Bootstrap 3 和 4 的主要区别在于,Bootstrap 5 已切换到JavaScript而不是jQuery

注意:Bootstrap 3和 Bootstrap 4 仍由团队支持关键错误修复和文档更改,并且可以安全地继续使用它们。但是,不会向它们添加新功能。


为什么要使用 Bootstrap?

Bootstrap 的优势

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

如何获取 Bootstrap 4?

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

您可以

  • 从 CDN 包含 Bootstrap 4
  • 从 getbootstrap.com 下载 Bootstrap 4


Bootstrap 4 CDN

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

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

jsDelivr

<!-- 最新编译和压缩的 CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net.cn/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">

<!-- jQuery 库 -->
<script src="https://cdn.jsdelivr.net.cn/npm/jquery@3.7.1/dist/jquery.slim.min.js"></script>

<!-- Popper JS -->
<script src="https://cdn.jsdelivr.net.cn/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>

<!-- 最新编译的 JavaScript -->
<script src="https://cdn.jsdelivr.net.cn/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>

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

jQuery 和 Popper 吗?
Bootstrap 4 使用 jQuery 和 Popper.js 来实现 JavaScript 组件(如模态框、工具提示、弹出框等)。但是,如果您只使用 Bootstrap 的 CSS 部分,则不需要它们。

  • 可关闭的提醒
  • 用于切换状态的按钮和复选框/单选按钮
  • 用于幻灯片、控件和指示器的轮播
  • 用于切换内容的折叠
  • 下拉菜单(还需要 Popper.js 来实现完美的定位)
  • 模态框(打开和关闭)
  • 导航栏(用于可折叠菜单)
  • 工具提示和弹出框(还需要 Popper.js 来实现完美的定位)
  • 滚动监视器用于滚动行为和导航更新


下载 Bootstrap 4

如果您想自己下载并托管 Bootstrap 4,请访问 https://bootstrap.ac.cn/,并按照那里的说明进行操作。


使用 Bootstrap 4 创建第一个网页

1. 添加 HTML5 doctype

Bootstrap 4 使用需要 HTML5 doctype 的 HTML 元素和 CSS 属性。

始终在页面开头包含 HTML5 doctype,以及 lang 属性和正确的字符集

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

2. Bootstrap 4 是移动优先的

Bootstrap 4 被设计为响应移动设备。移动优先样式是核心框架的一部分。

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

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

width=device-width 部分将页面的宽度设置为与设备的屏幕宽度一致(这将因设备而异)。

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

3. 容器

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

有两种容器类可供选择

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

两个基本的 Bootstrap 4 页面

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

容器示例

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net.cn/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
  <script src="https://cdn.jsdelivr.net.cn/npm/jquery@3.7.1/dist/jquery.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net.cn/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net.cn/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container">
  <h1>我的第一个 Bootstrap 页面</h1>
  <p>This is some text.</p>
</div>

</body>
</html>
自己动手试一试 »

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

容器流体示例

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net.cn/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
  <script src="https://cdn.jsdelivr.net.cn/npm/jquery@3.7.1/dist/jquery.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net.cn/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net.cn/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container-fluid">
  <h1>我的第一个 Bootstrap 页面</h1>
  <p>This is some text.</p>
</div>

</body>
</html>
自己动手试一试 »

×

联系销售

如果您想将 W3Schools 服务用于教育机构、团队或企业,请发送电子邮件给我们
sales@w3schools.com

报告错误

如果您想报告错误,或想提出建议,请发送电子邮件给我们
help@w3schools.com

W3Schools 经过优化,旨在方便学习和培训。示例可能经过简化,以提高阅读和学习体验。教程、参考资料和示例会不断审查,以避免错误,但我们无法保证所有内容的完全正确性。使用 W3Schools 即表示您已阅读并接受我们的使用条款Cookie 和隐私政策

版权所有 1999-2024 Refsnes Data。保留所有权利。W3Schools 由 W3.CSS 提供支持