监控平台项目之CSS总结——基于angularjs、bootstrap、jquery等框架
1.新加一个类名,实现切换页面主题
在需要变色的标签处,添加该类名,即可实现最简化切换页面主题。
HTML:
<section ui-view=""> </section>/*页面切换容器 */
<div class="A red">/*A页面 */
<input type="button" class="red-border" value="确定"/>
</div
<div class="B blue">/*B页面 */
<input type="button" class="blue-border" value="确定"/>
</div
CSS:
section{ }/*两个页面的基础样式 */
.red{background-color:#f06963;}
.red-border{border-color:#f06963;}
.blue{background-color:#337ab7;}
.blue-border{border-color:#337ab7;}
2.新加一个类名,实现下拉菜单右侧图标样式更改(如图标旋转或图标更改),具体如下。
HTML:
<a class="advanced" data-toggle="collapse" data-parent="#accordion" data-target="#collapse">高级选项
<span class="caret "></span>
</a>
CSS:
a.advanced span.caret{
-webkit-transform: rotate(270deg);/*角度根据页面调试,范围从0~360°*/
-moz-transform: rotate(270deg);
transform: rotate(270deg);
}
a.caret-changed span.caret{
-webkit-transform: rotate(360deg);/*角度根据页面调试,范围从0~360°,与上一个旋转值之差为90*/
-moz-transform: rotate(360deg);
}
JS:
<script type="text/javascript">
$(function(){
$("a.advanced").click(function(){
if($(this).hasClass('caret-changed')){
$(this).removeClass("caret-changed");
}else{
$(this).addClass("caret-changed");
}
});
});
</script>
3.子div溢出父div:
子div样式中可能存在float:left/right样式,在父div添加clearfix类名。
<div class="clearfix">/*父div*/
<div>/*子div*/
</div>
</div>
4.后续
监控平台项目之CSS总结——基于angularjs、bootstrap、jquery等框架的更多相关文章
- GPS部标监控平台的架构设计(十一)-基于Memcached的分布式Gps监控平台
部标gps监控平台的架构,随着平台接入的车辆越来越多,架构也面临越来越大的负载挑战,我们当然希望软件尽可能的优化并能够接入更多的车辆,减少在硬件上的投资.但是当车辆增多到某一个临界点的时候,仍然要面临 ...
- GPS部标监控平台的架构设计(八)-基于WCF的平台数据通信设计
总体来讲,GPS部标平台的软件开发是一个对网络通信和应用程序之间通信的技术应用密集型的开发工作,也是有一定设计技术含量的工作. 1.设计通信接口 在设计的时候,根据职责划分,拆分成不同的应用子系统,对 ...
- 基于AngularJs + Bootstrap + AngularStrap 省市区联动实践
什么是 AngularJs?网上一大堆资料,没能真正说明白. AngularJs 就是一个函数库,算不上一个框架,源码2万2千多行,提供了前端MVC的开发方式, 有双向绑定,指令等特性,这是具有革命性 ...
- Javascript/CSS/HTML/vue/angularJS/react/jquery/DOM前端编程经典电子书pdf下载
高级进阶必读 你所不知道的系列,高级开发必掌握. JavaScript这门语言简单易用,很容易上手,但其语言机制复杂微妙,即使是经验丰富的JavaScript开发人员,如果没有认真学习的话也无法真正理 ...
- AngularJs+bootstrap搭载前台框架——准备工作
1.关于什么是AngularJs以及什么是bootstrap我就不多说了,简单说下,AngularJs是一个比较强大前台MVC框架,bootstrap是Twitter推出的一个用于前端开发的开源工具包 ...
- 基于java spring框架开发部标1078视频监控平台精华文章索引
部标1078视频监控平台,是一个庞杂的工程,涵盖了多层协议,部标jt808,jt809,jt1078,苏标Adas协议等,多个平台功能标准,部标796标准,部标1077标准和苏标主动安全标准,视频方面 ...
- GPS部标平台的架构设计(十)-基于Asp.NET MVC构建GPS部标平台
在当前很多的GPS平台当中,有很多是基于asp.NET+siverlight开发的遗留项目,代码混乱而又难以维护,各种耦合和关联,要命的是界面也没见到比Javascript做的控件有多好看,随着需求的 ...
- 基于Spring4+SpringMVC4+Mybatis3+Hibernate4+Junit4框架构建高性能企业级的部标GPS监控平台
开发企业级的部标GPS监控平台,投入的开发力量很大,开发周期也很长,选择主流的开发语言以及成熟的开源技术框架来构建基础平台,是最恰当不过的事情,在设计之初就避免掉了技术选型的风险,避免以后在开发过程中 ...
- 基于C#和Asp.NET MVC开发GPS部标监控平台
基于交通部796标准开发部标监控平台,选择开发语言和技术也是团队要思考的因素,其实这由团队自己擅长的技术来决定,如果擅长C#和Asp.NET, 当然开发效率就高很多.当然了技术选型一定要选用当前主流的 ...
随机推荐
- mysql启动和关闭外键约束的方法(FOREIGN_KEY_CHECKS)
在MySQL中删除一张表或一条数据的时候,出现 [Err] 1451 -Cannot delete or update a parent row: a foreign key constraint f ...
- tinyPng Photoshop Plugin 安装的坑
一定要注意两点: 第一: 注册表注册路径要修改为自己安装ps cc时的注册表路径[HKEY_LOCAL_MACHINE\SOFTWARE\Adobe\Photoshop\70.0]第二: Applic ...
- Serif和Sans-serif字体的区别
在西方国家罗马字母阵营中,字体分为两大种类:Sans Serif和Serif,打字机体虽然也属于Sans Serif,但由于是等宽字体,所以另外独立出Monospace这一种类,例如在Web中,表示代 ...
- (.text+0x12): undefined reference to `rpl_fprintf'
问题1:(.text+0x12): undefined reference to `rpl_fprintf'解决办法:在yacc前面添加%{#undef yyerrorvoid yyerror (ch ...
- 扁平设备树(FDT)
组成 扁平设备树主要由4大部分组成:头部(header),预留内存块(memory reservation block),结构块(struct block)和字符串块(strings block).这 ...
- (Skill)238. Product of Array Except Self
Given an array of n integers where n > 1, nums, return an array output such that output[i] is equ ...
- Linux学习笔记之——基础命令学习
1.find 按照名字查找:find / -name file_name 2.zip压缩 1) 我想把一个文件repartition.txt和一个目录invader压缩成为amateur.zip: ...
- Java上传文件
Action /* * 后台商品管理的Action */ public class AdminProductAction extends ActionSupport implements ModelD ...
- Android动态加载学习笔记(一)
前言 上周五DPAndroid小分队就第二阶段分享内容进行了讨论,结果形成了三个主题:性能优化.动态加载.内核远离.我选择的是第二项——动态加载.在目前的Android开发中,这一部分知识还是比较流行 ...
- 初级Bug率,随时受不了
一听到初级Bug这个名字,很多开发工程师都会觉得很头痛,还有那个“初级Bug率”,让人随时受不了. 初级Bug这个概念,在多数缺陷跟踪工具中,是不存在的,可以说是淘宝研发部的特色.初级Bug对应Bug ...