📌 相关文章

📜 引导徽章和标签

📅 最后修改于: 2020-12-19 02:49:16 🧑 作者: Mango

引导徽章和标签

引导徽章

引导徽章是用于指示与特定链接关联多少项目的数字指示器。徽章用于突出显示新的或未读的项目。

元素中的类.badge用于创建徽章。

引导徽章示例

 


  Bootstrap Example
  
  
  
 




  Badges
  News 5

  Comments 10

  Updates 2

引导徽章示例2

您还可以在其他元素(例如按钮)中使用徽章。

让我们以一个示例来看一下如何向按钮添加徽章。

 


  Bootstrap Example
  
  
  
  





  Badges on Buttons

引导标签

引导标签用于指定有关诸如商品数量，技巧或其他页面构成的附加信息。

.label类用于显示标签。

引导标签示例

 


  Bootstrap Label Example
  
  
  


 
 

  Labels Example
  Update New
  UpdateNew
  Update New
  UpdateNew
  UpdateNew
  UpdateNew

引导标签示例2：更改颜色

我们可以通过使用上下文标签类来更改标签颜色。

 


  Bootstrap Contextual Label
  
  
  
  

 
 

  Contextual Label Classes 
  Default Label
  Primary Label
  Success Label
  Info Label
  Warning Label
  Danger Label

引导标签示例3




  Bootstrap Case
  
  
  
 

 
 

  Labels Example
  Update new
  
Update new
  
Update new
  
Update new
  
Update new
  
Update new

Bootstrap 4徽章

在Bootstrap 4中，徽章还可以与标题标签(

……

)一起使用。在元素中将.badge类与上下文类(例如.badge-secondary)一起使用，以创建矩形标记。

例：




  Bootstrap Example
  
  
  
  
  
  




  Badges Example
  h1 heading New
  h2 heading New
  h3 heading New
  h4 heading New
  h5 heading New
  h6 heading New

上下文徽章

您可以使用上下文类来更改徽章的颜色。

例：




  Bootstrap Example
  
  
  
  
  
  




  Contextual Badges Example
  Primary Badge
  Secondary Badge
  Success Badge
  Danger Badge
  Warning Badge
  Info Badge
  Light Badge
  Dark Badge

Bootstrap 4药丸徽章

药丸徽章用于使徽章更圆。使用类.badge-pill类添加药丸徽章。

例：




  Bootstrap Example
  
  
  
  
  
  




  Pill Badges Example
  Primary
  Secondary
  Success
  Danger
  Warning
  Info
  Light
  Dark