Jquary与Bootstrap散记
Jquary与Bootstrap仅做学习所用
Bootstrap
.col-xs- <768px
.col-sm- <992px
.col-md- <1200px
.col-lg- >=1200px
Bootstrap排版类
.lead 使段落突出显示
.small 设定小文本
.text-left 设定文本左对齐
.text-center 设定文本居中对齐
.text-right 设定文本右对齐
.text-justify 文本对齐且超出屏幕部分自动换行
.text-nowrap 段落中超出屏幕部分不换行
.text-lowercase 设定文本小写
.text-uppercase 设定文本大写
.text-capitalize 设定单词首字母大写
.initialism 在<abbr>中以小号字体展示,且可以将小写字母转换为大写字母
.blockquote-reverse 设定引用右对齐
.list-inline 所有列表项放置在同一行
Bootstrap代码显示
<code>设置元素内显示代码
<pre>设置一个独立的元素块显示代码
<(<)前尖括号,>(>)后尖括号,用于写标签
例: <pre>
<h1>开头<h1> <h1>开头</h1>
</pre>
Bootstrap表格
<table> 为表格添加基础样式
<thead> 表格标题行的容器元素(类似于html中的<tr>)
<tbody> 表格主体中的表格行的容器元素(类似于html中的<tr>)
<tr> 单行上的表格单元的容器元素
<td> 默认的表格单元格
<th> 特殊的表格单元格
<caption> 对容器的描述或总结
.table 为任意<table>添加样式
.table-striped 在<tbody>内添加斑马线形式的条纹
.table-bordered 为所有表格的单元格添加边框
.table-hover 在<tbody>内的任一行启用鼠标悬停状态
.table-condensed 让表格更加紧凑
.active 将悬停的颜色应用在行或这单元格上
.success 表示成功的操作
.info 表示信息变化的操作
.warning 表示一个警告的操作
.danger 表示一个危险的操作
Bootstrap表单
垂直(默认表单)
<form>中添加role=”form”
<div>中添加class=”form-group”
<input>,<textarea>,<select>中添加class=”form-control”
内联表单(全在一行)
<form>中添加class=”form-inline”
水平表单
<form>中添加class=”form-horizontal”
<label>中添加class=”control-label”
type=”checkbox” 复选框
type=”radio” 单选框
type=”checkbox-inline” 多个复选框在一行
type=”radio-inline” 多个单选框在一行
Bootstrap按钮
.btn 基本样式
.btn-default 默认/标准样式
.btn-primary 原始按钮样式(未被操作)
.btn-success 表示成功的样式
.btn-info 用于要弹出信息的按钮
.btn-warning 需要谨慎操作的按钮
.btn-danger 表示危险的操作按钮
.btn-link 让按钮看起来像一个链接
.btn-lg 大按钮
.btn-sm 小按钮
.btn-xs 超小按钮
.btn-block 块级按钮
.active 按钮被点击后的样式
.disabled 禁用按钮
Bootstrap图片
.img-rounded 为图片添加border-radius: 6px;
.img-circle 为图片添加border-radius:50%;
.img-thumbnail 为图片添加内边距和一个灰色的边框
.img-responsive 图片可以扩展到父元素,更好的实现响应式
文本样式(文字颜色)
.text-muted .text-primary .text-success .text-info .text-warning
.text-danger
文本背景颜色
.bg-primary .bg-success .bg-info .bg-warning .bg-danger
为<div>设置位置
.pull-left 元素浮动到左边
.pull-right 元素浮动到右边
.center-block 设置元素为display:block并居中显示
.clearfix 清除浮动
.show 强制元素显示
.hidden 强制元素隐藏
.sr-only 除了屏幕阅读器外,其他设备上隐藏元素
.sr-only-focusable 在元素获取焦点时显示
.text-hide 将页面元素所包含的文本内容换为背景图
.close 显示关闭按钮
Bootstrap响应式使用工具
Jquary
基本操作
$定义jquery,selector获取元素,action()对元素的操作。
jquery事件
click 点击事件
dblclick 双击事件
mouseenter 鼠标移入元素
mouseleave 鼠标移出元素
keypress 键按下过程中
keydown 键被按下
keyup 键被松开
submit 提交时
change 元素值被改变时触发
focus 获得聚焦时
blur 失去聚焦时
load 下载完毕后
resize 浏览器窗口大小改变时
scroll 当用户滚动指定元素时
隐藏与显示
hide()隐藏,show()显示,toggle()显示与隐藏切换
淡入淡出
fadeIn()淡出(出现),fadeOut()淡入(消失),fadeToggle()淡入与淡出切换,fadeTo()元素变淡
滑动
slideDown()滑出,slideUp()滑入,slideToggle()滑入与滑出切换。
jquery创建动画
animate
例:
$(“button”).click(function(){
$(“div”).animate({
left:’250px’; 当button(按钮被点击时),触发
opacity:‘0.5’; div做出相应的动画。可以同时
height:‘150px’; 设置多个属性的变化。
width:‘150px’;
});
});
stop()用于停止动画
jquery允许用链将动画串联
例:$(“button”).click(function(){
$(“#p1”).css(“color”,”red”).slideUp(2000).slideDown(2000);
});
button(按钮)被点击时,p1元素先变红,滑上用时2秒,滑下用时2秒。
捕获
text()返回元素文本内容 $(“#text”).text()
html()返回元素内容(包括html的标签) $(“#text”).html()
val()返回表单字段内的内容 $(“#text”).val()
attr()返回元素属性 $(“#text”).attr(“href”)
设置元素 例: $(“#text”).text(“Hello world”); 将text中的内容改为Hello world html()和val()一样。
设置attr 例: $(“#text”).attr(“href”,”http://www.runoob.com/jquery”);
添加元素
append() 在元素的结尾插入内容 例:$(“p”).append(“<p>text</p>”)
prepend() 在元素的开头插入内容 在p元素之后加入text
after() 在元素之后插入内容
before() 在元素之前插入内容
删除元素
remove() 删除被选元素 例:(“#div2”).remove(.a1);
删除class为a1的元素
empty() 删除被选元素的子元素 例:(“#div1”).empty();
获取并设置CSS
addClass() 添加元素CSS一个或多个类
removeClass() 删除元素CSS一个或多个类
toggleClass() 对元素CSS添加与删除间切换
例:$(“button”).click(function(){
$(“h1,h2,p”).addClass(“blue”);
$(“div”).addClass(“important”);
})
CSS样式是提前写好后在添加删除
设置改变CSS样式
$(“p”).css({“background-color”:”yellow”,”font-size”:”200%”});
jquery尺寸
parent()返回元素的上一级元素 $(“span”).parent();
parnets()返回元素的所有上级元素 $(“span”).parents();
parnetsUntil()返回两者之间所有元素 $(“span”).parentsUntil(“div”);
返回span元素上级到div元素的所有父级元素
返回后代元素children(),find()。
$(“div”).children(); 返回所有子级元素
$(“div”).children(“p.1”); 返回div中class为1的p元素
$(“div”).find(“span”); 返回属于div后代的所有span元素
$(“div”).find(“*”); 返回div的所有后代
返回同胞元素
siblings()返回被选元素的父级元素下的所有同胞元素。
next()返回被选元素的下一个同胞元素。
nextAll()返回被选元素后所有同一父级元素的同胞元素。
nextUntill()返回介于两个元素之间的所有同胞元素。
Pre(),preAll(),preUntill()方法的工作方式与上面三个类似,只不过方向相反
例: $(“h2”).siblings(); 返回与h2同胞的所有元素。
$(“h2”).siblings(“p”); 返回h2同胞元素中所有p元素。
$(“h2”).nextUntil(“h6”); 返回h2到h6的所有同胞元素。
元素的过滤
first()返回被选元素的首个元素。
last()返回被选元素的最后一个元素。
eq()返回被选元素带有指定索引号的元素。
filter()返回符合标志的元素。
例: $(“div p”).first(); 返回首个div中的第一个p元素。
$(“div p”).last(); 返回最后一个div的最后一个p元素。
$(“p”).eq(2); 返回第三个p元素,因为第一个元素的索引号是0。
$(“p”).filter(“.url”); 返回p元素中class为url的。
$(“p”).not(“.url”); 返回p元素中class不为url的。