专栏首页Java3y常用的CSS框架

常用的CSS框架

常用的CSS框架

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

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

  • http://w3schools.wang/report/top-UI-open-source-framework-summary.html
  1. Bootstrap
  2. Semantic-ui
  3. Foundation
  4. Materialize
  5. Material-ui
  6. Phantomjs
  7. Pure
  8. Flat-ui
  9. Jquery-ui
  10. React-bootstrap
  11. Uikit
  12. Metro-ui-css
  13. Iview
  14. Layui
  15. Mui
  16. Frozenui
  17. AlloyUI
  18. W3.CSS

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

jquery-easyUI

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

什么是easyUI

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

这里写图片描述

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

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

easyUI快速入门

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

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

这里写图片描述

在html文件的body标签内,写上如下的代码:

    <!-- 
        第一:写一个普通div标签
        第二:提倡为div标签取一个id属性,将来用jquery好定位
        第三:为普通div标签添加easyui组件的样式
              所有的easyui组件的样式均按如下格式设置:
              easyui-组件名
        第四:如果要用easyui组件自身的属性时,必须在普通标签上书写data-options属性名,
              内容为,key:value,key:value,如果value是string类型加引号,外面双引号,
              则里面单引号      
        注意:要在普通标签中书写data-options属性的前提是:在普通标签上加class="easyui-组件名" 
              属性值大小写均可     
    -->


    <div 
        id="xx" 
        class="easyui-panel" 
        style="width:500px;height:300px;padding:15px"
        title="我的面板"
        data-options="iconCls:'icon-save',collapsible:true,minimizable:false,maximizable:true">

        这是我的第一个EasyUI程序

    </div>

效果:

这里写图片描述

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


除了指定 class="easyui-panel"这样的方式来使用easyUI的组件,我们还可以使用javascript的方式来动态生成…代码如下所示:

<div id="p2" style="padding:10px;">
    <p>panel content.</p>
</div>

<script type="text/javascript">
    $('#p2').panel({
        width: 500,
        height: 150,
        title: 'My Panel',
        border: true,
        collapsible: true
    });
</script>

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

这里写图片描述

语法

这里写图片描述


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


BootStrap

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

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

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

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

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

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>现代浏览器博物馆</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!--[if lt IE 9]>
    <script src="js/html5shiv.js"></script>
    <script src="js/respond.min.js"></script>
    <![endif]-->

    <style>
        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;
            }
        }
    </style>

</head>

<body>
<!-- 顶部导航 -->
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation" id="menu-nav">
    <div class="container">
        <div class="navbar-header">

            <!--如果分辨率较小,那么这里就会出现-->
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">切换导航</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">现代浏览器博物馆</a>
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#ad-carousel">综述</a></li>
                <li><a href="#summary-container">简述</a></li>

                <!--下拉框-->
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">特点 <span class="caret"></span></a>
                    <ul class="dropdown-menu" role="menu">
                        <li><a href="#feature-tab" data-tab="tab-chrome">Chrome</a></li>
                        <li><a href="#feature-tab" data-tab="tab-firefox">Firefox</a></li>
                        <li><a href="#feature-tab" data-tab="tab-safari">Safari</a></li>
                        <li><a href="#feature-tab" data-tab="tab-opera">Opera</a></li>
                        <li><a href="#feature-tab" data-tab="tab-ie">IE</a></li>
                    </ul>
                </li>
                <!--模态窗口-->
                <li><a href="#" data-toggle="modal" data-target="#about-modal">关于</a></li>
            </ul>
        </div>
    </div>
</div>


