快捷導(dǎo)航

Bootstrap CSS布局之列表

更新時間：2016年12月15日 13:29:38 作者：github_34514750

這篇文章主要為大家詳細(xì)介紹了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í)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(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ù)組中如何匹配某個屬性值
這篇文章主要介紹了JS對象數(shù)組中如何匹配某個屬性值，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-09-09
javascript操作select參考代碼
用js控制select的方法，大家可以參考下
2008-06-06
javascript表單是否為空驗證方法
表單驗證在很多地方都可以用到，本文詳細(xì)的介紹了javascript表單是否為空驗證方法，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-03-03
微信小程序?qū)崿F(xiàn)canvas分享朋友圈海報
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)canvas分享朋友圈海報，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-06-06
小程序云開發(fā)部署攻略(圖文教程)
微信小程序的云開發(fā)功能剛剛上線，這篇文章主要介紹了小程序云開發(fā)部署攻略(圖文教程)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-10-10
bootstrap multiselect下拉列表功能
這篇文章主要為大家詳細(xì)介紹了bootstrap multiselect下拉列表功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-08-08
babel插件去除console示例詳解
這篇文章主要為大家介紹了babel插件去除console示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-10-10
使用javascript實現(xiàn)簡單的選項卡切換
本文主要介紹了使用javascript實現(xiàn)簡單的選項卡切換的效果，代碼非常的簡單，兼容性十分棒，這里推薦給小伙伴們。
2015-01-01
谷歌瀏覽器不支持showModalDialog模態(tài)對話框的解決方法
谷歌瀏覽器不支持showModalDialog模態(tài)對話框和無法返回returnValue，這個問題，想必很多朋友都有遇到過吧，解決方法很簡單，下面的思路，大家可以看看
2014-09-09