随笔分类 - 前端学习 / UI框架学习
摘要：菜鸟教程链接 简单的卡片 <template> <div class="card"> <h4 class="card-title">标题</h4> <img src="../assets/th.jfif" alt="537" class="card-img-top" style="width: 50
阅读全文
摘要：菜鸟教程链接 列表组+active激活+disabled禁用 要创建列表组，可以在 元素上添加 .list-group 类, 在 元素上添加 .list-group-item 类: <template> <div class="container mt-3"> <h2>列表组</h2> <p>列表组
阅读全文
摘要：菜鸟教程链接 简单分页+当前页面高亮 网页开发过程，如果碰到内容过多，一般都会做分页处理。 要创建一个基本的分页可以在 元素上添加 .pagination 类。然后在 元素上添加 .page-item 类， 元素的 标签上添加 .page-link 类: <template> <div class=
阅读全文
摘要：菜鸟教程链接 普通加载效果 <template> <div class="container mt-3"> <h2>不同颜色加载效果</h2> <p>可以使用文本颜色类设置不同的颜色：</p> <div class="spinner-border text-muted"></div> <div cl
阅读全文
摘要：菜鸟教程链接 创建一个基本的进度条的步骤如下： 添加一个带有 .progress 类的 。 接着，在上面的 内，添加一个带有 class .progress-bar 的空的 。 添加一个带有百分比表示的宽度的 style 属性，例如 style="width:70%" 表示进度条在 70% 的位置。
阅读全文
摘要：菜鸟教程链接 <template> <div class="container mt-3"> <h3>徽章<span class="badge bg-success">new</span></h3> <h3>药丸形状徽章<span class="badge bg-danger rounded-pil
阅读全文
摘要：菜鸟教程链接 btn-group按钮组 <template> <div class="container mt-3"> <h2>加载按钮组</h2> <div class="btn-group"> <button class="btn btn-primary"> <span class="spinn
阅读全文
摘要：菜鸟教程链接 按钮 按钮类可用于 , , 或 元素上: <template> <div class="container mt-3"> <h2>按钮元素</h2> <a href="#" class="btn btn-info m-3" role="button">链接按钮</a> <button
阅读全文
摘要：菜鸟教程链接 提示框-基础颜色 提示框可以使用 .alert 类, 后面加上 .alert-success, .alert-info, .alert-warning, .alert-danger, .alert-primary, .alert-secondary, .alert-light 或 .a
阅读全文
摘要：菜鸟教程链接 圆角效果rounded <img src="./img/537.jpeg" class="rounded" alt="圆角效果" height="236"> 椭圆rounded-circle <img src="./img/537.jpeg" class="rounded-circle
阅读全文
摘要：菜鸟教程链接 基础表格 <template> <div class="container mt-3"> <h2>基础表格</h2> <p>.table 类来设置基础表格的样式:</p> <table class="table"> <thead> <tr> <th>Firstname</th> <th
阅读全文
摘要：菜鸟教程学习链接 字体颜色 Bootstrap 5 提供了一些有代表意义的颜色类：.text-muted, .text-primary, .text-success, .text-info, .text-warning, .text-danger, .text-secondary, .text-wh
阅读全文
摘要：菜鸟教程链接 Bootstrap 5 默认设置 Bootstrap 5 默认的 font-size 为 16px, line-height 为 1.5 默认的 font-family 为 "Helvetica Neue", Helvetica, Arial, sans-serif 此外，所有的 元素
阅读全文
摘要：菜鸟教程链接 Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多 12 列 规则 网格每一行需要放在设置了 .container (固定宽度) 或 .container-fluid (全屏宽度) 类的容器中，这样就可以自
阅读全文
摘要：菜鸟教程链接 固定宽度 .container 类用于创建固定宽度的响应式页面。 <div class="container"> <h1>我的第一个 Bootstrap 页面</h1> <p>这是一些文本。</p> </div> 100% 宽度 .container-fluid 类用于创建一个全屏幕尺
阅读全文
摘要：菜鸟教程链接 如何安装/使用 两种安装方式： 使用 Bootstrap5 CDN。 在index.html文件的head标签内，添加： <!-- 新 Bootstrap5 核心 CSS 文件 --> <link rel="stylesheet" href="https://cdn.staticfil
阅读全文
