草庐IT

Bootstrap 徽章(Badges)

runoob 2023-04-05 原文

Bootstrap 徽章(Badges)

本章将讲解 Bootstrap 徽章(Badges)。徽章与标签相似,主要的区别在于徽章的边角更加圆滑。

徽章(Badges)主要用于突出显示新的或未读的项。如需使用徽章,只需要把 <span class="badge"> 添加到链接、Bootstrap 导航等这些元素上即可。

下面的实例演示了这点:

实例

展示未读邮件:

<a href="#">Mailbox <span class="badge">50</span></a>

尝试一下 »

结果如下所示:

当没有新的或未读的项时,通过 CSS 的 :empty 选择器,徽章会折叠起来,表示里边没有内容。

实例

展示未读消息:

<div class="container"> <h2>徽章</h2> <p>.badge 类指定未读消息的数量:</p> <p><a href="#">收件箱 <span class="badge">21</span></a></p> </div>

尝试一下 »

激活导航状态

您可以在激活状态的胶囊式导航和列表导航中放置徽章。通过使用 <span class="badge"> 来激活链接,如下面的实例所示:

实例

<h4>胶囊式导航中的激活状态</h4> <ul class="nav nav-pills"> <li class="active"> <a href="#">首页 <span class="badge">42</span> </a> </li> <li> <a href="#">简介</a> </li> <li> <a href="#">消息 <span class="badge">3</span> </a> </li> </ul> <br> <h4>列表导航中的激活状态</h4> <ul class="nav nav-pills nav-stacked" style="max-width: 260px;"> <li class="active"> <a href="#"> <span class="badge pull-right">42</span>首页</a> </li> <li> <a href="#">简介</a> </li> <li> <a href="#"> <span class="badge pull-right">3</span>消息 </a> </li> </ul>

尝试一下 »

结果如下所示:

