首页
课程
路径
文章
PHP培训
精品课
下载

技术文章  >  web前端 > html教程

详细介绍Bootstrap提示信息

PHPz
PHPz 原创
2018-10-13 15:59:36 1481浏览

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

　　【相关视频推荐：Bootstrap教程】

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

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

<h3>Example heading <span class="label label-default">New</span></h3>

【自动隐藏】

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

.label:empty {display: none;
}
<h3>Example heading <span class="label label-default"></span></h3>


【颜色设置】

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

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

　　☑ label-primary：主要标签，深蓝色

　　☑ label-success：成功标签，绿色

　　☑ label-info：信息标签，浅蓝色

　　☑ label-warning：警告标签，橙色

　　☑ label-danger：错误标签，红色

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

<span class="label label-default">Default</span><span class="label label-primary">Primary</span><span class="label label-success">Success</span><span class="label label-info">Info</span><span class="label label-warning">Warning</span><span class="label label-danger">Danger</span>


徽章

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

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

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

<a href="//m.sbmmt.com/m/faq/#">Inbox <span class="badge">42</span></a>


【自动隐藏】

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

.badge:empty {display: none;
}
<a href="//m.sbmmt.com/m/faq/#">Inbox <span class="badge"></span></a>


【按钮徽章】

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

<ul class="nav nav-pills" role="tablist">
  <li role="presentation" class="active"><a href="//m.sbmmt.com/m/faq/#">Home <span class="badge">42</span></a></li>
  <li role="presentation"><a href="//m.sbmmt.com/m/faq/#">Profile</a></li>
  <li role="presentation"><a href="//m.sbmmt.com/m/faq/#">Messages <span class="badge">3</span></a></li></ul><button class="btn btn-primary" type="button">
  Messages <span class="badge">4</span></button>

巨幕

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

<div class="jumbotron">
  <h1>小火柴的蓝色理想</h1>
  <p>好的代码像粥一样，都是用时间熬出来的</p>
  <p><a class="btn btn-primary btn-lg" href="//m.sbmmt.com/m/faq/#" role="button">Learn more</a></p></div>


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

<div class="container"><div class="jumbotron"><h1>小火柴的蓝色理想</h1><p>好的代码像粥一样，都是用时间熬出来的</p><p><a class="btn btn-primary btn-lg" href="//m.sbmmt.com/m/faq/#" role="button">Learn more</a></p></div></div>


页头

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

.page-header {padding-bottom: 9px;margin: 40px 0 20px;border-bottom: 1px solid #eee;
}
<div class="page-header">
  <h1>Example page header <small>Subtext for header</small></h1></div>

以上就是详细介绍Bootstrap提示信息的详细内容，更多请关注php中文网其它相关文章！

Bootstrap 标签PHP课程HTML视频教程CSS视频JS视频教程Vue视频教程
声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn核实处理。
上一条：css中定位position的详细介绍 下一条：如何才能更好的减少页面加载时间

相关文章

查看更多
  • 热门课程
打开APP，随时随地在线学习！