Bootstrap5 安装使用

最新推荐文章于 2024-05-05 02:46:21 发布
最新推荐文章于 2024-05-05 02:46:21 发布
阅读量941 收藏
点赞数
文章标签： javascript 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/T0620514/article/details/128060269
版权

我们可以通过以下两种方式来安装 Bootstrap5：

Bootstrap 5 CDN

国内推荐使用 Staticfile CDN 上的库：

Bootstrap5 CDN

<!-- 新 Bootstrap5 核心 CSS 文件 --> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css"> <!-- popper.min.js 用于弹窗、提示、下拉菜单 --> <script src="https://cdn.staticfile.org/popper.js/2.9.3/umd/popper.min.js"></script> <!-- 最新的 Bootstrap5 核心 JavaScript 文件 --> <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.min.js"></script>

注意：popper.min.js 用于设置弹窗、提示、下拉菜单。

bootstrap.bundle.js （未压缩版）或 bootstrap.bundle.min.js（压缩版） 包含了捆绑的插件如 popper.min.js 及其他依赖脚本，所以我们也可以直接使用以下代码：

Bootstrap5 CDN

<!-- 新 Bootstrap5 核心 CSS 文件 --> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css"> <!-- 最新的 Bootstrap5 核心 JavaScript 文件 --> <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>

此外，你还可以使用以下的 CDN 服务：

下载 Bootstrap 5

你可以去官网 Bootstrap · The most popular HTML, CSS, and JS library in the world. 下载 Bootstrap5 资源库。

注：此外你还可以通过包的管理工具 npm、 yarn、gem、 composer 等来安装：

npm install bootstrap
yarn add bootstrap
gem install bootstrap -v 5.1.1
composer require twbs/bootstrap:5.1.1

创建第一个 Bootstrap 5 页面

1、添加 HTML5 doctype

Bootstrap 要求使用 HTML5 文件类型，所以需要添加 HTML5 doctype 声明。

HTML5 doctype 在文档头部声明，并设置对应编码:

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

移动设备优先

为了让 Bootstrap 开发的网站对移动设备友好，确保适当的绘制和触屏缩放，需要在网页的 head 之中添加 viewport meta 标签，如下所示：

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

width=device-width 表示宽度是设备屏幕的宽度。

initial-scale=1 表示初始的缩放比例。

容器类

Bootstrap 5 需要一个容器元素来包裹网站的内容。

我们可以使用以下两个容器类：

  • .container 类用于固定宽度并支持响应式布局的容器。
  • .container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。

两个 Bootstrap 5 页面

Bootstrap5 .container 实例

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


尝试一下 »

以下实例展示了占据全部视口（viewport）的容器。

Bootstrap5 .container-fluid 实例

<div class="container-fluid"> <h1>我的第一个 Bootstrap 页面</h1> <p>使用了 .container-fluid，100% 宽度，占据全部视口（viewport）的容器。</p> </div>


尝试一下 »

 

