tags: 常用的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标签内，写上如下的代码：
这是我的第一个EasyUI程序
效果：
关于样式的属性我们都会在data-options这个属性上设置的。
除了指定 class="easyui-panel"这样的方式来使用easyUI的组件，我们还可以使用javascript的方式来动态生成...代码如下所示：
panel content.
在使用easyUI的组件的时候，默认的是英文格式的。如果我们想要变成是中文格式，可以到以下的目录找到对应的JS，在项目中导入进去就行了！
语法详情用法可参考:https://my.oschina.net/u/3777556/blog/1628746
BootStrap
BootStrap这个CSS框架是非常火的，现在已经更新到了BootStrap4了，我在个人网站中也有用到它。
它还有其他的组件的，比如：BootStrap-Validation等，用到相关的组件时不妨查查有没有该对应的。
中文教程：http://w3schools.wang/bootstrap/bootstrap_tutorial.html
下面我就截取以慕课网的案例的代码了：
最近在学bootStrap，在慕课网中有这么一个例子....感觉以后会用到这些代码。保存起来。
现代浏览器博物馆
body {
padding-top: 50px;
padding-bottom: 40px;
color: #5a5a5a;
}
.carousel {
height: 500px;
margin-bottom: 60px;
}
.carousel .item {
height: 500px;
background-color: #000;
}
.carousel .item img {
width: 100%;
}
.carousel-caption {
z-index: 10;
}
.carousel-caption p {
margin-bottom: 20px;
font-size: 20px;
line-height: 1.8;
}
.summary {
padding-right: 15px;
padding-left: 15px;
}
.summary .col-md-4 {
margin-bottom: 20px;
text-align: center;
}
.feature-divider {
margin: 40px 0;
}
.feature {
padding: 30px 0;
}
.feature-heading {
font-size: 50px;
color: #2a6496;
}
.feature-heading .text-muted {
font-size: 28px;
}
@media (max-width: 768px) {
.summary {
padding-right: 3px;
padding-left: 3px;
}
.carousel {
height: 300px;
margin-bottom: 30px;
}
.carousel .item {
height: 300px;
}
.carousel img {
min-height: 300px;
}
.carousel-caption p {
font-size: 16px;
line-height: 1.4;
}
.feature-heading {
font-size: 34px;
}
.feature-heading .text-muted {
font-size: 22px;
}
}
@media (min-width: 992px) {
.feature-heading {
margin-top: 120px;
}
}
现代浏览器博物馆
Chrome
Google Chrome，又称Google浏览器，是一个由Google（谷歌）公司开发的网页浏览器。
点我下载
Firefox
Mozilla Firefox，中文名通常称为“火狐”或“火狐浏览器”，是一个开源网页浏览器。
点我下载
Safari
Safari，是苹果计算机的最新操作系统Mac OS X中的浏览器。
点我下载
Opera
Opera浏览器，是一款挪威Opera Software ASA公司制作的支持多页面标签式浏览的网络浏览器。
点我下载
IE
Internet Explorer，简称 IE，是微软公司推出的一款网页浏览器。
点我下载
Chrome
Google Chrome，又称Google浏览器，是一个由Google（谷歌）公司开发的网页浏览器。
点我下载
Firefox
Mozilla Firefox，中文名通常称为“火狐”或“火狐浏览器”，是一个开源网页浏览器。
点我下载
Safari
Safari，是苹果计算机的最新操作系统Mac OS X中的浏览器。
点我下载
Google Chrome 使用最广的浏览器
Google Chrome，又称Google浏览器，是一个由Google（谷歌）公司开发的网页浏览器。
该浏览器是基于其他开源软件所撰写，包括WebKit，目标是提升稳定性、速度和安全性，并创造出简单且有效率的使用者界面。
Mozilla Firefox 美丽的狐狸
Mozilla Firefox，中文名通常称为“火狐”或“火狐浏览器”，是一个开源网页浏览器，
使用Gecko引擎（非ie内核），支持多种操作系统如Windows、Mac和linux。
Safari Mac用户首选
Safari，是苹果计算机的最新操作系统Mac OS X中的浏览器，使用了KDE的KHTML作为浏览器的运算核心。
Safari在2003年1月7日首度发行测试版，并成为Mac OS X v10.3与之后的默认浏览器，也是iPhone与IPAD和iPod touch的指定浏览器。
Opera 小众但易用
Opera浏览器，是一款挪威Opera Software ASA公司制作的支持多页面标签式浏览的网络浏览器。
是跨平台浏览器可以在Windows、Mac和Linux三个操作系统平台上运行。.
IE 你懂的
Internet Explorer，原称Microsoft Internet Explorer(6版本以前)和Windows Internet
Explorer(7，8，9，10版本)，
简称IE，是美国微软公司推出的一款网页浏览器。它采用的排版引擎(俗称内核)为Trident。
关于
慕课网隶属于北京慕课科技中心(有限合伙)，是一家从事互联网免费教学的网络教育公司。秉承“开拓、创新、公平、分享”的精神，
将互联网特性全面的应用在教育领域，致力于为教育机构及求学者打造一站式互动在线教育品牌。
Bootstrap 模态框避免点击背景处关闭:
解决方法(摘抄自:http://blog.csdn.net/gloomy_114/article/details/51611734)：
- 在HTML页面中编写模态框时，在div初始化时添加属性 aria-hidden=”true” data-backdrop=”static”，即可。。
- 在需要显示模态框，初始化时，$(‘#myModal’).modal({backdrop: ‘static’, keyboard: false}); 其中 ，backdrop：’static’指的是点击背景空白处不被关闭； keyboard:false指的是触发键盘esc事件时不关闭。
这个也是很好看的CSS框架，具体的用法跟BootStrap是差不多的，会了BootStrap这个也就看文档来用了，没什么特别的地方的。
官网：http://materializecss.com
