按钮
- 普通按钮
<button class="btn btn-primary">我是按钮</button> <button class="btn btn-success">我是按钮</button> <button class="btn btn-link">我是按钮</button>
- 高级按钮
<button class="btn btn-primary btn-lg">btn-lg</button> <button class="btn btn-primary btn-sm">btn-sm</button> <button class="btn btn-primary btn-block">btn-block</button> <button class="btn btn-info" data-toggle="button">toggle</button>
- 其他按钮
<a href="#" class="btn btn-success">link</a> <a href="#" class="btn btn-success disabled">disabled link</a> <input type="button" class="btn btn-success" value="input"> <input type="button" class="btn btn-danger" disabled value="disabled input">
按钮组
- 复选框按钮组
<div class="btn-group btn-group-toggle" data-toggle="buttons"> <label class="btn btn-secondary active"> <input type="checkbox" checked> Java </label> <label class="btn btn-secondary"> <input type="checkbox"> PHP </label> <label class="btn btn-secondary"> <input type="checkbox"> Python </label> </div>
- 单选框按钮组
<div class="btn-group btn-group-toggle" data-toggle="buttons"> <label class="btn btn-secondary active"> <input type="radio" name="lang" checked> Java </label> <label class="btn btn-secondary"> <input type="radio" name="lang"> PHP </label> <label class="btn btn-secondary"> <input type="radio" name="lang"> Python </label> </div>
- 垂直按钮组
<div class="btn-group-vertical btn-group-sm"> <button class="btn btn-secondary">上</button> <button class="btn btn-secondary">中</button> <button class="btn btn-secondary">下</button> </div>
- 分业工具按钮组
<div class="btn-toolbar"> <div class="btn-group mt-5 mr-2"> <button class="btn btn-secondary">ss1</button> <button class="btn btn-secondary">2</button> <button class="btn btn-secondary">3</button> <button class="btn btn-secondary">4</button> <button class="btn btn-secondary">5</button> </div> <div class="btn-group mt-5"> <button class="btn btn-secondary">6</button> <button class="btn btn-secondary">7</button> <button class="btn btn-secondary">8</button> </div> </div>
卡片
普通卡片
卡片中可以存放文字、图片、列表等内容。
- 主题卡片
<div class="card-body"> <div class="card-title"> 卡片标题</div> <div class="card-subtitle text-muted">子标题</div> <p class="card-text">这是卡片体的部分</p> </div>
- 列表卡片
<div class="card" style="width:300px"> <div class="card-header"> 列表卡片标题 </div> <ul class="list-group list-group-flush"> <li class="list-group-item">列表一</li> <li class="list-group-item">列表二</li> <li class="list-group-item">列表三</li> </ul> </div>
- 三段式卡片
<div class="card" style="width:300px">
<div class="card-header">页头</div>
<div class="card-body">主体</div>
<div class="card-footer">页脚</div>
</div>
- 登录式卡片
<div class="card">
<img src="images/banner.jpg" class="card-img-top" alt="">
<div class="card-body">主体<br>
<a class="card-link" href="#">登录</a>
<a class="card-link" href="#">注册</a>
</div>
<div class="card-footer">页脚</div>
</div>
- 文字悬浮卡片
<div class="card w-75 text-center bg-info text-white" >
<img src="images/banner.jpg" class="card-img" alt="">
<div class="card-img-overlay">文字悬浮在图片上</div>
</div>
含导航栏
- 导航栏卡片
<div class="card" style="width:500px"> <div class="card-header"> <ul class="nav nav-tabs card-header-tabs"> <li class="nav-item"><a class="nav-link active" href="#">主页</a></li> <li class="nav-item"><a class="nav-link" href="#">内容</a></li> <li class="nav-item"><a class="nav-link disabled" href="#">其它</a></li> </ul> </div> <div class="card-body">这是卡片体的部分</div> </div>
- 按钮栏卡片
<div class="card" style="width:500px"> <div class="card-header"> <ul class="nav nav-pills card-header-pills"> <li class="nav-item"><a class="nav-link active" href="#">主页</a></li> <li class="nav-item"><a class="nav-link" href="#">内容</a></li> <li class="nav-item"><a class="nav-link disabled" href="#">其它</a></li> </ul> </div> <div class="card-body">这是卡片体的部分</div> </div>
分组卡片
- 卡片组无间隙
<div class="card-group"> <div class="card" > <img src="images/banner.jpg" class="card-img" alt=""> <div class="card-body">主体卡片一</div> <div class="card-footer">页脚</div> </div> <div class="card" > <img src="images/banner.jpg" class="card-img" alt=""> <div class="card-body">主体卡片二</div> <div class="card-footer">页脚</div> </div> </div>
- 卡片组有间隙
<div class="card-deck"> <div class="card"> ···
- 瀑布流卡片组
<div class="card-columns"> <div class="card" > <img src="images/banner.jpg" class="card-img" alt=""> <div class="card-body">主体卡片一</div> <div class="card-footer">页脚</div> </div> <div class="card" > <div class="card-body">无图卡片一</div> <div class="card-footer">页脚</div> </div> <div class="card" > <div class="card-body">无图卡片二</div> <div class="card-footer">页脚</div> </div> </div>