每日觀點：【Bootstrap4】列表組的創建方法

Bootstrap 4 列表組

(資料圖)

大部分基礎列表組都是無序的。

要創建列表組，可以在

元素上添加 .list-group 類, 在

元素上添加 .list-group-item 類

.active 激活狀態的列表項

.disabled 禁用的列表項

鏈接列表項

要創建一個鏈接的列表項，可以將

成功列表項

次要列表項

信息列表項

警告列表項

危險列表項

主要列表項

深灰色列表項

淺色列表項

元素上添加 .nav類，在每個

選項上添加 .nav-item 類，在每個鏈接上添加 .nav-link 類

導航對齊方式

.justify-content-center 類設置導航居中顯示， .justify-content-end 類設置導航右對齊

垂直導航

.flex-column

選項卡

.nav-tabs 類可以將導航轉化為選項卡

.active 類來標記選中

膠囊導航

.nav-pills 類可以將導航項設置成膠囊形狀

導航等寬

.nav-justified 類可以設置導航項齊行等寬顯示

膠囊下拉菜單

選項卡下拉菜單

動態選項卡

選項卡是動態可切換的，可以在每個鏈接上添加 data-toggle=“tab” 屬性。 然后在每個選項對應的內容的上添加 .tab-pane 類。

如果你希望有淡入效果可以在 .tab-pane 后添加 .fade類

.........

膠囊狀動態選項卡

膠囊狀動態選項卡只需要將以上實例的代碼中 data-toggle 屬性設置為 data-toggle=“pill”

.........

Bootstrap 4 導航欄

可以使用 .navbar 類來創建一個標準的導航欄，后面緊跟: .navbar-expand-xl|lg|md|sm 類來創建響應式的導航欄 (大屏幕水平鋪開，小屏幕垂直堆疊)。

導航欄上的選項可以使用

Link 1

Link 2

Link 3

元素并添加 class=“navbar-nav” 類。 然后在

元素上添加 .nav-item 類， 元素上使用 .nav-link 類

垂直導航欄

通過刪除 .navbar-expand-xl|lg|md|sm 類來創建垂直導航欄

不同顏色導航欄

可以使用以下類來創建不同顏色導航欄：.bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark 和 .bg-light

提示: 對于暗色背景需要設置文本顏色為淺色的，對于淺色背景需要設置文本顏色為深色的

激活和禁用狀態:可以在 元素上添加 .active 類來高亮顯示選中的選項。 .disabled 類用于設置該鏈接是不可點擊的。

品牌/Logo

.navbar-brand 類用于高亮顯示品牌/Logo

折疊導航欄

通常，小屏幕上我們都會折疊導航欄，通過點擊來顯示導航選項

要創建折疊導航欄，可以在按鈕上添加 class=“navbar-toggler”, data-toggle=“collapse” 與 data-target="#thetarget" 類。然后在設置了 class=“collapse navbar-collapse” 類的 div 上包裹導航內容（鏈接）, div 元素上的 id 匹配按鈕 data-target 的上指定的 id:

Navbar

Home

Menu 1

Menu 2

Home

Menu 1

Menu 2

Active

Dropdown

Link 1        Link 2        Link 3

Link

Disabled

Active

Dropdown

Link 1        Link 2        Link 3

Link

Disabled

Link

Link

Link

Disabled

Link

Link

Link

Link 1

Link 2

Dropdown link

Link 1          Link 2          Link 3

替換為

， 替換

。如果你想鼠標懸停顯示灰色背景就添加.list-group-item-action 類:

First item    Second item    Third item

多色鏈接列表項

列表項目的顏色可以通過以下列來設置： .list-group-item-success, list-group-item-secondary, list-group-item-info, list-group-item-warning, .list-group-item-danger, list-group-item-dark 和 list-group-item-light

Bootstrap 4 卡片

可以通過 Bootstrap4 的 .card 與 .card-body 類來創建一個簡單的卡片

簡單的卡片

頭部和底部

.card-header類用于創建卡片的頭部樣式， .card-footer 類用于創建卡片的底部樣式

頭部內容底部

多種顏色卡片

Bootstrap 4 提供了多種卡片的背景顏色類： .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark 和 .bg-light

Basic card    Primary card    Success card    Info card    Warning card    Danger card    Secondary card    Dark card    Light card

標題、文本和鏈接

可以在頭部元素上使用 .card-title 類來設置卡片的標題 。 .card-text 類用于設置卡片正文的內容。 .card-link 類用于給鏈接設置顏色。

Card titleSome example text. Some example text.Card link      Another link

圖片卡片

可以給

添加 .card-img-top（圖片在文字上方） 或 .card-img-bottom（圖片在文字下方 來設置圖片卡片)

如果圖片要設置為背景，可以對內容使用 .card-img-overlay 類

Card titleSome example text. Some example text.Card link        Another link      Card titleSome example text. Some example text.Card link        Another link                Card titleSome example text. Some example text.Card link        Another link

