HTML模版组件
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模版组件的更多相关文章
- VUE入门实例，模版组件用法
这里每一个例子可以直接拷进body运行. 本系列为学习记录,并非大神教学案例. 仅仅整理用法,至于VUE的原理,设计模式等等暂不讨论,文中如有不对,还请大家帮忙指正,万分感激. 下一篇会写父子组件交互 ...
- vue 模版组件用法
第一种 //首先,别忘了引入vue.js <div id="user_name_01"></div> <script src="../nod ...
- 国外一些好用的UX/UI设计工具和资源分享
国外一些好用的UX/UI设计工具和资源分享 你今天使用的设计工具也许不再适合以后的网页和APP设计项目了.新的工具不断的推出市场,目标只有一个,让你的工作更快.更容易而且工作成效更好.今天分享的这些U ...
- Vulkan Tutorial 28 Depth buffering
操作系统:Windows8.1 显卡:Nivida GTX965M 开发工具:Visual Studio 2017 Introduction 到目前为止,我们所使用的几何图形为3D,但仍然完全扁平的. ...
- SynEdit(Delphi XE7)的安装和基本使用
一.花絮 delphi自带的memo显示sql语句看的太累人了,今天决定美化一下.最起码要有“语法着色”.“显示行号”这2个功能. 意外发现了 SynEdit 控件. SynEdit是一个免费的文字编 ...
- vue学习之路之需要了解的知识汇总
一.vue是什么? 相关网页: https://vuejs.bootcss.com/v2/guide/ 及菜鸟教程 https://www.runoob.com/vue2/v ...
- 国外一些好用的UX/UI设计工具和资源介绍
你今天使用的设计工具也许不再适合以后的网页和APP设计项目了.新的工具不断的推出市场,目标只有一个,让你的工作更快.更容易而且工作成效更好.以下就是各种工具的介绍入口,当您点击标题就会看到各种很好的工 ...
- 解密国内BAT等大厂前端技术体系-百度篇（长文建议收藏）
1 引言 整个业界在前端框架不断迭代中,也寻找到了许多突破方向,例如跨平台中的RN.Flutter,服务端GraphQL.Serverless,前端和客户端的融合越来越紧密,前端在Node和Elect ...
- [译]Vulkan教程(30)深度缓存
[译]Vulkan教程(30)深度缓存 Depth buffering 深度缓存 Introduction 入门 The geometry we've worked with so far is pr ...
随机推荐
- vue-cli3引入svg图标全过程以及遇到的坑
https://blog.csdn.net/weixin_41229588/article/details/101159755 一.配置 1.安装依赖: npm install svg-sprite- ...
- LeetCode | 169. 多数元素
给定一个大小为 n 的数组,找到其中的多数元素.多数元素是指在数组中出现次数大于 ⌊ n/2 ⌋ 的元素. 你可以假设数组是非空的,并且给定的数组总是存在多数元素. 示例 1: 输入: [3,2,3] ...
- Hadoop安装教程_伪分布式
文章更新于:2020-04-09 注1:hadoop 的安装及单机配置参见:Hadoop安装教程_单机(含Java.ssh安装配置) 注2:hadoop 的完全分布式配置参见:Hadoop安装教程_分 ...
- Linux基础篇，系统服务（service）的管理
一.服务是什么? 用白话文说,服务就是"常驻在内存中的进程",用来提供一些系统或网络功能. 二.service和daemon的区别与联系 因为服务(service)本质上来说也是程 ...
- String与StringBuffer和StringBuilder的根本区别（String为什么无法修改字符串长度）
从网上看了很多的信息,说的大部分是关于final修饰的原因,却没有详细的解释!根据自己收集的资料,跟大家分享一下我的观点(有错请指正).1.我们都知道在修改字符串长度的时候,StringBuffer和 ...
- Android 圆形图片库 CircleImageView
高仿微信朋友圈 10s 视频裁剪 引语 晚上好,我是猫咪,我的公众号「程序媛猫咪」会推荐 GitHub 上好玩的项目,挖掘开源的价值,欢迎关注我. <Android 图片裁剪库 uCrop> ...
- Array（数组）对象-->sort() 方法
1.定义和用法 sort() 方法用于对数组的元素进行排序. 默认排序顺序为按字母升序. 语法: array.sort(sortfunction) 参数: sortfunction:规定排序顺序.必须 ...
- python3（十八）decorator
# -----------------------1-------------------------------------------- # 由于函数也是一个对象,而且函数对象可以被赋值给变量,所 ...
- xxx 表 is marked as crashed and last (automatic?) repair 解决办法
如上图出现 xxx 表 is marked xxxx 的问题 运维那说是因为数据库非正常停掉 时 刚好有数据正在写入 数据库 导致的问题,这个没多大影响,需要 执行命令修复数据库,至于命令是什么? ...
- 数据结构和算法(Golang实现)(3)简单入门Golang-流程控制语句
流程控制语句 计算机编程语言中,流程控制语句很重要,可以让机器知道什么时候做什么事,做几次.主要有条件和循环语句. Golang只有一种循环:for,只有一种判断:if,还有一种特殊的switch条件 ...