<!-- 广告轮播 -->
<div id="ad-carousel" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
        <li data-target="#ad-carousel" data-slide-to="0" class="active"></li>
        <li data-target="#ad-carousel" data-slide-to="1"></li>
        <li data-target="#ad-carousel" data-slide-to="2"></li>
        <li data-target="#ad-carousel" data-slide-to="3"></li>
        <li data-target="#ad-carousel" data-slide-to="4"></li>
    </ol>
    <div class="carousel-inner">
        <div class="item active">
            <img src="images/chrome-big.jpg" alt="1 slide">
            <div class="container">
                <div class="carousel-caption">
                    <h1>Chrome</h1>

                    <p>Google Chrome,又称Google浏览器,是一个由Google(谷歌)公司开发的网页浏览器。</p>

                    <p><a class="btn btn-lg btn-primary" href="http://www.google.cn/intl/zh-CN/chrome/browser/"
                          role="button" target="_blank">点我下载</a></p>
                </div>
            </div>
        </div>
        <div class="item">
            <img src="images/firefox-big.jpg" alt="2 slide">

            <div class="container">
                <div class="carousel-caption">
                    <h1>Firefox</h1>

                    <p>Mozilla Firefox,中文名通常称为“火狐”或“火狐浏览器”,是一个开源网页浏览器。</p>

                    <p><a class="btn btn-lg btn-primary" href="http://www.firefox.com.cn/download/" target="_blank"
                          role="button">点我下载</a></p>
                </div>
            </div>
        </div>
        <div class="item">
            <img src="images/safari-big.jpg" alt="3 slide">

            <div class="container">
                <div class="carousel-caption">
                    <h1>Safari</h1>

                    <p>Safari,是苹果计算机的最新操作系统Mac OS X中的浏览器。</p>

                    <p><a class="btn btn-lg btn-primary" href="http://www.apple.com/cn/safari/" target="_blank"
                          role="button">点我下载</a></p>
                </div>
            </div>
        </div>
        <div class="item">
            <img src="images/opera-big.jpg" alt="4 slide">

            <div class="container">
                <div class="carousel-caption">
                    <h1>Opera</h1>

                    <p>Opera浏览器,是一款挪威Opera Software ASA公司制作的支持多页面标签式浏览的网络浏览器。</p>

                    <p><a class="btn btn-lg btn-primary" href="http://www.opera.com/zh-cn" target="_blank"
                          role="button">点我下载</a></p>
                </div>
            </div>
        </div>
        <div class="item">
            <img src="images/ie-big.jpg" alt="5 slide">

            <div class="container">
                <div class="carousel-caption">
                    <h1>IE</h1>

                    <p>Internet Explorer,简称 IE,是微软公司推出的一款网页浏览器。</p>

                    <p><a class="btn btn-lg btn-primary" href="http://ie.microsoft.com/" target="_blank"
                          role="button">点我下载</a></p>
                </div>
            </div>
        </div>
    </div>
    <a class="left carousel-control" href="#ad-carousel" data-slide="prev"><span
            class="glyphicon glyphicon-chevron-left"></span></a>
    <a class="right carousel-control" href="#ad-carousel" data-slide="next"><span
            class="glyphicon glyphicon-chevron-right"></span></a>
</div>


