Bootstrap和 Foundation這兩個前端框架區別和簡單使用。

時間 2019-12-23

標籤 bootstrap foundation 兩個前端框架區別簡單使用欄目 Bootstarp 简体版

原文原文鏈接

這裏大概說如下，

1. UI 元素

Foundation 只安排了有限的幾種元素, Bootstrap 則給你了全部你能夠想像到的一切元素.css

ZURB 對於 Foundation 的設計目標是, 縱然你使用預約義的 UI 元素, 也不該該與你們的網站長的太像.html

而另外一邊, Bootstrap 則試圖給你提供全部定義好的 UI 元素.html5

2. REMs VS Pixels

Foundation 使用 REMs, 而 Bootstrap 使用 Pixels.jquery

使用 Pixels 意味着你不得不許肯定義一個組件的高, 寬, 內邊距, 外邊距, 並且在每一種設備與屏幕尺寸上, 由於不一樣的設備每每顯示效果區別很大.bootstrap

如今 Foundation 5 使用 REMs, 而不是 EM. 這樣, 避免了 EM cascade 問題: 瀏覽器

http://css-tricks.com/font-sizing-with-rem/sass

使用 REMs 意味着你能夠直接用 font-size: 80%; 就可讓整個組件和它的子組件縮小 20%.網站

值得說明的是, 經過 REMs, 你能夠脫離 Pixels 的細節了, 因此, 使用 REMs 來處理是很是值得的.ui

Foundation 還提供了 sass 的 mixin 方法來將 Pixels 轉換爲 REMs, 這樣, 你還能夠繼續使用 Pixels 的思考方式來定義頁面:spa

Html代碼

.element {
width: rem-calc(10px); // will be converted to REMs
}

3. 靈活的網格 VS 預約義的網格

Foundation 的網格能夠自動適配當前瀏覽器的寬度. Boostrap 則是預約義了幾種網格尺寸來適配主流的設備和屏幕.

Bootstrap 會在你改變瀏覽器寬度的時候忽然改變它的網格.

Foundation 則會靈活適配當前的瀏覽器寬度, 這是一種新的技術手段, 自動適配的同時, 能夠表現的與 Transformer 同樣的效果.

Foundation 當網格改變時有兩個要點: 小, 中和大. 全部的操做都只有縮小和放大, 並適應於當前瀏覽器的寬度. 不須要預約義的屏幕大小, 而且更主要的緣由是, 鼓勵你去根據屏幕的大小來定義不一樣的樣式.

使用 Bootstrap, 你獲得一個固定的或者說流形的網格, 這意味着你須要分別設定或者說對於網格容器不是一個預約義好的寬度.

使用 Foundation 和 Sass, 你能夠自由調整最大的網格的大小( 中型的和小型的自動被計算 ), 大屏幕的列數, 小屏幕的列數.

4. 移動設備優先 VS 也支持移動設備

Foundation 設計時已經考慮了任何四角屏幕. 而 Bootstrap 設計時則預先分爲: 手機, 平板, 臺式機和超大屏幕的臺式機.

構建一個優先支持移動設備的網站意味着它確定在更大的屏幕上是可用的. 因此, Foundation 鼓勵你這樣去作: 移動優先.

若是你使用 Foundation 的 Sass Media Query Mixin, 你就會發現, 沒有特定的 Media Query 來查詢什麼是移動設備, 而是你使用 Media Query 來定義在更大的屏幕下應該怎麼顯示.

設計東西時先考慮臺式機的話極可能在支持更小屏幕時遇到很大問題, 和先考慮手機的話, 將會讓你專一於什麼是對用戶最重要的, 讓你空間提用感上升.

5. 社區

Bootstrap 有一個更大的社區. 而使用 Foundation 你就不得不自力更生一些.

Bootstrap 很是大的亮點就是社區. 這是一個很是巨大, 一應俱全, 幾乎找啥均可以找到.

若是你選擇了 Foundation, 自力更生可能就是你不得不掌握的了. 幾乎全部的解決方法都是爲 Bootstrap 的, 你只能本身再去構建本身的.

