ITPub博客

首页 > IT职业 > IT职场 > 常用的CSS框架

常用的CSS框架

IT职场 作者:bluepeach 时间:2021-09-09 09:10:53 0 删除 编辑

tags: 常用的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框架,并把之前写过的笔记进行整合一下。当然是不能面面俱到的...

https://my.oschina.net/u/3777556/blog/1628746
http://w3schools.wang/bootstrap/bootstrap_tutorial.html

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

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








现代浏览器博物馆

<!--[if lt IE 9]>
    
    
    

        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中的浏览器。

点我下载

<!-- 特性 -->

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):

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

来自 “ ITPUB博客 ” ,链接:https://blog.itpub.net/2558/viewspace-2808368/ ,如需转载,请注明出处,否则将追究法律责任。

请登录后发表评论 登录
全部评论
  • 博文量
    103
  • 访问量
    22754