T0620514
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
用python，Bootstrap5 ,html,css,js做一个漂亮的个人网页的源代码
weixin_42576410的博客
12-23 376
<p>好的，为了使用 Python、Bootstrap5、HTML、CSS 和 JS 创建一个漂亮的个人网页，您可以按照以下步骤操作：</p> <ol> <li>准备工作：</li> </ol> <ul> <li>安装 Python。如果您的计算机上没有安装 Python，请到 Python 官网下载并...
bootstrap4安装使用
weixin_45116096的博客
07-09 686
Bootstrap4 安装使用 我们可以通过以下两种方式来安装 Bootstrap4： 使用 Bootstrap 4 CDN。 从官网 getbootstrap.com 下载 Bootstrap 4。 Bootstrap 4 CDN 国内推荐使用 Staticfile CDN 上的库： Bootstrap4 CDN <!-- 新 Bootstrap4 核心 CSS 文件 --> <link rel="stylesheet" href="https://cdn.staticfile.o
webpack-bootstrap5-boilerplate:使用Bootstrap 5启用Webpack的项目的基本模板
05-21
Bootstrap 5 + Webpack样板 使用Bootstrap 5启用Webpack的Web项目的基本模板。 基于： : 许可证：麻省理工学院。 包括 Bootstrap 5 ， Webpack v4 支持ES6语法（ Babel 7 ） ESLint ，漂亮，特塞尔 安装 克隆仓库 运行npm install 发展 $ npm run dev 开启localhost：8080 建造 $ npm run build 部署 部署到GitHub上的gh-pages分支。 $ npm run deploy
二进制安装部署高可用集群K8S部署v1.20.6版本
qq_759035366的博客
07-15 546
二进制方法安装K8S集群 CN 为 system:kube-controller-manager、O 为 system:kube-controller-manager，kubernetes 内置的 ClusterRoleBindings system:kube-controller-manager 赋予 kube-controller-manager 工作所需的权限。(一般是 kube-apiserver 指定的 service-cluster-ip-range 网段的第一个IP，如 10.255.0.1)
2024年Web前端最全最新版Bootstrap5教程——Bootstrap5基础，2024年前端常见面试题
最新发布
2401_84412953的博客
05-05 631
（2）不再依赖jQuery。当然，这里说的不再依赖是说jQuery不再是必须的，如果你需要jQuery，依然可以单独引入，另外单独引入的话你还可以直接使用最新版本的jQuery，而不是Bootstrap配套的版本。如果你很在意软件包大小，完全可以将bootstrap.min.css和bootstrap.bundle.min.js提取出来，总共不到100k，目前没发现任何问题。（4）增加了很多组件，现在基本上设计网页的常用组件都能找到了，网页设计变得不要太轻松了，简单复制、粘贴、修改以下文字，拼凑起来即可。
Linux下Chelsio T5调试方法
masterbee的博客
02-15 1801
T5是Chelsio的网络芯片，具体的硬件参数可以参考《Chelsio T5 HW Debug Guide V1.02.pdf》文档，如有需要请留言留下你的邮箱，我发给你。 现在我们着重讲述它在Linux下的的相关调试方法。 T5的调试分为2步： T5芯片firmware的烧录。 T5芯片在Linux下的驱动调试。 我的调试环境为： CPU：Intel Xeon E5-2648L ...
Linux入门
qq_43568982的博客
03-24 283
开始时间：2022-03-11 课程链接：动力节点 linux简介 一种开源的、免费的操作系统，安装在计算机硬件上、用来管理计算机的硬件和软件资源的系统软件。 linux注重安全性、稳定性、高并发处理能力，没有优异的可视化界面 linux安装 我们安装在虚拟机上的，具体操作参考动力节点的课程本身就行 我们在应用程序->终端里面键入命令行 这个类似于Windows下的cmd Linux目录结构 Linux没有炫目的可视化操作界面，它的操作大部分都是直接执行命令，而可执行文件都是保存在相应的目录中的，所
【Bootstrap5 学习】
weixin_44032244的博客
01-02 443
这里不过过多介绍，想了解的盆友们请移步。
使用Bootstrap的popover组件，引入文件出错
shaw_sisi的博客
12-21 401
错误情况：在bootstrap.min.js前引入bootstrap.bundle.min.js 由于bootstarps是使用JavaScript开发的，依赖类使jQuery框架以及popoper.js等插件， 所以在引入bootstarps.js之前要先引入jQuery.slim.min.js和popoper.js， 又因为只有部分组件依赖popoer.js，当不需要这些组件时，不需要引入popoper.js 直接引入jquery.js与bootstrap.js即可 目前 bootstrap.bun
WEB前端网页设计-Bootstrap5 安装使用
君逍遥o
04-30 350
WEB前端网页设计-Bootstrap5 安装使用
Bootstrap5的html模板、Bootstrap5 CDN、Bootstrap5（、表格、图像、 按钮、加载、进度条、Flex字体图标）、条纹的进度条、边框类
linjun的博客
07-25 3377
Bootstrap5的html模板、Bootstrap5 CDN、Bootstrap5（、表格、图像、 按钮、加载、进度条、Flex字体图标）、条纹的进度条、边框类
Bootstrap基本模板
weixin_44197120的博客
01-27 601
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上述3个met
Bootstrap5的使用进行适配
weixin_51391923的博客
01-10 901
Bootstrap作为一个流行的前端框架，在其不断演进的过程中，从Bootstrap1到最新的Bootstrap5，逐渐趋向于简化化。在平板、桌面、大桌面显示器、超大桌面显示器的宽度比例为分别为：25%/75%、50%/50%、33.33%/66.67%、16.67/83.33%, 在移动手机等小型设备上会堆叠显示。以下实例演示了在桌面设备的显示器上两个列的宽度各占 50%，如果在平板端则左边的宽度为 25%，右边的宽度为 75%, 在移动手机等小型设备上会堆叠显示。下载 Bootstrap 5。
popper.js(bootstrap里面扩展功能要用到的插件)
08-22
bootstrap里面要用到的插件,同时也是支持bootstrap的扩展功能必要的
Vue 3 + Vite 如何使用Bootstrap 5
08-01
Vue 3 + Vite 如何使用 Bootstrap 5 在本文中，我们将学习如何在 Vue 3 项目中使用 Bootstrap 5，这是一个非常流行的前端框架。我们将使用 Vite 作为开发服务器，并学习如何将 Bootstrap 5 集成到我们的 Vue 3 项目...
vue3-bootstrap5-modal:使用Bootstrap 5的简单vue 3模态组件
04-04
＃vue3-bootstrap-5-modal-component使用引导程序5的vue 3的简单模态组件 依存关系： 该组件需要安装Bootstrap 5和Popper npm install bootstrap@next npm install @popperjs/core 然后可以将它们包含在main.js...
bootstrap-5-login-page:基于Bootstrap 5的登录页面模板
03-06
这是Bootstrap 5登录页面模板，您可以根据需要使用它，并且可以免费用于个人或商业用途。 安装 让我们轻松一点！ 只需下载此模板，然后在您的项目中使用它即可。 演示版 特征 Bootstrap 5（测试版2） Bootstrap 5...
Django-template:具有bootstrap 5和jquery的Django模板
04-07
如果您没有安装烧瓶，请运行 pip3 install django or pip install django 启动服务器 python manage.py runserver 现在可以在上访问网站 维基 有关完整的分步指南，请访问： 新增页面 用页面名称替换页面，例如： ...
bootstrap5
云墨知秋的博客
11-06 3350
Bootstrap v5 中文文档 · Bootstrap 是最受欢迎的 HTML、CSS 和 JavaScript 框架，用于开发响应式布局、移动设备优先的 WEB 项目。 | Bootstrap 中文网 (bootcss.com)
bootstrap5 npm安装使用
07-20
要使用 Bootstrap 5，首先你需要确保你的项目已经安装了 Node.js 和 npm。然后，按照以下步骤进行安装和使用： 1. 在你的项目目录下打开终端或命令提示符窗口。 2. 运行以下命令来初始化一个新的 npm 项目： ``` ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

T0620514

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值