目錄
基礎列表組
徽章
連結
#按鈕
自訂內容
HTML
CSS
javascript
#狀態設定
多彩列表組
首頁 web前端 Bootstrap教程 詳細介紹Bootstrap中的列表組

詳細介紹Bootstrap中的列表組

Apr 12, 2021 am 09:37 AM
bootstrap

本篇文章給大家詳細介紹一下Bootstrap中的列表群組。有一定的參考價值,有需要的朋友可以參考一下,希望對大家有幫助。

詳細介紹Bootstrap中的列表組

列表組是Bootstrap框架新增的一個元件,可以用來製作清單清單、垂直導航等效果,也可以配合其他的元件製作出更漂亮的元件。相關推薦:《bootstrap教程

基礎列表組

#  基礎列表組,看上去就是去掉了列表符號的列表項,並且配上一些特定的樣式。在Bootstrap框架中的基礎列表組主要包括兩個部分: 

#  ☑  list-group:列表組容器,常用的是ul元素,當然也可以是ol或p元素

】 list-group-item:列表項,常用的是li元素,當然也可以是p元素

  對於基礎列表組並沒有做過多的樣式設置,主要設置了其間距,邊框和圓角等等

.list-group {
  padding-left: 0;
  margin-bottom: 20px;
}
.list-group-item {
  position: relative;
  display: block;
  padding: 10px 15px;
  margin-bottom: -1px;
  background-color: #fff;
  border: 1px solid #ddd;
}
.list-group-item:first-child {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}
.list-group-item:last-child {
  margin-bottom: 0;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
}
登入後複製
<ul class="list-group">
    <li class="list-group-item">HTML</li>
    <li class="list-group-item">CSS</li>
    <li class="list-group-item">javascript</li>
    <li class="list-group-item">bootstrap</li>
    <li class="list-group-item">jquery</li>
</ul>
登入後複製

詳細介紹Bootstrap中的列表組

徽章

  帶徽章的列表組其實就是將Bootstrap框架中的徽章元件和基礎列表組結合在一起的一個效果。具體做法很簡單,只需要在「list-group-item」中加入徽章元件「badge」

  原理非常簡單,就是給徽章設定了一個右浮動,當然如果有兩個徽章同時在一個當清單項目中出現時,也設定了他們之間的距離

.list-group-item > .badge {
  float: right;
}
.list-group-item > .badge + .badge {
  margin-right: 5px;
}
登入後複製
<ul class="list-group">
    <li class="list-group-item">
        <span class="badge">33</span>HTML
    </li>
    <li class="list-group-item">
        <span class="badge">60</span>CSS
    </li>
    <li class="list-group-item">
        <span class="badge">192</span>javascript
    </li>
    <li class="list-group-item">
        <span class="badge">20</span>bootstrap
    </li>
    <li class="list-group-item">
        <span class="badge">26</span>jquery
    </li>
</ul>
登入後複製

詳細介紹Bootstrap中的列表組

連結

