"bootstrap"相关教程
什么是Bootstrap?Bootstrap是一个免费的前端框架,用于更快、更轻松地进行Web开发Bootstrap包括基于HTML和CSS的设计模板,用于排版、表单、按钮、表格、导航、模态、图像轮播等Bootstrap提供了丰富的JavaScript插件Bootstrap可使您能够轻松地创建响应式设计什么是响应式网页设计?响应式网页设计旨在创建能够自动调整的网站,以便增强所有设备上的使用体验,不论是手机还是大型台式机。Bootstrap5实例<div cla...
文本颜色Bootstrap5有一些上下文类,可用于提供“由颜色表达的某种意义”。针对文本颜色的类是:.text-muted.text-primary.text-success.text-info.text-warning.text-danger.text-secondary.text-white.text-dark.text-body(默认的body颜色/通常为黑色).text-light实例亲自试一试您还可以使用.text-black-50或.tex...
基础的下拉列表下拉菜单是一种可切换菜单,允许用户从预定义列表中选择值:实例<div class="dropdown"> <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">...
警告Bootstrap5提供了一种创建预定义警告消息的简单方法:警告框是使用.alert类创建的,后跟上下文类之一:.alert-success.alert-info.alert-warning.alert-danger.alert-primary.alert-secondary.alert-light.alert-dark实例<div class="alert alert-success"> <...
卡片Bootstrap5中的卡片是带边框的框,其内容周围有一些内边距。它包括页眉、页脚、内容、颜色等选项。基础的卡片一张基础卡片是用.card类创建的,卡片中的内容有一个.card-body类:实例<div class="card"> <div class="card-body">基础的卡片</div></div>亲自试一试页眉和页脚.card-h...
Bootstrap5网格系统Bootstrap的网格系统是用flexbox构建的,页面上最多允许12列。如果您不想单独使用所有12列,那么可以将这些列组合在一起,以创建更宽的列:span1span1span1span1span1span1span1span1span1span1span1span1span4span4span4span4span8span6span6span12网格系统响应迅速,列会根据屏幕大小自动重新排列。请确保总和等于或小于12(如果不需要使用所有12个可...
输入组.input-group类是一种容器,通过在输入字段的前面或后面添加图标、文本或按钮作为“帮助文本”来增强输入。如需设置指定帮助文本的样式,请使用.input-group-text类:实例<form> <div class="input-group"> <span class="input-group...
表单验证您可以使用不同的验证类向用户提供有价值的反馈。请将.was-validated或.needs-validation添加到<form>元素,具体取决于您是要在提交表单之前还是之后提供验证反馈。输入字段将会有绿色(有效)或红色(无效)边框,以指示表单中缺少的内容。您还可以添加.valid-feedback或.invalid-feedback消息,以明确告知用户缺失了什么,或者在提交表单之前需要完成什么。实例在这个例子中,我们在提交表单之前使用.was-vali...
[Bootstrap5] Bootstrap 5 文字/排版
Bootstrap5默认设置Bootstrap5默认font-size为1rem(默认为16px),line-height为1.5。此外,所有<p>元素都设置了margin-top:0和margin-bottom:1rem(默认为16px)。<h1>-<h6>Bootstrap5把HTML标题(<h1>到<h6>)的样式设置为有更粗的font-weight以及响应式的font-size。实例亲自试一试如果需要,您还可...
图像形状圆角.rounded类为图像添加圆角:实例<img src="flower.jpg" class="rounded" alt="Cinque Terre">亲自试一试圆形.rounded-circle类将图像塑造为圆形:实例<img src="flower.jpg" class="rounded-cir...
旋转木马/幻灯片旋转木马(轮播)是用于循环浏览元素的幻灯片:如何创建旋转木马下例显示了如何创建带有指示器和控件的基本轮播:实例<!-- 轮播 --><div id="demo" class="carousel slide" data-bs-ride="carousel"> <!-- 指标/点&nb...
Bootstrap5容器从前一章中您学到了,Bootstrap需要包含元素来包装站点内容。我们在容器中填充内容,并且有两个容器类可用:.container类提供了响应式的固定宽度容器.container-fluid类提供了全宽容器,跨越视口的整个宽度固定容器使用.container类创建响应式、固定宽度的容器。请注意,它的宽度(max-width)会在不同的屏幕尺寸上发生变化:Extrasmall<576pxSmall≥576pxMedium≥768pxLa...
基础表格一个基本的Bootstrap5表格有一点内边距,以及水平分隔线。.table类为表格添加了基本样式:实例亲自试一试条纹行.table-striped类将斑马条纹添加到表中:实例亲自试一试带边框的表格.table-bordered类为表格和单元格的所有边添加边框:实例亲自试一试有悬停效果的行.table-hover类在表格行上添加悬停效果(灰色背景色):实例亲自试一试黑色/深色表格.table-dark类为表格添加黑色背景:实例亲自试一试深色条纹表格结合.table-d...
[Bootstrap5] Bootstrap 5 Jumbotron
Bootstrap5Jumbotron在Bootstrap3中引入了jumbotron,会生成大的填充框,用于引起对某些特殊内容或信息的额外关注。Bootstrap5不再支持Jumbotron。但是,您可以使用<div>元素并将特殊的辅助类与颜色类一起添加以达到相同的效果:Jumbotron实例实例<div class="mt-4 p-5 bg-primary text-white rounded&...
加载器要创建spinner/加载器,请使用.spinner-border类:实例<div class="spinner-border"></div>亲自试一试彩色加载器请使用任意文本颜色utilites为spinner添加颜色:实例<div class="spinner-border text-muted"></div><div class=&...