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,一经查实,立即删除!

相关文章

【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…

基于形态学滤波的心电信号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;…

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…

探索减轻 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小模型等。 此…

Diffusion相关原理

Diffusion相关原理 1、数学&#xff1a;重参数化 &#xff08;用于高斯拟合求导&#xff09;变分推断原理 &#xff08;用于损失&#xff09; 2、生成模型系列1、AE自动编码器&#xff08;AutoEncoder&#xff09;2.VAE的模型架构模型原理数学原理AE和VAE对比 3、DDMP图像高斯加…

信息化项目必须进行验收测试吗?软件测试公司验收测试流程分享

信息化项目验收是指在软件开发完成之后&#xff0c;对其进行独立检查和确认&#xff0c;以确定它是否达到了预期的质量和功能需求。在进行验收之前&#xff0c;必须进行验收测试&#xff0c;这是非常重要的一步。 为什么要进行验收测试呢&#xff1f;好处可不少哦&#xff01;…

5.29高通技术分享抢先看 | 2024高通边缘智能创新应用大赛公开课

火力全开&#xff01;2024高通边缘智能创新应用大赛首期公开课将在5月29日晚上8点炫酷启动&#xff01; 届时&#xff0c;来自大赛主办方高通技术公司的产品市场总监李骏捷和高级资深工程师李万俊将于云端聚首&#xff0c;带来一场关于边缘智能的前沿技术对话。 各位参赛者及…

预防侵权知识丨什么是图形商标?怎么用产品图片进行图形商标查询检索?

图形商标查询检索是跨境电商预防侵权中重要的一环&#xff0c;但是有很多卖家对图形商标不太了解&#xff0c;也不知道怎么进行图形商标的查询检索。所以&#xff0c;我们一起来看下。 一、什么是图形商标 图形商标是商标的一种&#xff0c;指的是由几何图形或其它事物图案构…

30秒学会一个ChatGpt-4o小技巧 --- 照片漫画化

文章目录 选择照片修改图片 选择照片 先选择自己的一张照片 当然首先你得能够访问ChatGpt-4o, 图片生成能力只有ChatGpt-4才有 所以我们先登录到 国内能够使用的ChatGpt网站: 我要超级GPT 然后把图片上传&#xff0c;再写提示词&#xff1a;请帮我把这种照片按照日系动漫风…

IT 行业的现状剖析与未来展望:商业与技术的交织

今日&#xff0c;我无意间看到 CSDN 的创作话题&#xff1a;“我眼中的 IT 行业现状与未来趋势”&#xff0c;这引发了我对 IT 行业的深入思考。以下是我的一些个人见解&#xff0c;希望能得到大家的指正和交流&#xff0c;共同进步。 IT 行业的现状与未来趋势&#xff0c;这个…

821. 字符的最短距离 - 力扣

1. 题目 给你一个字符串 s 和一个字符 c &#xff0c;且 c 是 s 中出现过的字符。 返回一个整数数组 answer &#xff0c;其中 answer.length s.length 且 answer[i] 是 s 中从下标 i 到离它 最近 的字符 c 的 距离 。 两个下标 i 和 j 之间的 距离 为 abs(i - j) &#xff0c…

el-transfer和el-tree进行结合搞一个树形穿梭框

由于业务需求需要在穿梭框里使用树形结构&#xff0c;但是本身element里并不支持&#xff0c;于是参考了别的大佬发的文章作为思路及后续自己新增了一些处理功能。 目录 1.拷贝代码放到自己的项目目录中 2.改造el-transfer的源码 3.修改tree-transfer-panel.vue文件 4.修改…

数据挖掘实战-基于余弦相似度的印度美食推荐系统

&#x1f935;‍♂️ 个人主页&#xff1a;艾派森的个人主页 ✍&#x1f3fb;作者简介&#xff1a;Python学习者 &#x1f40b; 希望大家多多支持&#xff0c;我们一起进步&#xff01;&#x1f604; 如果文章对你有帮助的话&#xff0c; 欢迎评论 &#x1f4ac;点赞&#x1f4…