小白教程
所有教程
关于
Search
172.70.100.192
172.70.100.192
参数设置
贡献
退出
操作
编辑
移动
保护
信息
历史
删除
查看“Bootstrap5 颜色”的源代码
本页内容
上一节:
Bootstrap5_文字排版
下一节:
Bootstrap5_表格
因为以下原因,您没有权限编辑本页:
您请求的操作仅限属于该用户组的用户执行:
用户
您可以查看和复制此页面的源代码。
{{DISPLAYTITLE:Bootstrap5 颜色}}[[Category:Bootstrap 5 教程|6]] = Bootstrap5 颜色 = Bootstrap 5 提供了一些有代表意义的颜色类:.text-muted, .text-primary, .text-success, .text-info, .text-warning, .text-danger, .text-secondary, .text-white, .text-dark, .text-body (默认颜色,为黑色) and .text-light: <sample title="" desc="" lang="html" hererun="1"> <div class="container"> <h2>代表指定意义的文本颜色</h2> <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-body">默认颜色,为黑色。</p> <p class="text-light">浅灰色文本(白色背景上看不清楚)。</p> <p class="text-white">白色文本(白色背景上看不清楚)。</p> </div> </sample> <run name=""> <!DOCTYPE html> <html> <head> <title>Bootstrap5 实例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="container mt-3"> <div class="container"> <h2>代表指定意义的文本颜色</h2> <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-body">默认颜色,为黑色。</p> <p class="text-light">浅灰色文本(白色背景上看不清楚)。</p> <p class="text-white">白色文本(白色背景上看不清楚)。</p> </div> </div> </body> </html> </run> 可以设置文本颜色透明度为 50% ,使用 .text-black-50 或 .text-white-50 类: <sample title="" desc="" lang="html" hererun="1"> <p class="text-black-50">透明度为 50% 的黑色文本,背景为白色。</p> <p class="text-white-50 bg-dark">透明度为 50% 的白色文本,背景为黑色。</p> </sample> <run name=""> <!DOCTYPE html> <html> <head> <title>Bootstrap5 实例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="container mt-3"> <h2>文本颜色透明度</h2> <p>可以设置文本颜色透明度为 50% ,使用 .text-black-50 或 .text-white-50 类:</p> <p class="text-black-50">透明度为 50% 的黑色文本,背景为白色。</p> <p class="text-white-50 bg-dark">透明度为 50% 的白色文本,背景为黑色。</p> </div> </body> </html> </run> '''在链接中使用''' <sample title="" desc="" lang="html" hererun="1"> <div class="container"> <h2>文本颜色</h2> <p>鼠标移动到链接。</p> <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> </div> </sample> <run name=""> <!DOCTYPE html> <html> <head> <title>Bootstrap5 实例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="container mt-3"> <div class="container"> <h2>文本颜色</h2> <p>鼠标移动到链接。</p> <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> </div> </div> </body> </html> </run> == 背景颜色 == 提供背景颜色的类有: .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark 和 .bg-light。 注意背景颜色不会设置文本的颜色,在一些实例中你需要与 .text-* 类一起使用。 <sample title="" desc="" lang="html" hererun="1"> <div class="container"> <h2>背景颜色</h2> <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> </div> </sample> <run name=""> <!DOCTYPE html> <html> <head> <title>Bootstrap5 实例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="container mt-3"> <div class="container"> <h2>背景颜色</h2> <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> </div> </div> </body> </html> </run>
返回至“
Bootstrap5 颜色
”。
上一节:
Bootstrap5_文字排版
下一节:
Bootstrap5_表格