Bootstarp未读消息铃铛

Thymeleaf版:

   <li>
       <a title="消息" class="fa fa-bell">
       <th:block th:if="${msgNumber >0}">
       <label class="label label-danger" style="right:0px">[[${msgNumber}]]</label>
       </th:block>
       </a>
   </li>

纯html:

   <li>
       <a title="消息" class="fa fa-bell">
            <label class="label label-danger" style="right:0px">12</label>
       </a>
   </li>

 效果

style="right:0px"

不要去掉 否则消息数量的样式会居中

  • 0
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Bootstrap 提供了一种简单而强大的消息提示组件,可以用来向用户显示各种类型的消息,如成功、错误、警告等。以下是使用 Bootstrap 的消息提示的基本方法: 1. 首先,确保你已经引入了 Bootstrap 的 CSS 和 JavaScript 文件。 2. 在 HTML 中,创建一个容器元素来显示消息提示,例如: ```html <div id="message-container"></div> ``` 3. 使用 JavaScript 创建消息提示元素,并将其添加到容器中。可以使用 jQuery 或纯 JavaScript 来实现,下面分别给出两种方法: a. 使用 jQuery: ```javascript // 创建消息提示元素 var message = $('<div class="alert alert-success">This is a success message.</div>'); // 将消息提示元素添加到容器中 $('#message-container').append(message); ``` b. 使用纯 JavaScript: ```javascript // 创建消息提示元素 var message = document.createElement('div'); message.className = 'alert alert-success'; message.innerHTML = 'This is a success message.'; // 将消息提示元素添加到容器中 document.getElementById('message-container').appendChild(message); ``` 4. 根据需要,你可以改变消息提示的样式和类型。Bootstrap 提供了几种预定义的样式类,如 `alert-success`(成功消息)、`alert-danger`(错误消息)、`alert-warning`(警告消息)等。你可以根据需要选择适合的样式类。 这样,你就可以使用 Bootstrap 的消息提示组件向用户显示各种类型的消息了。记得根据实际情况进行样式和内容的修改。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值