CSS框架怎样使用

html-css0156

CSS框架怎样使用,第1张

以pure为例来说明css框架的使用方法:

第一步：

设置meta

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0maximum-scale=1.0user-scalable=0" />

第二步：

引用基础css，就是说，所有引用pure的代码之前，需要引入的一个css

<link rel="stylesheet" href="yui.yahooapis.com/pure/0.5.0/base-min.css">

第三步：

引用pure的主css

<link rel="stylesheet" href="yui.yahooapis.com/pure/0.5.0/pure-min.css">

第四步：

引入你需要的pure的css，这里呢，我们抛砖引玉，只管响应式布局：

<!--[if lte IE 8]>

<link rel="stylesheet" href="yui.yahooapis.com/pure/0.5.0/grids-responsive-old-ie-min.css">

<![endif]-->

<!--[if gt IE 8]><!-->

<link rel="stylesheet" href="yui.yahooapis.com/pure/0.5.0/grids-responsive-min.css">

<!--<![endif]-->

1.Bootstrap

这个框架是GitHub的明星产品之一，被认为是拥有最好的响应性的CSS框架。专为前端开发而设计，有助于构建web设计理念、移动优先项目、网格系统、排版和按钮等。

2.Foundation

Foundation是一个开源项目，是CSS框架界的另一巨头。众所周知，它得流畅性和响应性非常好，可以用于许多用途：构建网站、创建电子邮件模板、构建移动和web应用程序。

3.Bulam

Bulam开放源码、免费并且节约开发人员的时间。由于学习起来和使用非常简单，因此最近变得非常流行。

4. Ulkit

可能没有多少人知道(使用)这个框架，但它与其他类似框架具有相同的功能。

5. Semantic UI

从名称就能猜出，Semantic UI旨在使网站构建过程更加语义化。核心特征是利用自然语言原理使代码更易于阅读，更容易理解。