bootstrap列表組 面板 和嵌入元件

2021-08-04 04:47:06 字數 1317 閱讀 3864

學習筆記

一.列表組元件

列表組元件用於顯示一組列表的元件。

//基本例項

//列表項帶勳章

1.這是起始10

效果

//鏈結和首選 其實就是講ul換做div,將li換做a

1.這是起始10

2.這是第二條資料

3.這是第三排資訊

4.這是末尾

效果:

//按鈕式列表

1.這是起始 10

2.這是第二條資料

3.這是第三排資訊

4.這是末尾

//設定專案被禁用

class="list-group-item disabled"

//情景類

3.這是第三排資訊

效果:

1.這是起始 10

2.這是第二條資料

3.這是第三排資訊

4.這是末尾

//定製內容

內容標題

內容標題

內容標題

效果:

二.面板元件    (用途:例如登入彈框)

面板元件就是乙個存放內容的容器元件。

//基本例項

這裡是詳細內容區!

//帶標題容器的面板

面板標題

這裡是詳細內容區!

//也可以設定標題元素

這裡是底部 /情

景效果:default、success、info、warning、danger、primary

這裡是面板詳細內容區!

與面板無縫連線的**

直接巢狀在面板裡面使用**即可31

23這裡是面板底部

效果:

根據被嵌入內容的外部容器的寬度,自動建立乙個固定的比例,從而讓瀏覽器自動確定內容的尺寸,能夠在各種裝置上縮放。這些規則可以直接用於、、和元素。

具體表現為顯示比例歲瀏覽器的大小變化而變化;目前就兩個比例有用,即16:9和4:9

//16:9 響應式

//4:3 響應式

Bootstrap 《基礎二十八》列表組

原文 bootstrap 基礎二十八 列表組 下面的例項演示了這點 結果如下所示 我們可以向任意的列表項新增徽章元件,它會自動定位到右邊。只需要在 元素中新增即可。下面的例項演示了這點 結果如下所示 免費網域名稱註冊 24 7 支援 免費 window 空間託管 影象的數量 每年更新成本 結果如下所...

Bootstrap面板使用方法

面板樣式是在很多種情況下都可能會使用到的樣式之一,例如部落格的側邊欄 企業 的公告欄 欄目列表等。面板樣式除了內容之外,還有乙個面板頭部可以新增標題,讓我們通過這篇文章看看bootstrap面板樣式的使用方法。bootstrap面板基本樣式 直接呼叫面板樣式也非常容易,只需要通過以下 即可實現 ba...

Bootstrap下拉列表

使用下拉列表 dropdown 外掛程式,能夠向不論什麼元件 比方導航欄 標籤頁 膠囊式導航選單 button等 加入下拉列表。假設想要單獨引用該外掛程式的功能,那麼須要引用 dropdown.js。或者能夠引入bootstrap.js或壓縮版的bootstrap.min.js。通過 data 屬性...