結論

問你本身幾個問題:

你想讓某個東西更加易用或者讓它更具生活氣息?
你想組織本身的 CSS, 只是讓它成爲你的基礎組件?

答案分別是: Bootstrap. Foundation.

以上轉自：http://justcoding.iteye.com/blog/2166575

下面是bootstrap和 Foundation 柵格的使用（很少說了直接上代碼，複製直接能夠用）：

foundation:

<!doctype html>
<html class="no-js" lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Foundation for Sites</title>
    <!-- css 文件 -->
	<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/foundation/5.5.3/css/foundation.min.css">

	<!-- jQuery 庫 -->
	<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>

	<!-- JavaScript 文件 -->
	<script src="http://cdn.static.runoob.com/libs/foundation/5.5.3/js/foundation.min.js"></script>

	<!-- modernizr.js 文件 -->
	<script src="http://cdn.static.runoob.com/libs/foundation/5.5.3/js/vendor/modernizr.js"></script>
	<style type="text/css">
      .red{
	     background-color: red;
	  }
	  .blue{
	     background-color: blue;
	  }
	</style>
  </head>
  <body>
	<div class="row">
	  <div class="small-12 columns">這個demo告訴咱們，不一樣設備能夠設置不一樣的樣式比例，在一個元素中定義不一樣的col-*-*便可。
	  <br>以下例拖動瀏覽器寬度，模擬不一樣設備，能夠看到四中不一樣的排版比例。
	  		<br><b>使用 class="small|medium|large-num columns"  便可。</b>
	  </div>
	</div>
	<div class="row">
	  <div class="small-6 medium-8 large-4 columns red">left-------</div>
	  <div class="small-6 medium-4 large-8 columns blue">right-----</div>
	</div>
	<div class="row">
	  <div class="small-6 large-6 columns red">left-------</div>
	  <div class="small-6 large-6 columns blue">right-----</div>
	</div>

	
    <script src="js/vendor/jquery.js"></script>
    <script src="js/vendor/foundation.js"></script>
  </body>
</html>

bootstrap:

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap 模板</title>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <!-- 引入 Bootstrap -->
      <link href="css/bootstrap.min.css" rel="stylesheet">
 
      <!-- HTML5 Shim 和 Respond.js 用於讓 IE8 支持 HTML5元素和媒體查詢 -->
      <!-- 注意： 若是經過 file://  引入 Respond.js 文件，則該文件沒法起效果 -->
      <!--[if lt IE 9]>
         <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
         <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
      <![endif]-->
      <!-- jQuery (Bootstrap 的 JavaScript 插件須要引入 jQuery) -->
      <script src="js/jquery.js"></script>
      <!-- 包括全部已編譯的插件 -->
      <script src="js/bootstrap.min.js"></script>
      <style type="text/css">
      .red{
         background-color: red;
      }
      .blue{
         background-color: blue;
      }
      </style>
   </head>
   <body>
      <h1>Hello, world!Bootstrap!</h1>
 	   <div class="container">
 	   		<div class="row">
 	   			這個demo告訴咱們，不一樣設備能夠設置不一樣的樣式比例，在一個元素中定義不一樣的col-*-*便可。
               <br>以下例拖動瀏覽器寬度，模擬不一樣設備，能夠看到四中不一樣的排版比例。
 	   			<br><b>col-xs-12 col-sm-6 col-md-8 col-lg-4 </b>
 	   		</div>
 	   	   <div class="row">
 	   	   		<div class="col-xs-12 col-sm-6 col-md-8 col-lg-4 red">left---------</div>
 	   	   		<div class="col-xs-12 col-sm-6 col-md-4 col-lg-8 blue">right--------</div>
 	   	   </div>
 	   	   <div class="row">
 	   	   		<div class="col-xs-6  col-lg-6 red">left---------</div>
 	   	   		<div class="col-xs-6  col-lg-6 blue">right--------</div>
 	   	   </div>
 	   </div>
      
   </body>
</html>

若是你想了解更多，去這個網站能夠看看，不少很全： http://www.runoob.com/