3.10 Bootstrap 标签

文章目录

  • Bootstrap 标签
    • 标签


Bootstrap 标签

在这里插入图片描述

下面将讲解 Bootstrap 标签。标签可用于计数、提示或页面上其他的标记显示。使用 class .label 来显示标签,如下面的实例所示:

<span class="label label-default">Label</span></h1>
<h2>Example Heading <span class="label label-default">Label</span></h2>
<h3>Example Heading <span class="label label-default">Label</span></h3>
<h4>Example Heading <span class="label label-default">Label</span></h4>

运行效果
在这里插入图片描述

您可以使用修饰的 class label-default、label-primary、label-success、label-info、label-warning、label-danger 来改变标签的外观,如下面的实例所示:

<span class="label label-default">默认标签</span>
<span class="label label-primary">主要标签</span>
<span class="label label-success">成功标签</span>
<span class="label label-info">信息标签</span>
<span class="label label-warning">警告标签</span>
<span class="label label-danger">危险标签</span>

运行效果
在这里插入图片描述

标签

描述
.label label-default默认的灰色标签
.label label-primary“primary” 类型的蓝色标签
.label label-success“success” 类型的绿色标签
.label label-info“info” 类型的浅蓝色标签
.label label-warning“warning” 类型的黄色标签
.label label-danger“danger” 类型的红色标签

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Docker 应用容器引擎 (一)

Docker 应用容器引擎 Docker是什么 是一个开源的应用容器引擎&#xff0c;基于GO语言开发并遵循了apache2.0协议开源 是在linux容器里运行应用的开源工具 是一种轻量级的“虚拟机” Docker的容器技术可以在一台主机上轻松为任何应用创建一个轻量级的、可移植的、自给自足的…

23款奔驰S400豪华型升级4D旋转高音,提升车内氛围

奔驰加装4D旋转高音&#xff0c;让高音“有型有色”,高端4D环绕立体声音响系统的视觉效果同样令人印象深刻&#xff1a;系统启动时&#xff0c;安装在前车门后视镜三角板中的两个高音头会与同色车内氛围灯一块亮起&#xff0c;同时向外旋出10mm至最佳效果位置&#xff0c;以提高…

阿里云声音复刻

阿里云声音复刻 个性化人声定制 阿里云个性化人声定制是智能语音交互产品自学习平台下的一部分 使用方式&#xff1a;https://help.aliyun.com/document_detail/456006.html 方式一&#xff1a;控制台界面定制使用方式 方式二&#xff1a;通过OpenAPI定制&#xff1a;在该页…

matplotlib从起点出发(1)_Tutorial_1

0 系列简介 这个系列&#xff0c;小白从起点出发开始整理matplotlib库的基本使用及相关技巧。小白的主要思路是沿着官网的tutorials先学习matplotlib的基础功能&#xff0c;然后针对官网总结的Cheat Sheets及其中的知识点查漏补缺。作为一个工具库&#xff0c;小白认为只要能够…

NodeJS实现支付宝沙箱支付②③

文章目录 前言版权声明Alipay SDK 沙箱环境简介Node环境要求沙箱环境配置下载所需模块准备前端静态页面以及Node服务器文件夹规范AlipaySdk 配置准备AlipaySdk 代码演示 Alipay实例化 ~ alipay.sdk 文件 AlipayForm ~ alipayForm文件 AlipayFormStatus ~ alipayForm文件 …

长城汽车Hi4技术品牌成果初现,大象转身必将势不可挡

今年1-6月&#xff0c;长城汽车销售52万辆&#xff0c;新能源车型销售9.3万辆&#xff0c;同比增长47%&#xff1b;智能新能源新产品密集上市&#xff0c;新能源销量与占比逐月攀升&#xff0c;6月销售超2.6万辆&#xff0c;占比突破25%&#xff0c;皆创历史新高&#xff1b; 全…

智慧数据驱动:基于smardaten构建多维数据可视化大屏

&#x1f935;‍♂️ 个人主页&#xff1a;艾派森的个人主页 ✍&#x1f3fb;作者简介&#xff1a;Python学习者 &#x1f40b; 希望大家多多支持&#xff0c;我们一起进步&#xff01;&#x1f604; 如果文章对你有帮助的话&#xff0c; 欢迎评论 &#x1f4ac;点赞&#x1f4…

【uni-app】常用图标、头像汇总

在做小程序的时候&#xff0c;有时候需要各种图标和头像素材&#xff0c;而百度一堆基本都是收费的。所以&#xff0c;整理一些免费好用的图标&#xff0c;头像库&#xff1a; 1、iconfont-阿里巴巴矢量图标库 基本上常用的矢量图标&#xff0c;在这儿都有&#xff0c;而且可…

【极简 亲测】已拦截跨源请求:同源策略禁止读取位于....的远程资源。(原因:CORS 头缺少 ‘Access-Control-Allow-Origin‘)

