Home > Article > Web Front-end > Detailed introduction to Bootstrap prompt information
In some Web pages, a tag is often added to tell the user 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
[Related video recommendation: Bootstrap Tutorial]
In the Bootstrap framework, this effect is specially extracted into a label component, and ends with ".label ” style to achieve highlighting
The method of use is very simple, you can use inline tags such as span
Example heading New
[Auto-hide]
When When there is no content, automatically hide
.label:empty {display: none; }
Example heading
DefaultPrimarySuccessInfoWarningDanger
##Badge
In the Bootstrap framework, this effect is called the badge effect, and the "badge" style is used to achieve it
You can use span tags to make them like tags, and then add the
badge class
Inbox 42
##[Auto-hide]
:empty
selector)
.badge:empty {display: none;
}
Inbox
【Button Badge】
If you add rounded corners to the giant screen component, just put this component inside the
.container
small elements embedded within
h1 tags, and also supports most other components (need to add some additional styles)
.page-header {padding-bottom: 9px;margin: 40px 0 20px;border-bottom: 1px solid #eee;
}
Example page header Subtext for header
The above is the detailed content of Detailed introduction to Bootstrap prompt information. For more information, please follow other related articles on the PHP Chinese website!