移动端主流的css框架

html-css027

移动端主流的css框架,第1张

1、bootstrap: http://www.bootcss.com/ 响应式布局

jquery weui https://jqweui.cn/components#form

jquery weui开发经验总结

2、css3 动画

http://www.haorooms.com/uploads/example/Animatecss/

更多框架

http://nec.netease.com/framework

3、icon字体

http://fontawesome.io/

http://www.iconfont.cn/

4、css的 SASS 和Less框架

vonic 框架

https://wangdahoo.github.io/vonic/docs/#/

网页样式需要大量时间开发，最省事的方法就是使用 CSS 框架。

Bootstrap 是最著名的 CSS 框架，但是今天我想推荐另一个更轻量化、更易用的框架—-Bulma。有了它，即使完全不懂 CSS，也可以轻而易举做出美观的网页。

我要感谢 100offer 对我提供赞助。100offer 是国内第一流的人力资源网站，本文结尾有他们的简介，最近想换工作的朋友可以看一下。

一、简介

Bulma 框架最大的特点，就是简单好用。所有样式都基于class，只需为 HTML 元素指定class，样式立刻生效。

JavaScript

1

<a class="button is-primary is-large">Login</a>

上面代码中，a 元素只需加上几个class，就会出现一个主色调（is-primary）的大（is-large）按钮。

Bulma 是一个手机优先的框架，提供五个宽度断点，具有良好的自适应特性，可以随心所欲为不同设备设置不同样式。

mobile：小于等于768px

tablet：大于等于769px

desktop：大于等于1024px

widescreen：大于等于1216px

fullhd：大于等于1408px

它提供二十多种常用组件，比如表单 、表格、图标、面包屑、菜单、导航、Modal 窗口等等。简单的网站，可以不用写任何 CSS 代码。

二、基本用法

Bulma 的安装只需一步，把样式表插入网页即可。

JavaScript

1

   

<link rel="stylesheet" href="css/bulma.min.css"/>

   

使用更简单，就是为 HTML 元素加上class。

JavaScript

1

   

<a class="button">Button</a>

   

上面的代码为 a 元素加上button类，这个链接就会被渲染成按钮。

Bulma 提供大量的修饰类，用来改变基类的样式。它们都是以is-或has-开头。比如，要改变 Button 的大小，就可以使用下面的修饰类。

JavaScript

1

2

3

4

   

a class="button is-small">Small</a>

<a class="button">Normal</a>

<a class="button is-medium">Medium</a>

<a class="button is-large">Large</a>