Bootstrap5

已于 2024-05-27 19:00:48 修改
阅读量932 收藏 16
点赞数 23
分类专栏： Bootstrap5 文章标签： 前端 bootstrap
于 2024-05-27 18:00:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Kongfutu/article/details/139234901
版权

Bootstrap 5 是 Bootstrap 框架的最新版本，这是一个广受欢迎且功能强大的开源前端开发框架，专为快速构建响应式和移动优先的网站而设计。Bootstrap 由 Twitter 的设计师 Mark Otto 和 Jacob Thornton 创建，它以 HTML、CSS 和 JavaScript 为基础，提供了一套预定义的样式、组件和 JavaScript 插件，显著提高了网页开发的速度和便捷性

Bootstrap 5 的主要特点包括：

  1. 移动优先: Bootstrap 5 是从移动设备开始设计的，意味着所有组件都是首先针对移动设备进行优化，然后扩展到平板和桌面设备，确保在任何屏幕尺寸上都能提供良好的用户体验。

  2. 现代化的网格系统: 相比之前版本，Bootstrap 5 的网格系统已经升级，现在完全基于 CSS Flexbox，这使得布局设计更加灵活且易于控制，同时废弃了浮动（floats）的使用。

  3. 移除对 IE10/11 的支持: Bootstrap 5 不再支持 Internet Explorer 10 和 11，这允许框架利用现代浏览器的最新特性，减少了对旧浏览器兼容性的顾虑。

  4. 增强的表单控件: 提供了更多的样式选项和更好的定制能力，使得表单的外观和交互更加丰富和现代化。

  5. 丰富的色彩系统: 引入了新的色彩系统，提供更多预设的颜色选项，方便开发者快速创建美观的界面。

  6. 改进的文档和示例: Bootstrap 5 的官方文档经过了全面的修订，提供了更多详细的指南和示例代码，帮助开发者快速上手和深入学习。

  7. 新增和改进的组件: 包括新的实用程序类（utility classes）、图标库的更新、新的按钮样式、卡片组件的改进等，以及对现有组件的多项优化和调整。

  8. 更易定制: Bootstrap 5 支持更加灵活的定制选项，通过Sass变量和配置，开发者可以轻松调整框架的各个方面，以适应项目的特定需求。

通过这些改进和新特性，Bootstrap 5 成为了一个更加强大、灵活且易用的前端开发工具，无论是对于初学者还是经验丰富的开发者来说，都是构建网页应用的优选框架之一。

Bootstrap中文文档

下载了预编辑的Bootstrap解压出来得到了Bootstrap文件夹，只要把html与Bootstrap文件夹放在一起，然后用相对路径引用
bootstrap.bundle.min.js和 bootstrap.min.css 文件即可。
下载已编译版js和css文件，解压缩后将目录改名称为bootstrap5，放在你的网站目录。
2、<head></head>之间，添加 <link href="/static/bootstrap5/css/bootstrap.min.css">
3、在网页</body>之前，添加 <script src="/static/bootstrap5/js/bootstrap. bundle.min. js" ></script>
Bootstrap 自带的大部分组件都需要依赖JavaScript 才能起作用。将 <script> 标签粘贴到页面底部，并且是在</body> 标签之前，就
能起作用了。
注意：要确保bootstrap.min.css和bootstrap.bundle.min.js确实在这个路径。

使用 jsDelivr 免费 CDN 

使用 jsDelivr 的话可以跳过下载文件的操作，直接在你的项目中使用 Bootstrap 编译过的 CSS 和 JS 文件。

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/mhDoLbDldZc3qpsJHpLogda//BVZbgYuw6kof4u2FrCedxOtgRZDTHgHUhOCVim" crossorigin="anonymous"></script>

如果你使用的是经过编译的 JavaScript 文件，并且希望单独引入 Popper，那么最好是在 Popper 之后引入 Bootstrap 的 JS 文件。

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js" integrity="sha384-ep+dxp/oz2RKF89ALMPGc7Z89QFa32C8Uv1A3TcEK8sMzXVysblLA3+eJWTzPJzT" crossorigin="anonymous"></script>

Zman777
关注
  • 23
    点赞
  • 踩
  • 16
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
bootstrap到底是用来做什么的（概念）
weixin_33853794的博客
03-06 1305
Bootstrap官网：http://v3.bootcss.com/ Bootstrap是Twitter推出的一个用于前端开发的开源工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。 是一个做网页的框架（目前最流行的WEB前端框架），就是说你只需要写HTML标签调用它的类你就可以很快速的做一个高大上的网页，你不用担心兼...
Bootstrap5 图标库 bootstrap-icons
09-30
Bootstrap5图标库bootstrap-icons是前端开发中一个非常实用的资源，它为开发者提供了大量美观、一致的SVG图标，可以方便地集成到Bootstrap5项目中，为网页设计增添丰富的视觉元素。Bootstrap图标库的设计理念是简洁...
bootstrap5
云墨知秋的博客
11-06 3380
Bootstrap v5 中文文档 · Bootstrap 是最受欢迎的 HTML、CSS 和 JavaScript 框架，用于开发响应式布局、移动设备优先的 WEB 项目。 | Bootstrap 中文网 (bootcss.com)
最新版Bootstrap5教程——Bootstrap5基础
m0_61684063的博客
05-20 4589
  Bootstrap是由推特设计师Mark Otto和Jacob Thornton合作开发的一款基于HTML、CSS、JavaScript的前端开源框架，使用简洁灵活，让web开发更加快速简单。  Bootstrap现在最新的版本为v5.2.0-beta1，现在介绍一下Bootstrap5相对于以前版本的改变。
