一.按钮
按钮是网页中不可缺少的一种组件，例如页面中搜索、注册等按钮。按钮还广泛应用于表单、下拉菜单、模态框等场景中。
1.预定义样式类
Bootstrap提供了btn来定义按钮，btn定义了基本的按钮样式类。此外，Bootstrap定义了多个预定义的按钮样式，每个样式都有自己的语义目的。
例：预定义按钮样式示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css"/>
<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body class="container">
<button type="button" class="btn btn-primary">primary</button>
<button type="button" class="btn btn-secondary">secondary</button>
<button type="button" class="btn btn-success">success</button>
<button type="button" class="btn btn-danger">danger</button>
<button type="button" class="btn btn-warning">warning</button>
<button type="button" class="btn btn-info">info</button>
<button type="button" class="btn btn-light">light</button>
<button type="button" class="btn btn-dark">dark</button>
<button type="button" class="btn btn-link">link</button>
</body>
</html>
结果图：
2.设计边框颜色
按钮设计时，如果不希望使用沉重的背景颜色，可以使用.btn-outline-*替换预定义样式类。使用.btn-outline-*类可以没置按钮的边框，*可以从prirnary、secondary、success、danger.warning、info、light和dark中进行选择。
例：设计边框颜色示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css"/>
<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body class="container">
<button type="button" class="btn btn-outline-primary">primary</button>
<button type="button" class="btn btn-outline-secondary">secondary</button>
<button type="button" class="btn btn-outline-success">success</button>
<button type="button" class="btn btn-outline-danger">danger</button>
<button type="button" class="btn btn-outline-warning">warning</button>
<button type="button" class="btn btn-outline-info">info</button>
<button type="button" class="btn btn-outline-light">light</button>
<button type="button" class="btn btn-outline-dark">dark</button>
<button type="button" class="btn btn-outline-link">link</button>
</body>
</html>
结果图：
3.设计大小
使用.btn-lg、.btn-sm类样式，可分别实现大规格按钮、小规格按钮的定义。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<meta name="viewport"
content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css" />
<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body class="container">
<button type="button" class="btn btn-primary btn-lg">大号按钮</button>
<button type="button" class="btn btn-primary">默认</button>
<button type="button" class="btn btn-primary btn-sm">小号按钮</button>
</body>
</html>结果图：
4.激活和禁用状态
给按钮添加.active类样式实现激活状态。激活状态下，按钮背景颜色更深、边框变暗、带内阴影。给按钮添加.disabled类样式实现禁用状态，使按钮看起来处于非活动的状态，不具有交互性，点击不会有响应。
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<meta name="viewport"
content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css" />
<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body class="container">
<button type="button" class="btn btn-primary btn-lg">原始按钮</button>
<button type="button" class="btn btn-primary btn-lg active">激活按钮</button>
<button type="button" class="btn btn-primary btn-lg disabled">禁用按钮</button>
</body>
</html>结果图：
5.按钮标签
Bootstrap使用btn类来定义按钮，btn可以在<button>元素上使用，也可以在<a>、<input>元素
上使用，同样能带来按钮效果。
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<meta name="viewport"
content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css" />
<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body class="container">
<a class="btn btn-primary" href="#" role="button">Link</a>
<button class="btn btn-primary" type="submit">Button</button>
<input class="btn btn-primary" type="button" value="Input">
<input class="btn btn-primary" type="submit" value="Submit">
<input class="btn btn-primary" type="reset" value="Reset">
</body>
</html>结果图：
二、按钮组
如果想要将多个按钮组合放在一起，可以使用按钮组来实现。
1.定义按钮组
将多个<a>或<button>元素放在一个含有.btn-group类容器中，便可形成一个按钮组。
例：创建一个基本按钮组
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport"
content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css" />
<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body class="container">
<div class="btn-group">
<button type="button" class="btn btn-secondary">1</button>
<button type="button" class="btn btn-secondary">2</button>
<button type="button" class="btn btn-secondary">3</button>
<button type="button" class="btn btn-secondary">4</button>
<button type="button" class="btn btn-secondary">5</button>
</div>
</body>
</html>结果图：
2.工具栏按钮组
根据需要使用样式定义，对按钮进行群组、间隔等定义，将按钮组的组合成为更复杂组件的按钮
工具栏。把多个基本按钮组放在一个.btn-toolbar类容器中就形成了工具栏按钮组。
例：创建一个工具栏按钮组
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css"/>
<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body class="container">
<div class="btn-toolbar">
<div class="btn-group mr-2">
<button type="button" class="btn btn-primary">上一页</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-secondary">1</button>
<button type="button" class="btn btn-secondary">2</button>
<button type="button" class="btn btn-secondary">3</button>
<button type="button" class="btn btn-secondary">4</button>
<button type="button" class="btn btn-secondary">5</button>
</div>
<div class="btn-group ml-2">
<button type="button" class="btn btn-primary">下一页</button>
</div>
</div>
</body>
</html>
结果图：
例：与输入框结合示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<meta name="viewport"
content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css" />
<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body class="container">
<div class="btn-toolbar">
<div class="btn-group mr-2">
<button type="button" class="btn btn-secondary">1</button>
<button type="button" class="btn btn-secondary">2</button>
<button type="button" class="btn btn-secondary">3</button>
<button type="button" class="btn btn-secondary">4</button>
</div>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">@</div>
</div>
<input type="text" class="form-control" placeholder="Input group example">
</div>
</div>
</body>
</html>结果图：
3.设计大小
Bootstrap提供了.btn-group-lg，.btn-group-sm类作用在.btn-group类的容器，可以控制按钮组下的每个子按钮，实现样式缩放。
例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css"/>
<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body class="container">
<div class="btn-group btn-group-lg">
<button type="button" class="btn btn-secondary">大号按钮组</button>
<button type="button" class="btn btn-secondary">大号按钮组</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-secondary">默认按钮组</button>
<button type="button" class="btn btn-secondary">默认按钮组</button>
</div>
<div class="btn-group btn-group-sm">
<button type="button" class="btn btn-secondary">小号按钮组</button>
<button type="button" class="btn btn-secondary">小号按钮组</button>
</div>
</body>
</html>
结果图：
4.嵌套按钮
将.btn-group放在另一个.btn-group里，可以实现按钮组与下拉菜单的组合。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css"/>
<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/bootstrap.bundle.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body class="container">
<div class="btn-group">
<button type="button" class="btn btn-secondary">免费注册</button>
<button type="button" class="btn btn-secondary">手机逛淘宝</button>
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">我的淘宝</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">已买到的宝贝</a>
<a class="dropdown-item" href="#">我的足迹</a>
</div>
</div>
</div>
</body>
</html>
结果图：
5.垂直排列
将一组按钮放在含有.btn-group-vertical类的容器中，就形成了垂直分布的按钮组。
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<meta name="viewport"
content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css" />
<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/bootstrap.bundle.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body class="container">
<div class="btn-group-vertical">
<button type="button" class="btn-primary">图书</button>
<button type="button" class="btn-primary">家居</button>
<button type="button" class="btn-secondary">文具</button>
<button type="button" class="btn-secondary">服饰</button>
<div class="dropdown">
<button type="button" class="btn-info" data-toggle = "dropdown">食品</button>
<div class="dropdown-menu">
<button type="button" class="dropdown-item">休闲食品</button>
<button type="button" class="dropdown-item">生鲜食品</button>
</div>
</div>
</div>
</body>
</html>结果图：
三、下拉菜单
下拉菜单是网页中常见的组件之一，Bootstrap定义了一套完整的下拉菜单组件。设计出合理，美观的下拉菜单，不仅可以合理布局页面，还可以为网页增色。
1.定义下拉菜单
下拉菜单组件应包含在.dropdown容器中，或使用
position: relative的容器。该容器包含两部分，即触发元素和下拉菜单。触发元素可以是<a>或
<button>元素，下拉菜单包含在.dropdown-menu容器中。
下拉菜单的实现思路:
当用户单击页面中选项按钮时，页面会展示当前选项下的菜单选项;
当用户再次单击页面中的该选项按钮时，页面会自动隐藏当前选项按钮下的菜单选项。
例：基本的下拉菜单
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css"/>
<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/bootstrap.bundle.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body class="container">
<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">web前端开发技术</button>
<div class="dropdown-menu">
<a href="#" class="dropdown-item">HTML5</a>
<a href="#" class="dropdown-item">CSS3</a>
<a href="#" class="dropdown-item">JavaScript</a>
</div>
</div>
</body>
</html>
结果图：
2.设置下拉菜单的样式
例：下拉菜单向右展开示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css"/>
<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/bootstrap.bundle.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body class="container">
<div class="dropright">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">web前端开发技术</button>
<div class="dropdown-menu">
<a href="#" class="dropdown-item">HTML5</a>
<a href="#" class="dropdown-item">CSS3</a>
<a href="#" class="dropdown-item">JavaScript</a>
</div>
</div>
</body>
</html>
结果图：
例：激活和禁用菜单项示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport"
content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css" />
<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/bootstrap.bundle.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body class="container">
<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">web前端开发技术</button>
<div class="dropdown-menu">
<button type="button" class="dropdown-item active">HTML5</button>
<button type="button" class="dropdown-item">CSS3</button>
<button type="button" class="dropdown-item disabled">JavaScript</button>
</div>
</div>
</body>
</html>结果图：
例：设置下拉菜单项右对齐
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport"
content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css" />
<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/bootstrap.bundle.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body class="container">
<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">web前端开发技术</button>
<div class="dropdown-menu dropdown-menu-right">
<button type="button" class="dropdown-item">HTML5</button>
<button type="button" class="dropdown-item">CSS3</button>
<button type="button" class="dropdown-item">JavaScript</button>
</div>
</div>
</body>
</html>结果图：
例：菜单内容示例1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css"/>
<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/bootstrap.bundle.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body class="container">
<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">下拉菜单</button>
<div class="dropdown-menu">
<h6 class="dropdown-header">菜单标题1</h6>
<button type="button" class="dropdown-item">菜单项1</button>
<button type="button" class="dropdown-item">菜单项2</button>
<div class="dropdown-divider"></div>
<h6 class="dropdown-header">菜单标题2</h6>
<button type="button" class="dropdown-item">菜单项3</button>
<button type="button" class="dropdown-item">菜单项4</button>
</div>
</div>
</body>
</html>
结果图：
例：菜单内容示例2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport"
content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css" />
<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/bootstrap.bundle.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body class="container">
<div class="dropdown" style="max-width: 200px;">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">下拉菜单</button>
<div class="dropdown-menu">
<p class="px-4">
下面显示一个表单
</p>
<form class="px-4 py-2">
<div class="form-group">
<label>Email address</label>
<input type="email" class="form-control" placeholder="[email protected]" />
</div>
<div class="form-group">
<label>Password</label>
<input type="password" class="form-control" placeholder="Password" />
</div>
</form>
</div>
</div>
</body>
</html>结果图：
