Bootstrap4 按鈕組+徽章（Badges）+進度條+分頁+列表組

来源:https://www.cnblogs.com/chenyingying0/archive/2020/04/16/12711023.html
-Advertisement-
Play Games

Bootstrap4 按鈕組 btn-group 按鈕組 <div class="btn-group"> <button type="button" class="btn btn-outline-primary btn-lg">lg btn</button> <button type="button ...


Bootstrap4 按鈕組

btn-group 按鈕組

    <div class="btn-group">
        <button type="button" class="btn btn-outline-primary btn-lg">lg btn</button>
        <button type="button" class="btn btn-outline-info btn-sm">sm btn</button>
        <button type="button" class="btn btn-outline-success btn-block">btn block</button>
        <button type="button" class="btn btn-outline-warning active">active btn</button>
        <button type="button" class="btn btn-outline-danger" disabled>disabled btn</button>
    </div>

 

 

btn-group-sm   btn-group-sm 設置按鈕組大小

    <div class="btn-group">
        <button type="button" class="btn btn-outline-primary btn-lg">lg btn</button>
        <button type="button" class="btn btn-outline-info btn-sm">sm btn</button>
        <button type="button" class="btn btn-outline-success btn-block">btn block</button>
        <button type="button" class="btn btn-outline-warning active">active btn</button>
        <button type="button" class="btn btn-outline-danger" disabled>disabled btn</button>
    </div>
    <div class="btn-group btn-group-sm">
        <button type="button" class="btn btn-outline-primary btn-lg">lg btn</button>
        <button type="button" class="btn btn-outline-info btn-sm">sm btn</button>
        <button type="button" class="btn btn-outline-success btn-block">btn block</button>
        <button type="button" class="btn btn-outline-warning active">active btn</button>
        <button type="button" class="btn btn-outline-danger" disabled>disabled btn</button>
    </div>
    <div class="btn-group btn-group-lg">
        <button type="button" class="btn btn-outline-primary btn-lg">lg btn</button>
        <button type="button" class="btn btn-outline-info btn-sm">sm btn</button>
        <button type="button" class="btn btn-outline-success btn-block">btn block</button>
        <button type="button" class="btn btn-outline-warning active">active btn</button>
        <button type="button" class="btn btn-outline-danger" disabled>disabled btn</button>
    </div>

 

 

btn-group-vertical  垂直的按鈕組

    <div class="btn-group btn-group-vertical">
        <button type="button" class="btn btn-outline-primary btn-lg">lg btn</button>
        <button type="button" class="btn btn-outline-info btn-sm">sm btn</button>
        <button type="button" class="btn btn-outline-success btn-block">btn block</button>
        <button type="button" class="btn btn-outline-warning active">active btn</button>
        <button type="button" class="btn btn-outline-danger" disabled>disabled btn</button>
    </div>

 

 

內嵌按鈕組下拉菜單

dropdown-toggle  data-toggle  dropdown-menu   dropdown-item

    <div class="btn-group">
        <button type="button" class="btn btn-outline-primary btn-lg">lg btn</button>
        <button type="button" class="btn btn-outline-info btn-sm">sm btn</button>
        <button type="button" class="btn btn-outline-success btn-block">btn block</button>

        <!-- 下拉按鈕 -->
        <div class="btn-group">
            <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">btn group</button>
            <div class="dropdown-menu">
                <a href="#" class="dropdown-item">btn item1</a>
                <a href="#" class="dropdown-item">btn item2</a>
            </div>
        </div>

    </div>

 

 

Bootstrap4 徽章（Badges）

<p>您有通知信息！<span class="badge badge-info">new</span></p>

 

 

所有顏色類型的徽章

    <span class="badge badge-primary">主要</span>
    <span class="badge badge-secondary">次要</span>
    <span class="badge badge-info">信息</span>
    <span class="badge badge-warning">警告</span>
    <span class="badge badge-danger">危險</span>
    <span class="badge badge-success">成功</span>
    <span class="badge badge-light">淺色</span>
    <span class="badge badge-dark">深色</span>

 

 