CORS是Cross-Origin Resource Sharing。 解决 首先这个是浏览器层面的拦截。下面的方法都是解除浏览器拦截的方式。 解除了之后还是有可能其他方面有问题的&#xff0c;但是那个会提示其他错误。 比如CORs Failed之类的&#xff0c;这个是没收到response&#xff0c;大概率是…

【go】xorm分类统计及多表联查

文章目录 1 分类统计2 多表联查 1 分类统计 1 sql SELECT grade_protection_level AS type, count(grade_protection_level) AS count FROM vital_7jvebmrryff3_asset WHERE (field_group 应用信息)AND (asset_life_cycle 正式)AND (status 1) GROUP BY grade_protection…

微服务系列文章 之SpringBoot之定时任务详解

序言 使用SpringBoot创建定时任务非常简单&#xff0c;目前主要有以下三种创建方式&#xff1a; 一、基于注解(Scheduled)二、基于接口&#xff08;SchedulingConfigurer&#xff09; 前者相信大家都很熟悉&#xff0c;但是实际使用中我们往往想从数据库中读取指定时间来动态…

实现 Rollup 插件alias 并使用vitest提高开发效率

本篇文章是对 实现 Rollup 插件 alias | 使用 TypeScript 实现库的基本流程 | 使用单元测试提高开发效率 的总结。其中涉及到开发一个组件库的诸多知识点。 实现一个经常用的 rollup 插件 alias 首先执行npm init命令初始化一个package.json文件&#xff0c;因为插件使用了ty…

【ARM Cortex-M 系列 1 -- Cortex-M0, M3, M4, M7, M33 差异】

文章目录 Cortex-M 系列介绍Cortex-M0/M0 介绍Cortex-M3/M4 介绍Cortex-M7 介绍Cotex-M33 介绍 下篇文章&#xff1a;ARM Cortex-M 系列 2 – CPU 之 Cortex-M7 介绍 Cortex-M 系列介绍 Cortex-M0/M0 介绍 Cortex-M0 是 ARM 公司推出的一款微控制器&#xff08;MCU&#xff0…

AIGC之文本内容生成概述(下)——Transformer

在上一篇文章中&#xff0c;我们一口气介绍了LSTM、Word2Vec、GloVe、ELMo等四种模型的技术发展&#xff0c;以及每种模型的优缺点与应用场景&#xff0c;全文超过一万字&#xff0c;显得冗长且繁杂&#xff0c;在下文部分我们将分开介绍Transformer、BERT、GPT1/GPT2/GPT3/Cha…

职责链模式:如何实现可灵活扩展算法的敏感信息过滤框架?

今天&#xff0c;我们主要讲解职责链模式的原理和实现。除此之外&#xff0c;我还会利用职责链模式&#xff0c;带你实现一个可以灵活扩展算法的敏感词过滤框架。下一节课&#xff0c;我们会更加贴近实战&#xff0c;通过剖析Servlet Filter、Spring Interceptor来看&#xff0…

K12351 生日日期

题解目录 K12351 生日日期题目描述输入格式输出格式解题思路解题思路2&#xff08;未编写&#xff09;示例代码 其他题解&#xff1a;思维拓展题目描述正确答案 K12351 生日日期 题目描述 小科的生日是YY年MM月DD日&#xff0c;他想知道自己出生第10000天纪念的日期&#xff…

如何在PADS Logic中查找器件

PADS Logic提供类似于Windows的查找功能&#xff0c;可以进行器件的查找。 &#xff08;1&#xff09;在Logic设计界面中&#xff0c;将菜单显示中的“选择工具栏”进行打开&#xff0c;如图1所示&#xff0c;会弹出对应的“选择工具栏”的分栏菜单选项&#xff0c;如图2所示。…

一文带你了解Spring中存入Bean和获取Bean的方式

0. Spring中的五大注解 上图中就是五大类注解对应的层&#xff0c;通过源码可以看到其他四个注解都基于Conponent 1. 存入 Bean Spring既然是一个包含众多工具方法的IoC容器&#xff0c;它是一个控制反转的容器&#xff0c;所以就需要将Bean对象存入到容器中&#xff0c;需要…

Vue中值的传递(父传子,子传父,子父同步)

1.父组件->子组件传递数据 ①父组件通过 v-bind: 属性绑定的形式&#xff0c;把数据传递给子组件 如果不需要动态绑定&#xff0c;则可以直接写number“张三” ②子组件中&#xff0c;通过props接收父组件传递过来的数据 2.子组件->父组件传递数据 1.在子组件中&#xf…

举例说明基于线性回归的单层神经网络网络(以梯度下降算法来求解权重的过程)...

我们将通过一个简单的例子来说明基于线性回归的单层神经网络&#xff0c;以及如何使用梯度下降算法来求解权重。 假设我们有以下数据集&#xff0c;表示学生的学习时间&#xff08;小时&#xff09;与他们的考试分数&#xff1a; 学习时间&#xff08;X&#xff09;&#xff1a…