• Welcome to Journal web site.
首页 关于 博客 留言 联系
首页 关于 博客 留言 联系

我是 PHP 程序员

- 开发无止境 -

Next
Prev

Bootstrap4 颜色按钮列表

Data: 2022-06-18 11:05:21Form: JournalClick: 0

# 颜色按钮列表

# 一、颜色

# 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按钮样式
.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、尺寸

  • btn-lg 大尺寸
  • btn-sm 小尺寸
<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、块 按钮

  • btn-block 块
<button type="button" class="btn btn-primary btn-block">块</button>

# 6、活动和禁用

  • active 活动
  • disabled 禁用
<button type="button" class="btn btn-primary active">活动</button>
<button type="button" class="btn btn-primary disabled">禁用</button>

# 7、按钮组

  • btn-group 按钮组
<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、垂直按钮组

  • btn-group-vertical 垂直
<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
journal I'm Developers.
Copyright © 2014-2024 Guojunjie.com.
All screenshots © 郭俊杰(Journal).
I have been in Xiamen,China.
Website Establishment by Journal.
闽ICP备12018326号-2
Name:
<提交>