有关Bootstrap 徽章(Badges)的更多相关文章

  1. ruby - 将 Bootstrap Less 添加到 Sinatra - 2

    我有一个ModularSinatra应用程序,我正在尝试将Bootstrap添加到应用程序中。get'/bootstrap/application.css'doless:"bootstrap/bootstrap"end我在views/bootstrap中有所有less文件,包括bootstrap.less。我收到这个错误:Less::ParseErrorat/bootstrap/application.css'reset.less'wasn'tfound.Bootstrap.less的第一行是://CSSReset@import"reset.less";我尝试了所有不同的路径格式,但它

  2. css - Rails 4.1 和 Bootstrap 3 字形图标不工作 - 2

    我正在尝试消除使用Bootstrap3的Rails4元素中的glyphicon错误。我没有使用任何Bootstrapgem将其添加到Assets管道中。我手动将bootstrap.css和bootstrap.js添加到各自的app/assets目录下,分别添加到application.css和application.js什么的我现在在网络浏览器的控制台中看到以下内容:GEThttp://localhost:3000/fonts/glyphicons-halflings-regular.woff404(NotFound)localhost/:1GEThttp://localhost:30

  3. ruby-on-rails - 在表单中使用来自 Twitter Bootstrap 的 Typeahead (formtastic) - 2

    我如何像这样从Bootstrap中集成typeahead:变成这样的标准形式: 最佳答案 在你的Controller中defindex@autocomplete_items=Model.allend在您看来,就像您为选择器添加了一个额外的ID...最重要的是,将Controller中定义的@autocomplete_items实例变量传递给View中的Javascript变量:这将序列化您的数据并使其成为可用于Typeahead函数的JSON。至于Typeahead,只需将该对象(@autocomplete_items)作为JSON

  4. ruby-on-rails - 将 Bootstrap 图标添加到 Ruby on Rails 中的按钮 - 2

    我想在RubyonRails中为按钮添加图标。目前我尝试了以下方法:"),{:controller=>'events',:action=>"upvoteEvent",:method=>"put",:id=>@event.id,:uid=>current_user.id},{:class=>"btnbtn-success"}%>生成以下html:"/>我遵循了此处发布的解决方案:https://stackoverflow.com/a/10468935/1385324,但这对我不起作用。我还测试了BootstrapCSS是否正常工作,只需在网站的其他任何地方插入一个图标即可。感谢您的帮助!

  5. css - 在 rails 中使用 Bootstrap Sass 时出错 - 2

    我正在开发一个简单的ruby​​onrails应用程序,但出现以下错误:TypeError:无法读取未定义的属性“进程”(在/home/saasbook/Documents/projects/Bookkeeper/app/assets/stylesheets/application.css.sass)提取的源码如下:Bookkeepertrue%>//Highlightederrorlineinextracttrue%>此错误发生在我使用BootstrapSass插件添加BootstrapSass并遵循此tutorial之后摘录下方指出错误位于:app/views/layouts/ap

  6. ruby-on-rails - Rails/Bootstrap - Flash 通知 :success is now red and not green? - 2

    我一直试图在这里寻找答案,但我找不到任何有用的东西。我已经对我的Rails应用程序实现了:success和:dangerflash通知。它工作得很好,即:success是绿色的,:danger是红色的,有一个关闭按钮等等,但是自从添加了一些邮件文件后,我的:success现在显示为红色?application.html.erb摘录:×contact_mailer.rbclassContactMailercontacts_controller.rbclassContactsController还有,contact_email.html.erbNewMessagefromHoo

  7. ruby - 使用指南针安装 bootstrap sass - 2

    我正在尝试安装bootstrap-sass并收到以下错误。我试过旧版本的sass,但bundler一直在安装3.3.0。WARN:UnresolvedspecsduringGem::Specification.reset:sass(~>3.2)WARN:Clearingoutunresolvedspecs.Pleasereportabugifthiscausesproblems./Library/Ruby/Gems/2.0.0/gems/compass-0.12.2/lib/compass/sass_extensions/monkey_patches/browser_support.r

  8. ruby-on-rails - Bootstrap 的 ruby gem 有什么区别? - 2

    gem有什么区别:bootstrap-sass(下载量8,309,861)bootstrap-sass-rails(下载量236,886)twitter_bootstrap_sass(下载量6,011)在Rails应用程序中使用哪个gem更好? 最佳答案 twitter_bootstrap_sass是社区提供的第一个bootstrapgem。它已被弃用,不再使用。bootstrap-sass-rails是官方的Bootstrapgem。它由社区提供并得到推特的认可,直到它在2014年被弃用并被下面的bootstrap-sass取代b

  9. ruby - 如何在 Rails 之外使用 less.rb 处理 Bootstrap - 2

    我正在尝试使用less.rb创建一个独立的应用程序(独立于RailsAssets管道)以基于TwitterBootstrap输出CSS文件。下面的结果是一个空文档parser=Less::Parser.new:paths=>[Rails.root+'/public/bootstraps/twitter-bootstrap-857b8fb/less']tree=parser.parse("@import'bootstrap.less'")tree.to_css这会导致返回一个空字符串。我尝试了将@import更改为完整路径等的变体,但没有成功。我想我一定遗漏了一些简单的东西。

  10. ruby-on-rails - 使用 bootstrap 按 rails 中的列对表数据进行排序 - 2

    编辑:如果可能的话,我更愿意使用Bootstrap来实现此功能,因为我的项目中有Bootstrap。似乎我可能只是缺少在我的rails项目中使用bootstrap的javascript的东西。单击列名时,表格应按该列名对数据进行排序。下表:我尝试按照显示的示例使用Bootstrap对数据进行排序atthiswebsite,但它对我不起作用。我错过了什么?我的Gemfile中的相关gem:#Gemfilegem'bootstrap-sass'gem'autoprefixer-rails'CSS:#app/assets/stylesheets/application.css.scss@im

随机推荐