bootstrap-徽章

最新推荐文章于 2024-08-18 10:54:05 发布
最新推荐文章于 2024-08-18 10:54:05 发布
阅读量80 收藏
点赞数
文章标签： javascript ViewUI
原文链接：https://yq.aliyun.com/articles/561614
版权

1.运行效果如图所示

wKioL1kmgdjBTYPWAABYNJYYsAY219.png-wh_50


2.实现代码如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>徽章</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" 
    href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" 
    integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" 
    crossorigin="anonymous">

    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" 
    href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" 
    integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" 
    crossorigin="anonymous">
</head>
<body>
    <a href="#">Inbox <span class="badge">42</span></a>

    <div class="navbar navbar-default" role="navigation">
      　<div class="navbar-header">
      　    <a href="##" class="navbar-brand">xx网</a>
      　</div>
        <ul class="nav navbar-nav">
             <li class="active"><a href="##">网站首页</a></li>
            <li><a href="##">系列教程</a></li>
            <li><a href="##">名师介绍</a></li>
            <li><a href="##">成功案例<span class="badge">23</span></a></li>
            <li><a href="##">关于我们</a></li>
        </ul>
    </div>

    <ul class="nav nav-pills">
          <li class="active"><a href="#">Home <span class="badge">42</span></a></li>
          <li><a href="#">Profile</a></li>
          <li><a href="#">Messages <span class="badge">3</span></a></li>
    </ul>
    <br/>

    <ul class="nav nav-pills nav-stacked" style="max-width: 260px;">
        <li class="active">
            <a href="#">
              <span class="badge pull-right">42</span>
              Home
            </a>
        </li>
        <li><a href="#">Profile</a></li>
        <li>
            <a href="#">
              <span class="badge pull-right">3</span>
              Messages
            </a>
        </li>
    </ul>
    <br/>

    <button class="btn btn-primary" type="button">
      Messages <span class="badge">4</span>
    </button> 



    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" 
    integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" 
    crossorigin="anonymous"></script>
</body>
</html>