Bootstrap 发布十周年，Bootstrap 5都有什么新功能？
前端全栈开发者
08-25 3912
近日，知名前端工具包 Bootstrap 官博宣布十周年，其创始人 Mark Otto 回顾了这十年里取得的一些成就与里程碑数据： 文档浏览量超过 25 亿次，每天超过 685,000 次； 自 2015 年以来，npm 下载量为3.94 亿，仅 2020 年就有超过 1.31 亿次下载。在过去的六年中，每天有 180,000 次。 5000 万次 RubyGems 下载 5700 万次 NuGet 下载 750 万次 Packagist 安装 被超过 22% 的网站使用 被 GitHub 上的 270
Bootstrap5 文字排版讲解
qq_65552364的博客
05-23 4575
一、文本对齐方式 使用文本对齐类能够轻松地将文本重新对齐到组件。对于左侧、居中和右侧对齐，同时也可以搭配断点实现响应式布局 左侧对齐 text-start 居中对齐 text-center 右侧对齐 text-end ...
vue3 使用 bootstrap5
LQS000的博客
12-17 1598
三、在 src/main.js 文件下引入包。一、创建 vue3 项目。二、使用 npm 安装。
vue + bootstrap5
HzqGhost's Blog
03-14 3271
BootstrapVue-基于VueJS的Bootstrap框架 · 全球最流行的 HTML、CSS 和 JS 工具库。 安装 bootstrap npm install bootstrap-vue bootstrap router/index.js import { BootstrapVue, BootstrapVueIcons } from 'bootstrap-vue' import 'bootstrap/dist/css/bootstrap.css' import 'bootstra.
nuxtjs3 引入bootstrap5
菜鸟的学习笔记
12-24 1887
如何在nuxtjs3中使用bootstrap
bootstrap5基本使用
Crayonxin2000的博客
01-29 6987
bootstrap虽然没有Vue强大，但是对于新手快速建造精美的web有着非常大的帮助。我觉得bootstrap5更像是一个组件库，对于小型网页来说非常的nice。组件库非常精美、简洁。而且上手很快。非常的高兴的是官方文档很详细，不仅有详细的api文档，而且有完善的示例，对新手来说，一个例子胜过千字文。...
【Bootstrap】Bootstrap v5 Table插件疯狂踩坑记录
微雨停了的博客
04-25 3449
一、报错代码 <table class="table table-hover text-center" id="table" data-toggle="table" data-search="true" data-pagination="true" data-id-field="id"
多用途 Bootstrap5+HTML后台管理模板
04-03
完全响应式的 bootstrap 5 管理仪表板模板。它使用 bootstrap 5 框架、HTML5、CSS 和 JQuery 构建。它适用于所有主要的网络浏览器、台式机和所有智能手机设备。这是一个非常易于定制且对开发人员友好的模板。它拥有...
炫酷半透明Bootstrap5管理员后台模版
04-03
一个完全响应式的 Bootstrap 5 管理仪表板模板。它使用 bootstrap 5 框架、HTML5、CSS 和 JQuery 构建。它适用于所有主要的网络浏览器、台式机和所有智能手机设备。这是一个非常易于定制且对开发人员友好的模板。它...
两套bootstrap5框架后台管理模板 - Amdash
09-07
Amdash是基于Bootstrap5框架实现的后台管理模板。它有多个仪表盘样式，工作在所有主要浏览器、桌面和所有智能手机设备上。非常易于定制和开发人员友好的HTML5模板。集合与最新jQuery UI组件和bootstrap插件。它可以...
网站基本布局CSS
m0_46608027的博客
07-24 792
* 滚动条轨道样式 *//* 滚动条样式 *//* 滑块样式 */
ASP.NET Web Api 使用 EF 6，DateTime 字段如何取数据库服务器当前时间
最新发布
yangshuquan的专栏
07-24 787
在做数据库设计时，为了方便进行数据追踪，通常会有几个字段是每个表都有的，比如创建时间、创建人、更新时间、更新人等，这些时间字段一般存储的是数据库服务器的时间，EF 是操作整个数据表对象，所以需要寻找方法来实现这个目的。本文分享 DB First 和 Code First 两种模式的 EF 中 DateTime 字段如何存储数据库服务器当前时间的方法。
TS如何处理js模块的类型？
闻人放歌的三寸青草园圃
07-24 257
【代码】TS如何处理js模块的类型？
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值