# 颜色按钮列表
# 一、颜色
# 1、文字颜色
参数 | 描述 |
---|
.text-muted | 柔和的文本 |
.text-primary | 重要的文本 |
.text-success | 执行成功的文本 |
.text-info | 提示信息的文本 |
.text-warning | 警告文本 |
.text-danger | 危险操作文本 |
.text-secondary | 副标题 |
.text-dark | 深灰色文字 |
.text-light | 浅灰色文本 |
.text-white | 白色文本 |
<p class="text-muted">柔和的文本</p>
<p class="text-primary">重要的文本</p>
<p class="text-success">执行成功的文本</p>
<p class="text-info">提示信息的文本</p>
<p class="text-warning">警告文本</p>
<p class="text-danger">危险操作文本</p>
<p class="text-secondary">副标题</p>
<p class="text-dark">深灰色文字</p>
<p class="text-light">浅灰色文本</p>
<p class="text-white">白色文本</p>
# 2、链接颜色
<a href="#" class="text-muted">柔和的链接</a>
<a href="#" class="text-primary">主要链接</a>
<a href="#" class="text-success">成功链接</a>
<a href="#" class="text-info">信息文本链接</a>
<a href="#" class="text-warning">警告链接</a>
<a href="#" class="text-danger">危险链接</a>
<a href="#" class="text-secondary">副标题链接</a>
<a href="#" class="text-dark">深灰色链接</a>
<a href="#" class="text-light">浅灰色链接</a>
# 3、背景颜色
参数 | 描述 |
---|
.bg-primary | 重要的背景颜色 |
.bg-success | 执行成功背景颜色 |
.bg-info | 信息提示背景颜色 |
.bg-warning | 警告背景颜色 |
.bg-danger | 危险背景颜色 |
.bg-secondary | 副标题背景颜色 |
.bg-dark | 深灰背景颜色 |
.bg-light | 浅灰背景颜色 |
<p class="bg-primary text-white">重要的背景颜色</p>
<p class="bg-success text-white">执行成功背景颜色</p>
<p class="bg-info text-white">信息提示背景颜色</p>
<p class="bg-warning text-white">警告背景颜色</p>
<p class="bg-danger text-white">危险背景颜色</p>
<p class="bg-secondary text-white">副标题背景颜色</p>
<p class="bg-dark text-white">深灰背景颜色</p>
<p class="bg-light text-dark">浅灰背景颜色</p>
# 二、按钮
# 1、按钮颜色
参数 | 描述 |
---|
.btn | 按钮样式 |
.btn-primary | 主要按钮 |
.btn-secondary | 次要按钮 |
.btn-success | 成功 |
.btn-info | 信息 |
.btn-warning | 警告 |
.btn-danger | 危险 |
.btn-dark | 黑色 |
.btn-light | 浅色 |
.btn-link | 链接 |
<button type="button" class="btn">基本按钮</button>
<button type="button" class="btn btn-primary">主要按钮</button>
<button type="button" class="btn btn-secondary">次要按钮</button>
<button type="button" class="btn btn-success">成功</button>
<button type="button" class="btn btn-info">信息</button>
<button type="button" class="btn btn-warning">警告</button>
<button type="button" class="btn btn-danger">危险</button>
<button type="button" class="btn btn-dark">黑色</button>
<button type="button" class="btn btn-light">浅色</button>
<button type="button" class="btn btn-link">链接</button>
# 2、a 链接
<a class="btn btn-primary" href="#">Link</a>
# 3、边框
参数 | 描述 |
---|
.btn-outline-primary | 主要按钮 |
.btn-outline-secondary | 次要按钮 |
.btn-outline-success | 成功 |
.btn-outline-info | 信息 |
.btn-outline-warning | 警告 |
.btn-outline-danger | 危险 |
.btn-outline-dark | 黑色 |
.btn-outline-light | 浅色 |
<button type="button" class="btn btn-outline-primary">主要按钮</button>
<button type="button" class="btn btn-outline-secondary">次要按钮</button>
<button type="button" class="btn btn-outline-success">成功</button>
<button type="button" class="btn btn-outline-info">信息</button>
<button type="button" class="btn btn-outline-warning">警告</button>
<button type="button" class="btn btn-outline-danger">危险</button>
<button type="button" class="btn btn-outline-dark">黑色</button>
<button type="button" class="btn btn-outline-light">浅色</button>
# 4、尺寸
<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>
# 5、块 按钮
<button type="button" class="btn btn-primary btn-block">块</button>
# 6、活动和禁用
<button type="button" class="btn btn-primary active">活动</button>
<button type="button" class="btn btn-primary disabled">禁用</button>
# 7、按钮组
<div class="btn-group">
<button type="button" class="btn btn-primary">开始学习</button>
<button type="button" class="btn btn-success">课件下载</button>
<button type="button" class="btn btn-warning">QQ交流群</button>
</div>
# 8、按钮组尺寸
btn-group-lg
大尺寸btn-group-sm
小尺寸尺寸
<div class="btn-group btn-group-lg"></div>
<div class="btn-group btn-group-sm"></div>
# 9、下拉框
dropdown-toggle
点击后样式dropdown-toggle-split
按钮内边距data-toggle="dropdown"
js 效果<span class="caret"></span>
倒三角图标dropdown-menu
下拉菜单样式dropdown-item
下拉成员
<div class="btn-group">
<button type="button" class="btn btn-primary">开始学习</button>
<button type="button" class="btn btn-success">课件下载</button>
<button
type="button"
class="btn btn-warning dropdown-toggle dropdown-toggle-split"
data-toggle="dropdown"
>
QQ交流群 <span class="caret"></span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">25群:731694316</a>
<a class="dropdown-item" href="#">26群:609135716</a>
</div>
</div>
<div class="btn-group">
<button type="button" class="btn btn-warning">QQ交流群</button>
<button
type="button"
class="btn btn-warning dropdown-toggle dropdown-toggle-split"
data-toggle="dropdown"
>
<span class="caret"></span>
</button>
</div>
# 10、垂直按钮组
<div class="btn-group btn-group-vertical"></div>
<div class="btn-group btn-group-vertical">
<button type="button" class="btn btn-primary">开始学习</button>
<button type="button" class="btn btn-success">课件下载</button>
<button
type="button"
class="btn btn-warning dropdown-toggle dropdown-toggle-split"
data-toggle="dropdown"
>
QQ交流群 <span class="caret"></span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">25群:731694316</a>
<a class="dropdown-item" href="#">26群:609135716</a>
</div>
</div>
# 三、列表
# 1、无序列表
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li