藥丸形狀徽章 badge-pill

    <span class="badge badge-default badge-pill">主要</span>
    <span class="badge badge-primary badge-pill">主要</span>
    <span class="badge badge-secondary badge-pill">次要</span>
    <span class="badge badge-info badge-pill">信息</span>
    <span class="badge badge-warning badge-pill">警告</span>
    <span class="badge badge-danger badge-pill">危險</span>
    <span class="badge badge-success badge-pill">成功</span>
    <span class="badge badge-light badge-pill">淺色</span>
    <span class="badge badge-dark badge-pill">深色</span>

 

 

將徽章插入按鈕中

    <button type="button" class="btn btn-info">有新消息
        <span class="badge badge-warning badge-pill">3</span>
    </button>

 

 

Bootstrap4 進度條

    <div class="progress">
        <div class="progress-bar" style="width:60%;"></div>
    </div>

 

 

不同顏色的進度條

    <div class="progress">
        <div class="progress-bar" style="width:60%;"></div>
    </div>
    <div class="progress">
        <div class="progress-bar bg-info" style="width:60%;"></div>
    </div>
    <div class="progress">
        <div class="progress-bar bg-warning" style="width:60%;"></div>
    </div>
    <div class="progress">
        <div class="progress-bar bg-danger" style="width:60%;"></div>
    </div>
    <div class="progress">
        <div class="progress-bar bg-success" style="width:60%;"></div>
    </div>

 

 

條紋進度條 progress-bar-striped

    <div class="progress">
        <div class="progress-bar progress-bar-striped" style="width:60%;"></div>
    </div>
    <div class="progress">
        <div class="progress-bar bg-info progress-bar-striped" style="width:60%;"></div>
    </div>
    <div class="progress">
        <div class="progress-bar bg-warning progress-bar-striped" style="width:60%;"></div>
    </div>
    <div class="progress">
        <div class="progress-bar bg-danger progress-bar-striped" style="width:60%;"></div>
    </div>
    <div class="progress">
        <div class="progress-bar bg-success progress-bar-striped" style="width:60%;"></div>
    </div>

 

 

動畫進度條 progress-bar-animated

    <div class="progress">
        <div class="progress-bar progress-bar-striped progress-bar-animated" style="width:60%;"></div>
    </div>
    <div class="progress">
        <div class="progress-bar bg-info progress-bar-striped progress-bar-animated" style="width:60%;"></div>
    </div>
    <div class="progress">
        <div class="progress-bar bg-warning progress-bar-striped progress-bar-animated" style="width:60%;"></div>
    </div>
    <div class="progress">
        <div class="progress-bar bg-danger progress-bar-striped progress-bar-animated" style="width:60%;"></div>
    </div>
    <div class="progress">
        <div class="progress-bar bg-success progress-bar-striped progress-bar-animated" style="width:60%;"></div>
    </div>

 

 

混合色彩進度條

    <div class="progress">
        <div class="progress-bar bg-info" style="width:60%;">safe</div>
        <div class="progress-bar bg-warning" style="width:20%;">warning</div>
        <div class="progress-bar bg-danger" style="width:20%;">danger</div>
    </div>

 

 

Bootstrap4 分頁

    <ul class="pagination">
        <li class="page-item">
            <a href="#" class="page-link">previous</a>
        </li>
        <li class="page-item">
            <a href="#" class="page-link">1</a>
        </li>
        <li class="page-item">
            <a href="#" class="page-link">2</a>
        </li>
        <li class="page-item">
            <a href="#" class="page-link">3</a>
        </li>
        <li class="page-item">
            <a href="#" class="page-link">next</a>
        </li>
    </ul>

 

 

當前頁頁碼高亮顯示

    <ul class="pagination">
        <li class="page-item">
            <a href="#" class="page-link">previous</a>
        </li>
        <li class="page-item">
            <a href="#" class="page-link">1</a>
        </li>
        <li class="page-item">
            <a href="#" class="page-link">2</a>
        </li>
        <li class="page-item active">
            <a href="#" class="page-link">3</a>
        </li>
        <li class="page-item">
            <a href="#" class="page-link">next</a>
        </li>
    </ul>

 

 

