Bootstrap CSS布局之列表
更新時間：2016年12月15日 13:29:38 作者：github_34514750
這篇文章主要為大家詳細介紹了Bootstrap CSS布局之列表的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了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)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- Bootstrap源碼解讀媒體對象、列表組和面板（10）
- Bootstrap基本組件學(xué)習(xí)筆記之列表組(11)
- 基于jQuery和Bootstrap框架實現(xiàn)仿知乎前端動態(tài)列表效果
- BootStrap實現(xiàn)郵件列表的分頁和模態(tài)框添加郵件的功能
- bootstrap下拉列表與輸入框組結(jié)合的樣式調(diào)整
- jQuery ui autocomplete選擇列表被Bootstrap模態(tài)窗遮擋的完美解決方法
- Knockout結(jié)合Bootstrap創(chuàng)建動態(tài)UI實現(xiàn)產(chǎn)品列表管理
- 利用ASP.NET MVC和Bootstrap快速搭建個人博客之后臺dataTable數(shù)據(jù)列表
- 深入淺析Bootstrap列表組組件
- Bootstrap列表組學(xué)習(xí)使用
相關(guān)文章
JSON.parse處理非標(biāo)準(zhǔn)Json數(shù)據(jù)出錯的解決
這篇文章主要介紹了JSON.parse處理非標(biāo)準(zhǔn)Json數(shù)據(jù)出錯的解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了JS對象數(shù)組中如何匹配某個屬性值，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
用js控制select的方法，大家可以參考下2008-06-06
表單驗證在很多地方都可以用到，本文詳細的介紹了javascript表單是否為空驗證方法，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
微信小程序?qū)崿F(xiàn)canvas分享朋友圈海報
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)canvas分享朋友圈海報，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-06-06
微信小程序的云開發(fā)功能剛剛上線，這篇文章主要介紹了小程序云開發(fā)部署攻略(圖文教程)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-10-10
這篇文章主要為大家詳細介紹了bootstrap multiselect下拉列表功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08
這篇文章主要為大家介紹了babel插件去除console示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-10-10
本文主要介紹了使用javascript實現(xiàn)簡單的選項卡切換的效果，代碼非常的簡單，兼容性十分棒，這里推薦給小伙伴們。2015-01-01
谷歌瀏覽器不支持showModalDialog模態(tài)對話框的解決方法
谷歌瀏覽器不支持showModalDialog模態(tài)對話框和無法返回returnValue，這個問題，想必很多朋友都有遇到過吧，解決方法很簡單，下面的思路，大家可以看看2014-09-09