#JQuery
*常用事件
*blur();
*click();
*dblclick();
*focus();
*keydown();
*keyup();
*mouseenter();
*mouseleave();
*submit();
*unload();
*JQ事件的切换
*toggle():单击事件的切换
*hover():鼠标悬停的切换
*JQuery的查找
children();
find();
parent();
*JQ事件的处理
trigger和triggerhandler的区别:
trigger:支持事件冒泡
triggerhandler:不支持
#BootStrap:前端响应式页面
*一套能够在不同设备上能够通用的网页,不影响正常浏览的方式。
*概述
是目前很受欢迎的前端框架。
* 响应式原理
* 使用CSS3的媒体查询,根据屏幕的分辨率匹配不用的样式.
*使用场景
bs设计出响应式页面,由他设计网页
*全局CSS
bootstrap的框架提供了一系列CSS样式,样式可以直接使用
*布局容器:
container:根据设备给定宽度
container-fluid:类似于100%的宽度,占据全部视口(viewport)的容器
*栅格系统:
栅格样式:
* 设备的分辨率大于 1200 使用lg样式
* 设备的分辨率大于 992 < 1200 使用md样式
* 设备的分辨率大于768 < 992 使用sm样式
* 设备的分辨率小于 768 使用xs样式
将一行分成12列.定义div元素 样式的和 加一起等于12 即可.
*媒体查询
在栅格系统中,我们在 Less 文件中使用以下媒体查询(media query)来创建关键的分界点 阈值。
超小屏幕(手机,小于 768px) 没有任何媒体查询相关的代码,因为这在 Bootstrap 中是默认的( Bootstrap 是移动设备优先) 小屏幕(平板,大于等于 768px)@media (min-width: @screen-sm-min) { ... }中等屏幕(桌面显示器,大于等于 992px)@media (min-width: @screen-md-min) { ... }大屏幕(大桌面显示器,大于等于 1200px)@media (min-width: @screen-lg-min) { ... }
|
|