bootstrap徽章和标签 bootstrap徽章和标签|Bootstrap教程

本文概述

Boostrap徽章
Boostrap标签
Bootstrap 4徽章
上下文徽章
Bootstrap 4药丸徽章

Boostrap徽章Boostrap徽章是用于指示与特定链接相关联的项目数量的数字指示器。徽章用于突出显示新的或未读的项目。
< span> 元素中的类.badge用于创建徽章。
Boostrap徽章示例

< !DOCTYPE html> < html lang="en"> < head> < title>Bootstrap Example< /title> < meta charset="utf-8"> < meta name="viewport" content="width=device-width, initial-scale=1"> < link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> < /head> < body>< div class="container"> < h2>Badges< /h2> < a href="http://www.srcmini.com/#">News < span class="badge">5< /span>< /a>< br> < a href="http://www.srcmini.com/#">Comments < span class="badge">10< /span>< /a>< br> < a href="http://www.srcmini.com/#">Updates < span class="badge">2< /span>< /a> < /div> < script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">< /script> < script src="http://img.readke.com/220416/15115G149-1.jpg">< /script> < /body> < /html>

Boostrap徽章示例2
你还可以在其他元素（例如按钮）中使用徽章。
让我们以示例为例，看看如何向按钮添加徽章。

< !DOCTYPE html> < html lang="en"> < head> < title>Bootstrap Example< /title> < meta charset="utf-8"> < meta name="viewport" content="width=device-width, initial-scale=1"> < link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">< /head> < body>< div class="container"> < h2>Badges on Buttons< /h2> < button type="button" class="btn btn-primary">Primary < span class="badge">7< /span>< /button> < button type="button" class="btn btn-success">Success < span class="badge">3< /span>< /button> < button type="button" class="btn btn-danger">Danger < span class="badge">5< /span>< /button> < /div> < script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">< /script> < script src="http://img.readke.com/220416/15115G149-1.jpg">< /script> < /body> < /html>

Boostrap标签Boostrap标签用于指定有关诸如商品数量，技巧或其他页面组成的信息。
.label类用于显示标签。
Boostrap标签示例

< !DOCTYPE html> < html lang="en"> < head> < title>Bootstrap Label Example< /title> < meta charset="utf-8"> < meta name="viewport" content="width=device-width, initial-scale=1"> < link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">< /head> < body> < div class="container"> < h2>Labels Example< /h2> < h1>Update < span class="label label-default">New< /span>< /h1> < h2>Update< span class="label label-default">New< /span>< /h2> < h3>Update < span class="label label-default">New< /span>< /h3> < h4>Update< span class="label label-default">New< /span>< /h4> < h5>Update< span class="label label-default">New< /span>< /h5> < h6>Update< span class="label label-default">New< /span>< /h6> < /div>< script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">< /script> < script src="http://img.readke.com/220416/15115G149-1.jpg">< /script>< /body> < /html>

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

< !DOCTYPE html> < html lang="en"> < head> < title>Bootstrap Contextual Label< /title> < meta charset="utf-8"> < meta name="viewport" content="width=device-width, initial-scale=1"> < link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">< /head> < body> < div class="container"> < h2>Contextual Label Classes< /h2> < span class="label label-default">Default Label< /span> < span class="label label-primary">Primary Label< /span> < span class="label label-success">Success Label< /span> < span class="label label-info">Info Label< /span> < span class="label label-warning">Warning Label< /span> < span class="label label-danger">Danger Label< /span> < /div>< script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">< /script> < script src="http://img.readke.com/220416/15115G149-1.jpg">< /script>< /body> < /html>

Boostrap标签示例3

< !DOCTYPE html> < html lang="en"> < head> < title>Bootstrap Case< /title> < meta charset="utf-8"> < meta name="viewport" content="width=device-width, initial-scale=1"> < link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> < /head> < body> < div class="container"> < h2>Labels Example< /h2> < h3>Update < span class="label label-default">new< /span> < h3>Update < span class="label label-primary">new< /span> < h3>Update < span class="label label-success">new< /span> < h3>Update < span class="label label-info">new< /span> < h3>Update < span class="label label-warning">new< /span> < h3>Update < span class="label label-danger">new< /span>< /div>< script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">< /script> < script src="http://img.readke.com/220416/15115G149-1.jpg">< /script>< /body> < /html>

Bootstrap 4徽章在Bootstrap 4中，徽章还可以与标题标签（< h1> … … < h6> ）一起使用。在< span> 元素中将.badge类与上下文类（例如.badge-secondary）一起使用，以创建矩形标记。
例：

< !DOCTYPE html> < html lang="en"> < head> < title>Bootstrap Example< /title> < meta charset="utf-8"> < meta name="viewport" content="width=device-width, initial-scale=1"> < link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"> < script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">< /script> < script src="http://img.readke.com/220416/15115M013-11.jpg">< /script> < script src="http://img.readke.com/220416/15115I2V-12.jpg">< /script> < /head> < body>< div class="container"> < h2>Badges Example< /h2> < h1>h1 heading < span class="badge badge-secondary">New< /span>< /h1> < h2>h2 heading < span class="badge badge-secondary">New< /span>< /h2> < h3>h3 heading < span class="badge badge-secondary">New< /span>< /h3> < h4>h4 heading < span class="badge badge-secondary">New< /span>< /h4> < h5>h5 heading < span class="badge badge-secondary">New< /span>< /h5> < h6>h6 heading < span class="badge badge-secondary">New< /span>< /h6> < /div>< /body> < /html>

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

< !DOCTYPE html> < html lang="en"> < head> < title>Bootstrap Example< /title> < meta charset="utf-8"> < meta name="viewport" content="width=device-width, initial-scale=1"> < link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"> < script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">< /script> < script src="http://img.readke.com/220416/15115M013-11.jpg">< /script> < script src="http://img.readke.com/220416/15115I2V-12.jpg">< /script> < /head> < body>< div class="container"> < h2>Contextual Badges Example< /h2> < span class="badge badge-primary">Primary Badge< /span> < span class="badge badge-secondary">Secondary Badge< /span> < span class="badge badge-success">Success Badge< /span> < span class="badge badge-danger">Danger Badge< /span> < span class="badge badge-warning">Warning Badge< /span> < span class="badge badge-info">Info Badge< /span> < span class="badge badge-light">Light Badge< /span> < span class="badge badge-dark">Dark Badge< /span> < /div>< /body> < /html>

Bootstrap 4药丸徽章【bootstrap徽章和标签】药丸徽章用于使徽章更圆。使用类.badge-pill类添加药丸徽章。
例：

< !DOCTYPE html> < html lang="en"> < head> < title>Bootstrap Example< /title> < meta charset="utf-8"> < meta name="viewport" content="width=device-width, initial-scale=1"> < link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"> < script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">< /script> < script src="http://img.readke.com/220416/15115M013-11.jpg">< /script> < script src="http://img.readke.com/220416/15115I2V-12.jpg">< /script> < /head> < body>< div class="container"> < h2>Pill Badges Example< /h2> < span class="badge badge-pill badge-primary">Primary< /span> < span class="badge badge-pill badge-secondary">Secondary< /span> < span class="badge badge-pill badge-success">Success< /span> < span class="badge badge-pill badge-danger">Danger< /span> < span class="badge badge-pill badge-warning">Warning< /span> < span class="badge badge-pill badge-info">Info< /span> < span class="badge badge-pill badge-light">Light< /span> < span class="badge badge-pill badge-dark">Dark< /span> < /div>< /body> < /html>