BootStrap4：组件
一、按钮
1.1、普通按钮
Bootstrap包括多个预定义的按钮样式，每个样式都有自己的语义目的，另外还有一些额外的功能可以用于更多的控制。
样式效果：
源代码：
<body class="container">
<button type="button" class="btn btn-primary">Primarybutton>
<button type="button" class="btn btn-secondary">Secondarybutton>
<button type="button" class="btn btn-success">Successbutton>
<button type="button" class="btn btn-danger">Dangerbutton>
<button type="button" class="btn btn-warning">Warningbutton>
<button type="button" class="btn btn-info">Infobutton>
<button type="button" class="btn btn-light">Lightbutton>
<button type="button" class="btn btn-dark">Darkbutton>
<button type="button" class="btn btn-link">Linkbutton>
body>
1.2、轮廓按钮
.btn 在引用中，实现轮廓按钮可以用默认修饰符类替换.btn-outline-*任何按钮上的所有背景颜色和图像。
样式效果：
源代码：
<body class="container">
<button type="button" class="btn btn-outline-primary">Primarybutton>
<button type="button" class="btn btn-outline-secondary">Secondarybutton>
<button type="button" class="btn btn-outline-success">Successbutton>
<button type="button" class="btn btn-outline-danger">Dangerbutton>
<button type="button" class="btn btn-outline-warning">Warningbutton>
<button type="button" class="btn btn-outline-info">Infobutton>
<button type="button" class="btn btn-outline-light">Lightbutton>
<button type="button" class="btn btn-outline-dark">Darkbutton>
body>
1.3、按钮组
1.3.1、水平按钮组
使用按钮组合，可以把一系列按钮编组在一行里，将一系列的 .btn 包裹在.btn-group内。
样式效果：
源代码：
<body class="container">
<div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn btn-secondary">Leftbutton>
<button type="button" class="btn btn-secondary">Middlebutton>
<button type="button" class="btn btn-secondary">Rightbutton>
div>
body>
1.3.2、垂直按钮组
添加.btn-group-vertical 将一组按钮垂直排列 。
样式效果：
源代码：
<body class="container">
<div class="btn-group-vertical" role="group" aria-label="Basic example">
<button type="button" class="btn btn-secondary">Topbutton>
<button type="button" class="btn btn-secondary">Middlebutton>
<button type="button" class="btn btn-secondary">Bottombutton>
div>
body>
二、卡片
2.1、普通卡片
.card卡片组件是BootStrap 4新增的一组重要样式，它是一一个灵活的、可扩展的内容器，包含了可选的卡片头和卡片脚、一个大范围的内容、上下文背景色以及强大的显示选项。
- .card-body：可以建立起卡片的内容主体，如果你需要在一个.card中装置带边框的内容时，可以使用它
- .card-title和
- .card-link 与 结合：可以方便添加平行的链接
- .card-subtitle 和
- .card-img-top：定义一张图片在卡片的顶部 。
Ps：如果 .card-title 和 .card-subtitle 组合放在 .card-body 中, 则可对齐主、副标题。
card-body效果
card-body源代码
<div class="card">
<div class="card-body"> This is some text within a card body. div>
div>
card-title与card-link效果：
card-title与card-link源代码：
<body class="container">
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Card titleh5>
<h6 class="card-subtitle mb-2 text-muted">Card subtitleh6>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.p>
<a href="#" class="card-link">Card linka>
<a href="#" class="card-link">Another linka>
div>
div>
body>
card-img-top效果：
源代码：
<body class="container">
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card titleh5>
<p class="card-text">
Some quick example text to build on the card title and make up
the bulk of the card's content.
p>
<a href="#" class="btn btn-primary">Go somewherea>
div>
div>
body>
2.2、列表组卡片
样式效果：
源代码：
<body class="container">
<div class="card" style="width: 18rem;">
<ul class="list-group list-group-flush">
<li class="list-group-item">Cras justo odioli>
<li class="list-group-item">Dapibus ac facilisis inli>
<li class="list-group-item">Vestibulum at erosli>
ul>
div>
body>
2.3、带页眉页脚的卡片
- .card-header：页眉
- .card-footer：页脚
样式效果：
源代码：
<body class="container">
<div class="card">
<div class="card-header"> Featured div>
<div class="card-body">
<h5 class="card-title">Special title treatmenth5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.p>
div>
<div class="card-footer">
<a href="#" class="btn btn-primary">Go somewherea>
div>
div>
body>
三、表单组件
文本控件（如 、、