Foundation 列表
在 HTML 中,無序列表 (<ul>
) 實(shí)例如下:
<ul>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>
結(jié)果:
- List item
- List item
- List item
- List item
圓圈標(biāo)識(shí)符
在 Foundation 中,無序列表 (<ul>
) 的前綴符號(hào)為圓圈,使用 .circle 類,實(shí)例如下:
<ul class="circle">
<li>List item</li>
...
</ul>
嘗試一下 ?方塊標(biāo)識(shí)符
方塊標(biāo)識(shí)符前綴使用 .square 類:
<ul class="square">
<li>List item</li>
...
</ul>
嘗試一下 ?無標(biāo)識(shí)符
如果你不需要標(biāo)識(shí)符,你可以使用 .no-bullet 類:
<ul class="no-bullet">
<li>List item</li>
...
</ul>
嘗試一下 ?如果你需要添加一個(gè)水平的列表,可以在 <ul>
上添加 .inline-list
類:
<ul class="inline-list">
嘗試一下 ?
列表菜單
一些 Web 頁(yè)面可能需要列表菜單。
在 HTML 中,列表菜單同無序列表 <ul>
來定義,例如:
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
結(jié)果: