-
只有屏幕大于768px的時候，添加類名“.dl-horizontal”才具有水平定義列表效果
<dl?class="dl-horizontal"> ????<dt>W3cplus</dt> ????<dd>一個致力于推廣國內前端行業的技術博客。它以探索為己任，不斷活躍在行業技術最前沿，努力提供高質量前端技術博文</dd> ????<dt>慕課網</dt> ????<dd>一個專業的，真心實意在做培訓的網站</dd> ????<dt>我來測試一個標題，我來測試一個標題</dt> ????<dd>我在寫一個水平定義列表的效果，我在寫一個水平定義列表的效果</dd> </dl>
查看全部 -
<dl> ????<dt>W3cplus</dt> ????<dd>一個致力于推廣國內前端行業的技術博客</dd> ????<dt>慕課網</dt> ????<dd>一個真心在做教育的網站</dd> </dl>
定義列表
查看全部 -
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
放置在文檔的末尾，以便頁面加載更快
查看全部 -
<ul class="list-unstyled">?
? ? <li>
? ? ? ? 城市:
? ? </li>
? ? <li>
? ? ? ? <ul class="list-inline">
? ? ? ? ? ? <li>北京</li>
? ? ? ? ? ? <li>上海</li>
? ? ? ? ? ? <li>南京</li>
? ? ? ? ? ? <li>廈門</li>
? ? ? ? </ul>
? ? </li>
</ul>
查看全部 -
請輸入筆記內容...?1、使用<code></code>來顯示單行內聯代碼
2、使用<pre></pre>來顯示多行塊代碼
3、使用<kbd></kbd>來顯示用戶輸入代碼查看全部 -
水平定義列表就像內聯列表一樣，Bootstrap可以給<dl>添加類名“.dl-horizontal”給定義列表實現水平顯示效果。
查看全部 -
<dl> ??<dt>title</dt> ??<dd>描述1</dd> ??<dd>描述2</dd> </dl>
查看全部 -
<ul?class="list-inline"> ??<li>1</li> ??<li>2</li> ??<li>3</li> </ul>
查看全部 -
.list-unstyled?{ ????padding-left:?0; ????list-style:?none; }查看全部 -
<ul> ??<li>無序列表</li> </ul> <ol> ??<li>有序列表</li> </ol> <dl> ??<dt>定義列表</dt> ??<dd>2020.4.30</dd> </dl>
查看全部 -
.text-muted：提示，使用淺灰色（#999）
.text-primary：主要，使用藍色（#428bca）
.text-success：成功，使用淺綠色(#3c763d)
.text-info：通知信息，使用淺藍色（#31708f）
.text-warning：警告，使用黃色（#8a6d3b）
.text-danger：危險，使用褐色（#a94442）
查看全部 -
<em>斜體</em> <i>斜體</i>
查看全部 -
<strong></strong>
<b></b>
查看全部 -
的點點滴滴
查看全部 -
水平定義列表就像內聯列表一樣，Bootstrap可以給<dl>添加類名“.dl-horizontal”給定義列表實現水平顯示效果。
/*源碼請查看bootstrap.css文件第608行~第621行*/@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; ??} }
此處添加了一個媒體查詢。也就是說，只有屏幕大于768px的時候，添加類名“.dl-horizontal”才具有水平定義列表效果。其實現主要方式：
1、將dt設置了一個左浮動，并且設置了一個寬度為160px
2、將dd設置一個margin-left的值為180px，達到水平的效果
3、當標題寬度超過160px時，將會顯示三個省略號查看全部
舉報