Bootstrap 5:开始


目录

    显示目录

什么是引导程序?

  • Bootstrap 是一个免费的前端框架,可实现更快、更轻松的 Web 开发

  • Bootstrap 包括基于 HTML 和 CSS 的设计模板,用于排版、表单、按钮、表格、导航、模态、图像轮播等,以及可选的 JavaScript 插件

  • Bootstrap 还使您能够轻松创建响应式设计

什么是响应式网页设计?

响应式网页设计是关于创建自动调整的网站 使自己在从小型手机到大型台式机的所有设备上看起来都很好。

Bootstrap 5 示例

<div class="container-fluid p-5 bg-primary text-white text-center">
  <h1>My First Bootstrap Page</h1>
  <p>Resize this responsive page to see the effect!</p>
</div>
<div class="container mt-5">
  <div class="row">
    <div class="col-sm-4">
      <h3>Column 1</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 2</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 3</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
  </div>
</div>

自己尝试一下→

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

<div class="container-fluid p-5 bg-primary text-white text-center">
  <h1>My First Bootstrap Page</h1>
  <p>Resize this responsive page to see the effect!</p> 
</div>
  
<div class="container mt-5">
  <div class="row">
    <div class="col-sm-4">
      <h3>Column 1</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 2</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 3</h3>        
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
  </div>
</div>

</body>
</html>

引导程序版本

Bootstrap 5(2021 年发布)是 Bootstrap 的最新版本 (2013 年发布);具有新的组件、更快的样式表和更高的响应能力。

Bootstrap 5 支持所有主流浏览器的最新、稳定版本 平台。但是,不支持 Internet Explorer 11 及更低版本。

Bootstrap 5 和 Bootstrap 3 & 4 之间的主要区别在于 Bootstrap 5 已改用普通 JavaScript 而不是 jQuery。

注意:团队仍支持 Bootstrap 3 和 Bootstrap 4 进行关键错误修复和文档更改, 继续使用它们是完全安全的。但是,不会添加新功能 他们。

为什么使用引导程序?

引导程序的优点:

  • 易于使用:任何只需具备 HTML 和 CSS 基础知识的人都可以开始使用 Bootstrap

  • 响应式功能:Bootstrap 的响应式 CSS 可适应手机、平板电脑和台式机

  • 移动优先方法:在 Bootstrap 中,移动优先样式是核心框架的一部分

  • 浏览器兼容性:Bootstrap 5 与所有现代浏览器(Chrome、Firefox、Edge、Safari 和 Opera)兼容。 注意,如果您需要 IE11 及以下版本的支持,则必须使用 BS4 或 BS3。

哪里可以获得 Bootstrap 5?

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

你可以:

  • 包含来自 CDN 的 Bootstrap 5

  • 从 getbootstrap.com 下载 Bootstrap 5

Bootstrap 5 CDN

如果您不想自己下载和托管 Bootstrap 5,则可以从 CDN(内容交付网络)包含它。

jsDelivr 为 Bootstrap 的 CSS 和 JavaScript 提供 CDN 支持:

最大CDN:

<!-- Latest compiled and minified CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
 
<!-- Latest compiled JavaScript -->
<script  src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>

使用 Bootstrap 5 CDN 的一个优点:
很多用户已经下载了 访问时从 jsDelivr Bootstrap 5 另一个网站。因此,当他们访问您的网站时,它将从缓存加载,从而加快加载时间。 此外,大多数 CDN 将确保一旦用户向其请求文件,就会提供该文件 从最接近他们的服务器,这也导致更快的加载时间。

JavaScript?
Bootstrap 5 将 JavaScript 用于不同的用途 组件(如模态框、工具提示、弹出框等)。但是,如果您只是使用 Bootstrap 的 CSS 部分,你不需要它们。

下载 Bootstrap 5

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

使用 Bootstrap 5 创建您的第一个网页

1.添加 HTML5 文档类型

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

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

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

2. Bootstrap 5 是移动优先

Bootstrap 5 旨在响应移动设备。移动优先的风格是 核心框架的一部分。

为了确保正确的渲染和触摸缩放,请在 <head> 元素:

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

width=device-width 部分设置页面宽度以跟随屏幕宽度 设备的名称(根据设备的不同而有所不同)。

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

3.容器

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

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

  1. .container 类提供响应式固定宽度容器

  2. .container-fluid 类提供一个全宽容器,跨越视口的整个宽度

.container
.container-fluid

两个基本 Bootstrap 5 页

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

容器示例

<!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 href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
  <h1>My First Bootstrap Page</h1>
  <p>This part is inside a .container class.</p>
  <p>The .container class provides a responsive fixed width container.</p>
</div>
</body>
</html>

自己尝试一下→

<!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 href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
  
<div class="container">
  <h1>My First Bootstrap Page</h1>
  <p>This part is inside a .container class.</p>
  <p>The .container class provides a responsive fixed width container.</p>
  <p>Resize the browser window to see that the container width will change at different breakpoints.</p>
</div>

</body>
</html>

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

容器流体示例

<!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 href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-fluid">
  <h1>My First Bootstrap Page</h1>
  <p>This part is inside a .container-fluid class.</p>
  <p>The .container-fluid class provides a full width container, spanning the entire width of the viewport.</p>
</div>
</body>
</html>

自己尝试一下→

<!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 href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
  
<div class="container-fluid">
  <h1>My First Bootstrap Page</h1>
  <p>This part is inside a .container-fluid class.</p>
  <p>The .container-fluid class provides a full width container, spanning the entire width of the viewport.</p>     
</div>

</body>
</html>