Foundation CSS 參考手冊
Foundation 默認設置
Foundation 使用瀏覽器默認字體大小 (font-size:100%)。對於大多數桌面設備的瀏覽器來說，字體大小默認為 16px。對於移動設備的瀏覽器，字體默認大小為 12px。 默認的字體為 "Helvetica Neue"， line-height 默認為 1.5。
這些設置是適用於 <body> 元素內的元素。
此外， <p> 元素與底部的外邊距(margin-bottom) 為 1.25rem , line-height 為 1.6。
文本
以下的 HTML 元素，Foundation 設置了獨立的樣式渲染它，不會採用瀏覽器默認樣式。點擊 "嘗試一下" 查看在線實例。
| 元素 | 描述 | 在線實例 |
|---|---|---|
- |
h1 - h6 標題 | 嘗試一下 |
| 淺藍色的鏈接，滑鼠移動到鏈接會有下劃線 | 嘗試一下 | |
| 淺灰色的副標題文本 | 嘗試一下 | |
| 引用內容模塊 | 嘗試一下 | |
| 加粗文本 | 嘗試一下 | |
| 斜體 | 嘗試一下 | |
| 指定單詞的縮寫，使用該元素文本出現虛線下劃線，滑鼠移動上去會有提示信息 | 嘗試一下 | |
| 接收鍵盤輸入指令: CTRL + P | 嘗試一下 | |
|
|
水平線 | 嘗試一下 |
|
代碼片段 | 嘗試一下 |
|
|
無序列表 | 嘗試一下 |
|
|
有序列表 | 嘗試一下 |
|
|
描述性列表 | 嘗試一下 |
文本對齊
使用 CSS 類來修改文本的對齊方式：
| 類 | 描述 | 實例 |
|---|---|---|
| .text-left | 左對齊文本 | 嘗試一下 |
| .text-right | 右對齊文本 | 嘗試一下 |
| .text-center | 居中 | 嘗試一下 |
| .text-justify | 兩端對齊 | 嘗試一下 |
不同尺寸屏幕的對齊
使用 CSS 類來修改文本的不同尺寸屏幕的對齊方式：
| 類 | 描述 | 實例 |
|---|---|---|
| 左對齊 | ||
| .small-text-left | 所有尺寸屏幕左對齊 | 嘗試一下 |
| .small-only-text-left | 小尺寸屏幕左對齊(寬度小於 40em ) | 嘗試一下 |
| .medium-text-left | 寬度大於 40.0625em 尺寸屏幕左對齊 | 嘗試一下 |
| .medium-only-text-left | 寬度在 40.0625em 到 64em 尺寸的屏幕左對齊 | 嘗試一下 |
| .large-text-left | 寬度大於 64.0625em 尺寸屏幕左對齊 | 嘗試一下 |
| .large-only-text-left | 寬度在 64.0625em 到 90em 尺寸的屏幕左對齊 | 嘗試一下 |
| .xlarge-text-left | 寬度大於 90.0625em 尺寸屏幕左對齊 | 嘗試一下 |
| .xlarge-only-text-left | 寬度在 90.0625em 到 120em 尺寸的屏幕左對齊 | 嘗試一下 |
| .xxlarge-text-left | 寬度大於 120em 尺寸屏幕左對齊 | 嘗試一下 |
| 右對齊 | ||
| .small-text-right | 所有尺寸屏幕右對齊 | 嘗試一下 |
| .small-only-text-right | 小尺寸屏幕右對齊(寬度小於 40em ) | 嘗試一下 |
| .medium-text-right | 寬度大於 40.0625em 尺寸屏幕右對齊 | 嘗試一下 |
| .medium-only-text-right | 寬度在 40.0625em 到 64em 尺寸的屏幕右對齊 | 嘗試一下 |
| .large-text-right | 寬度大於 64.0625em 尺寸屏幕右對齊 | 嘗試一下 |
| .large-only-text-right | 寬度在 64.0625em 到 90em 尺寸的屏幕右對齊 | 嘗試一下 |
| .xlarge-text-right | 寬度大於 90.0625em 尺寸屏幕右對齊 | 嘗試一下 |
| .xlarge-only-text-right | 寬度在 90.0625em 到 120em 尺寸的屏幕右對齊 | 嘗試一下 |
| .xxlarge-text-right | 寬度大於 120em 尺寸屏幕右對齊 | 嘗試一下 |
| 居中對齊 | ||
| .small-text-center | 所有尺寸屏幕居中對齊 | 嘗試一下 |
| .small-only-text-center | 小尺寸屏幕居中對齊(寬度小於 40em ) | 嘗試一下 |
| .medium-text-center | 寬度大於 40.0625em 尺寸屏幕居中對齊 | 嘗試一下 |
| .medium-only-text-center | 寬度在 40.0625em 到 64em 尺寸的屏幕居中對齊 | 嘗試一下 |
| .large-text-center | 寬度大於 64.0625em 尺寸屏幕居中對齊 | 嘗試一下 |
| .large-only-text-center | 寬度在 64.0625em 到 90em 尺寸的屏幕居中對齊 | 嘗試一下 |
| .xlarge-text-center | 寬度大於 90.0625em 尺寸屏幕居中對齊 | 嘗試一下 |
| .xlarge-only-text-center | 寬度在 90.0625em 到 120em 尺寸的屏幕居中對齊 | 嘗試一下 |
| .xxlarge-text-center | 寬度大於 120em 尺寸屏幕居中對齊 | 嘗試一下 |
| 兩端對齊 | ||
| .small-text-justify | 所有尺寸屏幕都兩端對齊 | 嘗試一下 |
| .small-only-text-justify | 小尺寸屏幕兩端對齊(寬度小於 40em ) | 嘗試一下 |
| .medium-text-justify | 寬度大於 40.0625em 尺寸屏幕兩端對齊 | 嘗試一下 |
| .medium-only-text-justify | 寬度在 40.0625em 到 64em 尺寸的屏幕兩端對齊 | 嘗試一下 |
| .large-text-justify | 寬度大於 64.0625em 尺寸屏幕兩端對齊 | 嘗試一下 |
| .large-only-text-justify | 寬度在 64.0625em 到 90em 尺寸的屏幕兩端對齊 | 嘗試一下 |
| .xlarge-text-justify | 寬度大於 90.0625em 尺寸屏幕兩端對齊 | 嘗試一下 |
| .xlarge-only-text-justify | 寬度在 90.0625em 到 120em 尺寸的屏幕兩端對齊 | 嘗試一下 |
| .xxlarge-text-justify | 寬度大於 120em 尺寸屏幕兩端對齊 | 嘗試一下 |
其他
| 類 | 描述 | 實例 |
|---|---|---|
| .left | 元素向左浮動 | 嘗試一下 |
| .right | 元素向右浮動 | 嘗試一下 |
| .clearfix | 清除浮動 - 必須添加在浮動元素的父元素上 | |
| .hide | 隱藏元素 (CSS display: none) | 嘗試一下 |
| .list-inline | 將所有元素設置在同一行 | 嘗試一下 |
| .lead | 讓 元素更突出 |
嘗試一下 |
| .subheader | 設置淺色的-元素 |
嘗試一下 |
※Foundation 網格-大型設備
※Foundation 塊狀網格
※Foundation 圖標參考手冊
※Foundation 網格系統
※Foundation 均衡器(Equalizer)
TAG:程序員小新人學習 |
※Shopify Checkout 是什麼？Shopify Checkout 三分鐘設置手冊
※SPRING Annotation元註解手冊
※Windows 10 Redstone 4將把Cortana變成互動式用戶手冊
※XML Schema 參考手冊
※一本AppleⅠ操作手冊值八部iPhone XS Max
※一本Apple Ⅰ操作手冊值八部iPhone XS Max
※阿斯頓馬丁Lagonda Vision Concept撕下了豪華車規則手冊
※Arch-Wiki-Man：一個以 Linux手冊樣式離線瀏覽 Arch Wiki 的工具
※在 Linux 手冊頁中查看整個 Arch Linux Wiki
※《超效率手冊》讀書分享會——Get More From Life
※GitHub項目 | PyTorch 中文手冊
※Facebook能賣大蒜？！Facebook發布傳統B2B外貿海外營銷手冊
※簡單粗暴TensorFlow入門手冊
※XQuery 參考手冊
※SpringBoot學習手冊-第一篇開篇
※《Air Jordan XXXIII 使用手冊》
※Kaltendin高級休閑品牌手冊
※Battle Grounds 戰地：沙漠航班的空降手冊
※XPath、XQuery 以及 XSLT 函數函數參考手冊
※衛衣T恤終極搭配手冊，Gucci/Balenciaga/MCQ……雙十一折扣最低￥300