1、介绍

  • BootStrap （最好看的）

    • css
    • js
    • [x] 学习 BootStrap 规则

  • jQueryUI （美观一般，偏后台。*）

    • css
    • js
    • [x] 学习 jQueryUI 规则

  • EasyUI （html框架和生成的效果不一样，有时需要修改css、js，代价大一点）

    • css
    • js
    • [x] 学习jQueryUI 规则

**总结：**jQueryUI和EasyUI 用在后台管理偏多，Bootstrap 后台主页显示都可以用。

可以直接用模板，不用重复造轮子。

2、BootStrap

  • 响应式布局（响应式页面）

面对不同分辨率设备灵活性强，能够快捷解决多设备显示适应问题。比如网页随着窗口大小的变化而显示不同的样式。

BootStrap css里面存在大量的响应式布局。

<head>

    <style>

        .c1{

            background-color: red;

            height: 50px;

        }

        @media (min-width: 900px){

            .c2{

                background-color: grey;

            }

        }

    </style>

</head>

<body>

    <div class="c1 c2"></div>

</body>

　　

  • 图标、字体 @font-face

BootStrap 里面有图标，但是没有图片，里面的图标是基于字体做的。

在 dist/fonts/ 目录里面。每个图标都有绑定的位置。比如 ”content: “\2212”“

使用的时候直接写上图标样式就可以了。

  • 基本使用

修改BootStrap里面的样式时，注意样式有优先级的，下面的生效。更方便的，设置为最优先，最重要的。

.no-radius{

    border-radius: 0 !important;    /*优先级最高，最重要的*/

}

　　

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <link rel="stylesheet" href="bootstrap-3.3.0-dist/dist/css/bootstrap.css">

    <link rel="stylesheet" href="bootstrap-3.3.0-dist/dist/css/bootstrap-theme.css">

    <style>

        .no-radius{

            border-radius: 0 !important;    /*优先级最高，最重要的*/

        }

    </style>

</head>

<body>

    <span class="glyphicon glyphicon-plus-sign"></span>

    <script src="jquery-1.12.4.js"></script>

    <script src="bootstrap-3.3.0-dist/dist/js/bootstrap.js"></script>

</body>

</html>

　　

3、插件实现轮播图（bxSlider）

bxslider.com 下载插件，网站上有使用教程。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <link rel="stylesheet" href="jquery.bxslider/jquery.bxslider.css">

</head>

<body>

    <ul class="bxslider">

        <li><img src="data:images/1.jpg" /></li>

        <li><img src="data:images/2.jpg" /></li>

        <li><img src="data:images/3.jpg" /></li>

        <li><img src="data:images/4.jpg" /></li>

    </ul>

    <script src="jquery-1.12.4.js"></script>

    <script src="jquery.bxslider/jquery.bxslider.js"></script>

    <script>

        $(document).ready(function(){

            $('.bxslider').bxSlider();

        });

    </script>

</body>

</html>

　　

