BootStrap笔记-badge的使用
生活随笔
收集整理的這篇文章主要介紹了
BootStrap笔记-badge的使用
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
運行截圖如下；
代碼如下：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>CN_TEST1</title><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><!-- bootstrap css核心文件--><link rel="stylesheet" href="bootstrap-4.4.1-dist/css/bootstrap.min.css"> <!-- bootstrap使用到了jquery，需要提前引用--><script src="js/jquery-3.5.1.min.js"></script> <!-- 彈窗、提示、下拉菜單--><script src="bootstrap-4.4.1-dist/js/bootstrap.bundle.js"></script> <!-- bootstrap核心文件--><script src="bootstrap-4.4.1-dist/js/bootstrap.min.js"></script></head> <body><div class="container-fluid"><h1>測試<span class="badge badge-primary">primary</span></h1><h1>測試<span class="badge badge-danger">danger</span></h1><h2>測試<span class="badge badge-secondary">secondary</span></h2><h2>測試<span class="badge badge-success">success</span></h2><h3>測試<span class="badge badge-info">info</span></h3><h3>測試<span class="badge badge-light">light</span></h3><h4>測試<span class="badge badge-warning">warning</span></h4><h4>測試<span class="badge badge-primary">primary</span></h4><h5>測試<span class="badge badge-dark">dark</span></h5><h6>測試<span class="badge badge-primary">primary</span></h6><h6>測試<span class="badge badge-danger">danger</span></h6><br/><span class="badge badge-pill badge-danger">danger</span><span class="badge badge-pill badge-primary">primary</span><br/><button type="button" class="btn btn-primary">Message <span class="badge badge-info">4</span></button></div> </body> </html>要注意的地方：
①badge為徽章，標簽，同樣要先要在class中，標名他是badge，然后再設置他的其他屬性。
總結
以上是生活随笔為你收集整理的BootStrap笔记-badge的使用的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 谷歌的量子计算机速度,谷歌称其量子计算机
- 下一篇： jquery/js 点击空白区域隐藏某一