JavaScript 模板插件

自己开发：知道如何调用及修复bug, 但重复造轮子，浪费时间
模板插件：可以提高效率, 但未必完全适合。
因此自己开发还是用模板插件，各有利弊，最好两者结合, 第一步先看看网上有没有插件，如果没有就自己写

 

BootStrap

适用于主站和后台，BootStrap 包含了 css和js ，学习 BootStrap 规则并运用

1、支持响应式布局
@media 

示例 ：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .c1{
            background-color: red;
            height: 50px;
        }    
        /* 当屏幕大于700px时c2生效，当屏幕小于700px时c2不生效*/
        @media(min-width:700px){
            .c2{
                background-color:gray;
            }
        }
    </style>
</head>
<body>
    <div class="c1 c2"></div>
</body>
</html>

2、图标和字体
@font-face

@font-face {
font-family: 'Glyphicons Halflings';

src: url('../fonts/glyphicons-halflings-regular.eot');
src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff2') format('woff2'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}    
.glyphicon-asterisk:before {
content: "\002a"; // "\002a" 表示字体文件的位置，代表某个图标
}
.glyphicon-plus:before {
content: "\002b";
}

3、基本使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .i1{
            border-radius:0 !important;  /* 加上 !important 优先级最高 */
        }    
    </style>
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap-theme.css">  <!-- bootstrap-theme.css 加了一些简单的颜色配比  -->
</head>
<body>
    <script src="jquery-1.12.4.js"></script>  <!-- bootstrap的 js 依赖于jQuery -->
    <script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
</body>
</html>

 

其他模板 

EasyUI  和 jQueryUI 适用于后台管理 

EasyUI 包含了 css和js  ，学习 jQueryUI 规则  及 Ajax操作

jQueryUI 包含了 css和js ，没有EasyUI的功能齐全，学习 jQueryUI 规则


轮播插件：bxslider

 

图标：fontawesome.io

 

posted @ 2017-11-12 14:39  bobo0609  Views(125)  Comments(0)    收藏  举报