學習筆記
一.列表組元件
列表組元件用於顯示一組列表的元件。
//基本例項
//列表項帶勳章
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 屬性...