<!-- 主要内容 -->
<div class="container summary">

    <!-- 简介 -->
    <div class="row" id="summary-container">
        <div class="col-md-4">
            <img class="img-circle" src="images/chrome-logo-small.jpg" alt="chrome">

            <h2>Chrome</h2>

            <p>Google Chrome,又称Google浏览器,是一个由Google(谷歌)公司开发的网页浏览器。</p>

            <p><a class="btn btn-default" href="#" role="button">点我下载</a></p>
        </div>
        <div class="col-md-4">
            <img class="img-circle" src="images/firefox-logo-small.jpg" alt="firefox">

            <h2>Firefox</h2>

            <p>Mozilla Firefox,中文名通常称为“火狐”或“火狐浏览器”,是一个开源网页浏览器。</p>

            <p><a class="btn btn-default" href="#" role="button">点我下载</a></p>
        </div>
        <div class="col-md-4">
            <img class="img-circle" src="images/safari-logo-small.jpg" alt="safari">

            <h2>Safari</h2>

            <p>Safari,是苹果计算机的最新操作系统Mac OS X中的浏览器。</p>

            <p><a class="btn btn-default" href="#" role="button">点我下载</a></p>
        </div>
    </div>

    <!-- 特性 -->

    <hr class="feature-divider">
    <ul class="nav nav-tabs" role="tablist" id="feature-tab">
        <li class="active"><a href="#tab-chrome" role="tab" data-toggle="tab">Chrome</a></li>
        <li><a href="#tab-firefox" role="tab" data-toggle="tab">Firefox</a></li>
        <li><a href="#tab-safari" role="tab" data-toggle="tab">Safari</a></li>
        <li><a href="#tab-opera" role="tab" data-toggle="tab">Opera</a></li>
        <li><a href="#tab-ie" role="tab" data-toggle="tab">IE</a></li>
    </ul>

    <div class="tab-content">
        <div class="tab-pane active" id="tab-chrome">
            <div class="row feature">
                <div class="col-md-7">

                    <h2 class="feature-heading">Google Chrome <span
                            class="text-muted">使用最广的浏览器</span></h2>

                    <p class="lead">Google Chrome,又称Google浏览器,是一个由Google(谷歌)公司开发的网页浏览器。
                        该浏览器是基于其他开源软件所撰写,包括WebKit,目标是提升稳定性、速度和安全性,并创造出简单且有效率的使用者界面。</p>
                </div>
                <div class="col-md-5">
                    <img class="feature-image img-responsive" src="images/chrome-logo.jpg"
                         alt="Chrome">
                </div>
            </div>
        </div>
        <div class="tab-pane" id="tab-firefox">
            <div class="row feature">
                <div class="col-md-5">
                    <img class="feature-image img-responsive" src="images/firefox-logo.jpg"
                         alt="Firefox">
                </div>
                <div class="col-md-7">

                    <h2 class="feature-heading">Mozilla Firefox <span class="text-muted">美丽的狐狸</span>
                    </h2>

                    <p class="lead">Mozilla Firefox,中文名通常称为“火狐”或“火狐浏览器”,是一个开源网页浏览器,
                        使用Gecko引擎(非ie内核),支持多种操作系统如Windows、Mac和linux。</p>
                </div>
            </div>
        </div>
        <div class="tab-pane" id="tab-safari">
            <div class="row feature">
                <div class="col-md-7">

                    <h2 class="feature-heading">Safari <span class="text-muted">Mac用户首选</span></h2>

                    <p class="lead">Safari,是苹果计算机的最新操作系统Mac OS X中的浏览器,使用了KDE的KHTML作为浏览器的运算核心。
                        Safari在2003年1月7日首度发行测试版,并成为Mac OS X v10.3与之后的默认浏览器,也是iPhone与IPAD和iPod touch的指定浏览器。</p>
                </div>
                <div class="col-md-5">
                    <img class="feature-image img-responsive" src="images/safari-logo.jpg"
                         alt="Safari">
                </div>
            </div>
        </div>
        <div class="tab-pane" id="tab-opera">
            <div class="row feature">
                <div class="col-md-5">
                    <img class="feature-image img-responsive" src="images/opera-logo.jpg"
                         alt="Opera">
                </div>
                <div class="col-md-7">

                    <h2 class="feature-heading">Opera <span class="text-muted">小众但易用</span>
                    </h2>

                    <p class="lead">Opera浏览器,是一款挪威Opera Software ASA公司制作的支持多页面标签式浏览的网络浏览器。
                        是跨平台浏览器可以在Windows、Mac和Linux三个操作系统平台上运行。.</p>
                </div>
            </div>
        </div>
        <div class="tab-pane" id="tab-ie">
            <div class="row feature">
                <div class="col-md-7">

                    <h2 class="feature-heading">IE <span class="text-muted">你懂的</span></h2>

                    <p class="lead">Internet Explorer,原称Microsoft Internet Explorer(6版本以前)和Windows Internet
                        Explorer(7,8,9,10版本),
                        简称IE,是美国微软公司推出的一款网页浏览器。它采用的排版引擎(俗称内核)为Trident。</p>
                </div>
                <div class="col-md-5">
                    <img class="feature-image img-responsive" src="images/ie-logo.jpg"
                         alt="IE">
                </div>
            </div>
        </div>
    </div>

    <!-- 关于 -->
    <div class="modal fade" id="about-modal" tabindex="-1" role="dialog" aria-labelledby="modal-label"
         aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span
                            aria-hidden="true">&times;</span><span class="sr-only">关闭</span></button>
                    <h4 class="modal-title" id="modal-label">关于</h4>
                </div>
                <div class="modal-body">
                    <p>慕课网隶属于北京慕课科技中心(有限合伙),是一家从事互联网免费教学的网络教育公司。秉承“开拓、创新、公平、分享”的精神,
                        将互联网特性全面的应用在教育领域,致力于为教育机构及求学者打造一站式互动在线教育品牌。</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">了解了</button>
                </div>
            </div>
        </div>
    </div>


    <!--角标-->
    <footer>
        <p class="pull-right"><a href="#top">回到顶部</a></p>
        <p>&copy; 2014 慕课网 </p>
    </footer>

