当前位置:首页 » 《休闲阅读》 » 正文

前端必知必会-Bootstrap5入门

25 人参与  2024年10月26日 10:40  分类 : 《休闲阅读》  评论

点击全文阅读


文章目录

Bootstrap 5 入门什么是 Bootstrap?什么是响应式 Web 设计?Bootstrap 版本为什么要使用 Bootstrap?在哪里可以获取 Bootstrap 5?JavaScript?下载 Bootstrap 5使用 Bootstrap 5 创建您的第一个网页1. 添加 HTML5 文档类型2. Bootstrap 5 是移动优先的3. 容器 两个基本 Bootstrap 5 页面 总结


Bootstrap 5 入门

什么是 Bootstrap?

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

什么是响应式 Web 设计?

响应式 Web 设计是指创建可自动调整的网站,使其在所有设备(从小型手机到大型台式机)上都能显示良好。

Bootstrap 5 示例

<div class="container-fluid p-5 bg-primary text-white text-center"> <h1>我的第一个 Bootstrap 页面</h1> <p>调整此响应页面的大小以查看效果!</p> </div> <div class="container mt-5">  <div class="row">   <div class="col-sm-4">    <h3>Column 1</h3>     <p>Lorem ipsum dolor sat amet, tur adipisicing elit...</p>     <p>Ut enim ad minim veniam,quis nostrud exeritation ullamco labouris...</p>    </div>     <div class="col-sm-4">      <h3>Column 2</h3>      <p>Lorem ipsum dolor sat 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>

Bootstrap 版本

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

Bootstrap 5 支持所有主流浏览器和平台的最新稳定版本。但是,不支持 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 5 与所有现代浏览器兼容(Chrome、Firefox、Edge、Safari 和 Opera)。请注意,如果您需要支持 IE11 及以下版本,则必须使用 BS4 或 BS3。

在哪里可以获取 Bootstrap 5?

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

您可以:

从 CDN 包含 Bootstrap 5
从 getbootstrap.com 下载 Bootstrap 5

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

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

MaxCDN:

<!-- 最新编译和压缩的 CSS --><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"><!-- 最新编译的 JavaScript --><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/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 使用需要 HTML5 文档类型的 HTML 元素和 CSS 属性。

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

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

2. Bootstrap 5 是移动优先的

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

为确保正确呈现和触摸缩放,请在 <head> 元素内添加以下 <meta> 标记:

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

width=device-width 部分设置页面宽度以遵循设备的屏幕宽度(这将根据设备而有所不同)。

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

3. 容器

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

有两种容器类可供选择:

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

两个基本 Bootstrap 5 页面

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

容器示例

<!DOCTYPE html><html lang="en"><head><title>Bootstrap 示例</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>我的第一个 Bootstrap 页面</h1><p>此部分位于 .container 类中。</p><p>.container 类提供响应式固定宽度容器。</p></div></body></html>

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

容器流体示例

<!DOCTYPE html><html lang="en"><head><title>Bootstrap 示例</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>我的第一个 Bootstrap 页面</h1><p>此部分位于 .container-fluid 类内。</p><p>.container-fluid 类提供全宽容器,横跨视口的整个宽度。</p></div></body></html>

总结

本文介绍了Bootstrap5入门,如有问题欢迎私信和评论


点击全文阅读


本文链接:http://zhangshiyu.com/post/177864.html

<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

关于我们 | 我要投稿 | 免责申明

Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1