前端框架——Foundation
Foundation 用於開發響應式的 HTML, CSS and JavaScript 框架。
Foundation 是一個易用、強大而且靈活的框架,用於構建基於任何設備上的 Web 應用。
Foundation 是一個以移動優先的流行框架。
號稱自己是目前網絡社區內應用范圍最廣的前端開發框架之一，當然說到之一，那么
就不是唯一，與foundation相似的一款框架我想大家都知道，那就是號稱自己是
簡潔、直觀、強悍的前端開發框架 Bootstrap框架。下面我會給大家針對兩款框架做一些
詳細的對比。
Foundation vs
Bootstrap
簡單的介紹過了Bootstrap，今天就和大家一起學習一下Foundation 雖然兩款框架相似，但總用不一樣的地方，難免會喜歡上他的不一樣的地方
⊙下載地址：https://foundation.zurb.com/sites/download.html/
⊙導入css代碼
⊙ Foundation h1-h6文本與默認瀏覽器樣式對比。
<h1>foundation</h1>
<h2>foundation</h2>
<h3>foundation</h3>
<h4>foundation</h4>
<h5>foundation</h5>
<h6>foundation</h6>
默認瀏覽器樣式： Foundation 文本樣式：
一個淺色的標題給標簽添加.subheader 類：
<h1 class="subheader">subheader</h1> <h2>foundation</h2> <h3 class="subheader">subheader</h3> <h4>foundation</h4> <h5 class="subheader">subheader</h5> <h6>foundation</h6>
添加一個small副標題的樣式：
<h1 class="subheader">subheader <small>small</small> </h1> <h2>foundation <small>small</small> </h2> <h3 class="subheader">subheader <small>small</small> </h3> <h4>foundation <small>small</small> </h4> <h5 class="subheader">subheader <small>small</small> </h5> <h6>foundation <small>small</small> </h6>
文本樣式每個框架都不一樣，可以根據幫助文檔來進行更多的對比！
⊙Foundation的網格系統與Bootstrap的柵格系統及其相似都是分為12列根據屏幕或設備的大小
——Foundation有三個列
.small（手機端）
.medium (平板設備)
.large (電腦設備)
⊙他的導航條也與Bootstrap的相似下面給大家先展示一下他的響應式
<nav class="top-bar" data-topbar> <ul class="title-area"> <li class="name"> <!-- 如果你不需要標題或圖標可以刪掉它 --> <h1><a href="#">頂部導航響應</a></h1> </li> <!-- 小屏幕上折疊按鈕: 去掉 .menu-icon 類，可以去除圖標。 如果需要只顯示圖片，可以刪除 "Menu" 文本 --> <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li> </ul> <section class="top-bar-section"> <ul class="left"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Page 1</a></li> <li><a href="#">Page 2</a></li> <li><a href="#">Page 3</a></li> </ul> </section> </nav> <!-- 初始化 Foundation JS --> <script> $(document).ready(function() { $(document).foundation(); }) </script>
⊙網格系統，首先創建一行<div class = "row">這是一行水平的垂直列然后添加列的數量說明 small-num, medium-num 及 large-num類。注意：列的數量 num 加起來必須等於 12 :
<div class="row"> ... </div>
⊙Foundation 網格 - 水平疊堆
解釋：大屏幕 pc上的顯示為水平平鋪的，小型設備，或縮小屏幕 顯示為垂直疊堆的。
<div class="row"> <div class="medium-6 columns" style="background-color:chartreuse;">網格疊堆</div> <div class="medium-6 columns" style="background-color:orangered;">網格疊堆</div> </div>
⊙Foundation 網格 - 小型設備（手機）
解釋：以下實例設置了兩個列，比例為 25% 和 75% (Foundation 是移動優先: 如果沒有特別說明，在大型設備上會繼承 .small 類的代碼)。
<div class="row"> <div class="small-3 columns" style="background-color:darksalmon;"> <p>小型設備 25%</p> </div> <div class="small-9 columns" style="background-color:mediumvioletred;"> <p>小型設備75%</p> </div> </div>
⊙Foundation 網格 - 中型設備（平板）
解釋：以下實例中我們指定了 .medium-6 類 (不是 .small-*)。這表明在中型或大型設備上比例為 50%/50%。但在小型設備上會水平堆疊 (100% 寬度):
<div class="row"> <div class="small-3 medium-6 columns" style="background-color:yellow;"> <p>中型設備</p> </div> <div class="small-9 medium-6 columns" style="background-color:pink;"> <p>中型設備</p> </div> <div class="small-3 medium-6 columns" style="background-color:cadetblue;"> <p>中型設備</p> </div> <div class="small-9 medium-6 columns" style="background-color:saddlebrown;"> <p>中型設備</p> </div> </div>
⊙Foundation 網格 - 大型設備（電腦）
解釋：以下實例中我們指定了 .large-6 類 (不是 .medium-* 和 .small-*)。這表明在大型設備上比例為 50%/50%。但在中型或小型設備上會水平堆疊 (100% 寬度)。
解析：小型設備兩個列的比例為 25%/75% (.small-3 和 .small-9)
中型設備兩個列的比例為 50%/50% (.medium-6 和 .medium-6)
大型設備兩個列的比例為 33%/66% (.large-4 和 .large-8)
<div class="row"> <div class="small-3 medium-6 large-4 columns" style="background-color:yellow;"> <p>大型設備</p> </div> <div class="small-9 medium-6 large-8 columns" style="background-color:pink;"> <p>大型設備</p> </div> </div>
⊙foundation 塊狀網格
解釋：塊狀網格用來均分頁面內容例如一行內要顯示幾張圖片，不管什么屏幕下都需要均分寬度。可以使用 <ul> 元素加上 .small|medium|large-block-grid-num 類來創建塊狀網格。num 用於指定均分是數量：
<ul class="small-block-grid-2 medium-block-grid-3 large-block-grid-4" style="float: left;"> <li><img src="img/img.gif" style="width: 200px;height: 100px;" ></li> <li><img src="img/img2.gif"style="width: 200px;height: 100px;" ></li> <li><img src="img/img3.gif"style="width: 200px;height: 100px;"></li> <li><img src="img/img5.gif"style="width: 200px;height: 100px;"></li> <li><img src="img/img3.gif"style="width: 200px;height: 100px;" ></li> <li><img src="img/img2.gif"style="width: 200px;height: 100px;" ></li> </ul>
⊙Foundation 網格實例
解釋：創建三個均等列 (33.3%/33.3%/33.3%) ，在中型和大型設備上顯示三個列，在小型設備上自動堆疊
創建三個不均等列 (25%/50%/25%)，在中型和大型設備上顯示三個列，在小型設備上自動堆疊
創建兩個均等列 (50%/50%)，在小型、中型和大型設備上列的比例始終為 50%/50%
等等就不給大家一一解釋了 可以根據幫助文檔進行了解更多
<style type="text/css"> div{ border-bottom: 1px solid white; } </style> <body> <!--三個均等列--> <div class="row"> <div class="medium-3 columns" style="background-color:yellow;"> <p>.medium-3</p> </div> <div class="medium-6 columns" style="background-color:pink;"> <p>.medium-6</p> </div> <div class="medium-3 columns" style="background-color:yellow;"> <p>.medium-3</p> </div> </div> <!-- 三個不均等列--> <div class="row"> <div class="medium-3 columns" style="background-color:yellow;"> <p>.medium-3</p> </div> <div class="medium-6 columns" style="background-color:pink;"> <p>.medium-6</p> </div> <div class="medium-3 columns" style="background-color:yellow;"> <p>.medium-3</p> </div> </div> <!--兩個均等列--> <div class="row"> <div class="small-8 columns" style="background-color:yellow;"> <p>.small-8</p> </div> <div class="small-4 columns" style="background-color:pink;"> <p>.small-4</p> </div> </div> <!--修改列順序--> <div class="row"> <div class="small-4 small-8-push columns" style="background-color:yellow;"> <p>.small-4 .small-8-push</p> </div> <div class="small-8 small-4-pull columns" style="background-color:pink;"> <p>.small-8 .small-4-pull</p> </div> </div> </body>
分享結束