HTML模版组件的更多相关文章

  1. VUE入门实例，模版组件用法

    这里每一个例子可以直接拷进body运行. 本系列为学习记录,并非大神教学案例. 仅仅整理用法,至于VUE的原理,设计模式等等暂不讨论,文中如有不对,还请大家帮忙指正,万分感激. 下一篇会写父子组件交互 ...

  2. vue 模版组件用法

    第一种 //首先,别忘了引入vue.js <div id="user_name_01"></div> <script src="../nod ...

  3. 国外一些好用的UX/UI设计工具和资源分享

    国外一些好用的UX/UI设计工具和资源分享 你今天使用的设计工具也许不再适合以后的网页和APP设计项目了.新的工具不断的推出市场,目标只有一个,让你的工作更快.更容易而且工作成效更好.今天分享的这些U ...

  4. Vulkan Tutorial 28 Depth buffering

    操作系统:Windows8.1 显卡:Nivida GTX965M 开发工具:Visual Studio 2017 Introduction 到目前为止,我们所使用的几何图形为3D,但仍然完全扁平的. ...

  5. SynEdit(Delphi XE7)的安装和基本使用

    一.花絮 delphi自带的memo显示sql语句看的太累人了,今天决定美化一下.最起码要有“语法着色”.“显示行号”这2个功能. 意外发现了 SynEdit 控件. SynEdit是一个免费的文字编 ...

  6. vue学习之路之需要了解的知识汇总

    一.vue是什么? 相关网页:  https://vuejs.bootcss.com/v2/guide/       及菜鸟教程       https://www.runoob.com/vue2/v ...

  7. 国外一些好用的UX/UI设计工具和资源介绍

    你今天使用的设计工具也许不再适合以后的网页和APP设计项目了.新的工具不断的推出市场,目标只有一个,让你的工作更快.更容易而且工作成效更好.以下就是各种工具的介绍入口,当您点击标题就会看到各种很好的工 ...

  8. 解密国内BAT等大厂前端技术体系-百度篇（长文建议收藏）

    1 引言 整个业界在前端框架不断迭代中,也寻找到了许多突破方向,例如跨平台中的RN.Flutter,服务端GraphQL.Serverless,前端和客户端的融合越来越紧密,前端在Node和Elect ...

  9. [译]Vulkan教程(30)深度缓存

    [译]Vulkan教程(30)深度缓存 Depth buffering 深度缓存 Introduction 入门 The geometry we've worked with so far is pr ...

随机推荐

  1. 使用 Spring data redis 结合 Spring cache 缓存数据配置

    使用 JavaConfig 方式配置 依赖 jar 包: jedis.spring-data-redis 首先需要进行 Redis 相关配置 @Configuration public class R ...

  2. iOS, Xcode11，项目提示第三方库报错无法运行 bundle format unrecognized, invalid, or unsuitable

    检查你有没有把静态库和动态库配置错误!! 下图处是配置动态库的地方! 对于动态库和静态库都有使用的时候,注意把静态库设置成“Do not Embeded”

  3. Blocked Billboard II题解--模拟到崩溃的模拟

    前言 比赛真的状态不好(腐了一小会),导致差点爆0. 这个题解真的是在非常非常专注下写出来的,要不然真的心态崩. 题目 题目描述 奶牛Bassie想要覆盖一大块广告牌,她在之前已经覆盖了一小部分广告牌 ...

  4. Shell:Day05.笔记

    交互输入与for语句 1.交互输入 read  Python中用input()函数,进行输入:  read命令同时可以定义多个变量值:而输入的内容默认以空格为分隔符,将值输入到对应的变量中: 如果默认 ...

  5. 使用mpvue开发小程序如何定义全局变量

    我们创建好mpvue项目之后,找到src/main.js打开在后面添加一行代码 (注意:不能在const app = new Vue(App) 之前添加) Vue.prototype.globalDa ...

  6. Web前端必备-Nginx知识汇总

    一.Nginx简介 Nginx是一个高性能.轻量级的Web和反向代理服务器, 其特点是占有内存及资源少.抗并发能力强. Nginx安装简单.配置简洁.启动快速便捷.支持热部署.支持 SSL.拥有高度模 ...

  7. matplotlib Transform

    2020-04-09 15:09:02 -- Edit by yangray Transform 类是TransformNode的子类,它是所有执行变换的TransformNode的实例的基类.所有非 ...

  8. BMI的Python实现

    str1 = float(input('请输入您的身高(单位:米):')) # input默认转化为字符串型 用float转化为浮点型 str2 = float(input('请输入您的体重(单位:千 ...

  9. tf.nn.softmax 分类

    tf.nn.softmax(logits,axis=None,name=None,dim=None) 参数: logits:一个非空的Tensor.必须是下列类型之一:half, float32,fl ...

  10. bootstrap-table 内容超出鼠标悬浮显示全部

    .table th, .table td { text-align: center; vertical-align: middle !important; } table { width: 100px ...