Bootstrap 颜色

一、Bootstrap 颜色

1.1 基本颜色

Bootstrap4 提供了一些有代表意义的颜色类:.text-muted, .text-primary, .text-success, .text-info, .text-warning, .text-danger, .text-secondary, .text-white, .text-dark and .text-light:

<div class="container"><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>
</div>

在这里插入图片描述

1.2 在链接中使用

<div class="container"><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>

在这里插入图片描述

1.3 背景颜色

提供背景颜色的类有: .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark 和 .bg-light。
注意背景颜色不会设置文本的颜色,在一些实例中你需要与 .text-* 类一起使用。

<div class="container"><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>

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://xiahunao.cn/news/1381359.html

如若内容造成侵权/违法违规/事实不符,请联系瞎胡闹网进行投诉反馈,一经查实,立即删除!

相关文章

NewBlueFX TotalFX7 v6.0.200108 (x64) for AE/Premiere WIN版本

用于Adobe AfterFX和Premiere Pro WIN的NewBlueFX TotalFX7 v6.0.200108&#xff08;x64&#xff09; TotalFX具有177种效果的1,500多个预设。这是我们最全面的字幕工具&#xff0c;过渡&#xff0c;过滤器和视频编辑插件套件。获取所有NewBlue视频效果集合的功能齐全的Ultima…

BNext

又搬来了大神器啊 来自德国HassoPlattner计算机系统工程研究院的NianhuiGuo和HaojinYang等研究者提出了BNext模型&#xff0c;成为第一个在ImageNet数据集上top1分类准确率突破80%的BNN。 两年前&#xff0c;依靠早期 BNN 工作 XNOR-Net 起家的 XNOR.AI 被苹果公司收购&#…

HybridCLR 热更新介绍

HybridClr介绍 C# -> HybridCLR 热更新介绍 以下讲简单阐述下个人理解的Hclr的相关知识&#xff0c;以及在使用中遇到的坑点. 在使用HybridCLR 前的一些基本知识储备 为了方便下文的更好的理解,建议大家先简单过一下下文的一些名称和一些简单的知识点&#xff1a; Comm…

tkinter文件对话框

文章目录 文件对话框文件对象文件类型其他参数 tkinter系列&#xff1a; GUI初步&#x1f48e;布局&#x1f48e;绑定变量&#x1f48e;绑定事件&#x1f48e;消息框扫雷小游戏&#x1f48e;强行表白神器 文件对话框 filedialog提供了多种与文件交互相关的对话框&#xff0c…

bluestore

BlueStore BlueStore 架构及原理分析 Ceph 底层存储引擎经过了数次变迁&#xff0c;目前最常用的是 BlueStore&#xff0c;在 Jewel 版本中引入&#xff0c;用来取代 FileStore。与 FileStore 相比&#xff0c;Bluesore 越过本地文件系统&#xff0c;直接操控裸盘设备&#x…

Bootstrap系列之颜色(Colors)

文章の目录 1、字体颜色2、背景颜色3、背景渐变写在最后 通过少量的颜色类来传达颜色的含义。还包括对具有悬停状态的链接样式的支持。 处理专一性 有时由于另一个选择器的专一性而不能应用上下文类。在某些情况下&#xff0c;一个足够的解决方法是用类将元素内容包装在<div…

Bluethooth

阅读时长10分钟 蓝牙技术是一种近距离无线连接技术。能在包括移动电话、PDA、无线耳机、笔记本电脑、相关外设等众多设备之间进行无线信息交换。 历史&#xff1a;蓝牙技术是世界著名的 5 家大公司一爱立信(Ericsson)、诺基亚(Nokia)、东芝(Toshiba)、国际商用机器公司(IBM)和英…

NewBlue Titler Pro 7不能预览 预览黑屏

问题描述 最近在剪辑视频 使用“NewBlue Titler Pro 7 Ultimate 7.4.201109”和谐版增加字幕时&#xff0c;出现字幕刚开始可以预览&#xff0c;动几下鼠标预览窗口卡死&#xff0c;随后黑屏。 解决方式 折腾之后发现用的版本不对&#xff0c;更换为下面的版本后可以正常使用…

华为od统一考试B卷【九宫格按键输入法】Python 实现

