Bootstrap 4 列表組

(資料圖)

大部分基礎(chǔ)列表組都是無(wú)序的。

要?jiǎng)?chuàng)建列表組，可以在

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

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

.active 激活狀態(tài)的列表項(xiàng)

.disabled 禁用的列表項(xiàng)

鏈接列表項(xiàng)

要?jiǎng)?chuàng)建一個(gè)鏈接的列表項(xiàng)，可以將

成功列表項(xiàng)

次要列表項(xiàng)

信息列表項(xiàng)

警告列表項(xiàng)

危險(xiǎn)列表項(xiàng)

主要列表項(xiàng)

深灰色列表項(xiàng)

淺色列表項(xiàng)

元素上添加 .nav類，在每個(gè)

選項(xiàng)上添加 .nav-item 類，在每個(gè)鏈接上添加 .nav-link 類

導(dǎo)航對(duì)齊方式

.justify-content-center 類設(shè)置導(dǎo)航居中顯示， .justify-content-end 類設(shè)置導(dǎo)航右對(duì)齊

垂直導(dǎo)航

.flex-column

選項(xiàng)卡

.nav-tabs 類可以將導(dǎo)航轉(zhuǎn)化為選項(xiàng)卡

.active 類來(lái)標(biāo)記選中

膠囊導(dǎo)航

.nav-pills 類可以將導(dǎo)航項(xiàng)設(shè)置成膠囊形狀

導(dǎo)航等寬

.nav-justified 類可以設(shè)置導(dǎo)航項(xiàng)齊行等寬顯示

膠囊下拉菜單

選項(xiàng)卡下拉菜單

動(dòng)態(tài)選項(xiàng)卡

選項(xiàng)卡是動(dòng)態(tài)可切換的，可以在每個(gè)鏈接上添加 data-toggle=“tab” 屬性。 然后在每個(gè)選項(xiàng)對(duì)應(yīng)的內(nèi)容的上添加 .tab-pane 類。

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

.........

膠囊狀動(dòng)態(tài)選項(xiàng)卡

膠囊狀動(dòng)態(tài)選項(xiàng)卡只需要將以上實(shí)例的代碼中 data-toggle 屬性設(shè)置為 data-toggle=“pill”

.........

Bootstrap 4 導(dǎo)航欄

可以使用 .navbar 類來(lái)創(chuàng)建一個(gè)標(biāo)準(zhǔn)的導(dǎo)航欄，后面緊跟: .navbar-expand-xl|lg|md|sm 類來(lái)創(chuàng)建響應(yīng)式的導(dǎo)航欄 (大屏幕水平鋪開，小屏幕垂直堆疊)。

導(dǎo)航欄上的選項(xiàng)可以使用

Link 1

Link 2

Link 3

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

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

垂直導(dǎo)航欄

通過(guò)刪除 .navbar-expand-xl|lg|md|sm 類來(lái)創(chuàng)建垂直導(dǎo)航欄

不同顏色導(dǎo)航欄

可以使用以下類來(lái)創(chuàng)建不同顏色導(dǎo)航欄：.bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark 和 .bg-light

提示: 對(duì)于暗色背景需要設(shè)置文本顏色為淺色的，對(duì)于淺色背景需要設(shè)置文本顏色為深色的

激活和禁用狀態(tài):可以在 元素上添加 .active 類來(lái)高亮顯示選中的選項(xiàng)。 .disabled 類用于設(shè)置該鏈接是不可點(diǎn)擊的。

品牌/Logo

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

折疊導(dǎo)航欄

通常，小屏幕上我們都會(huì)折疊導(dǎo)航欄，通過(guò)點(diǎn)擊來(lái)顯示導(dǎo)航選項(xiàng)

要?jiǎng)?chuàng)建折疊導(dǎo)航欄，可以在按鈕上添加 class=“navbar-toggler”, data-toggle=“collapse” 與 data-target="#thetarget" 類。然后在設(shè)置了 class=“collapse navbar-collapse” 類的 div 上包裹導(dǎo)航內(nèi)容（鏈接）, 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

替換為

， 替換

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

First item    Second item    Third item

多色鏈接列表項(xiàng)

列表項(xiàng)目的顏色可以通過(guò)以下列來(lái)設(shè)置： .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 卡片

可以通過(guò) Bootstrap4 的 .card 與 .card-body 類來(lái)創(chuàng)建一個(gè)簡(jiǎn)單的卡片

簡(jiǎn)單的卡片

頭部和底部

.card-header類用于創(chuàng)建卡片的頭部樣式， .card-footer 類用于創(chuàng)建卡片的底部樣式

頭部?jī)?nèi)容底部

多種顏色卡片

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

標(biāo)題、文本和鏈接

可以在頭部元素上使用 .card-title 類來(lái)設(shè)置卡片的標(biāo)題 。 .card-text 類用于設(shè)置卡片正文的內(nèi)容。 .card-link 類用于給鏈接設(shè)置顏色。

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

圖片卡片

可以給

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

如果圖片要設(shè)置為背景，可以對(duì)內(nèi)容使用 .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 類用來(lái)指定一個(gè)下拉菜單

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

添加 .dropdown-menu 類來(lái)設(shè)置實(shí)際下拉菜單，然后在下拉菜單的選項(xiàng)中添加 .dropdown-item 類

分割線

.dropdown-divider

標(biāo)題

.dropdown-header

可用項(xiàng)

.active

禁用項(xiàng)

.disabled

標(biāo)題Active  Disabled

下拉菜單的定位

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

彈出方向設(shè)置

dropright          下拉菜單向右彈出

dropup             上拉菜單向上彈出

dropleft            下拉菜單向左彈出

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

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

Bootstrap 4 折疊

Bootstrap 4 折疊可以很容易的實(shí)現(xiàn)內(nèi)容的顯示與隱藏。

簡(jiǎn)單的折疊點(diǎn)擊按鈕內(nèi)容會(huì)再顯示與隱藏之間切換。簡(jiǎn)單的折疊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 類用于指定一個(gè)折疊元素 (實(shí)例中的

); 點(diǎn)擊按鈕后會(huì)在隱藏與顯示之間切換。

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

)。

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

通過(guò)擴(kuò)展卡片組件來(lái)顯示簡(jiǎn)單的手風(fēng)琴

注意: 使用 data-parent 屬性來(lái)確保所有的折疊元素在指定的父元素下，這樣就能實(shí)現(xiàn)在一個(gè)折疊選項(xiàng)顯示時(shí)其他選項(xiàng)就隱藏

選項(xiàng)一                  #1 內(nèi)容：網(wǎng)星軟件 -- 學(xué)的不僅是技術(shù)，更是夢(mèng)想?。。?           選項(xiàng)二                  #2 網(wǎng)星軟件 -- 學(xué)的不僅是技術(shù)，更是夢(mèng)想?。?！

Bootstrap 4 導(dǎo)航

如果你想創(chuàng)建一個(gè)簡(jiǎn)單的水平導(dǎo)航欄，可以在

導(dǎo)航欄使用下拉菜單

Logo

導(dǎo)航欄的表單

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

搜索

.fixed-top 類來(lái)實(shí)現(xiàn)導(dǎo)航欄固定在頂部

.fixed-bottom 類用于設(shè)置導(dǎo)航欄固定在底部

Bootstrap 4 表單

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

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

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

內(nèi)聯(lián)表單：水平方向 在

元素上添加 .form-inline類

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

郵箱:密碼:同意協(xié)議注冊(cè)

Bootstrap 4 表單控件

Bootstrap4 支持以下表單控件

input

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

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

用戶名:密碼:

textarea

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