这篇博客详细记录了JS前端学习的各个知识点，包括变量类型的判断、alert()的使用、数据类型的严格相等判断、语句末尾分号的推荐、document.write()与innerHTML的区别、CSS属性的修改、事件处理、DOM操作、jQuery的使用、Bootstrap框架的基本元素和响应式设计等。文中强调了W3C文档的重要性，并给出了实用的代码示例和技巧。
JS
***********************************
注意：不懂的可以看W3C的文档！非常重要！！
*************************************
day01 5
用typeof()可以判断某个变量的类型 有number string ...还有null undefined(声明了但未赋值)...
day01 6
alert()会停止程序的运行，点了确定以后才继续
day01 10
1 == "1" 返回true ，仅判断值
1 === "1" 返回false 还要判断数据类型
day01 15
一条语句最后可以不加分号，但是强烈建议加上。
甚至var都可以不写，但是建议写上。
document.write()就相当于把内容写在了body里面！！！，然后显示在浏览器上
另一个视频中的内容
script标签其他属性：
async="async" 立即异步下载外部js，下载完毕立即执行
defer="defer" 脚本延迟到文档完全被解析和显示后再执行，只有外部脚本可以使用。
day01 19
document.write()里面若写了一些标签，最终会出现标签的效果，因为body里面认识这些标签。
alert()若写了一些标签，就当字符串显示了，它是浏览器一级的东西，不会去解析标签。
day04 52
parseInt("24ab") 会取出24，后面不认识的就不管了
parseFloat也是类似
var s = "asd"; typeof(s) 是string
var s = new String("ghg") typeof(s) 是object
55
substr(m,n) m开始，截取n个。注意和Java substring()的区别，Java是开始位置和结束位置。
substring()方法和Java里是一样的。
*****
join() 数组到字符串
split() 字符串到数组
61 日期问题要注意
new Date("1999/9/9 6:6:6");
new Date(1999,9,9,6,6,6);
两种结果是不一样的，第一种是9月9日，第二种是10月9日（这种方法的月份是从0开始的！）
68
********
JS中对CSS属性修改，注意会把 - 当做减号！！那怎么写？
把 - 去掉，同时后面一个字母大写！如：
var obj = document.getElementById("id1");
obj.style.fontSize="60px";
obj.style.border="10px solid blue";
70
innerHTML 对象中所有的内容（文本内容和标签内容），一般用在双标签，即里面有东西的，不是<br/>这种
innerText 对象中所有的文本内容
73 onload两种写法
window.onload=init; 一般这种
<body onload="init();">
页面加载完成之后执行，可以覆盖掉一些小bug(因为页面加载完后立刻执行，之前页面上的东西肉眼看不到)
74 event
event里面有事件的相关信息！！比如事件源、事件发生在哪个位置！
e.target 可以获取事件源
怎么使用？必须以实参的形式传递给函数才能使用！
见 移动瞄准案例
76 星星案例
document.body 代表body标签对象
document.documentElement 代表html标签对象
这两个比较特殊，不用通过getElementById()来获取！！
body默认的height是0，根据你写的内容撑开。（我感觉和设置height=100%的效果一样...）
对absolute和relative的进一步认识：
若设置position:absolute ，top=0px;left=0px; 直接顶在了页面最左上角
body的外边界不起作用，因为已经从文档流拖出了。
若设置position:relative ，top=0px;left=0px; 是从body的最左上角开始的，
与页面边距还有一点距离，因为body还有一点外边界。
82
window的三个弹出框：
alert();
prompt("请输入名字","默认值"); ***不写值得到的是空字符串，点取消得到的是null***
confirm(); 弹出确认信息，可以点确认和取消，对应的是true和false
window.open :
scrollbars:是否显示滚动条
toolbar:是否显示工具栏
有些东西出于安全性不让改，比如隐藏地址栏，就算通过location隐藏了地址，还是会显示！
window.close();
*************************
为了防止恶意脚本关闭窗口，这个方法只能关闭由JS代码打开的窗口（一般情况下是关闭不了窗口的）
图片滚动的案例发现的问题：
P标签是我找了很久的比较“刚”的标签，只要设置了宽高，不管里面的文字是不够还是多出来了，大小都不变，
而诸如span、b标签等，没有内容的话就算设置了宽高也是“没有大小”，而有了内容则自适应内容，我设置了
宽高有毛用啊！div与p相似。
*****之后发现的更专业的描述：行内元素(内联元素)（span等）和块级元素（div、p等）
*****可以通过 display:block; 将行内元素转为块级元素。
display:inline-block; 转为行内块
96 Tab浏览
text-align:center 标签里面文本左右居中
line=height：20px 标签里面文本上下居中（20为标签高度）
设置div的CSS属性：
display: block 使其显示
display: none 隐藏
display: inline 一行显示
找对象方法：
document.getElementsByName()
document.getElementsByTagName()
对象.getElementsByTagName():获取该对象下面的对象
document.images:获取所有img对象
document.links:获取所有链接对象
document.forms:获取所有表单对象
document.body:body标签对象
document.documentElement:HTML标签对象
event:事件信息对象
this：当前对象
99 location
注册成功，过几秒后自动跳转！！
可以用location.replace("http://www.baidu.com");配合定时器来完成
用replace比用assign好，因为一般跳转后不让你再回来看了，而replace不会产生历史记录。
详见截图。
另外，自动跳转也可以通过meta标签实现，name="refresh" ...
106 点击消星星游戏
随机产生星星，如何给星星绑定一个点击事件？
obj.onclick=fun;
function fun(){}
108节讲怎么加进度条。
110 下拉列表功能
<iframe></iframe>
相当于在页面上挖出一块，引入一个文件，在很多页面都有相同的头部和尾部时可以使用！
<iframe src="" width="" height=""></iframe>
111 关闭广告
position一般有三种：absolute、relative、fixed
对于这种一直浮在页面某个地方的广告应该用fixed，即不管怎么下拉页面，广告的位置都不变。
112 表单验证
onsubmit="return checkForm()" checkForm()实现验证功能，通过返回true、错误返回false
这个很重要的案例写得太简单。
标签：dl、dt、dd
*******最新发现*******
JS中字符串单引号双引号都行，据说单引号更好。
JS document、element还有好多不知道的方法，如：
document.querySelector
element.addEventListener
不是W3C DOM规范的东西，据说是W3C WebAPI 规范，
详见收藏栏文档，里面有更详细的方法
********JS装B指南******
两个叹号 ！！可以强制转化为Boolean类型
!!a;
如果a是个正常的东西，则为true。
如果a是个空字符串，或者undefined，则为false。
String转为Number
+"45" +new Date()
***************************jQuery*************************
116
jQuery包含的内容：选择器、事件、DOM、动画、插件、ajax
*******查看W3C文档！！
console.log();到浏览器控制台打印
119 ******注册验证*****
对HTML属性class和CSS属性float作修改比较特殊：(因为这两个都是关键字)
class：className
float: cssFloat
参见我写了一晚上的注册验证案例：regist.html
123
对于用JQ修改CSS属性，加不加引号问题：
属性名可以不加（加也没事），但是属性值一定要加，如：
$("#div2").css({background:red}); 没有效果
$("#div2").css({background:"red"}); 有效果
$("#div2").css({border:"5px" "solid" "yellow"}); 没有效果
$("#div2").css({border:"5px solid yellow"}); 有效果
另外，这些写在head 的CSS里都不加引号。
直接写在标签的style属性里 style="..." 也不加引号，之间用分号隔开。
124 属性选择器
感觉文档写得不全，在属性前面加元素名称可以只让符合要求的该元素变化，如：
$("[style^='bor']").css({background:"blue"});
效果：让具有style属性，且style属性以bor开头的元素的背景改变。如果有一个div和一个p都满足
上述条件，则他们都会改变。
$("div[style^='bor']").css({background:"blue"});
效果：只针对div标签，其他就算有这样的style属性也不会变。
126 对元素属性读和写
$("input").attr("value") 获取input元素的value属性(注意value加括号)
$("input").attr("value","abc") 设置input元素的value属性（value、abc加括号）
设置多个属性（键值对的方式）：
$("input").attr({"value":"点击","type":"text"});
$("input").attr({value:"abc"}); 很奇怪的是，这个时候value可以不加（也可以加），但abc得加，
我觉得这可能也算JS不严谨的地方。
另外，也可通过函数返回的方式设置属性
$("input").attr("value",function (){return "abc"});
127 css类 （属性操作的一种，其实就是对class属性的操作）
128
元素.html(); 获取元素下所有html内容，相当于innerHTML。 也能够设置，元素.html(...)
元素.text(); 获取元素下的文本内容，相当于innerText
text()不识别标签，当成字符处理，而html()识别
DOM操作
131
把p标签插入到div里面（会插入到最后）
$("div").append($("<p>段落</p>")); 这样是先创建了一个p标签再插进去
若之前就存在一个p标签，则：
$("div").append($("p")); 也可以把p插入到div里面
包裹：普通包裹、所有一次性包裹、内部包裹
替换：
删除：empty() 删除的是内容
remove() 删除的是整个标签
复制：
137 事件处理
*****事件绑定是重点！！******
可以绑定多个事件
bind({"mouseover":function (){
.....
},"mouseout":function (){
......
}})；
另外补充：
若不使用JQ，给一标签加onclick,除了最原始的在标签里写onclick属性外，还能：
btn.onclick = function (){
alert("123");
};
但下面这种不行：
btn.onclick(function (){
alert(123);
});
去掉on倒是JQ的使用方法
on/off 绑定/解绑 和上面的bind差不多
one也可以绑定事件，但只执行一次
*******动画********
显示/隐藏
show(3000,fun) 显示，3秒完成显示，然后执行fun
hide(5000,fun) 隐藏，5秒完成隐藏，然后执行fun
toggle() 在show和hide之间切换
滑动...
淡入淡出...
动画案例：
发现的问题，当需要使用当前对象时，用$(this)，别加引号！！
“筛选”里面的一些方法感觉还挺好用的，视频中是先用parent()找到父节点，再用
find("dd")找到dt后面的dd元素。我是直接用$(this).nextAll()找到dt后面的dd元素，更简单。
**********************bootstrap*************************
2
实际开发中更多是通过CDN方式引入js等文件
3
布局容器
.container 固定某个宽度
.container-fluid 100%宽度，占据全部视口（viewport）
4 ******栅格系统******很重要*******
*****bootstrap文档可以直接看中文官网 bootcss.com 非常详细非常好****
最多承载12列，多了往下一行挪
[class^="col"] CSS属性选择器（感觉和JQ一样），选择属性class以 col 开头的。
col-md-? 想要占几列
col-xs-? 手机屏
---------------------排版---------------------
标题：
<h>标签更好看，<small>可以加副标题
内联文本元素：
<mark>可以使文本高亮
<del>使文本显示被划掉的状态 <s>标签作用一样
<ins>添加下划线 和<u>作用一样
<small>标签 把里面的字体改为父容器的85%
<strong>加粗强调
对齐：
...
改变大小写：
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p> 首字母大写
缩略语：
<abbr title="attribute">attr</abbr>
地址：
<address>
引用：
<blockquote>
<footer> 标明引用来源 ，来源名称包在<cite>标签中
列表：
无序列表 <ul>,<li> 比原生<ul>,<li>更美观
有序列表 <ol>,<li> 同样是更好看了
无样式 class="list-unstyled" 把列表前面的点和缩进去掉了
内联列表：
class="list-inline"
---------------------代码---------------------
内联代码：
<code> 里面一般放代码，如html标签，会有粉红色的背景
用户输入：
<kbd> 黑色背景，类似键盘的效果
代码块（多行代码）：
<pre> 里面放代码，别忘了对尖括号等转义
优快云等论坛、博客里面插入的代码就是类似这样的效果
变量、公式
<var> 会变成比较符合数学公式的斜体
程度输出：
<samp> 没有特别明显的效果，可能字体好看一些
---------------------表格---------------------
给表格加“斑马线”
在table的class属性后加上 "table-striped" 如：
注意：后一种class会把前一种class重复的覆盖掉，如果后一种没重复，则前一种效果还在（记住依次解析就行）
<table class="table table-striped">
<thead>
<tr>
<th>表格标题</th>
<th>表格标题</th>
<th>表格标题</th>
</tr>
</thead>
<tbody>
<tr>
<td>表格内容<td>
<td>表格内容<td>
<td>表格内容<td>
</tr>
</tbody>
</table>
给表格加边框：
在class里面继续添加.table-bordered 类即可
鼠标悬停效果：
在class里面继续添加.table-hover 类即可
这样鼠标放到哪一行上会有相应变化
紧缩表格：
在class里面继续添加.table-condensed 类即可，感觉就是行距变小了。
状态类：
不同状态为行或单元格设置不同的颜色
响应式表格：
响应式：网站能够兼容多种终端。
需添加这个标签（其实一直都在的，这是响应式的必备）：
<meta name="viewport" content="width=device-width, initial-scale=1">
然后把整个表格放到
<div class="table-responesive"></div> 中。
-------------------表单-----------------------
基本表单详见 form.html 确实样式更好看了
一定要添加label标签
内联表单：
<form class="form-inline">....
这样输入项名和输入框就在一行了。
水平排列的表单：
为表单添加 .form-horizontal 类，并联合使用栅格类，可以将 label 标签和控件组水平并排布局。
被支持的控件、静态控件...
焦点状态：
在class中添加focus
禁用状态：
在input中添加disabled属性
只读状态：
readonly属性
校验状态：
还能添加额外的图标，比如一个小对勾
--------------------------按钮--------------------------
可作为按钮使用的标签或元素
<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">
预定义样式：
default- 白色
success- 绿色
danger- 红色 等等
按钮尺寸也是能变的，在class里面继续添加类就行，感觉Bootstrap就是这种实现模式，在class里面加入
新的类可以实现某种样式。
激活状态和禁用状态
-------------------------图片---------------------
为图片添加 .img-responsisve 类让图片支持响应式布局
-------------------------响应式工具-------------
当屏幕为某个大小范围时，可以让内容显示或隐藏
---------------辅助类------------
关闭符号、三角符号、浮动、清除浮动、显示或隐藏内容
---------------组件---------------------
图标、下拉菜单
***导航、导航条****
最近更新的东西，可以用标签，显示“new”
有未读消息，比如手机微信图标显示的那种，可以用“徽章”
进度条
******************2048*****************
JQ页面载入完就立刻执行的函数：
$(function (){}); 相当于是ready的简写
关于absolute和relative，终于找到了比较正确的解释：
https://www.douban.com/group/topic/64141622/
$("<div></div>") 可以创建出一个div
***********************************
注意：不懂的可以看W3C的文档！非常重要！！
*************************************
day01 5
用typeof()可以判断某个变量的类型 有number string ...还有null undefined(声明了但未赋值)...
day01 6
alert()会停止程序的运行，点了确定以后才继续
day01 10
1 == "1" 返回true ，仅判断值
1 === "1" 返回false 还要判断数据类型
day01 15
一条语句最后可以不加分号，但是强烈建议加上。
甚至var都可以不写，但是建议写上。
document.write()就相当于把内容写在了body里面！！！，然后显示在浏览器上
另一个视频中的内容
script标签其他属性：
async="async" 立即异步下载外部js，下载完毕立即执行
defer="defer" 脚本延迟到文档完全被解析和显示后再执行，只有外部脚本可以使用。
day01 19
document.write()里面若写了一些标签，最终会出现标签的效果，因为body里面认识这些标签。
alert()若写了一些标签，就当字符串显示了，它是浏览器一级的东西，不会去解析标签。
day04 52
parseInt("24ab") 会取出24，后面不认识的就不管了
parseFloat也是类似
var s = "asd"; typeof(s) 是string
var s = new String("ghg") typeof(s) 是object
55
substr(m,n) m开始，截取n个。注意和Java substring()的区别，Java是开始位置和结束位置。
substring()方法和Java里是一样的。
*****
join() 数组到字符串
split() 字符串到数组
61 日期问题要注意
new Date("1999/9/9 6:6:6");
new Date(1999,9,9,6,6,6);
两种结果是不一样的，第一种是9月9日，第二种是10月9日（这种方法的月份是从0开始的！）
68
********
JS中对CSS属性修改，注意会把 - 当做减号！！那怎么写？
把 - 去掉，同时后面一个字母大写！如：
var obj = document.getElementById("id1");
obj.style.fontSize="60px";
obj.style.border="10px solid blue";
70
innerHTML 对象中所有的内容（文本内容和标签内容），一般用在双标签，即里面有东西的，不是<br/>这种
innerText 对象中所有的文本内容
73 onload两种写法
window.onload=init; 一般这种
<body onload="init();">
页面加载完成之后执行，可以覆盖掉一些小bug(因为页面加载完后立刻执行，之前页面上的东西肉眼看不到)
74 event
event里面有事件的相关信息！！比如事件源、事件发生在哪个位置！
e.target 可以获取事件源
怎么使用？必须以实参的形式传递给函数才能使用！
见 移动瞄准案例
76 星星案例
document.body 代表body标签对象
document.documentElement 代表html标签对象
这两个比较特殊，不用通过getElementById()来获取！！
body默认的height是0，根据你写的内容撑开。（我感觉和设置height=100%的效果一样...）
对absolute和relative的进一步认识：
若设置position:absolute ，top=0px;left=0px; 直接顶在了页面最左上角
body的外边界不起作用，因为已经从文档流拖出了。
若设置position:relative ，top=0px;left=0px; 是从body的最左上角开始的，
与页面边距还有一点距离，因为body还有一点外边界。
82
window的三个弹出框：
alert();
prompt("请输入名字","默认值"); ***不写值得到的是空字符串，点取消得到的是null***
confirm(); 弹出确认信息，可以点确认和取消，对应的是true和false
window.open :
scrollbars:是否显示滚动条
toolbar:是否显示工具栏
有些东西出于安全性不让改，比如隐藏地址栏，就算通过location隐藏了地址，还是会显示！
window.close();
*************************
为了防止恶意脚本关闭窗口，这个方法只能关闭由JS代码打开的窗口（一般情况下是关闭不了窗口的）
图片滚动的案例发现的问题：
P标签是我找了很久的比较“刚”的标签，只要设置了宽高，不管里面的文字是不够还是多出来了，大小都不变，
而诸如span、b标签等，没有内容的话就算设置了宽高也是“没有大小”，而有了内容则自适应内容，我设置了
宽高有毛用啊！div与p相似。
*****之后发现的更专业的描述：行内元素(内联元素)（span等）和块级元素（div、p等）
*****可以通过 display:block; 将行内元素转为块级元素。
display:inline-block; 转为行内块
96 Tab浏览
text-align:center 标签里面文本左右居中
line=height：20px 标签里面文本上下居中（20为标签高度）
设置div的CSS属性：
display: block 使其显示
display: none 隐藏
display: inline 一行显示
找对象方法：
document.getElementsByName()
document.getElementsByTagName()
对象.getElementsByTagName():获取该对象下面的对象
document.images:获取所有img对象
document.links:获取所有链接对象
document.forms:获取所有表单对象
document.body:body标签对象
document.documentElement:HTML标签对象
event:事件信息对象
this：当前对象
99 location
注册成功，过几秒后自动跳转！！
可以用location.replace("http://www.baidu.com");配合定时器来完成
用replace比用assign好，因为一般跳转后不让你再回来看了，而replace不会产生历史记录。
详见截图。
另外，自动跳转也可以通过meta标签实现，name="refresh" ...
106 点击消星星游戏
随机产生星星，如何给星星绑定一个点击事件？
obj.onclick=fun;
function fun(){}
108节讲怎么加进度条。
110 下拉列表功能
<iframe></iframe>
相当于在页面上挖出一块，引入一个文件，在很多页面都有相同的头部和尾部时可以使用！
<iframe src="" width="" height=""></iframe>
111 关闭广告
position一般有三种：absolute、relative、fixed
对于这种一直浮在页面某个地方的广告应该用fixed，即不管怎么下拉页面，广告的位置都不变。
112 表单验证
onsubmit="return checkForm()" checkForm()实现验证功能，通过返回true、错误返回false
这个很重要的案例写得太简单。
标签：dl、dt、dd
*******最新发现*******
JS中字符串单引号双引号都行，据说单引号更好。
JS document、element还有好多不知道的方法，如：
document.querySelector
element.addEventListener
不是W3C DOM规范的东西，据说是W3C WebAPI 规范，
详见收藏栏文档，里面有更详细的方法
********JS装B指南******
两个叹号 ！！可以强制转化为Boolean类型
!!a;
如果a是个正常的东西，则为true。
如果a是个空字符串，或者undefined，则为false。
String转为Number
+"45" +new Date()
***************************jQuery*************************
116
jQuery包含的内容：选择器、事件、DOM、动画、插件、ajax
*******查看W3C文档！！
console.log();到浏览器控制台打印
119 ******注册验证*****
对HTML属性class和CSS属性float作修改比较特殊：(因为这两个都是关键字)
class：className
float: cssFloat
参见我写了一晚上的注册验证案例：regist.html
123
对于用JQ修改CSS属性，加不加引号问题：
属性名可以不加（加也没事），但是属性值一定要加，如：
$("#div2").css({background:red}); 没有效果
$("#div2").css({background:"red"}); 有效果
$("#div2").css({border:"5px" "solid" "yellow"}); 没有效果
$("#div2").css({border:"5px solid yellow"}); 有效果
另外，这些写在head 的CSS里都不加引号。
直接写在标签的style属性里 style="..." 也不加引号，之间用分号隔开。
124 属性选择器
感觉文档写得不全，在属性前面加元素名称可以只让符合要求的该元素变化，如：
$("[style^='bor']").css({background:"blue"});
效果：让具有style属性，且style属性以bor开头的元素的背景改变。如果有一个div和一个p都满足
上述条件，则他们都会改变。
$("div[style^='bor']").css({background:"blue"});
效果：只针对div标签，其他就算有这样的style属性也不会变。
126 对元素属性读和写
$("input").attr("value") 获取input元素的value属性(注意value加括号)
$("input").attr("value","abc") 设置input元素的value属性（value、abc加括号）
设置多个属性（键值对的方式）：
$("input").attr({"value":"点击","type":"text"});
$("input").attr({value:"abc"}); 很奇怪的是，这个时候value可以不加（也可以加），但abc得加，
我觉得这可能也算JS不严谨的地方。
另外，也可通过函数返回的方式设置属性
$("input").attr("value",function (){return "abc"});
127 css类 （属性操作的一种，其实就是对class属性的操作）
128
元素.html(); 获取元素下所有html内容，相当于innerHTML。 也能够设置，元素.html(...)
元素.text(); 获取元素下的文本内容，相当于innerText
text()不识别标签，当成字符处理，而html()识别
DOM操作
131
把p标签插入到div里面（会插入到最后）
$("div").append($("<p>段落</p>")); 这样是先创建了一个p标签再插进去
若之前就存在一个p标签，则：
$("div").append($("p")); 也可以把p插入到div里面
包裹：普通包裹、所有一次性包裹、内部包裹
替换：
删除：empty() 删除的是内容
remove() 删除的是整个标签
复制：
137 事件处理
*****事件绑定是重点！！******
可以绑定多个事件
bind({"mouseover":function (){
.....
},"mouseout":function (){
......
}})；
另外补充：
若不使用JQ，给一标签加onclick,除了最原始的在标签里写onclick属性外，还能：
btn.onclick = function (){
alert("123");
};
但下面这种不行：
btn.onclick(function (){
alert(123);
});
去掉on倒是JQ的使用方法
on/off 绑定/解绑 和上面的bind差不多
one也可以绑定事件，但只执行一次
*******动画********
显示/隐藏
show(3000,fun) 显示，3秒完成显示，然后执行fun
hide(5000,fun) 隐藏，5秒完成隐藏，然后执行fun
toggle() 在show和hide之间切换
滑动...
淡入淡出...
动画案例：
发现的问题，当需要使用当前对象时，用$(this)，别加引号！！
“筛选”里面的一些方法感觉还挺好用的，视频中是先用parent()找到父节点，再用
find("dd")找到dt后面的dd元素。我是直接用$(this).nextAll()找到dt后面的dd元素，更简单。
**********************bootstrap*************************
2
实际开发中更多是通过CDN方式引入js等文件
3
布局容器
.container 固定某个宽度
.container-fluid 100%宽度，占据全部视口（viewport）
4 ******栅格系统******很重要*******
*****bootstrap文档可以直接看中文官网 bootcss.com 非常详细非常好****
最多承载12列，多了往下一行挪
[class^="col"] CSS属性选择器（感觉和JQ一样），选择属性class以 col 开头的。
col-md-? 想要占几列
col-xs-? 手机屏
---------------------排版---------------------
标题：
<h>标签更好看，<small>可以加副标题
内联文本元素：
<mark>可以使文本高亮
<del>使文本显示被划掉的状态 <s>标签作用一样
<ins>添加下划线 和<u>作用一样
<small>标签 把里面的字体改为父容器的85%
<strong>加粗强调
对齐：
...
改变大小写：
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p> 首字母大写
缩略语：
<abbr title="attribute">attr</abbr>
地址：
<address>
引用：
<blockquote>
<footer> 标明引用来源 ，来源名称包在<cite>标签中
列表：
无序列表 <ul>,<li> 比原生<ul>,<li>更美观
有序列表 <ol>,<li> 同样是更好看了
无样式 class="list-unstyled" 把列表前面的点和缩进去掉了
内联列表：
class="list-inline"
---------------------代码---------------------
内联代码：
<code> 里面一般放代码，如html标签，会有粉红色的背景
用户输入：
<kbd> 黑色背景，类似键盘的效果
代码块（多行代码）：
<pre> 里面放代码，别忘了对尖括号等转义
优快云等论坛、博客里面插入的代码就是类似这样的效果
变量、公式
<var> 会变成比较符合数学公式的斜体
程度输出：
<samp> 没有特别明显的效果，可能字体好看一些
---------------------表格---------------------
给表格加“斑马线”
在table的class属性后加上 "table-striped" 如：
注意：后一种class会把前一种class重复的覆盖掉，如果后一种没重复，则前一种效果还在（记住依次解析就行）
<table class="table table-striped">
<thead>
<tr>
<th>表格标题</th>
<th>表格标题</th>
<th>表格标题</th>
</tr>
</thead>
<tbody>
<tr>
<td>表格内容<td>
<td>表格内容<td>
<td>表格内容<td>
</tr>
</tbody>
</table>
给表格加边框：
在class里面继续添加.table-bordered 类即可
鼠标悬停效果：
在class里面继续添加.table-hover 类即可
这样鼠标放到哪一行上会有相应变化
紧缩表格：
在class里面继续添加.table-condensed 类即可，感觉就是行距变小了。
状态类：
不同状态为行或单元格设置不同的颜色
响应式表格：
响应式：网站能够兼容多种终端。
需添加这个标签（其实一直都在的，这是响应式的必备）：
<meta name="viewport" content="width=device-width, initial-scale=1">
然后把整个表格放到
<div class="table-responesive"></div> 中。
-------------------表单-----------------------
基本表单详见 form.html 确实样式更好看了
一定要添加label标签
内联表单：
<form class="form-inline">....
这样输入项名和输入框就在一行了。
水平排列的表单：
为表单添加 .form-horizontal 类，并联合使用栅格类，可以将 label 标签和控件组水平并排布局。
被支持的控件、静态控件...
焦点状态：
在class中添加focus
禁用状态：
在input中添加disabled属性
只读状态：
readonly属性
校验状态：
还能添加额外的图标，比如一个小对勾
--------------------------按钮--------------------------
可作为按钮使用的标签或元素
<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">
预定义样式：
default- 白色
success- 绿色
danger- 红色 等等
按钮尺寸也是能变的，在class里面继续添加类就行，感觉Bootstrap就是这种实现模式，在class里面加入
新的类可以实现某种样式。
激活状态和禁用状态
-------------------------图片---------------------
为图片添加 .img-responsisve 类让图片支持响应式布局
-------------------------响应式工具-------------
当屏幕为某个大小范围时，可以让内容显示或隐藏
---------------辅助类------------
关闭符号、三角符号、浮动、清除浮动、显示或隐藏内容
---------------组件---------------------
图标、下拉菜单
***导航、导航条****
最近更新的东西，可以用标签，显示“new”
有未读消息，比如手机微信图标显示的那种，可以用“徽章”
进度条
******************2048*****************
JQ页面载入完就立刻执行的函数：
$(function (){}); 相当于是ready的简写
关于absolute和relative，终于找到了比较正确的解释：
https://www.douban.com/group/topic/64141622/
$("<div></div>") 可以创建出一个div
扫一扫
702
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
