Bootstrap5

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>

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/842296.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

arthas笔记

arthas使用参考arthas文档 sc -d 类名 获取到类加载器哈希 sc -d com.test.service.TestServiceImpl 得到&#xff1a; xxxxxxxxxxxxxxxxxx xxxxxxxxxxxx classLoaderHash 18b4aac2根据类加载器调用bean方法 vmtool --action getInstances -c 18b4aac2 --className org.spri…

Sass的优缺点

Sass&#xff08;Syntactically Awesome Stylesheets&#xff09;是一种流行的CSS预处理器&#xff0c;它提供了一系列强大的功能&#xff0c;使得样式表的编写和维护更加高效和灵活。以下是Sass的优点和缺点&#xff1a; 优点&#xff1a; 提高可维护性&#xff1a;Sass的模…

【uniapp】uniapp基本介绍

目录 介绍体验uni-app优势功能框架图 uni-app组成和跨端原理基本语言和开发规范 编译器运行时&#xff08;runtime&#xff09;uni-app runtime包括3部分&#xff1a;基础框架、组件、API基础框架&#xff1a;组件&#xff1a;组件的扩展&#xff1a; API&#xff1a; 逻辑层和…

vue2的方法与监听

vue2的方法 不可以使用箭头函数 <template> <div><div>{{sum2()}}</div><button click"add">add</button> </div></template><script> export default {data(){return{name:"张三",num:20,num2:3…

Android 关于pm的用法

1 定义 Package Manager (pm)&#xff1a;用于安装、卸载、查询应用程序包信息等操作的命令行工具。 2 使用 2.1 安装应用程序 pm install /path/to/apkfile.apk2.2 卸载应用程序 pm install /path/to/apkfile.apk2.3 查询应用程序信息 pm list packages [-f] [-d] [-e] …

基于形态学滤波的心电信号ECG处理(MATLAB 2021B)

数学形态学简称形态学&#xff0c;在数学意义上&#xff0c;其基于集合理论、积分几何和网格代数&#xff0c;是一门严格建立在数学基础之上的学科&#xff0c;着重用来研究图像的几何结构和形状&#xff0c;因而称之为形态学。其基本思想是用结构元素对待分析图像进行“探测”…

机器人回调接口完善

大家好&#xff0c;我是雄雄&#xff0c;欢迎关注微信公众号&#xff1a;雄雄的小课堂。 免责声明&#xff1a;该工具仅供学习使用&#xff0c;禁止使用该工具从事违法活动&#xff0c;否则永久拉黑封禁账号&#xff01;&#xff01;&#xff01;本人不对任何工具的使用负责&am…

计算机类主题会议推荐之——ACAIB 2024

【北方民族大学40 周年校庆学术活动】 第四届自动化控制、算法与智能仿生学术会议(ACAIB 2024) 2024年6月7-9日 中国银川 往届均已见刊检索 EI、SCOPUS双检索 基本信息 会议官网&#xff1a;www.acaib.org 最终截稿时间&#xff1a;2024年6月3日晚23&#xff1a;…

网络编程——大端序小端序

网络编程——大端序小端序 大端序&#xff08;Big Endian&#xff09;和小端序&#xff08;Little Endian&#xff09;1. 大端序&#xff08;Big Endian&#xff09;2. 小端序&#xff08;Little Endian&#xff09;3. 举例说明4. 使用场景5. 转换 网络协议中的网络字节序原因具…

Mac 电脑给android手机传输文件提示 No android device found

在开发过程中&#xff0c;我们有时候会有在电脑和手机之间传输文件的需求。 Mac电脑给android手机传输文件并不是很方便。 Google 官方提供了一个软件叫Android File Transfer&#xff0c;这个软件免费且好用。 Android File Transfer下载地址 但是使用过程中会遇到一些问题…

白银现货价格对这两种形态形成突破 应当予以关注

在白银现货价格分析和交易中&#xff0c;突破这个行为一直是一个重要的、具有可分析性的市场动作。本文要讨论的&#xff0c;是基于价格形态之上的突破行为&#xff0c;下面我们就来看看。 中继形态的突破。白银现货价格波动中有中继形态有反转形态&#xff0c;中继形态的意思是…

Java代码——@Mock注入失效,注入对象始终为null

现象&#xff1a; 最近在使用Mock对象做单元测试&#xff0c;但是发现mock的对象始终为null. 代码如下&#xff1a; package com.****.cache;import org.junit.jupiter.api.Test; import org.junit.runner.RunWith; import org.mockito.Mock; import org.mockito.junit.Mock…

Linux-命令

添加权限方法及注意事项: 字母权限法很灵活,无论目录还是文件都可以随意添加删除超级权限 chmod us ... 添加SUID chmod gs ... 添加SGID chmod s ...同时添加SUID和SGID chmod -s ...同时删除SUID和SGID chmod ot ...添加Sticky chmod t ...同上 数字权限表示法添加/删除…

【软考高项】- 2024.05.25 第一批考情介绍

一、选择题 1、信息化融合包含内容&#xff0c;产品&#xff0c;产业&#xff0c;等。 2、it内部审计 3、排列活动的数据表现工具 4、费用现值法 5、数据安全法 6、专利&#xff0c;外观设计&#xff0c;实用新型 7、有好几个过程定义和作用。 8、甲乙两公司&#xff0…

Security OAuth2 SSO单点登录(一)

文章目录 学习链接单点登录cookiesession&token模式&前端无感token刷新&双token模式&黑名单auth-server引入依赖application.ymlAuthServerConfigSecurityConfigUserControllerlogin.html client1引入依赖application.yml配置文件SecurityConfigClient1Applica…

中央事件bus

中央事件bus的使用 使用场景&#xff1a;当需要传递给多个组件的时候例如父组件->子组件->孙组件&#xff0c;甚至还得传递到更深的组件的时候中央事件就起到了作用&#xff0c;不需要一直传递。bus其实就是一个发布订阅模式&#xff0c;利用vue的自定义事件机制 // 事…

探索减轻 AI 说服伤害的机制方法

随着生成式人工智能&#xff08;AI&#xff09;系统在各个领域的广泛应用&#xff0c;其说服能力也日益增强&#xff0c;引发了对 AI 说服可能带来伤害的担忧。AI 说服的伤害不仅来源于说服的结果&#xff0c;还包括说服过程中可能对个体或社会造成的不利影响。为了系统性地研究…

学习Uni-app开发小程序Day27

这一章学习了几个功能点&#xff0c;例如&#xff1a;try{}catch处理同步请求下载记录异常处理、onShareAppMessage分享好友和分享微信朋友圈、对分享页面传参进行特殊处理、共用分类列表页面实现我的下载和评分页面、使用mp-html富文本插件渲染公告详情页面 try{}catch处理同…

AI+低代码,打通企业大模型应用最后一公里!

一、AI的趋势与发展 一夜之间&#xff0c;微软的AI全宇宙似乎已成型。 5月22日凌晨&#xff0c;在一年一度的2024微软Build大会上&#xff0c;微软CEO萨蒂亚纳德拉一口气宣布了50多项AI能力更新&#xff0c;涵盖GPT-4o上云、自研Cobalt芯片、团队版Copilot、SOTA小模型等。 此…

网络通信过程的技术分析

网络通信过程的技术分析 目录 网络通信过程的技术分析 一、引言 二、网络通信基础 三、通信协议 四、数据传输过程 五、网络设备与通信 六、网络安全与通信 七、高级网络通信概念 八、结论 一、引言 网络通信是现代计算机网络中的核心活动&#xff0c;它涉及多个层面的…