常用的CSS框架

常用的CSS框架

之前在写自己的个人网站的时候，由于自己Web前端不是特别好，于是就去找相关的CSS框架来搭建页面了。

找到以下这么一篇文章(列出了很多常用的CSS框架)：

http://w3schools.wang/report/top-UI-open-source-framework-summary.html

Bootstrap

Semantic-ui

Foundation

Materialize

Material-ui

Phantomjs

Pure

Flat-ui

Jquery-ui

React-bootstrap

Uikit

Metro-ui-css

Iview

Layui

Mui

Frozenui

AlloyUI

W3.CSS

本篇主要是记录我用过的CSS框架，并把之前写过的笔记进行整合一下。当然是不能面面俱到的…

jquery-easyUI

其实这个已经是比较早的了，只是之前学过了一点，做过笔记才拿到这里来。毕竟可能以后还是会用到的?

什么是easyUI

我们可以看官方对easyUI的介绍：

这里写图片描述

easyUI就是一个在Jquery的基础上封装了一些组件….我们在编写页面的时候，就可以直接使用这些组件…非常方便…easyUI多用于在后台的页面上…

在学习easyUI之前，我已经学过了bootstrap这么一个前端的框架了…因此学习easyUI并不困难….大多情况下，我们只要查询文档就可以找到对应的答案了。

easyUI快速入门

首先我们得去下载easyUI的资料…

然后在我们把对应的文件导入进去项目中，如下图：

这里写图片描述

在html文件的body标签内，写上如下的代码：

效果：

这里写图片描述

关于样式的属性我们都会在data-options这个属性上设置的。

除了指定 这样的方式来使用easyUI的组件，我们还可以使用javascript的方式来动态生成…代码如下所示：

在使用easyUI的组件的时候，默认的是英文格式的。如果我们想要变成是中文格式，可以到以下的目录找到对应的JS，在项目中导入进去就行了！

这里写图片描述

语法

这里写图片描述

详情用法可参考:https://my.oschina.net/u/3777556/blog/1628746

BootStrap

BootStrap这个CSS框架是非常火的，现在已经更新到了BootStrap4了，我在个人网站中也有用到它。

它还有其他的组件的，比如：BootStrap-Validation等，用到相关的组件时不妨查查有没有该对应的。

中文教程：http://w3schools.wang/bootstrap/bootstrap_tutorial.html

下面我就截取以慕课网的案例的代码了：

最近在学bootStrap，在慕课网中有这么一个例子….感觉以后会用到这些代码。保存起来。

Bootstrap 模态框避免点击背景处关闭:

解决方法(摘抄自:http://blog.csdn.net/gloomy_114/article/details/51611734)：

在HTML页面中编写模态框时，在div初始化时添加属性 aria-hidden=”true” data-backdrop=”static”，即可。。

在需要显示模态框，初始化时，$(‘#myModal’).modal(); 其中 ，backdrop：’static’指的是点击背景空白处不被关闭； keyboard:false指的是触发键盘esc事件时不关闭。

Materialize

这个也是很好看的CSS框架，具体的用法跟BootStrap是差不多的，会了BootStrap这个也就看文档来用了，没什么特别的地方的。

官网：http://materializecss.com