Bootstrap CSS布局之列表
本文實例為大家分享了Bootstrap CSS布局中的列表布局,供大家參考,具體內(nèi)容如下
列表
普通列表ul li
有序列表ol li
去點列表.list-unstyled
內(nèi)聯(lián)列表.list-inline
定義列表dl dt dd
水平定義列表dl-horizontal
ul, ol { margin-top: 0; margin-bottom: 10px; } ul ul, ol ul, ul ol, ol ol { margin-bottom: 0; }
普通列表ul li
有序列表ol li
去點列表class=”list-unstyled”
//源碼 .list-unstyled { padding-left: 0; list-style: none; }
內(nèi)聯(lián)列表class=”list-inline”
//源碼 .list-inline { padding-left: 0; margin-left: -5px; list-style: none; } .list-inline > li { display: inline-block; padding-right: 5px; padding-left: 5px; }
定義列表dl dt dd
dl { margin-top: 0; margin-bottom: 20px; } dt, dd { line-height: 1.42857143; } dt { font-weight: bold; } dd { margin-left: 0; }
水平定義列表class=”dl-horizontal”
@media (min-width: 768px) { .dl-horizontal dt { float: left; width: 160px; overflow: hidden; clear: left; text-align: right; //顯示省略符號來代表被修剪的文本 text-overflow: ellipsis; white-space: nowrap; } .dl-horizontal dd { margin-left: 180px; } }
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
- Bootstrap源碼解讀媒體對象、列表組和面板(10)
- Bootstrap基本組件學習筆記之列表組(11)
- 基于jQuery和Bootstrap框架實現(xiàn)仿知乎前端動態(tài)列表效果
- BootStrap實現(xiàn)郵件列表的分頁和模態(tài)框添加郵件的功能
- bootstrap下拉列表與輸入框組結合的樣式調(diào)整
- jQuery ui autocomplete選擇列表被Bootstrap模態(tài)窗遮擋的完美解決方法
- Knockout結合Bootstrap創(chuàng)建動態(tài)UI實現(xiàn)產(chǎn)品列表管理
- 利用ASP.NET MVC和Bootstrap快速搭建個人博客之后臺dataTable數(shù)據(jù)列表
- 深入淺析Bootstrap列表組組件
- Bootstrap列表組學習使用
相關文章
JSON.parse處理非標準Json數(shù)據(jù)出錯的解決
這篇文章主要介紹了JSON.parse處理非標準Json數(shù)據(jù)出錯的解決,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-09-09微信小程序?qū)崿F(xiàn)canvas分享朋友圈海報
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)canvas分享朋友圈海報,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2020-06-06谷歌瀏覽器不支持showModalDialog模態(tài)對話框的解決方法
谷歌瀏覽器不支持showModalDialog模態(tài)對話框和無法返回returnValue,這個問題,想必很多朋友都有遇到過吧,解決方法很簡單,下面的思路,大家可以看看2014-09-09