目录
徽章
巨幕
页头
首页 web前端 html教程 详细介绍Bootstrap提示信息

详细介绍Bootstrap提示信息

Jul 18, 2017 pm 04:24 PM
bootstrap 标签

  在一些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="#">Inbox <span class="badge">42</span></a>
登录后复制


【自动隐藏】

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

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


【按钮徽章】

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

<ul class="nav nav-pills" role="tablist">
  <li role="presentation" class="active"><a href="#">Home <span class="badge">42</span></a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">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="#" 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="#" 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中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

仓库:如何复兴队友
1 个月前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
1 个月前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

bootstrap怎么引入Eclipse bootstrap怎么引入Eclipse Apr 05, 2024 am 02:30 AM

通过以下五步在 Eclipse 中引入 Bootstrap:下载 Bootstrap 文件并解压缩。导入 Bootstrap 文件夹到项目中。添加 Bootstrap 依赖项。在 HTML 文件中加载 Bootstrap CSS 和 JS。开始使用 Bootstrap 增强用户界面。

如何在Chrome和Edge的所有选项卡中搜索文本 如何在Chrome和Edge的所有选项卡中搜索文本 Feb 19, 2024 am 11:30 AM

本教程向您展示了如何在Windows的Chrome或Edge中找到所有打开的标签页上的特定文本或短语。有没有办法在Chrome中所有打开的标签页上进行文本搜索?是的,您可以使用Chrome中的免费外部Web扩展在所有打开的标签上执行文本搜索,无需手动切换标签。一些扩展如TabSearch和Ctrl-FPlus可以帮助您轻松实现这一功能。如何在GoogleChrome的所有选项卡中搜索文本?Ctrl-FPlus是一个免费的扩展,它方便用户在浏览器窗口的所有选项卡中搜索特定的单词、短语或文本。这个扩

bootstrap中介效应检验结果怎么看stata bootstrap中介效应检验结果怎么看stata Apr 05, 2024 am 01:48 AM

Bootstrap中介效应检验在Stata中的解读步骤:检查系数符号:确定中介效应的正负向。检验p值:小于0.05表示中介效应显着。检查置信区间:不包含零表明中介效应显着。比较中值p值:小于0.05进一步支持中介效应的显着性。

bootstrap怎么引入idea bootstrap怎么引入idea Apr 05, 2024 am 02:33 AM

在 IntelliJ IDEA 中引入 Bootstrap 的步骤:创建新项目并选择 "Web Application"。添加 "Bootstrap" Maven 依赖项。创建 HTML 文件并添加 Bootstrap 引用。替换为 Bootstrap CSS 文件的实际路径。运行 HTML 文件以使用 Bootstrap 样式。提示:可使用 CDN 引入 Bootstrap 或自定义 HTML 文件模板。

大模型一对一战斗75万轮,GPT-4夺冠,Llama 3位列第五 大模型一对一战斗75万轮,GPT-4夺冠,Llama 3位列第五 Apr 23, 2024 pm 03:28 PM

关于Llama3,又有测试结果新鲜出炉——大模型评测社区LMSYS发布了一份大模型排行榜单,Llama3位列第五,英文单项与GPT-4并列第一。图片不同于其他Benchmark,这份榜单的依据是模型一对一battle,由全网测评者自行命题并打分。最终,Llama3取得了榜单中的第五名,排在前面的是GPT-4的三个不同版本,以及Claude3超大杯Opus。而在英文单项榜单中,Llama3反超了Claude,与GPT-4打成了平手。对于这一结果,Meta的首席科学家LeCun十分高兴,转发了推文并

怎么用bootstrap检验中介效应 怎么用bootstrap检验中介效应 Apr 05, 2024 am 03:57 AM

Bootstrap检验采用重抽样技术评估统计检验的可靠性,用于证明中介效应的显着性:首先计算直接效应、间接效应和调解效应的置信区间;其次根据Baron和Kenny或Sobel方法计算调解类型的显着性;最后估计自然间接效应的置信区间。

bootstrap中介检验结果怎么看 bootstrap中介检验结果怎么看 Apr 05, 2024 am 03:30 AM

Bootstrap 中介检验通过多次重新抽样数据来评估调解效应:间接效应置信区间:表示调解效应估计范围,如果区间不含零,则效应显着。 p 值:评估置信区间不含零的概率,小于 0.05 表示显着。样本量:用于分析的数据样本数量。 Bootstrap 次采样次数:重复抽样的次数(500-2000 次)。若置信区间不含零且 p 值小于 0.05,则调解效应显着,表明中介变量解释了自变量和因变量之间的关系。

bootstrap和springboot有什么区别 bootstrap和springboot有什么区别 Apr 05, 2024 am 04:00 AM

Bootstrap 和 Spring Boot 的主要区别在于:Bootstrap 是一个轻量级 CSS 框架,用于网站样式,而 Spring Boot 是一个强大、开箱即用的后端框架,用于 Java web 应用程序开发。Bootstrap 基于 CSS 和 HTML,而 Spring Boot 基于 Java 和 Spring 框架。Bootstrap 专注于创建网站外观,而 Spring Boot 专注于后端功能。Spring Boot 可与 Bootstrap 集成,以创建功能齐全、美观

See all articles