本文转自 素颜猪 51CTO博客，原文链接:http://blog.51cto.com/suyanzhu/1929397
weixin_34370347
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Bootstrap徽章样式
weixin_42223701的博客
11-03 230
徽章 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap表单样式一</title> <!-- 让页面样式根据设备大小进行调整显示 --> <meta name=viewport content="width=device-width,initial-scale=1"> <script type="text/ja
BootStrap徽章
秋城落叶的博客
03-31 226
给链接、导航等元素嵌套<span class="badge">元素，可以很醒目的展示新的或未读的信息条目。 如果没有新的或未读的信息条目，也就是说不包含任何内容，徽章组件能够自动隐藏（通过CSS的:empty选择符实现) 。 跨浏览器兼容性 徽章组件在 Internet Explorer 8 浏览器中不会自动消失，因为 IE8 不支持...
Bootstrap Badges（徽章）
xiabenshu的博客
05-08 1002
简介 徽章的大小跟父元素的大小直接相关，通过使用相关的字体大小和em单位。 例子 语法 <h1>Example heading <span class="badge badge-secondary">New</span></h1> 用于按钮 徽章除了用于label的装饰还可以用于按钮的装饰，给按钮提供一个计数器。 语法 <button ...
Bootstrap 标签和徽章
歪脖先生的博客
03-10 2349
标签和徽章Bootstrap提供的各种标签和徽章，它们非常适合显示计数结果、提示信息等内容。标签和徽章的风格及实现方法基本相同，唯一不同的就是徽章以圆角显示。Bootstrap为标签和徽章设计了两套样式，标签的基本样式通过 .label 样式类实现，徽章的基本样式通过 .badge 样式类实现。两套样式的外观基本相同，不同的是标签以圆角矩形呈现，而徽章以椭圆形呈现。除基本样式外，Bootstrap...
深入理解BootStrap Item12 -- 标签（label）与徽章（badge）
小平果的欢乐谷
11-15 6049
1、标签在一些Web页面中常常会添加一个标签用来告诉用户一些额外的信息，比如说在导航上添加了一个新导航项，可能就会加一个“new”标签，来告诉用户。这是新添加的导航项。如下图所示：那么在Bootstrap框架中特意将这样的效果提取出来成为一个标签组件，并且以“.label”样式来实现高亮显示。既然他是一个独立的组件，当然在不同的版本下有不同的文件：☑ LESS版本：对应的源文件label.les
bootstrap-3.3.2-dist
03-25
Bootstrap 3.3.2提供了丰富的UI组件，包括导航栏（Navbar）、按钮（Buttons）、按钮组（Button Groups）、表单（Forms）、输入框（Input Groups）、表（Tables）、警告提示（Alerts）、进度条（Progress Bars）、...
Sams Teach Yourself Bootstrap - in 24 Hours - Jennifer Kyrnin
06-25
- **UI组件**：第6章列举了一系列常用的UI组件，如标签(labels)、徽章(badges)、面板(panels)、井(wells)和大屏幕(jumbotron)等。这些组件不仅提供了丰富的视觉效果，还能增强用户体验。 - **排版与表格样式**：第7...
BootStrap-LeaderBoard
08-05
3. **Bootstrap组件**：项目可能使用了Bootstrap的各种组件，如卡片（Cards）、表（Tables）或徽章（Badges）来展示排行榜信息。例如，每个排名可以封装在一个卡片内，显示用户的头像、名字和分数。 4. **定制化**...
bootstrap-demo
07-24
此外，Bootstrap还提供了诸如警告提示（`alert`）、徽章（`badge`）、进度条（`progress`）和轮播（`carousel`）等其他组件，这些都是在网页设计中常用的元素。每个组件都有详细的文档和示例，方便开发者根据需求...
bootstrap-email
07-24
目录支持的引导类{color} 在这些例子中是primary 、 secondary 、 success 、 warning 、 danger 、 light和dark : .alert , .alert-{color} 徽章: .badge , .badge-{color} , .badge-pill 按钮： .btn , .btn-{...
微信小程序骨架屏
djjdjdjdjddjjdjd的博客
08-16 304
⑤ 在onLoad 中页面加载前定义 isLoading.value=true, 在加载完后定义 isLoading.value=false.骨架屏是页面的一个空白版本，通常会在页面完全渲染之前，通过一些灰色的区块大致勾勒出轮廓，待数据加载完成后，再替换成真实的内容。① 在相应微信小程序页面右下角点生成骨架屏，左侧小程序目录会自动生成 .wxml 、.wxss 文件，⑥ 在生成骨架屏页面中 v-if="isLoading" v-else 定义显示与隐藏。
网上商品订单转手系统bootpf
最新发布
weixin_43213064的博客
08-18 388
【代码】springboot网上商品订单转手系统bootpf
vue3进阶用法之通过调用函数动态加载组件用法及示例
wz9608的博客
08-14 357
vue官方文档那边虽然说了函数的使用方法，但没有列举这种业务场景。这里只是做一个简单的实例，其实可以通过这种方法实现其他更多的功能，比如说modal框等等等。
44 个 React 前端面试问题
广漂程序猿DevinRock
08-14 1024
虚拟 DOM 是 React 中的一个概念，其中创建实际 DOM（文档对象模型）的轻量级虚拟表示并将其存储在内存中。它是一种用于优化 Web 应用程序性能的编程技术。当 React 组件的数据或状态发生更改时，虚拟 DOM 会被更新，而不是直接操作真实 DOM。然后，虚拟 DOM 计算组件的先前状态和更新状态之间的差异，称为“比较”过程。一旦识别出差异，React 就会高效地仅更新真实 DOM 的必要部分以反映更改。这种方法最大限度地减少了实际 DOM 操作的数量，并提高了应用程序的整体性能。
【vue教程】五. Vue 的路由管理
前端探索者
08-13 1162
Vue Router 是 Vue 官方的路由管理器，用于构建单页面应用。它允许你通过 URL 来映射不同的组件，实现页面的动态加载和导航。路由守卫用于在路由跳转前后执行代码，可以用来检查用户认证状态、获取数据等。通过本篇文章，我们学习了 Vue Router 的基本概念、配置和使用，以及如何实现动态路由和嵌套路由。我们还探讨了路由守卫的概念，并提供了如何在 Vue 组件中使用它们的示例。这些知识点将帮助你构建一个功能完备的单页面应用。
【无标题】
weixin_42348009的博客
08-14 187
静态方法返回一个由给定对象自身的可枚举的字符串键属性名组成的数组。
NVDLA专题4：具体模块介绍——Convolution DMA
fangfanglovezhou的博客
08-14 594
NVDLA专题4：具体模块介绍——Convolution DMA
基于vue框架的爱看电影网站v4o92（程序+源码+数据库+调试部署+开发环境）系统界面在最后面。
h2345678的博客
08-15 995
项目功能：用户,电影分类,电影信息,电影评分基于Vue框架的爱看电影网站项目功能丰富多样，旨在为用户提供一个集电影浏览、信息查询、观影体验、互动交流于一体的综合性平台。
bootstrap 徽章
05-26
您可以使用以下代码在 Bootstrap 中创建徽章： ``` <span class="badge badge-primary">Primary <span class="badge badge-secondary">Secondary <span class="badge badge-success">Success ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值