Bootstrap源码解读标签、徽章、缩略图和警示框（8）

标签

标签组件通常用来做一些高亮显示用以提醒。使用“.label”样式来实现，可以使用span这样的行内标签，例如： 实现源码如下：

也可以使用a标签元素来制作标签，实现源码如下：

标签内没有内容的时候会被隐藏，实现源码如下：

可以追加颜色样式，类名如下： .label-deafult:默认标签，深灰色 .label-primary：主要标签，深蓝色 .label-success：成功标签，绿色 .label-info：信息标签，浅蓝色 .label-warning：警告标签，橙色 .label-danger：错误标签，红色

实现代码如下：

徽章

徽章效果也是用来做一些提示信息使用，比如显示有几条未读消息。使用“.badge”样式来实现。可以使用span标签来制作，例如： 实现源码如下：

当没有内容的时候隐藏，实现源码如下：

.badge:empty { display: none; }

徽章可以与按钮或者导航之类配合使用，实现源码如下：

缩略图

简单缩略图

通过“thumbnail”样式配合bootstrap的网格系统来实现。例如：

缩略图的实现源码如下：

复杂缩略图

还可以配合标题、描述内容，按钮来制作复杂的缩略图。在缩略图的基础上，添加一个div名为“caption”的容器，在这个容器中放置其他内容，比如说标题，文本描述，按钮等。例如：

警示框

基本的警示框

使用在div上使用“alert“样式来实现警示框效果。 实现源码如下：

可以追加类名来实现不同的警示框效果： 1. .alert-success 成功警示框，背景、边框和文本都是绿色 2. .alert-info 信息警示框，背景、边框和文本都是浅蓝色 3. .alert-warning 警告警示框，背景、边框、文本都是浅黄色 4. .alert-danger 错误警示框，背景、边框和文本都是浅红色 例如：

实现源码如下：

警示框的链接

给警示框加的链接添加“alert-link”的类名，通过“alert-link”样式给链接提供高亮显示。 例如：

实现源码如下：

本文系列教程整理到： 专题中，欢迎点击学习。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!