Foundation for Sites6.8.1 變更日誌
元件清單

排版輔助

我們的輔助類別讓您可以更快地建立某些排版樣式。

文字對齊

您可以透過將 .text-left、.text-right、.text-center 或 .text-justify 加入元素中，來變更元素的文字對齊方式。

將中斷點加入文字對齊類別的前面，會讓它只套用在該尺寸的螢幕或更大的螢幕上。例如，.medium-text-center 會讓文字在最小的螢幕上靠左對齊，但在中型螢幕及更大的螢幕上會切換成靠中對齊。

觀看影片中的這一段

edit on codepen button 
<p class="text-left"><!-- ... --></p>
<p class="text-right"><!-- ... --></p>
<p class="text-center"><!-- ... --></p>
<p class="text-justify"><!-- ... --></p>

這段文字靠左對齊。設定在 F.E.（「基礎紀元」）0 年，心理史學家在 12,000 年歷史的銀河帝國首都川陀展開。儘管帝國看起來穩定且強大，但它正緩慢衰敗，與西羅馬帝國的衰落有相似之處。

這段文字靠右對齊。設定在 F.E.（「基礎紀元」）0 年，心理史學家在 12,000 年歷史的銀河帝國首都川陀展開。儘管帝國看起來穩定且強大，但它正緩慢衰敗，與西羅馬帝國的衰落有相似之處。

這段文字置中對齊。設定在 F.E.（「基礎紀元」）0 年，心理史學家在 12,000 年歷史的銀河帝國首都川陀展開。儘管帝國看起來穩定且強大，但它正緩慢衰敗，與西羅馬帝國的衰落有相似之處。

這段文字兩端對齊。設定在 F.E.（「基礎紀元」）0 年，心理史學家在 12,000 年歷史的銀河帝國首都川陀展開。儘管帝國看起來穩定且強大，但它正緩慢衰敗，與西羅馬帝國的衰落有相似之處。

小標題

在任何標題元素中加入 .subheader 類別，讓標題變淡。

觀看影片中的這一段

edit on codepen button 
<h1 class="subheader">h1.subheader</h1>
<h2 class="subheader">h2.subheader</h2>
<h3 class="subheader">h3.subheader</h3>
<h4 class="subheader">h4.subheader</h4>
<h5 class="subheader">h5.subheader</h5>
<h6 class="subheader">h6.subheader</h6>

h1.subheader

h2.subheader

h3.subheader

h4.subheader

h5.subheader
h6.subheader

引言段落

比一般文字塊稍大的文字塊，可用於標題、簡介或其他描述性文字。

觀看影片中的這一段

edit on codepen button 
<p class="lead">What are your cats <em>really</em> dreaming about while they sleep?</p>

你的貓在睡覺時實際上在夢什麼？

無項目符號清單

在 Foundation 中，<ul> 預設為項目符號清單，<ol> 預設為編號清單，但你可以分別加入 .no-bullet 類別來移除項目符號和數字。

無序清單

觀看影片中的這一段

edit on codepen button 
<ul class="no-bullet">
  <li>List item with a much longer description or more content.</li>
  <li>List item</li>
  <li>List item
    <ul>
      <li>Nested list item</li>
      <li>Nested list item</li>
      <li>Nested list item</li>
    </ul>
  </li>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
</ul>
  • 描述或內容較長的清單項目。
  • 清單項目
  • 清單項目
    • 巢狀清單項目
    • 巢狀清單項目
    • 巢狀清單項目
  • 清單項目
  • 清單項目
  • 清單項目

有序清單

<ol class="no-bullet">
  <li>List item with a much longer description or more content.</li>
  <li>List item</li>
  <li>List item
    <ol>
      <li>Nested list item</li>
      <li>Nested list item</li>
      <li>Nested list item</li>
    </ol>
  </li>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
</ol>
  1. 描述或內容較長的清單項目。
  2. 清單項目
  3. 清單項目
    1. 巢狀清單項目
    2. 巢狀清單項目
    3. 巢狀清單項目
  4. 清單項目
  5. 清單項目
  6. 清單項目

字型大小

