《Vue.js BootstrapWeb开发案例教程（在线实训版）》课件 16.pptx

Vue+Bootstrap 2021.06Vue+Bootstrap主讲：温谦第16章 Bootstrap的组件库按钮组件提示与反馈类组件警告框（alert）加载中（spinner）加载中（spinner）轻量提示（toast）模态框（modal）导航栏组件基础导航栏（navbar）基础导航栏（navbar）——移动端折叠基础导航栏（navbar）——下拉菜单卡片组件轮播图组件（carousel）第16章 Bootstrap的组件库组件的本质——可复用的对象第16章 Bootstrap的组件库按钮组件不同颜色 .btn .btn-{color}不同大小 .btn-sm, .btn-lg不同状态 .disabled, .active第16章 Bootstrap的组件库按钮组件另一种样式 .btn .btn-outline-{color}第16章 Bootstrap的组件库提示与反馈类组件——警告框（alert）适用于向用户显示警告的信息，通常比较醒目，始终展现，不会自动消失，用户可以点击关闭。<div?class="alert?alert-warning?alert-dismissible?text-center">?本周六晚11点到12点网站将下线进行维护，请安排好时间处理相关业务。?<button?data-bs-dismiss="alert" type="button“ ?class="btn-close"></button></div>第16章 Bootstrap的组件库提示与反馈类组件——警告框（alert）使用关闭按钮时需要注意以下几点：确保引入了JavaScript文件。添加“.alert-dismissible”类，它使得关闭按钮放置在警告框的右侧。在关闭按钮上添加data-bs-dismiss="alert"属性，该属性会触发相关的JavaScript代码。第16章 Bootstrap的组件库提示与反馈类组件——加载中（spinner）页面局部处于等待异步数据或正在渲染过程时，合适的加载动效会有效缓解用户的焦虑。Bootstrap的加载中组件提供两种类型的效果，它是纯CSS实现的，利用了transition过渡属性。<div class="spinner-border" role="status"></div><div class="spinner-grow" role="status"></div><div class="spinner-border text-primary" role="status"></div>第16章 Bootstrap的组件库<div?class="position-fixed?bottom-0?end-0?p-3"?style="z-index:?5">?<div?class="toast"?role="alert">?<div?class="toast-header">?...?<button data-bs-dismiss="toast" class="btn-close"></button>?</div>?<div?class="toast-body">?Tom?发来一条消息。?</div>?</div></div>提示与反馈类组件——轻量提示（toast）一种不打断用户操作的提示方式，通常在页面顶部、正中间或右下角等地方给出提示，一段时间后自动消失。出于性能原因考虑，轻量提示组件需要开发者自己使用JavaScript来初始化。第16章 Bootstrap的组件库提示与反馈类组件——轻量提示（toast）一种不打断用户操作的提示方式，通常在页面顶部、正中间或右下角等地方给出提示，一段时间后自动消失。出于性能原因考虑，轻量提示组件需要开发者自己使用JavaScript来初始化。第16章 Bootstrap的组件库<div?class="modal?fade"?id="delModal"?tabindex="-1">?<div?class="modal-dialog">?<div?class="modal-content">?<div?class="modal-header">?<h5?class="modal-title"?id="delModalLabel">确认删除</h5>?<button?class="btn-close"?data-bs-dismiss="modal"></button>?</div>?<div?class="modal-body">...</div>?<div?class="modal-footer">...</div>?</div>?</div></div>提示与反馈类组件——模态框（modal）模态对话框会打断用户的操作，往