Figure

Figure 是 HTML5 的新標籤,代表一段獨立內容,經常作為圖文說明使用。可配合 <figcaption> 用於字幕做說明來使用。


使用方式

Figure 預設寬度為 100%,依照父層寬度來做彈性變化。以下為 Figure 與其他元件各種搭配的使用方式。

預設樣式

<figure> 可置入 <img><svg><embed><video>.embed 元件等等,文字說明則使用 <figcaption>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam beatae debitis deleniti eum incidunt nam, quo sequi tempora ullam voluptatibus? Assumenda error iste nam, nihil porro sint tenetur ut veniam!
<figure> <img src="{path}" alt=""> <figcaption>~略~</figcaption> </figure>

如果要使文案置右,可在 <figcaption> 加上 .u-align:r;文字置中可使用 .u-align:c,可參考 Utilities 文件。

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam beatae debitis deleniti eum incidunt nam, quo sequi tempora ullam voluptatibus? Assumenda error iste nam, nihil porro sint tenetur ut veniam!
<figure> <img src="{path}" alt=""> <figcaption class="u-align:r">~略~</figcaption> </figure>

此外,文案也可以放置於多媒體元素之前。

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam beatae debitis deleniti eum incidunt nam, quo sequi tempora ullam voluptatibus? Assumenda error iste nam, nihil porro sint tenetur ut veniam!
<figure> <figcaption>~略~</figcaption> <img src="{path}" alt=""> </figure>

除了多媒體元素之外,也可以放置 <p><blockquote><pre.code>

Bid me discourse, I will enchant thine ear, Or like a fairy trip upon the green, Or, like a nymph, with long dishevell'd hair, Dance on the sands, and yet no footing seen: Love is a spirit all compact of fire, Not gross to sink, but light, and will aspire.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam beatae debitis deleniti eum incidunt nam, quo sequi tempora ullam voluptatibus? Assumenda error iste nam, nihil porro sint tenetur ut veniam!
<figure> <p></p> <figcaption>~略~</figcaption> </figure>

臺灣是位於亞洲東部、太平洋西北側的島嶼,地處琉球群島與菲律賓群島之間,西隔臺灣海峽與歐亞大陸相望;面積約三點六萬平方公里,為世界第卅八大島嶼,其中七成為山地與丘陵,平原則主要集中於西部沿海,地形海拔變化大。由於地處熱帶及亞熱帶氣候區之交界,自然景觀與生態系資源相當豐富而多元。
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam beatae debitis deleniti eum incidunt nam, quo sequi tempora ullam voluptatibus? Assumenda error iste nam, nihil porro sint tenetur ut veniam!
<figure> <blockquote></blockquote> <figcaption>~略~</figcaption> </figure>

function NavigatorExample() {
  var txt;
  txt = "Browser CodeName: " + navigator.appCodeName;
  txt+= "Browser Name: " + navigator.appName;
  txt+= "Browser Version: " + navigator.appVersion ;
  txt+= "Cookies Enabled: " + navigator.cookieEnabled;
  txt+= "Platform: " + navigator.platform;
  txt+= "User-agent header: " + navigator.userAgent;
}
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam beatae debitis deleniti eum incidunt nam, quo sequi tempora ullam voluptatibus? Assumenda error iste nam, nihil porro sint tenetur ut veniam!
<figure> <pre class="code"></pre> <figcaption>~略~</figcaption> </figure>

樣式

Polariod

<figure> 加上 :polariod

米漿和豆漿
<figure class=":polariod"></figure>

Card

<figure> 加上 :card

米漿和豆漿
<figure class=":card"></figure>