Bootstrap教程(5)--使用标签、徽章、巨幕、Well

简介: 本文目录1. 概述2. 标签3. 徽章4. 巨幕5. Well6. 小结

1. 概述

本篇介绍下几个常用的Bootstrap组件,即标签、徽章、巨幕和Well。


这几个组件都比较简单,直接在HTML元素上添加class样式即可。


2. 标签

标签一般用于为元素添加附加信息,一般通过为<span>元素添加样式类来实现,例如:


 <div class="container-fluid">

       <div class="row">

           <div class="col-sm-12 col-md-12">

               <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>

           </div>

       </div>

   </div>

效果如下,注意添加label类表示当前元素为标签,然后添加label-xxx类来设定具体的标签样式,由下面的效果可见不同的样式类对应的颜色不同。

image.png

3. 徽章

徽章也是为元素添加附加信息,但是一般用来添加数字信息,例如购物车中商品的数量,EMail收件箱中邮件的数量等。


可以通过.badge类设置徽章,代码如下:


<a href="#">收件箱 <span class="badge">8</span></a>

对应效果如下,比较简单。

image.png

4. 巨幕

巨幕在国外的网站非常流行,一般用来在首页放置一些显眼的内容,通过.jumboron类来设置巨幕效果,一般会将巨幕附加到<div>等布局元素上。


巨幕有两种使用方式,第一种是放到.container容器中,代码如下:


<div class="container">

       <div class="jumbotron">

           <h2>熊猫购物网</h2>

           超值、实惠、高端、大气

       </div>

   </div>


对应效果如下:

image.png

第二种使用方式是将巨幕放到.container容器外头,代码如下:


<body>

   <div class="jumbotron">

       <h2>熊猫购物网</h2>

       超值、实惠、高端、大气

   </div>

</body>


对应效果如下:

image.png

感觉效果还不错。


5. Well

Well是一种比较简单的样式,其实就是一个凹陷的面板效果,一般用于显示一些提示信息。


例如在上传文件时,显示上传的说明信息。


Well有常规、小号、大号三个类可以选用,代码如下:


    <div class="well">只能上传.doc后缀的文档(well)</div>

               <div class="well well-sm">只能上传.doc后缀的文档(well-sm)</div>

               <div class="well well-lg">只能上传.doc后缀的文档(well-lg)</div>


对应效果如下:

image.png

6. 小结

本文介绍的内容比较简单,几个常用的样式组件,使用起来非常简单,直接添加对应的样式类即可。


相关文章
|
27天前
Bootstrap5 徽章(Badges)1
Bootstrap5 徽章(Badges)用于突出显示新的或未读的项。通过在 `&lt;span&gt;` 元素上添加 `.badge` 类和颜色类(如 `.bg-secondary`),可以轻松创建徽章。
|
26天前
Bootstrap5 徽章(Badges)4
徽章可以嵌入到其他元素中,如按钮。
|
26天前
Bootstrap5 徽章(Badges)3
药丸形状徽章通过添加 `.rounded-pill` 类实现圆角效果。结合不同的背景色类(如 `bg-default`、`bg-primary` 等),可以创建多种样式。
|
26天前
Bootstrap5 徽章(Badges)2
以下是各种颜色类型的徽章示例,包括主要、次要、成功、危险、警告、信息、浅色和深色等不同风格的徽章。
|
4月前
|
JavaScript 前端开发
BootStrap在Vue中的安装使用详细教程
这篇文章提供了在Vue项目中安装和使用Bootstrap的详细教程,包括安装jQuery、引入Bootstrap、配置Webpack以及在项目中进行测试和查看效果的步骤。
BootStrap在Vue中的安装使用详细教程
|
7月前
|
前端开发 JavaScript
Bootstrap 5 保姆级教程(十三):滚动监听 & 侧边栏导航
Bootstrap 5 保姆级教程(十三):滚动监听 & 侧边栏导航
|
7月前
|
前端开发 JavaScript
Bootstrap 5 保姆级教程(十二):弹出框 & 消息弹窗
Bootstrap 5 保姆级教程(十二):弹出框 & 消息弹窗
|
7月前
|
前端开发 JavaScript
Bootstrap 5 保姆级教程(十一):模态框 & 提示框
Bootstrap 5 保姆级教程(十一):模态框 & 提示框
|
7月前
|
前端开发 JavaScript 容器
Bootstrap 5 保姆级教程(十五):表单
Bootstrap 5 保姆级教程(十五):表单
|
7月前
|
前端开发 容器
Bootstrap 5 保姆级教程(十四):Flex
Bootstrap 5 保姆级教程(十四):Flex