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/

Bootstrap和 Foundation这两个前端框架区别 和 简单使用。