覆寫元素的預設大小來調整字型大小。這可以用於使用 Foundation 現有的標題大小來調整 <p> 或 <h1> 到 <h6> 的大小。

特別實用，因為：在建構文件時，避免跳過標題層級很重要，因為這會讓螢幕閱讀器混淆。例如，在程式碼中使用 <h2> 之後，下一個使用的標題應為 <h2> 或 <h3>。如果您需要標題看起來更大或更小以符合特定樣式，請使用 CSS 覆寫預設大小。

針對標頭

<h2 class="h1">Lorem Ipsum Dolor</h2>
<h3 class="h2">Lorem Ipsum Dolor</h3>
<h4 class="h3">Lorem Ipsum Dolor</h4>
<h5 class="h4">Lorem Ipsum Dolor</h5>
<h6 class="h5">Lorem Ipsum Dolor</h6>

針對文字

<p class="h1">Lorem Ipsum Dolor</p>
<p class="h2">Lorem Ipsum Dolor</p>
<p class="h3">Lorem Ipsum Dolor</p>
<p class="h4">Lorem Ipsum Dolor</p>
<p class="h5">Lorem Ipsum Dolor</p>
<p class="h6">Lorem Ipsum Dolor</p>

Lorem Ipsum Dolor

Lorem Ipsum Dolor

Lorem Ipsum Dolor

Lorem Ipsum Dolor

Lorem Ipsum Dolor

Lorem Ipsum Dolor

統計資料

如果您正在建構儀表板，您可能需要顯示一些重要的數字非常大。只要將 .stat 類別新增至任何元素，即可放大字型大小。

觀看影片中的這一段

edit on codepen button 
<p>Days without merge conflict</p>
<div class="stat">128</div>

沒有合併衝突的天數

128

Sass 參考

變數

此元件的預設樣式可以使用專案中的這些 Sass 變數在 設定檔 中自訂。

名稱類型預設值說明
$lead-font-size 數字 $global-font-size * 1.25

引言段落的預設字型大小。
$lead-lineheight 字串 1.6

引言段落的預設行高。
$subheader-lineheight 數字 1.4

小標題的預設行高。
$subheader-color 顏色 $dark-gray

小標題的預設字型顏色。
$subheader-font-weight 字串 $global-weight-normal

小標題的預設字型粗細。
$subheader-margin-top 數字 0.2rem

小標題的預設上邊距。
$subheader-margin-bottom 數字 0.5rem

小標題的預設下邊距。
$stat-font-size 數字 2.5rem

統計數字的預設字型大小。
$cite-color 顏色 $dark-gray

.cite-block 元件的文字顏色。
$cite-font-size 數字 rem-calc(13)

.cite-block 元件的字型大小。
$cite-pseudo-content 字串 '\2014 \0020'

.cite-block 元件的偽內容。
$code-color 顏色 $black

.code-inline 和 .code-block 元件的文字顏色。
$code-font-family 字串或清單 $font-family-monospace

.code-inline 和 .code-block 元件的字型系列。
$code-font-weight 字串 $global-weight-normal

.code-inline 和 .code-block 元件中文字的字型粗細。
$code-background 顏色 $light-gray

.code-inline 和 .code-block 元件的背景顏色。
$code-border 清單 1px solid $medium-gray

.code-inline 和 .code-block 元件周圍的邊框。
$code-padding 數字或清單 rem-calc(2 5 1)

.code-inline 元件文字周圍的內距。
$code-block-padding 數字或清單 1rem

.code-block 元件文字周圍的內距。
$code-block-margin-bottom 數字 1.5rem

.code-block 元件下方的外距。

混合

我們使用這些混合來建構此元件的最終 CSS 輸出。您可以自行使用混合，從我們的元件建構您自己的類別結構。

code-style

@include code-style;

為程式碼輔助程式新增基本樣式。請參閱 code-inline 和 code-block 混合。

code-inline

@include code-inline;

從 code-style 混合建立內嵌的程式碼輔助程式。用於產生 .code-inline

code-block

@include code-block;

從 code-style 混合建立區塊的程式碼輔助程式。用於產生 .code-block