所有题目均有五种语言实现。C实现目录、C++ 实现目录、Python实现目录、Java实现目录、JavaScript实现目录 题目 九宫格按键输入,判断输出,有英文和数字两个模式,默认是数字模式,数字模式直接输出数字,英文模式连续按同一个按键会依次出现这个按键上的字母,如果输入”/…

华为od统一考试B卷【九宫格按键输入法】Java 实现

所有题目均有五种语言实现。C实现目录、C++ 实现目录、Python实现目录、Java实现目录、JavaScript实现目录 题目 九宫格按键输入,判断输出,有英文和数字两个模式,默认是数字模式,数字模式直接输出数字,英文模式连续按同一个按键会依次出现这个按键上的字母,如果输入”/…

2022华为机试真题 C语言 实现【九宫格按键输入法】

九宫格按键输入,判断输出,有英文和数字两个模式,默认是数字模式,数字模式直接输出数字,英文模式连续按同一个按键会依次出现这个按键上的字母,如果输入”/”或者其他字符,则循环中断。 要求输入一串按键,输出屏幕显示。 输入描述: 输入范围为数字 0~9 和字符’#’、…

谷歌键盘切换26键与九宫格中文输入法

今天不小心把手输入法改成了九宫格&#xff0c;很不习惯&#xff0c;在设置里面找了很久也没找到&#xff0c;百度也没有找到答案。 最终偶然发现解决方案。 长按【中】出现如下界面&#xff0c;即可切换26键与九宫格。

Python之九宫格输入

文章目录 前言一、问题描述二、问题解决 前言 九宫格输入是一款手机平台的必备利器。假设有九宫格输入法键盘布局如下&#xff1a;‪‬‪‬‪‬‪‬‪‬‮‬‭‬‪‬‪‬‪‬‪‬‪‬‪‬‮‬‪‬‭‬‪‬‪‬‪‬‪‬‪‬‮‬‫‬‭‬‪‬‪‬‪‬‪‬‪‬‮‬‪‬‮‬‪‬‪‬…

九宫格按键输入c++

假设有九宫格输入法键盘布局如下&#xff1a; [ 1,.?! ] [ 2ABC ] [ 3DEF ] [ 4GHI ] [ 5JKL ] [ 6MNO ] [ 7PQRS ] [ 8TUV ] [ 9WXYZ ] [ 0空 ] 注意&#xff1a;中括号[ ]仅为了表示键盘的分隔&#xff0c;不是输入字符。 每个中括号中&#xff0c;位于首位的数字字符即是…

centos7部署openldap开启memberof并接入jumpserver

文章目录 前言1.yum安装openldap2.配置密码3.导入配置4.定义域5.配置memberof6.配置base dn7.安装phpldapadmin管理8.调整httpd的配置9.调整php的配置10.登陆php管理页面11.同步旧ldapsever用户数据(可省略)12.客户端配置13.对接jumpserver 前言 介绍如何在centos7上部署openl…

Unity Shader特效:人物模型动态流动光特效

本文写于2017-6-6&#xff0c;转载请注明 以下为正文 ………………………………………………………………………………………………………………………………………………………… 先上效果图&#xff1a; Shader界面图&#xff1a; 因为特效师的攻击特效做得过为酷炫&#…

python实现两个图片的叠加融合

python通过PIL将两个图片叠加融合 我想到将一个图片去除背景将其放到另一张图片上以此实现融合。 1**. 打开想要融合的图片** file Image.open(6.png) verse 9.png我选取的两个图片 2**. 将附在上面的图片的背景进行透明化** verse transPNG(verse)# 图片背景透明化 …

壁纸网站研究:强大到没朋友的壁纸网站整理(动漫/二次元/宅男/风景/真人)

1、wallhaven 域名&#xff1a;https://wallhaven.cc 介绍&#xff1a;一个强大的壁纸网站&#xff0c;包含人物、动漫、风景&#xff0c;同时有一些老司机内容&#xff0c;需要选择NSFW&#xff0c;但需要登录才能观看&#xff0c;隐藏功能。但是海外网站&#xff0c;国内网…

java 人物头像识别

一、功能描述&#xff1a; 人物头像识别&#xff0c;识别图片中的是否含有人物头像。 二、准备工作&#xff1a; 创建需要识别的图片目录 &#xff0c;如F:/img&#xff0c;链接中files\img中为示例图片。导入所需jar包&#xff0c;见files\jar。新建依赖文件haarcascade_fro…