ul,ol變化不大,只修改了margin值 

<ul>
    <li>你瞅啥</li>
    <li>瞅你咋地</li>
</ul> 

底部有個20px的邊距,頂部麼有 。

<ol>
    <li>你瞅啥</li>
    <li>瞅你咋地</li>
</ol>

巢狀的ul,ol會發現沒有了margin值 

<ul>
    <li>窗前明月光</li>
    <li>
        <ul>
            <li>疑是地上霜</li>
            <li>
                <ol>
                    <li>舉頭望明月</li>
                    <li>低頭思故鄉</li>
                </ol>
            </li>
        </ul>
    </li>
</ul>
 

清除預設樣式,不僅僅是list-style,還padding-left: 0 

<ol>
    <li>有序專案列表一</li>
    <li>有序專案列表二
        <ol class="list-unstyled">
            <li>有序專案列表一</li>
            <li>有序專案列表二
                <ul>
                    <li>無序專案列表一</li>
                    <li>無序專案列表二
                        <ul class="list-unstyled">
                            <li>無序專案列表一</li>
                            <li>無序專案列表二</li>
                        </ul>
                    </li>
                    <li>無序專案列表三</li>
                </ul>
            </li>
            <li>有序專案列表三</li>
        </ol>
    </li>
    <li>有序專案列表三</li>
</ol>
 

內聯列表

把垂直列表換成水平列表,而且去掉專案符號（編號）,保持水平顯示,為製作水平導航而生。 

<ul class="list-inline">
    <li>HTML5</li>
    <li>CSS3</li>
    <li>JavaScirpt</li>
    <li>Vue.js</li>
    <li>node.js</li>
</ul>

定義列表

沒有做什麼修改,dl(底部邊距20px),dt(加粗),dd(去除左邊距) 

<dl>
    <dt>雨果</dt>
    <dd>讓自己的內心藏著一條巨龍，既是一種苦刑，也是一種樂趣。</dd>
    <dt>蘇軾</dt>
    <dd>古之立大事者，不惟有超世之才，亦必有堅忍不拔之志。</dd>
</dl>

水平定義列表

原始碼中添加了一個媒體查詢。也就是說，只有螢幕大於768px的時候，新增類名“.dl-horizontal”才具有水平定義列表效果。其實現主要方式：

1. 將dt設定了一個左浮動，並且設定了一個寬度為160px
2. 將dd設定一個margin-left的值為180px，達到水平的效果
3. 當標題寬度超過160px時，將會顯示三個省略號

<dl class="dl-horizontal">
    <dt>盧梭</dt>
    <dd>當我們只遇到逆風行舟的時候，我們調整航向迂迴行駛就可以了;但是，當海面上波濤洶湧，而我們想停在原地的時候，那就要拋錨。當心啊，年輕的舵手，別讓你的纜繩鬆了，別讓你的船錨動搖，不要在你沒有發覺以前，船就漂走了。</dd>
    <dt>諸葛亮</dt>
    <dd>夫學須志也，才須學也，非學無以廣才，非志無以成學。</dd>
    <dt>秋瑾說：“水激石則鳴，人激志則巨集”</dt>
    <dd>水激石則鳴，人激志則巨集。</dd>
</dl>