##  用 

 標籤取代 

  •  標籤可以組成一個全部是連結的清單群組(也要注意的是,需要將 
       標籤替換為 

       標籤)。沒必要為清單群組中的每個元素加上一個父元素

      a.list-group-item {
        color: #555;
      }
      a.list-group-item .list-group-item-heading {
        color: #333;
      }
      a.list-group-item:hover,
      a.list-group-item:focus {
        color: #555;
        text-decoration: none;
        background-color: #f5f5f5;
      }
      登入後複製
      <div class="list-group">
        <a href="#" class="list-group-item ">HTML</a>
        <a href="#" class="list-group-item">CSS</a>
        <a href="#" class="list-group-item">javascript</a>
        <a href="#" class="list-group-item active">bootstrap</a>
        <a href="#" class="list-group-item">jquery</a>
      </div>
      登入後複製

      詳細介紹Bootstrap中的列表組

      #按鈕

        清單群組中的元素也可以直接就是按鈕(也同時意味著父元素必須是 

       而不能用 

         了),並且無需為每個按鈕單獨包裹一個父元素。 注意不要使用標準的 .btn 類別
        <div class="list-group">
          <button type="button" class="list-group-item ">HTML</button>
          <button type="button" class="list-group-item">CSS</button>
          <button type="button" class="list-group-item">javascript</button>
          <button type="button" class="list-group-item">bootstrap</button>
          <button type="button" class="list-group-item">jquery</button>
        </div>
        登入後複製

        詳細介紹Bootstrap中的列表組

        自訂內容

        Bootstrap框加在連結清單群組的基礎上新增了兩個樣式:

          ☑  list-group-item-heading:用來定義清單項目頭部樣式

          ☑  list-group -item-text:用來定義清單項目主要內容

          這兩個樣式最大的作用就是用來幫助開發者可以自訂清單項目裡的內容

        <div class="list-group">
            <a href="##" class="list-group-item">
                <h4 id="HTML">HTML</h4>
                <p class="list-group-item-text">HTML被认为是前端知识体系里面最简单的知识,几年前,很多人都推荐在W3C上学习个几天就能够基本掌握。但随着HTML5和移动端的强势发展,HTML的技能点也越来越难。世上无难事,好学好总结...</p>
            </a>
            <a href="##" class="list-group-item">
                <h4 id="CSS">CSS</h4>
                <p class="list-group-item-text">CSS是前端工程师的基本功,但好多执迷于学习javascript的人的基本功并不扎实。可能一些人从w3school网站匆匆过了一遍,只是对CSS常用概念有一些表面上的理解,就一头扎进javascript的深坑里跳不出来。实际上,javascript中比较复杂的逻辑很有可能使用CSS几行样式就能解决问题,而且性能还好。CSS之所以能成为一门优雅的语言,以及有其对应的重构工程师的岗位,是因为这本语言本身就有很强的存在价值,且真正要理解它并不容易。从CSS禅意花园开始,写CSS成为一种艺术。从CSS2.1到3再到4,CSS所涵盖的内容及可实现的功能得到了极大的丰富,使得CSS的学习成本也越来越高。再多的知识,一个知识点一个知识点去学,总能学明白...</p>
            </a>
            <a href="##" class="list-group-item">
                <h4 id="javascript">javascript</h4>
                <p class="list-group-item-text">javascript就如同魔法一样,它是一门充满活力、简单易用的语言,又是一门具有许多复杂微妙技术的语言。即使是经验丰富的javascript开发者,如果没有认真学习的话,也无法真正理解它们,这就是javascript的矛盾之处。由于javascript不必理解就可以使用,因此通常来说很难真正理解语言本身,这就是我们面临的挑战。不满足于只是让代码正常工作,而是想要弄清楚为什么,勇于挑战这条崎岖颠簸的少有人走的路,拥抱整个javascript...</p>
            </a>    
        </div>
        登入後複製

        詳細介紹Bootstrap中的列表組

        #狀態設定

          Bootstrap框架為組合清單項目提供了狀態效果,特別是連結清單群組。例如常見狀態和禁用狀態等。實作方法和前面介紹的元件類似,在清單群組中只需要在對應的清單項目中新增類別名稱:

          ☑  active:表示目前狀態

          ☑  disabled:表示目前狀態

          ☑  disabled:表示停用狀態

        .list-group-item.disabled,
        .list-group-item.disabled:hover,
        .list-group-item.disabled:focus {
          color: #777;
          background-color: #eee;
        }
        
        .list-group-item.active,
        .list-group-item.active:hover,
        .list-group-item.active:focus {
          z-index: 2;
          color: #fff;
          background-color: #428bca;
          border-color: #428bca;
        }
        登入後複製
        <div class="list-group">
          <a href="#" class="list-group-item ">HTML</a>
          <a href="#" class="list-group-item">CSS</a>
          <a href="#" class="list-group-item">javascript</a>
          <a href="#" class="list-group-item active">bootstrap</a>
          <a href="#" class="list-group-item disabled">jquery</a>
        </div>
        登入後複製
        詳細介紹Bootstrap中的列表組

        多彩列表組

          列表組元件和警告元件一樣,Bootstrap為不同的狀態提供了不同的背景顏色和文字色,可以使用這幾個類別名稱定義不同背景色的清單項目

          ☑  list-group-item-success:成功,背景色綠色

        #  ☑  list-group-item-list-group-item-list-group

        info:訊息,背景色藍色

          ☑  list-group-item-warning:警告,背景色為黃色

          ☑  list-group-item-danger:錯誤,背景色為紅色

          如果想為清單項目添加什麼背景色,只需要在「list-group-item」基礎上增加對應的類別名稱詳細介紹Bootstrap中的列表組

        <div class="list-group">
            <a href="##" class="list-group-item">默认</a>
            <a href="##" class="list-group-item list-group-item-success">成功</a>
            <a href="##" class="list-group-item list-group-item-info">信息</a>
            <a href="##" class="list-group-item list-group-item-warning">警告</a>
            <a href="##" class="list-group-item list-group-item-danger">错误</a>
        </div>
        登入後複製

        更多程式相關知識,請造訪:

        程式設計影片###! ! ###

        以上是詳細介紹Bootstrap中的列表組的詳細內容。更多資訊請關注PHP中文網其他相關文章!

  • 本網站聲明
    本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

    熱AI工具

    Undresser.AI Undress

    Undresser.AI Undress

    人工智慧驅動的應用程序,用於創建逼真的裸體照片

    AI Clothes Remover

    AI Clothes Remover

    用於從照片中去除衣服的線上人工智慧工具。

    Undress AI Tool

    Undress AI Tool

    免費脫衣圖片

    Clothoff.io

    Clothoff.io

    AI脫衣器

    Video Face Swap

    Video Face Swap

    使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

    熱工具

    記事本++7.3.1

    記事本++7.3.1

    好用且免費的程式碼編輯器

    SublimeText3漢化版

    SublimeText3漢化版

    中文版,非常好用

    禪工作室 13.0.1

    禪工作室 13.0.1

    強大的PHP整合開發環境

    Dreamweaver CS6

    Dreamweaver CS6

    視覺化網頁開發工具

    SublimeText3 Mac版

    SublimeText3 Mac版

    神級程式碼編輯軟體(SublimeText3)

    熱門話題

    Java教學
    1664
    14
    CakePHP 教程
    1422
    52
    Laravel 教程
    1316
    25
    PHP教程
    1267
    29
    C# 教程
    1239
    24
    bootstrap搜索欄怎麼獲取 bootstrap搜索欄怎麼獲取 Apr 07, 2025 pm 03:33 PM

    如何使用 Bootstrap 獲取搜索欄的值:確定搜索欄的 ID 或名稱。使用 JavaScript 獲取 DOM 元素。獲取元素的值。執行所需的操作。

    vue中怎麼用bootstrap vue中怎麼用bootstrap Apr 07, 2025 pm 11:33 PM

    在 Vue.js 中使用 Bootstrap 分為五個步驟:安裝 Bootstrap。在 main.js 中導入 Bootstrap。直接在模板中使用 Bootstrap 組件。可選:自定義樣式。可選:使用插件。

    bootstrap垂直居中怎麼弄 bootstrap垂直居中怎麼弄 Apr 07, 2025 pm 03:21 PM

    使用 Bootstrap 實現垂直居中:flexbox 法:使用 d-flex、justify-content-center 和 align-items-center 類,將元素置於 flexbox 容器內。 align-items-center 類法:對於不支持 flexbox 的瀏覽器,使用 align-items-center 類,前提是父元素具有已定義的高度。

    bootstrap怎麼插入圖片 bootstrap怎麼插入圖片 Apr 07, 2025 pm 03:30 PM

    在 Bootstrap 中插入圖片有以下幾種方法:直接插入圖片,使用 HTML 的 img 標籤。使用 Bootstrap 圖像組件,可以提供響應式圖片和更多樣式。設置圖片大小,使用 img-fluid 類可以使圖片自適應。設置邊框,使用 img-bordered 類。設置圓角,使用 img-rounded 類。設置陰影,使用 shadow 類。調整圖片大小和位置,使用 CSS 樣式。使用背景圖片,使用 background-image CSS 屬性。

    bootstrap怎麼寫分割線 bootstrap怎麼寫分割線 Apr 07, 2025 pm 03:12 PM

    創建 Bootstrap 分割線有兩種方法:使用 標籤,可創建水平分割線。使用 CSS border 屬性,可創建自定義樣式的分割線。

    bootstrap怎麼設置框架 bootstrap怎麼設置框架 Apr 07, 2025 pm 03:27 PM

    要設置 Bootstrap 框架,需要按照以下步驟:1. 通過 CDN 引用 Bootstrap 文件;2. 下載文件並將其託管在自己的服務器上;3. 在 HTML 中包含 Bootstrap 文件;4. 根據需要編譯 Sass/Less;5. 導入定製文件(可選)。設置完成後,即可使用 Bootstrap 的網格系統、組件和样式創建響應式網站和應用程序。

    bootstrap怎麼調整大小 bootstrap怎麼調整大小 Apr 07, 2025 pm 03:18 PM

    要調整 Bootstrap 中元素大小,可以使用尺寸類,具體包括:調整寬度:.col-、.w-、.mw-調整高度:.h-、.min-h-、.max-h-

    bootstrap按鈕怎麼用 bootstrap按鈕怎麼用 Apr 07, 2025 pm 03:09 PM

    如何使用 Bootstrap 按鈕?引入 Bootstrap CSS創建按鈕元素並添加 Bootstrap 按鈕類添加按鈕文本

    See all articles