![](https://img-blog.csdnimg.cn/9b53153fa480499a8c41a166765141fd.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Bootstrap
文章平均质量分 87
Bootstrap5 教程
正在奋斗的程序猿
最好的算法是在最短的时间里做出最合理的选择
展开
-
Bootstrap 5 中文文档 (简体中文)
Bootstrap 5 中文文档 (简体中文):原创 2023-12-03 21:55:38 · 836 阅读 · 0 评论 -
学习Bootstrap 5的第十九天
如果想在输入组中添加一个下拉按钮,您可以使用.input-group-append类将按钮包装在.input-group容器中,并使用.dropdown-toggle类为按钮添加下拉样式。请注意,根据浏览器和操作系统的不同,对于超出指定范围的值可能会有不同的处理方式。同样,也可以使用.input-group-lg类将大型输入组样式应用到.input-group容器上,以获得更大的输入组。在这个例子中,我们分别使用.input-group-sm和.input-group-lg类来设置小型和大型输入组的样式。原创 2023-10-31 15:37:24 · 360 阅读 · 0 评论 -
学习Bootstrap 5的第十八天
在这个例子中,我们使用元素创建了一个选择菜单,并添加了.form-select类来应用Bootstrap 5的样式。在以上例子中,我们将.form-select-lg和.form-select-sm类与.form-select类一起使用,以确保应用Bootstrap 5的样式并修改下拉菜单的大小。通过在元素上添加disabled属性,您可以将选择菜单设置为禁用状态,使用户无法进行选择。可以使用.form-select类来创建选择菜单,并为其应用Bootstrap 5的样式。原创 2023-10-31 09:35:57 · 291 阅读 · 0 评论 -
学习Bootstrap 5的第十七天
在这个例子中,第一个输入框是普通输入控件,第二个输入框使用disabled属性禁用了输入框,同时添加了.form-control类渲染样式。第一个输入框使用.form-control-lg类来设置为大尺寸,第二个输入框没有添加任何额外的类,因此保持默认尺寸,第三个输入框使用.form-control-sm类来设置为小尺寸。请注意,纯文本输入框不会接收用户的输入,如果需要用户可以输入内容,请使用其他类型的输入框,如文本输入框()或文本区域()。原创 2023-10-30 18:13:07 · 486 阅读 · 0 评论 -
学习Bootstrap 5的第十六天
Flex(弹性)布局Flex(弹性)布局弹性盒子(flexbox)Bootstrap 3 和 Bootstrap 4 & 5 的最大区别在于 Bootstrap 5 现在使用 flexbox 而不是浮动来处理布局。弹性的框布局模块,可以更轻松地设计弹性响应式布局结构,而无需使用浮动或定位。注意:IE9 及更早版本不支持 Flexbox。如果需要 IE8-9 支持,请使用 Bootstrap 3。它是最稳定的 Bootstrap 版本,团队仍然支持它进行关键错误修复和文档更改。原创 2023-10-30 10:14:10 · 270 阅读 · 0 评论 -
学习Bootstrap 5的第十五天
Bootstrap 5 实用工具边框Bootstrap 5提供了一系列的边框类,让开发者可以方便地为元素添加或删除边框。这些边框类都是以"border-"为前缀的CSS类,其后跟着不同的属性值来描述边框的样式、颜色和大小等。此外,Bootstrap 5还提供了更加细粒度的边框类,可以通过组合不同的属性值来实现更加个性化的边框样式。边框圆角在Bootstrap 5中,您可以使用rounded类为元素添加圆角。通过使用不同的rounded类,您可以实现不同程度和形状的圆角效果。原创 2023-10-29 16:49:49 · 357 阅读 · 0 评论 -
学习Bootstrap 5的第十四天
例如,如果希望将侧边栏显示在右侧,可以将 元素的类设置为 offcanvas offcanvas-end。可以使用 data-bs-scroll 属性来设置 元素是否可以滚动,并使用 data-bs-backdrop 属性来控制是否显示背景画布。在导航菜单中设置 data-bs-target 属性,并指定要监听的容器 ID,例如 data-bs-target="#navbar"。在导航菜单中设置 data-bs-spy="scroll" 属性,以启用滚动监听。原创 2023-09-13 21:23:14 · 507 阅读 · 0 评论 -
学习Bootstrap 5的第十三天
在这个示例中,我们创建了一个按钮,并在该按钮上使用了 data-bs-toggle="popover"、title="这是一个弹出框"和data-bs-content="这是弹出框的内容"属性。然后,在 JavaScript 中初始化了该弹出框,使其在鼠标点击按钮时显示出来。可以在需要添加弹出框的元素上使用 data-bs-toggle="popover" 属性来创建弹出框,并且使用 title 属性来指定弹出框的标题,使用 data-bs-content 属性来指定弹出框的内容。原创 2023-09-13 09:16:11 · 173 阅读 · 0 评论 -
学习Bootstrap 5的第十二天
可以根据需要选择适当的尺寸类(.modal-sm、.modal-lg、.modal-xl)来调整模态框的大小。在这个示例中,.modal-dialog 元素添加了 .modal-fullscreen 类和 .modal-dialog-centered 类(用于居中显示模态框)。这将使模态框成为一个全屏模态框,并且居中显示在屏幕上。要调整模态框的尺寸,可以将 .modal-dialog 类与尺寸类(.modal-sm、.modal-lg、.modal-xl)一同添加到 元素。原创 2023-09-12 17:38:37 · 223 阅读 · 0 评论 -
学习Bootstrap 5的第十一天
通过在按钮或链接上添加 data-bs-toggle="collapse" 和 data-bs-target="#demo"(或使用 href),单击按钮或链接时,折叠元素的内容将显示或隐藏。如果您想要默认显示内容,可以在折叠元素的 上添加 .show 类。2、在按钮或链接中添加 data-bs-toggle="collapse" 属性,以触发折叠效果,并使用 data-bs-target="#id" 或 href="#id" 属性将按钮或链接与要折叠的元素关联起来。原创 2023-09-10 20:57:04 · 597 阅读 · 0 评论 -
学习Bootstrap 5的第十天
在 Bootstrap 5 中,使用.card-title类可以设置卡片的标题样式,使用.card-body类可以设置卡片正文的内容样式,使用.card-text类可以设置在.card-body类中的标签的样式,并且如果希望最后一行没有底部边距,可以移除底部边距。在.card-body类内部,我们设置了一个卡片标题使用.card-title类,并且设置了一个卡片正文内容使用.card-text类。在Bootstrap 5中,可以使用.dropdown-item-text类来设置下拉菜单中的文本项。原创 2023-09-10 17:08:50 · 571 阅读 · 0 评论 -
学习Bootstrap 5的第九天
在这个示例中,元素用于包装链接列表项,元素用于创建链接,并添加了.list-group-item和.list-group-item-action类。在 Bootstrap 5 中,可以使用类为 .list-group 的 或 元素和类为 .list-group-item 的 元素。可以将 替换为 , 替换 ,使用.list-group-item-action类来创建一个链接的列表项,并在鼠标悬停时显示灰色背景。原创 2023-09-09 15:26:14 · 294 阅读 · 2 评论 -
学习Bootstrap 5的第八天
例如,可以使用.justify-content-center(居中对齐),.justify-content-end(右对齐)或.justify-content-start(左对齐)类来改变分页条目的水平对齐方式。在Bootstrap中,设置加载效果的大小可以通过使用不同的spinner类来实现,Bootstrap 5 提供.spinner-border-sm或.spinner-grow-sm类来改变加载效果的大小。在Bootstrap中,可以通过在对应的元素上添加.active类来。原创 2023-09-08 19:00:04 · 543 阅读 · 0 评论 -
学习Bootstrap 5的第七天
使用徽章的基本方式是将 .badge 类添加到一个 元素上,同时根据需要添加一个背景颜色类,例如 .bg-primary、.bg-secondary、.bg-success 等。进度条的高度通常默认为1rem(或16px),可以通过CSS的height属性来更改。如果想要改变进度条的高度,需要针对进度条(.progress-bar)和进度条的容器(.progress)应用相同的高度值。接着,在上面的 内,添加一个带有 class="progress-bar" 的空的 。原创 2023-09-08 08:46:51 · 227 阅读 · 0 评论 -
学习Bootstrap 5的第六天
当将 .alert-link 类添加到警告框内的任何链接中时,链接的文本将自动变为与警告框的背景色相同的颜色,以提高警告框的可读性和用户体验。通过添加一个新的CSS类spinner-border或spinner-grow到含按钮的元素中,我们可以创建一个旋转的边框或增长的形状,以表示按钮正在加载。在上面的代码中,使用了 .fade 和 .show 类,这样当警告框被创建时,它会以淡入的方式出现,并在被关闭时以淡出的方式消失。它使用黄色的背景和黑色的文字来传达这种警告或潜在问题的情感。原创 2023-09-06 21:33:13 · 445 阅读 · 0 评论 -
学习Bootstrap 5的第五天
在这个例子中,.bg-dark 提供了深色的背景,.text-white 使文字变为白色,.d-block 和 .d-sm-block 则确保了这个 div 在所有屏幕大小上都可见。如果想要创建一个类似 Jumbotron 的效果,可以使用 .bg-dark 或 .bg-primary 等背景颜色类,以及 .d-block 和 .d-sm-block 等 display 类。在上面的示例中,通过将 .mx-auto 和 .d-block 类应用于 和 元素,图像将水平居中。原创 2023-09-05 20:04:13 · 505 阅读 · 0 评论 -
学习Bootstrap 5的第四天
在这个例子中, 是表格的表头部分, 是表格的主体部分,包含了一些行 。当用户将鼠标悬停在表格的行上时,该行会变为浅灰色,并增加一点透明度,以突出显示用户正在查看的行。在这个例子中,表格的边框被完全移除,创建了一个无边框的表格。这个类对于创建一种极简主义的表格设计非常有用,其中表格的信息是关注的焦点,而不是边框本身。在这个例子中,将鼠标悬停在表格的行上时,该行会变为浅灰色,并增加一点透明度。在这个例子中,表格的背景色被设置为黑色,以提高在深色背景上的可读性。原创 2023-09-05 14:18:29 · 317 阅读 · 0 评论 -
学习Bootstrap 5的第三天
文字/排版文字/排版默认设置设置Bootstrap 5 把 HTML 标题( 到 )的样式设置为有更粗的 font-weight 以及响应式的 font-size。实例也可以在其他元素上使用 .h1到 .h6类,使它们表现为标题:实例运行结果:Display 标题类.display-title 类用于创建比普通标题更突出(更大的字体大小和更细的字体粗细)的标题。它有六个不同的类可供选择,从 .display-1 到 .display-6,每个类都有不同的字体大小和字体粗细。原创 2023-09-04 10:44:31 · 2225 阅读 · 0 评论 -
学习Bootstrap 5的第二天
如果想要在更小的设备上实现类似的效果,可以将 .col-md-* 类改为 .col-* 类,或者使用响应式类 .col-{breakpoint}-*,其中 {breakpoint} 可以是 sm、md、lg 或 xl,分别对应小、中、大和超大型设备。如果想要在更小的设备上实现类似的效果,可以将 .col-lg-* 类改为 .col-* 类,或者使用响应式类 .col-{breakpoint}-*,其中 {breakpoint} 可以是 sm、md、lg 或 xl,分别对应小、中、大和超大型设备。原创 2023-09-02 10:28:19 · 419 阅读 · 0 评论 -
学习Bootstrap 5的第一天
Bootstrap 简介Bootstrap 简介什么是 Bootstrap 5?Bootstrap 5 是 Bootstrap 的最新版本,它是最流行的 HTML、CSS 和 JavaScript 框架,用于创建响应式、移动优先的网站。Bootstrap5 与3 & 4的对比总体对比:具体对比:Bootstrap 3、4和5之间存在一些显著的区别。原创 2023-09-01 12:37:05 · 998 阅读 · 0 评论