WEB前端第五十一课——BootStrap组件（三）dropdown、form、modal、pagination
1.Dropdown下拉按钮
⑴ 基本样式
外层容器div，class="dropdown"
button元素，在一般按钮的基础上增加“.dropdown-toggle”类和 data-toggle="dropdown"属性、“id”
“.btn-secondary”样式也可以改换成其他类，如“.btn-success”……
下拉菜单，class="dropdown-menu"
下拉选项，class="dropdown-item"，可以用<a>，也可以是<span>、<button>、<h*>等元素
下拉选项之间可以插入分隔，<div class="dropdown-divider"></div>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
⑵ 分裂按钮
本质是将基本样式中的按钮与下拉菜单分开为两个按钮，
因此，分裂按钮是一个按钮组，其中一个是普通按钮，另一个是下拉按钮。
设置按钮大小、外观样式，需要针对普通按钮和下拉按钮分别设置。
与基本样式不同的是，下拉按钮需要增加“.dropdown-toggle-split”类。
<div class="btn-group">
<!-- 普通按钮 -->
<button type="button" class="btn btn-danger">Action</button>
<!-- 下拉按钮 -->
<button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<!-- 下拉菜单 -->
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<!-- 下拉选项分隔 -->
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
⑶ 菜单方向
按钮菜单除了下拉也可以向上、向右、向左。
下拉菜单使用的是class="dropdown"/"btn-group"，
但其他三个方向都必须使用".btn-group"和特定方向类。
dropup，向上
dropright，向右
dropleft，向左
而且，特定方向类只需要设置".btn-group"容器即可，其他内部元素样式与下拉按钮相同。
⑷ 菜单选项
".dropdown-header"，用于设置菜单选项表头，将其赋予<h*>元素
".dropdown-item-text"类，用于将菜单选项定义为文本格式，可以使用<span>元素
".active"类，用于设置菜单活动选项
".disable"类，禁用菜单选项
纯文本形式的菜单内容，示例如下：
<div class="dropdown-menu p-4 text-muted" style="max-width: 200px;">
<p>
Some example text that's free-flowing within the dropdown menu.
</p>
<p class="mb-0">
And this is more example text.
</p>
</div>
另外，form表单也可以作为菜单的内容呈现。
⑸ 菜单容器
".dropdown-menu-right"，赋予菜单容器，定义菜单右对齐
响应式对齐，即符合某个条件时采用指定对齐方式，需设置<button>属性 data-display="static"，
同时，设置dropdown菜单容器特定样式类，如“.dropdown-menu-lg-right”或者
".dropdown-menu-right"和“.dropdown-menu-lg-left”。
⑹ 菜单事件
show.bs.dropdown
shown.bs.dropdown
hide.bs.dropdown
hidden.bs.dropdown
调用示例：
$('#myDropdown').on('show.bs.dropdown', function () {
// do something...
})
2.Form表单
除普通表单外，可以给<form>元素添加“.form-inline”定义行内表单。
每一对<label><input>标签都被一个“.form-group”类的div包裹。
input元素的 class样式为“.form-control”，可以添加通过“.form-control-sm/lg”定义 form控件大小。
input元素中添加“readonly”属性，定义只读文本，
将“.form-control”替换为“.form-control-plaintext”去掉边框背景等样式
input type="checkbox"时，class="form-check-input"，label class="form-check-label"
⑴ 基本表单示例：
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1">
</div>
<div class="form-group form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Check me out</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
ps：<small>标签用于定义小一号字体的文本，如果字体达到模型支持的最小字号，
则<small>标签将不起任何作用，其与<big>标签相对应。
⑵ 下拉菜单 form-group
<select>可以定义“multiple”属性，同时显示多项。
同样，可以添加通过“.form-control-sm/lg”定义 form控件大小。
<div class="form-group">
<label for="exampleFormControlSelect">Example select</label>
<select class="form-control" id="exampleFormControlSelect">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
⑶ input type="file"（文件输入框）
此时，input class="form-control-file"
<div class="form-group">
<label for="exampleFormControlFile">Example file input</label>
<input type="file" class="form-control-file" id="exampleFormControlFile">
</div>
⑷ 响应式 form-group
“.form-group”容器添加“.row”类
将<input>元素用<div>包裹，定义为“.col-* ”
<div class="form-group row">
<label for="staticEmail" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="text" readonly class="form-control-plaintext" id="staticEmail" value="email@example.com">
</div>
</div>
⑸ input type="range"（范围输入框）
此时，input class="form-control-range"
<div class="form-group">
<label for="formControlRange">Example Range input</label>
<input type="range" class="form-control-range" id="formControlRange">
</div>
⑹ “.form-group”改换为".form-check"
".form-check"类的 div容器用于定义“checkbox”和“radio”表单元素
同时添加".form-check"类和".form-check-inline"类，表示form-check内联样式。
<!-- 复选框控件 -->
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck">
<label class="form-check-label" for="defaultCheck">
Default checkbox
</label>
</div>
<!-- 单选按钮控件 -->
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios" value="option">
<label class="form-check-label" for="exampleRadios">
Second default radio
</label>
</div>
⑺ 更多复杂的表单设计
参考资料：https://v4.bootcss.com/docs/components/forms/?
3.Modal模态框
类似于 js中的Alert对话框，但Modal功能要强大的多。
⑴ 基础Modal
示例如下：
<div class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
由代码结构可以看出，
Modal容器有三层 div：
.Modal、.Modal-dialog、.Modal-content，每一层分别预定义了不同的属性样式。
Modal内容的三块构成：
.Modal-header、Modal-body、Modal-footer
Modal头部通常包括标题(<h*>)和关闭按钮(<button>)：
.Modal-title、.close
“.close”按钮需要定义“ data-dismiss="modal" ”属性，关闭标识叉号为“×”实体字符
Modal脚部通常设置关闭按钮和提交/保存按钮：
此处关闭按钮class与头部关闭按钮不同，class="btn btn-secondary"，data-dismiss属性相同。
⑵ 静态Modal
非静态Modal在弹出后可以通过关闭按钮或点击弹框外部来关闭弹出对话框，
但静态Modal在弹出后只能点击关闭按钮关闭弹出对话框。
所有关于Modal对话框的触发和结束的相关属性或类的设置都是在最外层 div容器中设置的：
定义静态Modal，
<div class="modal fade" id="staticBackdrop" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" " aria-hidden="true">
...
</div>
其中，data-backdrop属性表示数据背景，
data-keyboard属性表示Esc键是否生效，
tabindex属性表示Tab键的切换顺序，负值为不在Tab序列内
定义触发按钮，
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#staticBackdrop">
Launch static backdrop modal
</button>
其中，data-target属性的Value是要触发的Modal的“id”。
⑶ 长文滚动
当Modal对话框中的文本长度超过视口高度时，需要滚动查看内容。
“.modal”预定义了默认滚动方式，整个对话框独立于页面本身进行上下滚动；
还可以在“.modal-dialog”中添加“.modal-dialog-scrollable”类，创建一个“.modal-body”滚动条：
<div class="modal-dialog modal-dialog-scrollable">
...
</div>
⑷ Modal垂直居中
在“.modal-dialog”中添加“.modal-dialog-centered”类，可以使整个对话框在页面垂直居中：
<div class="modal-dialog modal-dialog-centered">
...
</div>
⑸ tooltips和popover
Popover（弹出框）与Tooltip（工具提示）类似，提供了一个扩展视图。
Popover 不像之前所的下拉菜单及其他插件那样，它不是纯 CSS 插件。
因此，如需使用该插件，必须使用 jquery 激活才会生效。
启用页面中的所有的popover弹出框，可以使用如下脚本：
$(function () { $("[data-toggle='popover']").popover(); }); //锚点或按钮标签中须添加“data-toggle”属性！
<body>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#staticBackdrop">
Launch static backdrop modal
</button>
<div class="modal" tabindex="-1" id="staticBackdrop" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<h5>Popover in a modal</h5>
<p>This <a href="#" role="button" class="btn btn-secondary popover-test"
title="Popover title" data-content="Popover body content is set in this attribute.">button
</a> triggers a popover on click.
</p>
<hr>
<h5>Tooltips in a modal</h5>
<p>
<a href="#" class="tooltip-test" title="Tooltip">This link
</a> and
<a href="#" class="tooltip-test" title="Tooltip">that link
</a> have tooltips on hover.
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<script>
$('.popover-test').popover({
trigger:"hover" //触发的方式： click| hover | focus | manual
});
// 也可以使用下面方式激活：
// $(function () { $("[data-toggle='popover']").popover(); });
</script>
</body>
参考资料来源：https://www.runoob.com/bootstrap/bootstrap-tooltip-plugin.html
⑹ Modal大小
通过向“.modal-dialog”中添加各种尺寸类，定义整个对话框的大小：
<div class="modal-dialog modal-xl">...</div>
<div class="modal-dialog modal-lg">...</div>
<div class="modal-dialog modal-sm">...</div>
⑺ Modal方法和事件
参见BootStrap官方文档：https://v4.bootcss.com/docs/components/modal/
4.分页器
用于页面切换的页码导航连接，通常使用由<nav>标签包裹的“ul”列表。
⑴ 基础样式
<nav>
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#">Previous</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>
</nav>
其中，可以给<nav>元素添加“aria-label="Page navigatio" ”属性帮助辅助技术更好的识别内容；
⑵ Previous和Next按钮可以使用图标替代
<nav aria-label="Page navigation example">
<ul class="pagination">
<li class="page-item">
<a class="page-link" href="#" aria-label="Previous">
<span aria-hidden="true">«</span> <!--图标为实体字符“& laquo;”-->
</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#" aria-label="Next">
<span aria-hidden="true">»</span> <!--图标为实体字符“& raquo;”-->
</a>
</li>
</ul>
</nav>
⑶ 活动状态
可以为“.page-item”元素<li>添加“.disable”类定义禁用状态，或添加“.active”类定义当前活动状态。
⑷ Nav大小
可以给“.pagination”元素<ul>添加“.pagination-sm/lg”类，定义分页器小尺寸和大尺寸。
⑸ Nav对齐方式
可以给“.pagination”元素<ul>添加“.justify-content-center/end”类，定义分页器居中或居右。
参考资料来源：BootStrap中文网（https://v3.bootcss.com/）
浙公网安备 33010602011771号