一、什么是组件
组件就是对特定功能的封装。
二、常用组件
1.警告提示框
详情请点击
代码示例：
<!--不可关闭的提示框组件-->
<div class="alert alert-success" role="alert">
不可关闭的提示框
</div>
<!--可关闭的提示框组件-->
<div class="alert alert-warning alert-dismissible fade show" role="alert">
可关闭的提示框
<button type="button" class="close" data-dismiss="alert">
<span>×</span>
</button>
</div>页面显示：
2.按钮及按钮组组件
1）按钮组件
详情请点击
代码示例：
<button class="btn btn-success">我是按钮</button>
<input type="button" class="btn btn-danger" value="我是按钮">
<a class="btn btn-primary">我是按钮组</a>页面显示：
2）按钮组组件
详情请点击
代码示例：
<div class="btn-group" role="group">
<button type="button" class="btn btn-primary">1</button>
<button type="button" class="btn btn-primary">2</button>
<button type="button" class="btn btn-primary">3</button>
</div>3）卡片组件
详情请点击
代码示例：
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="1.jpg" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">卡片标题</h5>
<p class="card-text">卡片内容</p>
<a href="#" class="btn btn-primary">按钮</a>
</div>
</div>页面实现效果：
4.轮播图
详情请点击
代码示例：
<!--
1.class="carousel slide"定义一个轮播图组件
2.data-ride="carousel"定义该轮播图组件为自动轮播
-->
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<!--
1.class="carousel-indicators"定义轮播图指示器
2.data-target="#carouselExampleIndicators"告诉bootstrap指示器索引属于哪个轮播图
3.data-slide-to="0"定义索引
4.class="active"定义轮播图的默认索引
-->
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<!--
1.class="carousel-inner"创建轮播图的内容
2.class="carousel-item"指定轮播图的每一页
3.active：默认页
-->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="1.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="2.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="3.jpg" class="d-block w-100" alt="...">
</div>
</div>
<!--
1.class="carousel-control-prev"创建上一页的控制按钮
2.href="#carouselExampleIndicators"指定控制按钮可以控制哪一个轮播图
-->
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<!--
1.class="carousel-control-next"创建下一页一页的控制按钮
2.href="#carouselExampleIndicators"指定控制按钮可以控制哪一个轮播图
-->
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!--使用JavaScript控制轮播图切换时间间隔-->
<script>
$('.carousel').carousel({
interval: 1000
})
</script>5.折叠面板
详情请点击
代码示例：
<!--
1.data-toggle="collapse"告诉bootstrap需要切换的是折叠面板
2.data-target="#collapseExample"告诉bootstrap需要切换的是哪一个折叠面板
-->
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample">
按钮
</button>
<!--
1.class="collapse"创建一个折叠面板，默认情况下是不会显示的
-->
<div class="collapse" id="collapseExample">
<div class="card card-body">
我是折叠面板的内容
</div>
</div>6.下拉菜单
详情请点击
注意此处有一个坑，popper.js引入必须在jquery-3.1.1.js之前，如下所示
<script src="bs4/js/popper.js"></script>
<!--引入jQuery-->
<script src="bs4/js/jquery-3.1.1.js"></script>
<!--引入bootstrap的js文件-->
<script src="bs4/js/bootstrap.js"></script>代码示例
<!--
1.class="dropdown"定义一个下拉菜单
-->
<div class="dropdown">
<!--
1.dropdown-toggle:指定下拉菜单的小箭头
2.data-toggle="dropdown":告诉bootstrap需要切换的是下拉菜单
-->
<button class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">
按钮
</button>
<!--
1.class="dropdown-menu":创建一个弹出的下拉菜单
2.class="dropdown-item":指定菜单项
-->
<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>
</div>7.模态弹窗
详情请点击
代码示例：
<!--
1.data-toggle="modal" ：告诉bootstrap需要切换的是模态弹窗
2.data-target="#exampleModalCenter"：告诉bootstrap需要切换的是哪一个模态弹窗
-->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
提交
</button>
<!--
1.class="modal fade"：创建模态弹窗容器
-->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" >
<!--
1.modal-dialog：创建正在的弹出内容
2.modal-dialog-centered：使得弹出居中显示
3.role="document"：增强语义
-->
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<!--
1.定义弹窗的上半部分
-->
<div class="modal-header">
<!--
class="modal-title"：定义弹窗的标题
-->
<h5 class="modal-title" id="exampleModalCenterTitle">确认弹窗</h5>
<!--定义关闭弹窗-->
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<br>
<!--
class="modal-body"：定义弹窗的中间部分
-->
<div class="modal-body">
确认提交吗？
</div>
<!--
class="modal-footer"：定义弹窗的下半部分
-->
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
<button type="button" class="btn btn-primary">确认</button>
</div>
</div>
</div>
</div>页面显示：
8.提示气泡
1）提示冒泡：鼠标悬浮按钮处，弹出提示
详情请点击
代码示例：
<div style="margin: 200px">
<!--
1.data-toggle="tooltip":告诉bootstrap需要切换的是冒泡提示
2.data-placement="top"：定义提示显示的方向
3.title="提示内容"：定义提示的内容
-->
<button class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="财务审核通过，才可以提交。">
提交
</button>
</div>
<script>
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
</script>页面显示：
2）pop提示：鼠标点击按钮处，弹出提示。再次点击，弹框关闭
详情请点击
<div style="margin: 200px">
<!--
1.data-toggle="popover":告诉bootstrap需要切换的是pop提示
2.data-placement="top"：定义提示显示的方向
-->
<button class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on top
</button>
</div>
<!--
在任意位置启用弹出窗口
-->
<script>
$(function () {
$('[data-toggle="popover"]').popover()
})
</script>9.导航栏
详情请点击
代码示例：
<!--
1.class="navbar": 告诉Bootstrap需要创建一个响应式的导航栏
2.class="navbar-expand-lg": 告诉Bootstrap在哪一种屏幕尺寸上需要展示完整的导航栏
3.class="navbar-light bg-light": 设置导航栏的主题样式
-->
<nav class="navbar navbar-expand-xl navbar-light bg-success">
<!--
1.class="navbar-brand": 指定导航栏中公司的品牌信息(公司名称/LOGO)
-->
<a class="navbar-brand" href="#">知播渔</a>
<!--
1.class="navbar-toggler": 创建一个移动端的菜单按钮
2.data-toggle="collapse": 告诉bootstrap需要切换的是折叠面板
3.data-target="#navbarSupportedContent": 告诉bootstrap需要切换的是哪一个折叠面板
4.class="navbar-toggler-icon": 设置按钮的字体图标
-->
<button class="navbar-toggler" data-toggle="collapse" data-target="#navbarSupportedContent">
<span class="navbar-toggler-icon"></span>
</button>
<!--
1.class="collapse": 创建一个折叠面板
注意点: 折叠面板默认情况下是不会显示的
2.class="navbar-collapse":用于通过父断点进行分组和隐藏导航列内容
-->
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<!--
1. class="navbar-nav": 创建导航栏的菜单
2. class="nav-item": 创建导航来的菜单项
-->
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</nav>
977
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
