常用的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

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180304G0DHGJ00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券