Bootstrap的去點(diǎn)列表

2018-09-08 11:59 更新

通過給無序列表添加一個(gè)類名“.list-unstyled”,這樣就可以去除默認(rèn)的列表樣式的風(fēng)格


在Bootstrap中默認(rèn)情況下無序列表和有序列表是帶有項(xiàng)目符號(hào)的,但在實(shí)際工作中很多時(shí)候,我們的列表是不需要這個(gè)編號(hào)的,比如說用無序列表做導(dǎo)航的時(shí)候。

Bootstrap為眾多開發(fā)者考慮的非常周道,通過給無序列表添加一個(gè)類名“.list-unstyled”,這樣就可以去除默認(rèn)的列表樣式的風(fēng)格。
/*源碼請查看bootstrap.css文件第580行~第583行*/


.list-unstyled {
padding-left: 0;
list-style: none;
}


從示例中可以看出,除了項(xiàng)目編號(hào)之外,還將列表默認(rèn)的左邊內(nèi)距也清0了。

bootstrap
具體使用,我們來看示例:


<!--無序列表去點(diǎn)-->
<ul>
    <li>
    項(xiàng)目列表
        <ul>
        <li>帶有項(xiàng)目符號(hào)</li>
        <li>帶有項(xiàng)目符號(hào)</li>
        </ul>
    </li>
    <li>
    項(xiàng)目列表
        <ul class="list-unstyled">
        <li>不帶項(xiàng)目符號(hào)</li>
        <li>不帶項(xiàng)目符號(hào)</li>
        </ul>
    </li>
    <li>項(xiàng)目列表</li>
</ul>
<!--有序列表去序號(hào)-->
<ol>
    <li>
    項(xiàng)目列表
        <ol>
        <li>帶有項(xiàng)目編號(hào)</li>
        <li>帶有項(xiàng)目編號(hào)</li>
        </ol>
    </li>
    <li>
    項(xiàng)目列表
        <ol class="list-unstyled">
        <li>不帶項(xiàng)目編號(hào)</li>
        <li>不帶項(xiàng)目編號(hào)</li>
        </ol>
    </li>
    <li>項(xiàng)目列表</li>
</ol>

以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)