Foundation - 無序列表

上一個
下一個

描述

預設情況下，元素<ul>在 Foundation 中是一個無序列表。要移除專案符號，可以使用.no-bullet類。

範例

以下範例演示在 Foundation 中使用無序列表的情況。

演示 
<!doctype html>
<html>
   <head>
      <title>Un-bulleted List</title>
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.5.1/dist/css/foundation.min.css" crossorigin="anonymous">

      <!-- Compressed JavaScript -->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.5.1/dist/js/foundation.min.js" crossorigin="anonymous"></script>

   </head>

   <body>
      <p>List with <i>no-bullet</i> class.</p>
      <ul class = "no-bullet">
         <li>List item 1</li>
         <li>List item 2
            <ul>
               <li>Nested list item 1</li>
               <li>Nested list item 2</li>
               <li>Nested list item 3</li>
            </ul>
         </li>
         <li>List item 3</li>
      </ul>

      <p>List without <i>no-bullet</i> class.</p>
      <ul>
         <li>List item 1</li>
         <li>List item 2
            <ul>
               <li>Nested list item 1</li>
               <li>Nested list item 2</li>
               <li>Nested list item 3</li>
            </ul>
         </li>
         <li>List item 3</li>
      </ul>

      <script>
         $(document).ready(function() {
            $(document).foundation();
         })
      </script>
   </body>
</html>

輸出

讓我們執行以下步驟，瞭解上面給出的程式碼如何運作：-

  • 儲存上面給出的 html 程式碼為typography_un_bulleted_list.html檔案。

  • 在瀏覽器中開啟此 HTML 檔案，將顯示如下所示的輸出。

foundation_typography_helpers.htm
列印頁面
上一個
下一個
廣告