当前位置：首页 > news >正文

【Bootstrap学习 day13】

news 2025/8/15 20:16:27

Bootstrap5 下拉菜单
下拉菜单通常用于导航标题内，在用户鼠标悬停或单击触发元素时显示相关链接列表。
基础的下拉列表

<div class="dropdown"><button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">下拉按钮</button><ul class="dropdown-menu"><li><a class="dropdown-item" href="#">链接 1</a></li><li><a class="dropdown-item" href="#">链接 2</a></li><li><a class="dropdown-item" href="#">链接 3</a></li></ul>
</div>

在这里插入图片描述
Bootstrap下拉菜单基本上有两个组件–下拉触发元素（可以是超链接或按钮）和下拉菜单本身.dropdown类只是下拉菜单.
如需打开下拉菜单，使用设置.dropdown-toggle类，.dropdown-toggle类定义了触发器元素，而触发器元素上需要属性data-bs-toggle="dropdown"来切换下拉菜单.
带有.dropdown-menu类的<div>元素可构建下拉菜单。然后将.dropdown-item类添加到下拉菜单中的每个元素（链接或按钮）。

下拉列表分隔线
.dropdown-divider类用于通过水平细边框分隔下拉菜单中的链接
.dropdown-header向下拉菜单的标签区域添加标题

<div class="dropdown"><button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">下拉按钮</button><ul class="dropdown-menu"><li><a class="dropdown-item" href="#">链接 1</a></li><li><a class="dropdown-item" href="#">链接 2</a></li><li><a class="dropdown-item" href="#">链接 3</a></li><li class="dropdown-divider">下拉菜单标题</li><li><a class="dropdown-item" href="#">分离的链接</a></li></ul>
</div>

在这里插入图片描述
导航中的下拉菜单

<ul class="nav"><li class="nav-item"><a class="nav-link active" href="#">首页</a></li><li class="nav-item"><a class="nav-link" href="#">学习</a></li><li class="nav-item dropdown"><a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#">前端</a><ul class="dropdown-menu"><li><a class="dropdown-item" href="#">HTML</a><li><li><a class="dropdown-item" href="#">HTML</a><li><li><a class="dropdown-item" href="#">HTML</a><li></ul></li><li class="nav-item"><a class="nav-link disabled" href="#">禁用</a></li>
</ul>

在这里插入图片描述
表单
HTML表单是网页和应用程序不可或缺的一部分。Bootstrap通过预定义的类集极大地简化了表单控件（如标签、输入字段、选择框、文本区域、按钮等）的样式设置和对齐过程。
三种不同类型的表单布局：

垂直表单（默认）
水平表单
内联表单

创建垂直表单布局
基本的表单结构是Bootstrap自带的，个别的表单控件自动接收一些全局样式，把标签和空间放在一个带有class .form-group的

中。这是获取最佳间距所必需的。
label元素添加了.form-label类以确保正确的填充。
向所有的文本元素<input><textarea>添加class=“form-control”。

<form><div class="form-group"><label class="form-label">名称</label><input type="text" class="form-control" placeholder="请输入名称"></div><div class="form-group"><label class="form-label">Email</label><input type="email" class="form-control" placeholder="Email"></div><button type="submit" class="btn btn-primary">提交</button>
</form>

在这里插入图片描述

创建内联表单
表单元素并排显示，可以使用.row和.col

<form><div class="row"><div class="col"><input type="text" class="form-control" placeholder="请输入名称"></div><div class="col"><input type="email" class="form-control" placeholder="Email"></div></div>
</form>

在这里插入图片描述
表单控件尺寸
.form-control-lg或.form-control-sm更改.form-control输入控件的大小

<input type="text" class="form-control form-control-lg" placeholder="大型输入控件">
<input type="text" class="form-control" placeholder="普通输入控件">
<input type="text" class="form-control form-control-sm" placeholder="小型输入控件">

在这里插入图片描述

向表单控件添加帮助文本

<div class="row"><div class="col-auto"><label class="col-form-label" for="inputPassword">Password</label></div><div class="col-auto"><input type="password" class="form-control"></div><div class="col-auto"><span class="form-text">必须8-20个字符长.</span></div>
</div>

在这里插入图片描述

选择菜单
通过将.form-select类添加到<select>元素

<select class="form-select"><option>选项1</option><option>选项2</option><option>选项3</option><option>选项4</option>
</select>

在这里插入图片描述
选择菜单的大小
使用.form-select-lg或.form-select-sm类来改变选择菜单的大小

<select class="form-select form-select-lg"></select>
<select class="form-select form-select-sm"></select>

在这里插入图片描述

复选框和单选按钮
复选框有不同的标记，它们被设置了.form-check类的容器元素包围.label设置.form-check-label类，而复选框和单选按钮使用.form-check-input。希望默认选中复选框，可以使用checked属性。
复选框
使用class="form-check"的包装元素，来确保标签和复选框有适当的外边距

<div class="form-check"><input class="form-check-input" type="checkbox" checked><label class="form-check-label">选项1</label>
</div>
<div class="form-check"><input class="form-check-input" type="checkbox"><label class="form-check-label">选项2</label>
</div>
<div class="form-check"><input class="form-check-input" type="checkbox"><label class="form-check-label">选项3</label>
</div>

在这里插入图片描述

单选按钮

<div class="form-check"><input class="form-check-input" type="radio" name="option1" checked>选项1<label class="form-check-label"></label>
</div>
<div class="form-check"><input class="form-check-input" type="radio" name="option1" checked>选项2<label class="form-check-label"></label>
</div>
<div class="form-check"><input class="form-check-input" type="radio" name="option1" checked>选项3<label class="form-check-label"></label>
</div>

在这里插入图片描述
拨动开关
将复选框设置为切换开关的样式，可以将.form-switch类与.form-check容器一起使用

<div class="form-switch"><input class="form-check-input" type="checkbox" checked><label class="form-check-label">开关</label>
</div>

在这里插入图片描述

滑块
.form-range类添加到type="range"的input元素，可以设置范围菜单的样式

<label class="form-label">开关</label><input class="form-range" type="range" checked>

在这里插入图片描述

表单组
.input-group类是一种容器，通过在输入字段的前面或后面添加图标、文本或按钮作为“帮助文本”来增强输入。.input-group-text类指定帮助文本的样式.

<div class="input-group"><span class="input-group-text">用户名</span><input type="text" class="form-control" placeholder="用户名">
</div>
<div class="input-group"><input type="text" class="form-control" placeholder="请输入邮箱"><span class="input-group-text">@qq.com</span>
</div>

在这里插入图片描述

输入组大小
.input-group-sm类用于小型输入组，将.input-group-lg用于大型输入组

<div class="input-group input-group-sm"><span class="input-group-text">用户名</span><input type="text" class="form-control" placeholder="用户名">
</div>
<div class="input-group"><input type="text" class="form-control" placeholder="请输入邮箱"><span class="input-group-text">@qq.com</span>
</div>

在这里插入图片描述

多个输入

<div class="input-group"><span class="input-group-text">输入姓名</span><input type="text" class="form-control" placeholder="姓"><input type="text" class="form-control" placeholder="名">
</div>

在这里插入图片描述
带复选框和单选框的输入组

<div class="input-group"><div class="input-group-text"><input type="checkbox"></div><input type="text" class="form-control" placeholder="这是内容">
</div><div class="input-group"><div class="input-group-text"><input type="radio"></div><input type="text" class="form-control" placeholder="这是内容">
</div>

在这里插入图片描述

带按钮的输入组

<div class="input-group"><input type="text" class="form-control" placeholder="搜索"><button class="btn btn-success" type="submit">搜索</button>
</div><div class="input-group"><input type="text" class="form-control" placeholder="请输入内容"><button class="btn btn-primary" type="button">搜索</button>
</div>

在这里插入图片描述

带下拉按钮的输入组

<div class="input-group"><button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">下拉按钮	</button><ul class="dropdown-menu"><li><a class="dropdown-item" href="#">链接1</a></li><li><a class="dropdown-item" href="#">链接2</a></li><li><a class="dropdown-item" href="#">链接3</a></li></ul>
</div>

在这里插入图片描述
卡片
卡片提供了一个灵活的、可扩展的内容容器。可以通过类.card与.card-body可以快速创建一个简单的卡片，卡片可以包含头部、内容、底部以及各种颜色设置。
创建基本的卡片
外部包装器需要基类.card，而内容可以放置在.card-body元素内

<div class="card"><div class="card-body">基础的卡片</div>
</div>

在这里插入图片描述

页眉和页脚

<div class="card"><div class="card-header">页眉</div><div class="card-body">内容</div><div class="card-footer">页脚</div>
</div>

在这里插入图片描述

带有标题、文本和链接的卡片

<div class="card w-60"><div class="card-header">页眉</div><div class="card-body"><h4 class="card-title">卡片标题</h4><p class="card-text">这是一些文本</p><a href="#" class="card-link">卡片链接</a></div><div class="card-footer">页脚</div>
</div>

在这里插入图片描述
卡片图像
可以给<img>添加.card-img-top使图片位于文字上方，或添加.card-img-bottom使图片位于文字下方来设置卡片中图片的位置。

<div class="card" style="width:300px"><div class="card-header">页眉</div><img class="card-img-top" src="avatar.png"><div class="card-body"><h4 class="card-title">卡片标题</h4><p class="card-text">这是一些文本</p><a href="#" class="card-link">卡片链接</a></div><div class="card-footer">页脚</div>
</div>

在这里插入图片描述

图像作为卡片背景
将图像转换为卡片背景并使用.card-img-overlay并叠加卡片的文字

<div class="card" style="width:300px"><img class="card-img-top" src="avatar.png"><div class="card-img-overlay"><h4 class="card-title">卡片标题</h4><p class="card-text">这是一些文本</p><a href="#" class="card-link">卡片链接</a></div>
</div>

在这里插入图片描述