Bootstrap(well&页数&标签&角标&巨幕)

本文介绍了前端开发中常用的UI组件如well、pagination、标签、角标和巨幕的使用方法,展示了如何通过不同类名调整组件样式和尺寸,适用于快速搭建美观的网页布局。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1、well
well是一种具有凹陷效果的内容显示元素,只需要给元素添加class = well即可
还可以通过class调整well的尺寸
-.well-lg
-.well-sm
注意,上面两个类,需要与well结合使用

2、页数
-pagination,通过该类,可以显示页码效果,可以通过给li添加.disabled或.active来表示不同的页面效果
-.pager实现翻页按钮,可以通过给li添加.previous和.next实现将连接左右对齐

3、标签
标签可用于技术,使用.label来显示标签
可以通过.label-default、.label-success、.label-danger、.label-warning、.label-info添加不同的样式

4、角标
类似聊天软件中的未读消息提示
通过.badge类实现
当角标元素没有内容时,可以通过样式让其消失
.badge-empty{
display:none;
}

5、巨幕
用于展示网页中的主要内容,通过.jumbostron类实现巨幕效果,其实就是放大字体
可以通过在巨幕元素中的子元素嵌套一个container容器,以获取更大的显示区域

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值