</div>

<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
    /*触发点击事件*/
    $(function () {
        $('#ad-carousel').carousel();
        $('#menu-nav .navbar-collapse a').click(function (e) {
            var href = $(this).attr('href');
            var tabId = $(this).attr('data-tab');
            if ('#' !== href) {
                e.preventDefault();
                $(document).scrollTop($(href).offset().top - 70);
                if (tabId) {
                    $('#feature-tab a[href=#' + tabId + ']').tab('show');
                }
            }
        });
    });
</script>
</body>
</html>

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

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

  1. 在HTML页面中编写模态框时,在div初始化时添加属性 aria-hidden=”true” data-backdrop=”static”,即可。。
  2. 在需要显示模态框,初始化时,$(‘#myModal’).modal({backdrop: ‘static’, keyboard: false}); 其中 ,backdrop:’static’指的是点击背景空白处不被关闭; keyboard:false指的是触发键盘esc事件时不关闭。

Materialize

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

官网:http://materializecss.com


本文分享自微信公众号 - Java3y(gh_085b56c42174)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-03-04

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Reactive响应式流入门!

    在前一篇文章 从Reactive编程到“好莱坞” 中,谈到了响应式的一些概念,讲的有些发散。但仅仅还是停留在概念的层面,对于实战性的东西并没有涉及。所以大家看了...

    Java3y
  • 爸爸又给Spring MVC生了个弟弟叫Spring WebFlux

    很早之前,Java就火起来了,是因为它善于开发和处理网络方面的应用。 Java有一个爱好,就是喜欢制定规范标准,但自己又不善于去实现。 反倒是一些服务提供商使用...

    Java3y
  • 用简单代码实现IOC容器

    相信每一个java程序员在面试经历中,都被面试官问到过AOP和IOC,用官方的话语来回答AOP和IOC,那就是切面编程和控制反转及依赖注入。

    Java3y
  • bootstrap 导航栏 淡入淡出 常用样式

    <ul id="myTab" class="nav nav-tabs"> <li class="active"> <a href="#home" data-...

    用户5760343
  • elasticSearch学习(九)

    此次项目实战采用java爬虫爬取京东的数据放在es数据源中,然后通过页面来模拟京东搜索。

    崔笑颜
  • bootstrap

    花了一天时间学了下bootstrap入门,想必大家用css写前端页面的时候都很痛苦,bootstrap就是来解决这个问题的,它封装了css的很多样式,开发的时候...

    用户3112896
  • bootstrap scollspy 滚动监听

    <!doctype html> <html> <head> <meta charset="utf-8"> <title>联想控股</title> <m...

    用户5760343
  • bootstrap 常用导航菜单样式

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 实例 - 标...

    用户5760343
  • JavaWeb——一文快速入门BootStrap(栅格系统、全局CSS样式、组件、插件、基于BootStrap的官网案例实战)

    BootStrap是一个前端开发的框架,Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CS...

    Winter_world
  • bootstrap 网页实例 常用样式

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 实例 - 一...

    用户5760343

扫码关注云+社区

领取腾讯云代金券