引导徽章、标签、页眉

1. 介绍与安装
2. 按钮、字形图标、表格
3. 垂直表单、水平表单、内联表单
4. 下拉菜单和响应式标签
5. 进度条和 Jumbotron

徽章

我们都在各种网站的一些链接旁边看到了一些数字指标。这些被称为徽章。这些徽章表明有多少项目可用或与链接相关联。
要将徽章添加到您的网页，请将类.badge添加到像这样的跨度元素 -

HTML

Messages 2

Drafts 3

Comments 4

输出

按钮内的徽章
要在按钮内插入徽章，请将类.badge添加到按钮元素，如下所示 -

HTML

Messages
2

输出

标签

我们都在各种网站的一些链接旁边看到了一些额外的信息。这些被称为标签。这些标签告诉有关链接或文本的附加信息。
要将标签添加到您的网页，请将 class .label添加到span元素，如下所示 -

1. 使用以下类来设置标签颜色的样式
   灰色 -标签默认
   绿色——标签成功
   蓝色 -标签信息
   黄色 –标签警告
   红色——标签危险

HTML

Grey Label
Green Label
Blue Label
Yellow Label
Red Label

面板

我们都在各种网站上看到过围绕一些文本或任何信息的框。这些被称为面板。这些面板是带有一些填充的边框框，可以使用引导类轻松添加到一些文本周围。
我们需要在面板中写入的内容写在一个 div 元素中，其类为 .panel-body
要将面板添加到您的网页，请将类.panel添加到div元素，如下所示 -

• 使用以下类来设置标签颜色的样式
  灰色 –面板默认
  绿色——小组成功
  蓝色 –面板信息
  黄色 –面板警告
  红色 –面板危险

HTML

  
Panel

彩色面板

HTML

   
Panel
 
 
 

   
Panel
 
 
 

   
Green Panel
 
 
 

   
Blue Panel
 
 
 

   
Yellow Panel
 
 
 

   
Red Panel
 

输出

页眉

页眉允许我们在网页上写一个标题，并在其周围设置适当的间距，以便将其与网页上的其他文本区分开来。
要将页眉添加到您的网页，请将类.page-header添加到div元素，如下所示 -

HTML

    

      Hi !
   
 
 
My name is Ayush.

输出

如果我们不使用 page-header 类，请注意区别