1.1 警告提示框
1.2 徽章和面包屑
1.3 按钮和按钮组
1.4 卡片
1.5 列表组
1.6 导航和选项卡
1.7 分页和进度条
1.8 巨幕和旋转图标
1.9 轮播图
1.10 折叠菜单
1.11 下拉菜单
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>18.卡片</title>
<!-- 移动设备优先 设置宽度为设备屏幕的宽度，初始化缩放的比例，自动适应手机屏幕的宽度-->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<!-- 引入Bootstrap CSS -->
<link rel="stylesheet" href="./bootstrap-4.6.0-dist/css/bootstrap.css">
</head>
<style type="text/css">
body {
padding: 20px;
}
</style>
<body>
<div class="dropdown">
<button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">下拉菜单</button>
<div class="dropdown-menu">
<a href="#" class="dropdown-item">选项一</a>
<a href="#" class="dropdown-item">选项二</a>
<a href="#" class="dropdown-item">选项三</a>
</div>
</div>
<br>
<div class="dropdown btn-group">
<button type="button" class="btn btn-success">下拉菜单</button>
<button type="button" class="btn btn-success dropdown-toggle dropdown-toggle-split" data-toggle="dropdown"></button>
<div class="dropdown-menu">
<a href="#" class="dropdown-item active">选项一</a>
<a href="#" class="dropdown-item">选项二</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">选项三</a>
<a href="#" class="dropdown-item disabled">选项三</a>
</div>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="dropdown btn-group dropup">
<button type="button" class="btn btn-success">下拉菜单</button>
<button type="button" class="btn btn-success dropdown-toggle dropdown-toggle-split" data-toggle="dropdown"></button>
<div class="dropdown-menu">
<a href="#" class="dropdown-item active">选项一</a>
<a href="#" class="dropdown-item">选项二</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">选项三</a>
<a href="#" class="dropdown-item disabled">选项三</a>
</div>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="dropdown btn-group dropright">
<button type="button" class="btn btn-success">下拉菜单</button>
<button type="button" class="btn btn-success dropdown-toggle dropdown-toggle-split" data-toggle="dropdown"></button>
<div class="dropdown-menu">
<a href="#" class="dropdown-item active">选项一</a>
<a href="#" class="dropdown-item">选项二</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">选项三</a>
<a href="#" class="dropdown-item disabled">选项三</a>
</div>
</div>
<!-- 先引入 jQuery.js,再引入bootstrap.js -->
<script src="./js/jquery-3.5.0.js"></script>
<script src="bootstrap-4.6.0-dist/js/bootstrap.bundle.js"></script>
</body>
</html>
1.12 导航条
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>18.卡片</title>
<!-- 移动设备优先 设置宽度为设备屏幕的宽度，初始化缩放的比例，自动适应手机屏幕的宽度-->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<!-- 引入Bootstrap CSS -->
<link rel="stylesheet" href="./bootstrap-4.6.0-dist/css/bootstrap.css">
</head>
<style type="text/css">
body {
padding: 20px;
}
</style>
<body>
<nav class="navbar navbar-expand-md navbar-dark bg-primary">
<span class="navbar-brand">LOGO</span>
<button class="navbar-toggler" data-toggle="collapse" data-target="#navbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar">
<ul class="navbar-nav ml-auto">
<li class="nav-item "><a class="nav-link" href="#">首页</a></li>
<li class="nav-item active"><a class="nav-link" href="#">菜单1</a></li>
<li class="nav-item"><a class="nav-link" href="#">菜单2</a></li>
<li class="nav-item"><a class="nav-link" href="#">菜单3</a></li>
</ul>
</div>
</nav>
<br>
<nav class="navbar navbar-expand-md navbar-dark bg-primary">
<span class="navbar-brand">LOGO</span>
<button class="navbar-toggler" data-toggle="collapse" data-target="#navbar2">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar2">
<div class="navbar-nav ml-auto">
<a class="nav-item nav-link active" href="#">首页</a>
<a class="nav-item nav-link" href="#">菜单1</a>
<a class="nav-item nav-link" href="#">菜单2</a>
<a class="nav-item nav-link disabled" href="#">菜单3</a>
</div>
</div>
</nav>
<!-- 先引入 jQuery.js,再引入bootstrap.js -->
<script src="./js/jquery-3.5.0.js"></script>
<script src="bootstrap-4.6.0-dist/js/bootstrap.bundle.js"></script>
</body>
</html>
1.13 滚动监听
1.14 轻量弹框
1.15 模态框
1.16 表单
<form action="" class="form-row">
<div class="form-group col-sm-6">
<label for="user">请输入用户名：</label>
<input type="text" id="user" class="form-control">
</div>
<div class="form-group col-sm-6">
<label for="password">请输入密码：</label>
<input type="password" id="password" class="form-control">
</div>
<div class="form-check col-sm-12 ">
<input type="checkbox" id="check" class="form-check-input">
<label for="check">保存用户名和密码</label>
</div>
<div class="form-group col-sm-12">
<label for="city">选择城市：</label>
<select multiple="multiple" name="" id="city" class="form-control">
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">广州</option>
<option value="4">深圳</option>
</select>
</div>
<div class="form-group col-sm-12">
<label for="info">请输入备注：</label>
<textarea name="info" id="info" rows="10" cols="30" class="form-control">
</textarea>
</div>
<div class="form-group col-sm-12">
<label for="file">上传头像：</label>
<input type="file" id="file" class="form-control-file">
</div>
<div class="form-group col-sm-12">
<label for="email1">请输入电子邮箱：</label>
<input type="text" id="email1" class="form-control form-control-lg">
</div>
<div class="form-group col-sm-12">
<label for="email2">请输入电子邮箱2：</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">@</span>
</div>
<input type="text" id="email2" class="form-control">
</div>
</div>
<div class="form-group col-sm-12">
<label for="range">请选择大小：</label>
<input type="range" id="range" class="form-control-range">
</div>
<div class="form-inline col-sm-12">
<div class="form-check">
<input type="checkbox" id="check1" class="form-check-input">
<label for="check1" class="form-check-label">复选框</label>
</div>
<div class="form-check">
<input type="radio" id="radio" class="form-check-input">
<label for="radio" class="form-check-label">单选框</label>
</div>
</div>
</form>
