Bootstrap prompt information (TAG, badge, screen, and page header) and bootstrap prompt information

Bootstrap prompt information (TAG, badge, screen, and page header) and bootstrap prompt information
Previous

In Bootstrap, some components are used to prompt information, such as labels, badges, screens, and page headers. This topic describes the Bootstrap prompt in detail.

 

Tag

In some Web pages, a tag is often added to indicate some additional information. For example, if a new navigation item is added to the navigation, a "new" tag may be added, to tell the user

In the Bootstrap framework, this effect is extracted into a tag component and highlighted in the ". label" style.

It is easy to use. You can use intra-Row labels such as span.

[Hide automatically]
Automatically hide when no content exists
.label:empty {    display: none;}

[Color settings]
Similar to the button element, the label style also provides multiple colors:
Label-default: default label, dark gray
Label-primary: main label, dark blue
Label-success: success label, green
Label-info: information label, light blue
Label-warning: warning label, orange
Label-danger: Error label, red
This class is used to modify the background color and text color.
<span class="label label-default">Default</span><span class="label label-primary">Primary</span><span class="label label-success">Success</span><span class="label label-info">Info</span><span class="label label-warning">Warning</span><span class="label label-danger">Danger</span>

 
Badge
In a sense, the effect of the badge is very similar to that of the label described above. It is also used for prompts. It is often the information sent by some systems, such as the number of unread messages prompted by the system.
In the Bootstrap framework, this effect is called a badge effect and is implemented using the "badge" style.
You can create a span tag like a tag, and then addbadgeClass
<a href="#">Inbox <span class="badge">42</span></a>

[Hide automatically]
If there are no new or unread information entries, that is, no content is contained, the badge component can be automatically hidden (by using CSS:emptyCharacter selection)
.badge:empty {    display: none;}
<a href="#">Inbox <span class="badge"></span></a>

Button badge]
The badge has a similar style in the button element button and capsule navigation nav-pills, except that the color is different.
<ul class="nav nav-pills" role="tablist">  <li role="presentation" class="active"><a href="#">Home <span class="badge">42</span></a></li>  <li role="presentation"><a href="#">Profile</a></li>  <li role="presentation"><a href="#">Messages <span class="badge">3</span></a></li></ul><button class="btn btn-primary" type="button">  Messages <span class="badge">4</span></button>

 
Giant Screen
This is a lightweight and flexible component that can be extended to the entire browser view to display key content on the website.
<Div class = "jumbotron"> 

If you add a rounded corner for the giant screen widget, place the widget in.containerElement.
<Div class = "container"> <div class = "jumbotron"> 

 
Page header
The page header component can beh1Add appropriate space for the tag and separate it from other parts of the page. It supportsh1Embedded in tagssmallThe default effect of the element. It also supports most other components (you need to add some additional styles)
.page-header {    padding-bottom: 9px;    margin: 40px 0 20px;    border-bottom: 1px solid #eee;}
<div class="page-header">