Foundation 列表
Foundation 列表
在 HTML 中，無序列表 (<ul>) 實例如下:
<ul>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>
結果:
- List item
- List item
- List item
- List item
圓圈標識符
在 Foundation 中，無序列表 (<ul>) 的前綴符號為圓圈，使用 .circle 類，實例如下:
方塊標識符
方塊標識符前綴使用 .square 類:
無標識符
如果你不需要標識符，你可以使用 .no-bullet 類：
<ul class="no-bullet">
<li>List item</li>
...
</ul>
嘗試一下 »
<li>List item</li>
...
</ul>
如果你需要添加一個水平的列表，可以在 <ul> 上添加 .inline-list 類:
列表菜單
一些 Web 頁面可能需要列表菜單。
在 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>
<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>
結果:
- Home
- Menu 1
- Menu 2
- Menu 3