設置不可點擊的分頁鏈接 disabled

    <ul class="pagination">
        <li class="page-item">
            <a href="#" class="page-link">previous</a>
        </li>
        <li class="page-item">
            <a href="#" class="page-link">1</a>
        </li>
        <li class="page-item">
            <a href="#" class="page-link">2</a>
        </li>
        <li class="page-item active">
            <a href="#" class="page-link">3</a>
        </li>
        <li class="page-item disabled">
            <a href="#" class="page-link">next</a>
        </li>
    </ul>

 

 

麵包屑導航 breadcrumb   breadcrumb-item

    <ul class="breadcrumb">
        <li class="breadcrumb-item">
            <a href="#">previous</a>
        </li>
        <li class="breadcrumb-item">
            <a href="#">1</a>
        </li>
        <li class="breadcrumb-item">
            <a href="#">2</a>
        </li>
        <li class="breadcrumb-item active">
            <a href="#">3</a>
        </li>
        <li class="breadcrumb-item disabled">
            <a href="#">next</a>
        </li>
    </ul>

 

 

 

 

Bootstrap4 列表組

    <ul class="list-group">
        <li class="list-group-item">item1</li>
        <li class="list-group-item">item2</li>
        <li class="list-group-item">item3</li>
        <li class="list-group-item">item4</li>
        <li class="list-group-item">item5</li>
    </ul>

 

 

用active設置激活樣式

    <ul class="list-group">
        <li class="list-group-item">item1</li>
        <li class="list-group-item">item2</li>
        <li class="list-group-item active">item3</li>
        <li class="list-group-item">item4</li>
        <li class="list-group-item">item5</li>
    </ul>

 

 

通過disabled設置不可用

    <ul class="list-group">
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 微信小程式中canvas繪製圖表層級問題
    引自官方文檔 在微信小程式中存在一類特殊的組件，該類組件是由客戶端創建的原生組件。這些組件有： camera canvas input（僅在focus時表現為原生組件） live-player live-pusher map textarea video 由於原生組件脫離在 WebView 渲染流程 ...
  • Bootstrap4 輪播+模態框+提示框+彈出框
    Bootstrap4 輪播 菜鳥教程上的案例 <div id="demo" class="carousel slide" data-ride="carousel"> <!-- 指示符 --> <ul class="carousel-indicators"> <li data-target="#dem ...
  • 開發一個時間小程式
    跟異國他鄉的朋友們微信聊天的時候，經常面臨時差的問題。每次想要確定對方現在是幾點，總是要口算一下，有時忘記具體時差，或者涉及跨天，還得打開瀏覽器查一下，很不方便。有什麼方法可以把朋友們所在城市的時間集中起來隨時供自己查看呢？於是想到了微信小程式。找了找市面上的時間小程式，不是功能太雜就是小廣告太多，... ...
  • Bootstrap4 麵包屑導航+表單+輸入框組+自定義表單
    Bootstrap4 麵包屑導航（Breadcrumb） <ul class="breadcrumb"> <li class="breadcrumb-item"><a href="#">item1</a></li> <li class="breadcrumb-item"><a href="#">it ...
  • Bootstrap4 卡片+下拉菜單+摺疊+導航+導航欄
    Bootstrap4 卡片 <div class="card"> <div class="card-body">卡片</div> </div> 卡片頭部，內容，底部 <div class="card"> <div class="card-header">卡片頭部</div> <div class=" ...
  • 力軟敏捷框架集成佈局插件（ce-layout）
    最近用力軟的框架覺得框架在佈局這塊不是很友好特別是對像css不是很好的程式員來說，大部分大家都是後端程式員。 所以決定集成一個和力軟敏捷框架風格比較一致的佈局插件進來 插件ce-layout ，下載地址https://gitee.com/program_cat/ce-layout @{ ViewDa ...
  • react嵌套路由
    1、結構目錄 2、路由配置文件，參照的vue-router config.js import Login from '../view/Login.js'; import System from '../view/System.js'; import Bus from '../view/Bus.js' ...
  • Web前端工程師需要學些什麼？
    Web前端工程師有時候很迷茫：我到底屬於設計，還是屬於程式員？ 是設計還是程式員，看看包需要學習哪些技術就知道了： 1 基礎技術前端的三大基礎HTML、CSS和JS。 HTML學習最重要的標簽的學習，div、h1-h6、p、ul-li、strong、圖片、字體等，什麼內容用什麼框. CSS定義了HT ...
一周排行
    -Advertisement-
    Play Games
  • WPF 已知問題 監聽 WMI 事件導致觸摸失效
    示例項目結構 在 Visual Studio 中創建一個 WinForms 應用程式後，項目結構如下所示： MyWinFormsApp/ │ ├───Properties/ │ └───Settings.settings │ ├───bin/ │ ├───Debug/ │ └───Release/ ...
  • [STAThread]特性
    [STAThread] 特性用於需要與 COM 組件交互的應用程式，尤其是依賴單線程模型（如 Windows Forms 應用程式）的組件。在 STA 模式下，線程擁有自己的消息迴圈，這對於處理用戶界面和某些 COM 組件是必要的。 [STAThread] static void Main(stri ...
  • UWP WinUI3 傳入 AddHandler 的 RoutedEventHandler 類型與事件所需不匹配將拋出參數異常
    在WinForm中使用全局異常捕獲處理 在WinForm應用程式中，全局異常捕獲是確保程式穩定性的關鍵。通過在Program類的Main方法中設置全局異常處理，可以有效地捕獲並處理未預見的異常，從而避免程式崩潰。 註冊全局異常事件 [STAThread] static void Main() { / ...
  • .NET 多版本 WinForm 開源控制項庫 SunnyUI
    前言 給大家推薦一款開源的 Winform 控制項庫，可以幫助我們開發更加美觀、漂亮的 WinForm 界面。 項目介紹 SunnyUI.NET 是一個基於 .NET Framework 4.0+、.NET 6、.NET 7 和 .NET 8 的 WinForm 開源控制項庫，同時也提供了工具類庫、擴展 ...
  • .net core8 使用Swagger（附當前源碼）
    說明 該文章是屬於OverallAuth2.0系列文章，每周更新一篇該系列文章（從0到1完成系統開發）。 該系統文章，我會儘量說的非常詳細，做到不管新手、老手都能看懂。 說明：OverallAuth2.0 是一個簡單、易懂、功能強大的許可權+可視化流程管理系統。 有興趣的朋友，請關註我吧(*^▽^*) ...
  • WPF 什麼時候 VisualTreeHelper.GetDescendantBounds 將返回無窮大
    一、下載安裝 1.下載git 必須先下載並安裝git，再TortoiseGit下載安裝 git安裝參考教程：https://blog.csdn.net/mukes/article/details/115693833 2.TortoiseGit下載與安裝 TortoiseGit，Git客戶端，32/6 ...
  • C# 開源教程帶你輕鬆掌握數據結構與演算法
    前言 在項目開發過程中，理解數據結構和演算法如同掌握蓋房子的秘訣。演算法不僅能幫助我們編寫高效、優質的代碼，還能解決項目中遇到的各種難題。 給大家推薦一個支持C#的開源免費、新手友好的數據結構與演算法入門教程：Hello演算法。 項目介紹 《Hello Algo》是一本開源免費、新手友好的數據結構與演算法入門 ...
  • 第22篇 生成proto文件bat腳本
    1.生成單個Proto.bat內容 @rem Copyright 2016, Google Inc. @rem All rights reserved. @rem @rem Redistribution and use in source and binary forms, with or with ...
  • 記一次 .NET某上位機視覺程式 卡死分析
    一：背景 1. 講故事 前段時間有位朋友找到我，說他的窗體程式在客戶這邊出現了卡死，讓我幫忙看下怎麼回事？dump也生成了，既然有dump了那就上 windbg 分析吧。 二：WinDbg 分析 1. 為什麼會卡死 窗體程式的卡死，入口門檻很低，後續往下分析就不一定了，不管怎麼說先用 !clrsta ...
  • 醫學DICOM文件與PACS系統進行數據傳輸
    前言 人工智慧時代，人臉識別技術已成為安全驗證、身份識別和用戶交互的關鍵工具。 給大家推薦一款.NET 開源提供了強大的人臉識別 API，工具不僅易於集成，還具備高效處理能力。 本文將介紹一款如何利用這些API，為我們的項目添加智能識別的亮點。 項目介紹 GitHub 上擁有 1.2k 星標的 C# ...
所有分類