登录  /  注册

详解Bootstrap中的标签、徽章、巨幕和页头

青灯夜游
发布: 2021-03-30 19:00:50
转载
2747人浏览过

bootstrap中,有一些组件用于提示信息,如 标签、徽章、巨幕和页头。本篇文章给大家介绍一下bootstrap中的提示信息。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

详解Bootstrap中的标签、徽章、巨幕和页头

相关推荐:《bootstrap教程

标签

  在一些Web页面中常常会添加一个标签用来告诉用户一些额外的信息,比如说在导航上添加了一个新导航项,可能就会加一个“new”标签,来告诉用户

  在Bootstrap框架中特意将这样的效果提取出来成为一个标签组件,并且以“.label”样式来实现高亮显示

  使用方法很简单,可以在使用span这样的行内标签

<h3>Example heading <span>New</span>
</h3>
登录后复制

1.png

【自动隐藏】

  当没有内容的时候,自动隐藏

.label:empty {
    display: none;
}
登录后复制
<h3>Example heading <span></span>
</h3>
登录后复制

2.png

【颜色设置】

  和按钮元素button类似,label样式也提供了多种颜色:

  ☑   label-default:默认标签,深灰色

  ☑   label-primary:主要标签,深蓝色

  ☑   label-success:成功标签,绿色

  ☑   label-info:信息标签,浅蓝色

  ☑   label-warning:警告标签,橙色

  ☑   label-danger:错误标签,红色

  主要是通过这几个类名来修改背景颜色和文本颜色

<span>Default</span>
<span>Primary</span>
<span>Success</span>
<span>Info</span>
<span>Warning</span>
<span>Danger</span>
登录后复制

3.png

徽章

  从某种意义上来说,徽章效果和前面介绍的标签效果极其相似。也用来做一些提示信息使用。常出现的是一些系统发出的信息,比如系统提示有多少信息未读 

  在Bootstrap框架中,把这种效果称作为徽章效果,使用“badge”样式来实现

  可以像标签一样,使用span标签来制作,然后加入badge

<a>Inbox <span>42</span></a>
登录后复制

详解Bootstrap中的标签、徽章、巨幕和页头

【自动隐藏】

  如果没有新的或未读的信息条目,也就是说不包含任何内容,徽章组件能够自动隐藏(通过CSS的 :empty 选择符实现)  

.badge:empty {
    display: none;
}
登录后复制
<a>Inbox <span></span></a>
登录后复制

【按钮徽章】

  徽章在按钮元素button和胶囊形导航nav-pills也有类似的样式,只不过颜色不同

登录后复制

5.png

巨幕

  这是一个轻量、灵活的组件,它能延伸至整个浏览器视口来展示网站上的关键内容

<div>
  <h1>小火柴的蓝色理想</h1>
  <p>好的代码像粥一样,都是用时间熬出来的</p>
  <p><a>Learn more</a></p>
</div>
登录后复制

6.png

如果为巨幕组件添加圆角,把此组件放在 .container 元素的里面即可

<div>
    <div>
        <h1>小火柴的蓝色理想</h1>
        <p>好的代码像粥一样,都是用时间熬出来的</p>
        <p><a>Learn more</a></p>
    </div>
</div>
登录后复制

7.png

页头

  页头组件能够为 h1 标签增加适当的空间,并且与页面的其他部分形成一定的分隔。它支持 h1 标签内内嵌 small 元素的默认效果,还支持大部分其他组件(需要增加一些额外的样式)

.page-header {
    padding-bottom: 9px;
    margin: 40px 0 20px;
    border-bottom: 1px solid #eee;
}
登录后复制
<div>
  <h1>Example page header <small>Subtext for header</small>
</h1>
</div>
登录后复制

8.png

更多编程相关知识,请访问:编程视频!!

以上就是详解Bootstrap中的标签、徽章、巨幕和页头的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
相关标签:
来源:博客园网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号