- 2024-07-22Bootstrap5 Navbar多级下拉框
实现目标： 1、访问 Bootstrap5-navbar 2、修改dropdown为多级<!DOCTYPEHTML><htmllang="en-US"><head> <metacharset="UTF-8"> <title></title> <linkrel="stylesheet"href="https://cdn.j
- 2024-04-09Yii2 小部件使用(bootstrap5)
Yii2小部件使用(bootstrap5)修改web.phpassetManager'components'=>['assetManager'=>['appendTimestamp'=>true,'class'=>'yii\web\AssetManager',
- 2024-04-09前端学习-UI框架学习-Bootstrap5-016-卡片
菜鸟教程链接简单的卡片<template><divclass="card"><h4class="card-title">标题</h4><imgsrc="../assets/th.jfif"alt="537"class="card-img-top"style="width:50px;
- 2024-04-02前端学习-UI框架学习-Bootstrap5-015-列表组
菜鸟教程链接列表组+active激活+disabled禁用要创建列表组，可以在元素上添加.list-group类,在元素上添加.list-group-item类:<template><divclass="containermt-3"><h2>列表组</h2><p>列表组+active激活+disabled禁用</p><
- 2024-03-29前端学习-UI框架学习-Bootstrap5-011-徽章（Badges）
菜鸟教程链接<template><divclass="containermt-3"><h3>徽章<spanclass="badgebg-success">new</span></h3><h3>药丸形状徽章<spanclass="badgebg-dangerrounded-pill">new</span&g
- 2024-03-29前端学习-UI框架学习-Bootstrap5-010-按钮组
菜鸟教程链接btn-group按钮组<template><divclass="containermt-3"><h2>加载按钮组</h2><divclass="btn-group"><buttonclass="btnbtn-primary">
- 2024-03-29前端学习-UI框架学习-Bootstrap5-009-按钮
菜鸟教程链接按钮按钮类可用于,,或元素上:<template><divclass="containermt-3"><h2>按钮元素</h2><ahref="#"class="btnbtn-infom-3"role="button">链接按钮</a><buttontype="
- 2024-03-29前端学习-UI框架学习-Bootstrap5-008-信息提示框
菜鸟教程链接提示框-基础颜色提示框可以使用.alert类,后面加上.alert-success,.alert-info,.alert-warning,.alert-danger,.alert-primary,.alert-secondary,.alert-light或.alert-dark类来实现:提示框添加链接提示框中在链接的标签上添加alert-link类来设置匹
- 2024-03-29前端学习-UI框架学习-Bootstrap5-007-图像形状
菜鸟教程链接圆角效果rounded<imgsrc="./img/537.jpeg"class="rounded"alt="圆角效果"height="236">椭圆rounded-circle<imgsrc="./img/537.jpeg"class="rounded-circle"alt="拖延"heig
- 2024-03-28前端学习-UI框架学习-Bootstrap5-006-表格
菜鸟教程链接基础表格<template><divclass="containermt-3"><h2>基础表格</h2><p>.table类来设置基础表格的样式:</p><tableclass="table"><thead><tr>&l
- 2024-03-28前端学习-UI框架学习-Bootstrap5-005-颜色
菜鸟教程学习链接字体颜色Bootstrap5提供了一些有代表意义的颜色类：.text-muted,.text-primary,.text-success,.text-info,.text-warning,.text-danger,.text-secondary,.text-white,.text-dark,.text-body(默认颜色，为黑色)and.text-light:可以设置文本颜色透明度
- 2024-03-28前端学习-UI框架学习-Bootstrap5-004-文字排版
菜鸟教程链接Bootstrap5默认设置Bootstrap5默认的font-size为16px,line-height为1.5默认的font-family为"HelveticaNeue",Helvetica,Arial,sans-serif此外，所有的元素margin-top:0、margin-bottom:1rem(16px)h1-h6<template><divclass="con
- 2024-03-28前端学习-UI框架学习-Bootstrap5-003-网格系统
菜鸟教程链接Bootstrap提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列规则网格每一行需要放在设置了.container(固定宽度)或.container-fluid(全屏宽度)类的容器中，这样就可以自动设置一些外边距与内边距。使
- 2024-03-27前端学习-UI框架学习-Bootstrap5-002-容器
菜鸟教程链接固定宽度.container类用于创建固定宽度的响应式页面。<divclass="container"><h1>我的第一个Bootstrap页面</h1><p>这是一些文本。</p></div>100%宽度.container-fluid类用于创建一个全屏幕尺寸的容器，容器始终跨越整个屏幕宽度（width始终为100%）：
- 2024-03-27前端学习-UI框架学习-Bootstrap5-001-了解和安装
菜鸟教程链接如何安装/使用两种安装方式：使用Bootstrap5CDN。在index.html文件的head标签内，添加：<!--新Bootstrap5核心CSS文件--><linkrel="stylesheet"href="https://cdn.staticfile.net/twitter-bootstrap/5.1.1/css/bootstrap.min.css"><!--popper.m
- 2024-03-15Bootstrap5（display显示、flex布局相关属性、浮动、定位、文本、栅格系统）
类中缀的设置技巧1.当多个连续品目使用一个样式时，则给最小的设置即可。比如：大屏以上内边距都是3：p-lh-32.超小屏不设置类中缀的样式比如超小屏内边距时1，小屏内边距时2，中屏及以上内边距是3p-1p-sm-2p-md-3display显示使用display属性，可以改变元素的展示效果.d-none
- 2024-02-06Bootstrap5 导航组件和面包屑
Bootstrap5导航组件和面包屑Bootstrap5提供了一种简单快捷的方法来创建基本导航，它提供了非常灵活和优雅的选项卡和Pills等组件。Bootstrap5的所有导航组件，包括选项卡和Pills，都通过基本的 .nav 类共享相同的基本标记和样式。使用Bootstrap5创建基本导航我们可以使用Bootstr
- 2024-02-06Bootstrap5 导航组件和面包屑
Bootstrap5导航组件和面包屑Bootstrap5提供了一种简单快捷的方法来创建基本导航，它提供了非常灵活和优雅的选项卡和Pills等组件。Bootstrap5的所有导航组件，包括选项卡和Pills，都通过基本的 .nav 类共享相同的基本标记和样式。使用Bootstrap5创建基本导航我们可以使用Bootstr
- 2024-02-05Bootstrap5 图片轮播
Bootstrap5轮播样式表使用的是CDN资源<title>亚丁号</title><!--自定义样式表--><linkhref="static/front/css/front.css"rel="stylesheet"/><!--新Bootstrap5核心CSS文件--><linkrel="stylesheet"h
- 2023-10-25直播app系统源码，bootstrap5 text左对齐右对齐
直播app系统源码，bootstrap5text左对齐右对齐在bootstrap4中text左/右对齐 <h1class="text-right">右对齐</h1> <h1class="text-left">左对齐</h1> <h1class="text-center">居中</h1> 看了下官网在bootstrap5中就不起作用了换成t
- 2023-08-19flask引入bootstrap5
一个案例1.初始化一个flaskappfromflaskimportFlask,render_template,requestfromflask_wtfimportFlaskForm,CSRFProtectfromwtforms.fieldsimport*fromflask_bootstrapimportBootstrap5#初始化一个flaskappapp=Flask(__name__)#设置秘钥，没有的话，会失败。
- 2023-07-05Vue项目引入Bootstrap5步骤
- 2023-06-27crispy_forms TemplateDoesNotExist
django.template.exceptions.TemplateDoesNotExist:bootstrap4/uni_form.htmldjango.template.exceptions.TemplateDoesNotExist:bootstrap4/field.html问题：在使用django-crispy-forms时，跳转到signup页面出错django.template.exceptions.TemplateDoesNotExist:bootstrap
- 2023-06-27vue3引入bootstrap5的折叠菜单无效问题解决
问题：通过npm后者yarn安装bootstrap5后，在入口文件全局引入bootstrap5的js、scc，在vue组件引入折叠功能，点击可以正常展开，在点击无法收回解决办法：可参考网上博主的建议，大概意思就是之前引入的js文件不对，导致收回方法没有执行import'bootstrap/dist/js/bootstrap.bundle'main入口
- 2023-02-22django.template.exceptions.TemplateDoesNotExist: bootstrap4/uni_form.html
问题：在使用django-crispy-forms时，跳转到signup页面出错django.template.exceptions.TemplateDoesNotExist:bootstrap4/uni_form.html解决方法：使用bootstrap51.安装cr