Bootstrap 4 下拉菜單

Bootstrap4 下拉菜單依賴于 popper.min.js

下拉菜單是可切換的，是以列表格式顯示鏈接的上下文菜單

Dropdown button   Link 1      Link 2      Link 3

解析：

.dropdown 類用來指定一個下拉菜單

按鈕或鏈接需要添加 .dropdown-toggle 和 data-toggle=“dropdown” 屬性

添加 .dropdown-menu 類來設置實際下拉菜單，然后在下拉菜單的選項中添加 .dropdown-item 類

分割線

.dropdown-divider

標題

.dropdown-header

可用項

.active

禁用項

.disabled

標題Active  Disabled

下拉菜單的定位

在.dropdown-menu 類后添加 .dropdown-menu-right 類

彈出方向設置

dropright          下拉菜單向右彈出

dropup             上拉菜單向上彈出

dropleft            下拉菜單向左彈出

可以在按鈕中添加下拉菜單

按鈕中的下拉菜單Primary             Link 1        Link 2

Bootstrap 4 折疊

Bootstrap 4 折疊可以很容易的實現內容的顯示與隱藏。

簡單的折疊點擊按鈕內容會再顯示與隱藏之間切換。簡單的折疊Lorem ipsum dolor sit amet, consectetur adipisicing elit,      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

解析：

.collapse 類用于指定一個折疊元素 (實例中的

); 點擊按鈕后會在隱藏與顯示之間切換。

控制內容的隱藏與顯示，需要在 或 元素上添加 data-toggle=“collapse” 屬性。 data-target="#id" 屬性是對應折疊的內容 (

)。

注意: 元素上你可以使用 href 屬性來代替 data-target 屬性

通過擴展卡片組件來顯示簡單的手風琴

注意: 使用 data-parent 屬性來確保所有的折疊元素在指定的父元素下，這樣就能實現在一個折疊選項顯示時其他選項就隱藏

選項一                  #1 內容：網星軟件 -- 學的不僅是技術，更是夢想?。。?           選項二                  #2 網星軟件 -- 學的不僅是技術，更是夢想?。。?/p>

Bootstrap 4 導航

如果你想創建一個簡單的水平導航欄，可以在

導航欄使用下拉菜單

Logo

導航欄的表單

元素使用 class=“form-inline” 類來排版輸入框與按鈕

搜索

.fixed-top 類來實現導航欄固定在頂部

.fixed-bottom 類用于設置導航欄固定在底部

Bootstrap 4 表單

表單元素 , , 和 標簽在使用 .form-control 類的情況下，寬度都是設置為 100%

Bootstrap 提供了兩種類型的表單布局：

堆疊表單 (全屏寬度)：垂直方向

內聯表單：水平方向 在

元素上添加 .form-inline類

屏幕寬度在大于等于 576px 時才會水平顯示。如果小于 576px 則會生成堆疊表單

郵箱:密碼:同意協議注冊

Bootstrap 4 表單控件

Bootstrap4 支持以下表單控件

input

Bootstrap 支持所有的 HTML5 輸入類型: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, 以及 color。

注意：: 如果 input 的 type 屬性未正確聲明，輸入框的樣式將不會顯示

用戶名:密碼:

textarea

評論:checkbox使用 .form-check-inline 類可以讓選項顯示在同一行上disabled 禁止選中吃飯睡覺寫代碼radio使用 .radio-inline 類可以讓選項顯示在同一行上disabled 禁止選中Option 1Option 2Option 3selectBootstrap4 表單控件 下拉列表單選下拉菜單:1234Bootstrap4 輸入框組可以使用 .input-group 類來向表單輸入框中添加更多的樣式，如圖標、文本或者按鈕。使用 .input-group-prepend 類可以在輸入框的的前面添加文本信息， .input-group-append 類添加在輸入框的后面。最后，我們還需要使用 .input-group-text 類來設置文本的樣式。@      @runoob.com輸入框添加按鈕組OKCancel設置下拉菜單選擇網站     GOOGLE         RUNOOB           TAOBAOBootstrap 4 輪播輪播圖片上添加描述在每個內添加來設置輪播圖片的描述文本上述實例的類：.carousel                                    創建一個輪播.carousel-indicators                   為輪播添加一個指示符，就是輪播圖底下的一個個小點，輪播的過程可以顯示目前是第幾張圖。.carousel-inner                            添加要切換的圖片.carousel-item                             指定每個圖片的內容.carousel-control-prev                 添加左側的按鈕，點擊會返回上一張。.carousel-control-next                 添加右側按鈕，點擊會切換到下一張。.carousel-control-prev-icon         與 .carousel-control-prev 一起使用，設置左側的按鈕.carousel-control-next-icon          與 .carousel-control-next 一起使用，設置右側的按鈕.slide                                            切換圖片的過渡和動畫效果，如果你不需要這樣的效果，可以刪除這個類。First itemSecond itemThird item