Bootstrap 样式之 元素背景颜色

在Bootstrap中既有文本颜色的样式也有元素背景颜色的样式,

我们先来看看元素背景的颜色有哪几种?

一共五种背景色:分别是 bg-primary   bg-success    bg-info     bg-warning     bg-danger

代码:

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! --><link rel="stylesheet" href="bootstrap.css"><title>Bootstrap 101 Template</title><style>p{font-size:50px;}</style></head><body><p class="bg-primary">我是bg-primary</p><p class="bg-success">我是bg-success</p><p class="bg-info">我是bg-info</p><p class="bg-warning">我是bg-warning</p><p class="bg-danger">我是bg-danger</p><script src="jquery.js"></script><script src="bootstrap.js"></script></body>
</html>

显示效果:

我们打开 Boostrap.css 文件,搜索 bg-primary:

我们可以看到背景颜色的样式分别为:

.bg-primary{  background-color:#337ab7;  }

.bg-success{  background-color:#dff0d8;  }

.bg-info{  background-color:#d9edf7 ;  }

.bg-warning{  background-color:#fcf8e3 ;  }

.bg-danger{  background-color:#f2dede ;  }

我们可以根据需要对这些样式进行选取和修改;

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

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

相关文章

HTB-Nibbles

HTB-Nibbles 信息收集开机 信息收集 nmap ssh 22http 80 gobuster和dirbuster 看看源码 一眼看到admin.php nmap sshhttp 看网页源码 nibbleblog gobuster和dirbuster admin.php一堆文件 开机 边查找文件边尝试了几个登陆密码&#xff0c;但是这几个密码都失败了。…

Bootstrap 颜色

一、Bootstrap 颜色 1.1 基本颜色 Bootstrap4 提供了一些有代表意义的颜色类&#xff1a;.text-muted, .text-primary, .text-success, .text-info, .text-warning, .text-danger, .text-secondary, .text-white, .text-dark and .text-light: <div class"container&q…

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;国内网…