Materialise CSS徽章 _MaterializeCSS

【Materialise CSS徽章】物化CSS徽章用于通知你有新消息或未读消息或通知。你可以将新类添加到徽章中, 以为其提供背景。徽章可以是数字或图标。通常用于强调项数。
请参见Materialize CSS徽章中使用的以下两个类：

Index	班级名称	Description
1)	badge	它用于将元素标识为mdl徽章组件。跨度元素是必需的。
2)	new	它用于向徽章组件添加” 新” 类, 从而为其提供背景。

例子让我们以一个示例来展示徽章的不同用法：

< !DOCTYPE html> < html> < head> < title> The Materialize Badges Example< /title> < meta name = "viewport" content = "width = device-width, initial-scale = 1"> < link rel = "stylesheet" hrefhttp://www.srcmini.com/= "https://fonts.googleapis.com/icon?family=Material+Icons"> < link rel = "stylesheet" hrefhttp://www.srcmini.com/= "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css"> < script type = "text/javascript" src = "https://code.jquery.com/jquery-2.1.1.min.js"> < /script> < script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"> < /script> < /head> < body class = "container"> < h2> Badges Example< /h2> < hr/> < h3> Badges in List< /h3> < div class = "collection"> < a hrefhttp://www.srcmini.com/= "http://www.srcmini.com/#" class = "collection-item"> Inbox< span class = "badge"> 22< /span> < /a> < a hrefhttp://www.srcmini.com/= "http://www.srcmini.com/#" class = "collection-item"> Unread< span class = "new badge"> 14< /span> < /a> < a hrefhttp://www.srcmini.com/= "http://www.srcmini.com/#" class = "collection-item"> Sent< /a> < a hrefhttp://www.srcmini.com/= "http://www.srcmini.com/#" class = "collection-item"> Outbox< span class = "badge"> 10< /span> < /a> < /div> < h3> Badges in dropdowns< /h3> < ul id = "dropdown" class = "dropdown-content"> < li> < a hrefhttp://www.srcmini.com/= "http://www.srcmini.com/#"> Inbox< span class = "badge"> 22< /span> < /a> < /li> < li> < a hrefhttp://www.srcmini.com/= "http://www.srcmini.com/#!"> Unread< span class = "new badge"> 14< /span> < /a> < /li> < li> < a hrefhttp://www.srcmini.com/= "http://www.srcmini.com/#"> Sent< /a> < /li> < li> < a hrefhttp://www.srcmini.com/= "http://www.srcmini.com/#"> Outbox< span class = "badge"> 10< /span> < /a> < /li> < /ul> < a class = "btn dropdown-button" hrefhttp://www.srcmini.com/= "http://www.srcmini.com/#" data-activates = "dropdown"> Dropdown< i class = "mdi-navigation-arrow-drop-down right"> < /i> < /a> < h3> Badges in Navigation< /h3> < nav> < div class = "nav-wrapper"> < a hrefhttp://www.srcmini.com/= "" class = "brand-logo"> srcmini< /a> < ul id = "nav-mobile" class = "right hide-on-med-and-down"> < li> < a hrefhttp://www.srcmini.com/= ""> Inbox< /a> < /li> < li> < a hrefhttp://www.srcmini.com/= ""> Unread< span class = "new badge"> 4< /span> < /a> < /li> < li> < a hrefhttp://www.srcmini.com/= "http://www.srcmini.com/#"> Sent< /a> < /li> < li> < a hrefhttp://www.srcmini.com/= "http://www.srcmini.com/#"> Outbox< /a> < /li> < /ul> < /div> < /nav> < /body> < /html>

立即测试
输出