JQuery+Bootstrap一揽子方案

JQuery1

一、介绍Jquery是对javascript封装的一个框架包

jquery可以通过非常简短、简洁的代码，实现与javascript相同的功能

Jquery的本质还是javascript，Javascript里边95以上的功能都有被jquery给封装好，例如对dom、事件、ajax等都有封装，如果是javascript是布料，那么jquery就是成品的衣服 

2. 宗旨：写得更少，做得更多http://jquery.com  官方网址

3. 其他相关的javascript框架包

比较著名的有 Prototype、YUI、jQuery、mootools、Bindows、extjs以及国内的 JSVM 框架等

可以深入学习的有：YUI(yahoo user interface雅虎用户接口)、extjs

3.1 如何封装

function R(){return document.getElementById(id)} -->R(”biaoti”).style.color=”green”;

3.2 使用jquery 

下载了两个形式的同一个版本的jquery：①压缩的生产版本、②未压缩的开发调试版本。使用3步骤：

1. 把jquery文件放到应用目录， 2、在应用程序文件中对jquery进行引入：

<script type=”text/javascript”src=”./jquery-3.1.1.js”></script>

3、Jquery具体的应用：${#biaoti}.css(‘color’,’blue’);//使用前需先加载页面，

注意：在应用程序文件中一定通过<script>标记对jquery进行引入：

未引入成功提示：Uncaught ReferenceError: $ is not defined(…)

二、选择器

什么是选择器：获得页面元素节点所使用的方法就是选择器

元素节点：<div>  <p>  <ul>  <li>等等都是元素节点

例如javascript之前使用的：

document.getElementById()

document.getElementsByTagName();

document.getElementsByName();

1. 基本

可以通过id属性、class属性、标签名称等方式获得页面元素节点

1.  $(‘#id属性值’);② $(‘.class属性值’);③ $(‘标签名称’); ④ $(‘*’);  通配符选择器，获得页面上全部的节点
2. ⑤ $(‘s1,s2,s3..’);  联合选择器s:selector选择器意思

   s1,s2,s3代表具体上边学习的 id、class、标签选择器之一

作用：把符合s1/s2/s3特点的节点都给获得到

以上①~⑤选择器的灵感来之css样式选择器 

调用方法css()可以对元素的样式进行设置

css(样式名称,值);

样式名称：color  background-color  width height等等css样式名称

基本选择器具体使用：

$(‘#weather’).css(‘color’,’red’);

$(‘h2,.apple’).css(‘background-color’,’pink’);获得h2和class为apple两个节点并设置样式.

1. 层级

2.1 $(‘s1  s2’)--父子关系

s: selector选择器，具体可以是 id、class、标签名称等选择器-例如：？$(‘div  #one’)  $(‘div  span’)

$(‘s1 s2’):获得s1内部全部的s2节点，不用考虑级别,又称作“派生选择器”

2.2 $(‘s1 > s2’)--父子关系

$(‘s1 > s2’):获得s1内部的s2节点，且s1和s2必须是父子级关系，称作“直接子元素选择器” $(‘div > span’)

2.3 $(‘s1 + s2’)--兄弟关系

$(‘s1 + s2’): 获得s1后边紧紧挨着的第一个s2兄弟关系节点--应用：$(‘div + span’)

2.4 $(‘s1 ~ s2’)--兄弟关系

$(‘s1 ~ s2’): 获得s1后边所有s2兄弟关系节点--应用：$(‘div ~ span’)

1. 并且选择器

要通过“并且选择器”获得制定的li出来

并且选择器的具体使用

:first  :last    //获得第一个或最后一个元素

:odd    :even    //获得下标(全部元素下标从0开始计数)为奇数、偶数的元素

:eq(下标)  //equal等于下标-:gt(下标) //great than 比当前下标大-:lt(下标) //less than 比当前下标小 ,

$(‘:first’)  获得页面全部节点的第一个元素节点[ 不推荐直接使用 ]

1. 3.1简单使用  $(‘li:first’).css(‘color’,’blue’);$(‘li:eq(4)’).css(‘color’,’red’)
    

3.2 高级使用

1)普通选择器的并且关系

并且选择器： :first  :last  :eq  :gt  :lt  :odd  :even

普通选择器(id class 标签名称等等)也可以构成是并且关系$(‘li:first’);  -----> $(‘s1s2’);

$(‘s1s2s3s4..’); s1~s4共同限制获得的元素节点,元素节点必须同时满足s1~s4的全部条件

$(‘s1,s2,s3,s4’); 基本选择器里边有联合选择器,获得的节点只要符合s1~s4其中的一个条件即可

注意：并且选择器，各个小的选择器没有前后顺序要求，使用不要产生歧义

例如     $(‘:firstli’);  产生歧义     $(‘li:first’)没有歧义

2) 匹配节点的下标计数

多个选择器通过并且关系获得节点的时候，每个选择器应用的时候，都对已经获得节点的下标进行“归位(零)”处理---?

1. 内容过滤选择器

4.1 :contains(text)---用法:匹配包含给定文本的元素

$(‘div:contains(banana)’);  //获得div并且要求内部包含banana文本

<div>monkey like banana</div>

<div>dog like pear</div>
4.2 :empty用法: $(”td:empty”)匹配所有不包含子元素或者文本的空元素(元素内部没有空白、元素、文本)

$(‘div:empty’);  //获得div元素 并且要求是空元素

4.3 :has(selector)匹配含有选择器(selector)所匹配的元素的元素

$(‘div:has(span)’);  //获得一个含有span标签元素的元素

4.4 :parent

    用法: $(”td:parent”)匹配含有子元素或者文本的元素,即匹配其下非空元素

$(‘div:parent’);     //获得div，并且div非空

1. 表单域选中

复选框、单选按钮、下来列表 都可以被选中

① 复选框、单选按钮-获得选中的表单域-:checked② 下拉列表:selected

表单域选中选择器使用：console.log($());

使用效果：

三．属性attribute操作

jquery对元素属性的相关操作

<input  type=”text” name=”username” id=”username” class=”apple” value=”xiaoming” >

以上红色部分都是input框元素对象的属性

input、div、span、p、table等等html标签都是元素对象或元素节点 

操作:$().attr(name);//获得name(属性名称的代表)属性

$().attr(name,value);//修改name属性值为value---$().removeAttr(name);//删除name属性

例1：$(‘input:first’).attr(‘name’);获得input元素节点的属性信息：

例2：$(‘input:first’).removeAttr(‘name’);

四．快捷操作

1. class属性值操作

<div class=”apple”></div>

类似操作：

$().attr(‘class’);

$().attr(‘class’,’pear’);  //同一时刻只能设置一个值

$().removeAttr(‘class’);  //直接删除class属性

class属性值的快捷操作：

$().addClass();      //给class属性添加属性值(可以同时设置多个值)

$().removeClass();   //删除class属性的具体属性值(可删其中的一个或多个，并保留其他的class属性值)

$().toggleClass();   //切换属性值，有则删除、没有就添加

例:1先在css提供class类：.apple{color:red}2然后在js中加入这个类$(‘div’).addClass(‘apple’);

相对应的attr()方法使用多次，后者会覆盖前者，而使用addClass()则累加而不覆盖。

1. css()  

通过css()方法对元素节点的样式进行操作

具体使用：

$().css(name); //Jq中获取指定的css样式---document.getElementById().style.名称;  //JS中获取操作

$().css(name,value);//Jq中设置css样式---document.getElementById().style.名称 = 值；//JS中设置操作

2.1 获取css样式

样式的设置有3种方式：① 行内<div style=’color:green’></div>②内部div{background-color:pink}

③外部<link href=”./14.css”rel=”stylesheet”type=”text/css”/>

2.2 Jquery设置css样式

① 样式统一设置为行内样式，② 如果存在同名的样式，分优先级显示(行内>>> 内部 >>>外部)

③ 在行内样式里边存在修改的样式，就直接修改，如果没有就添加一个新样式

④ 复合样式(border background margin padding等)可以直接设置

例:对div元素的css样式设置$(‘div’).css(‘width’,‘400px’);新样式直接添加，优先级高于内部样式

2.3 css()样式操作特点：

① 样式获取，jquery可以获取 行内、内部、外部的样式。但dom方式只能获得行内样式

② 获取“ 复合属性样式” 需要拆分为" 具体样式 "才可以操作，(有的浏览器是可以获得复合属性信息的，

例如chrome)例如：background 需要拆分为  background-color background-image 等进行操作

1. 样式会被设置为“行内样式”，有则修改，无则添加，(复合属性样式可直接进行设置，无需拆分为具体样式)

1. html()/text()

html()和text()都可以对标签包含的内容进行操作

<div>xxxxxxxxxxxxx</div>

具体使用：

$().html()      //获得标签包含内容---$().html(yyyyy)//设置标签包含“参数”内容

$().text()     //获得标签包含内容---$().text(zzzzz) //设置标签包含“参数”内容

html() 可以获取文本和html标签内容，例如可以用html()直接设置链接

text()方法只能获得文本内容(过滤html标签)

通过html()方法对div包含的内容进行修改设置：

$(‘div’).html(“欢迎访问<a href=’https://www.baidu.com’>百度</a>百度官网”);

结论：html()方法可以同时针对文本和html标签进行设置，并且设置好的html标签可以被浏览器解析使用

4.val()      

该val的全拼是value，可以对元素标签的value属性值进行操作，大多数情况是用在form的表单域设置

类似操作有：$().attr(‘value’);---$().attr(‘value’,xxx);

attr()和val()方法在某些方面操作的结果完全一致

val()方法具体使用：$().val();//获得元素节点的value属性值--$().val(值);//设置元素节点的value属性值

4.1 下拉列表

① 获得选中项目的value值

注意：上图的第一种获得选中项目的value值，一定要找到select框节点(例如 $(‘#xueli’).val());

1.  设置哪个项目选中,给下拉列表设置具体哪个项目应该选中

$(下拉列表选择器).val([被选中项目的value值]);  //val()内部是一个数组参数

例如$(‘#xueli’).val([3]);  //就会使得“高中”项目选中

4.2 单选框/复选框

① 获得选中项目的value值        console.log($(‘.sex:checked’).val());

1.  设置哪个项目选中$(全部的下拉列表).val([被选中项目的value值]); //通过“数组”参数进行设置

虽然每次只能使得一个单选按钮选中，但是val内部也需要通过数组设置参数

<input type=”radio”class=”sex”value=”男”>男---function(){$(.sex).val([‘男’]);}结果选中男

五．jquery对象和dom对象

 JQuery2

一．jquery对象和dom对象关系

dom 对象：

① document.getElementById();

② document.getElementsByTagName();

③ document.getElementsByName();

以上三个表达式创建出来的内容就是 dom 对象

其中②、③表达式创建的内容是集合 / 数组内容，要通过 [ 下标 ] 方式给转为具体 dom 对象

dom 对象可以调用如下方法或属性： dom 对象 .innerHTML;---dom 对象 .getAttribute();---dom 对象 .childNodes;……

jquery 对象： 通过各种选择器 (id class  tag 标签   层次   内容过滤 等等 ) 创建出来的内容就是 jquery 对象

例如： $(#id)  $(.class)  $(tag 标签 ) 等等内容都是 jquery 对象

jquery 对象可以调用的方法或属性： jquery 对象 .css();-- jquery 对象 .html();-- jquery 对象 .text();-- jquery 对象 .val();

jquery 是对 javascript 封装的一个框架包

给我们直观感觉 $(#id) 就是对 dom 对象 document.getElemntById() 等 封装

               $(tag 标签 )  就是对 dom 对象 document.getElementsByTagName() 的封装

它们的具体关系为：

jquery 对象可以变为 dom 对象： $( 选择器 )[ 下标 ]

dom 对象可以变为 jquery 对象： $(dom 对象 )

dom 对象具体展示： console.log(document.getElementById('biaoti'));

//<h2 id="biaoti">jquery 对象和 dom 对象关系 </h2>

jquery 对象展示： console.log($('#biaoti'));//[h2#biaoti] ， jquery 对象里边包含了 dom 对象：

jquery 对象和 dom 对象的成员不能直接调用：

jquery 对象变 dom 对象 --console.log($('#biaoti')[0]);--<h2 id="biaoti">jquery 对象和 dom 对象关系 </h2>

dom 对象变 jquery 对象 --console.log($(document.getElementById('biaoti'))); -[h2#biaoti]

jquery 对象和 dom 对象转换完毕，就可以调用对方的成员：

$('#biaoti')[0].style.color = "red";//jquery 对象变为 dom 对象，进而调用 dom 的成员

$(document.getElementById('biaoti')).css('background-color','lightblue'); //dom 对象 变为 jquery 对象，进而调用 jquery 对象 的成员

如果有的 jquery 对象包括多个 dom 对象如： <ul><li></li><li></li><li></li><li></li></ul>,$(‘li’)[0/1/2];

注意：只有具体的 一个 dom 对象 ，可以变为 jquery 对象

二．加载事件

<body οnlοad=” 函数名称 ”>

js 的加载事件： window.onload = 函数 ;

javascript 在执行的时候，需要 html 代码的支持，因此需要先让 html 代码执行， js 代码后执行，如何保证 js 代码后执行呢，就需要通过加载事件

jquery 对加载事件的封装：① $(document).ready(function(){}); ② $().ready(function(){}); ③ $(function(){}); 其中③是对①和 ② 的封装

例： $(function(){ $('#biaoti').css('border','2px solid green'); });// 可用三种加载事件

2.jquery加载事件与js的不同

js 的加载事件： window.onload = 函数 ;

具体不同：① 使用个数不同 -- 在同一个请求中， jquery 的加载事件可以同时设置多个， js 中只能设置一个 ( 多次设置后者覆盖前者 )

② 执行时机不同， jquery 的加载事件执行时机更靠前，传统 onload 加载事件，全部内容在浏览器中显示出来才执行， jquery 加载事件是全部内容在电脑内存中绘制完毕就要执行

3. jquery加载事件原理(了解)

jquery 加载事件并不是对 onload 事件的封装，而是对 DOMContentLoaded 事件 的封装

利用 DOMContentLoaded ，模拟 jquery 加载事件 document.addEventListener( ‘ DOMContentLoaded ’ ,function(){alert(6789)});

三．普通事件

jquery 中如何封装普通事件的触发使用

具体的普通事件有 : onclick  onmouseover onmouseout  onkeyup  onkeydown  onfocus  onblur 等

js 中事件 :1 <input type=”text” οnclick=” 函数名称 ()”>,2dom 对象 (input 的 ).οnclick= 函数名称 ;

jquery 中事件设置： $().click(function(){ 事件触发过程 });$().blur(function(){ 事件触发过程 });

在事件的触发过程中，可以使用 this 关键字，其代表触发该事件的 dom 对象

$().click(function(){this});// this 关键字代表当前事件执行者对应的 dom 对象

事件设置的时候，也可以不加参数 ( 了解 ) 例如： $().click();  $().blur() 

$(function(){$('h2').click(function(){console.log(this);

     $(this).css('background-color','pink'); });  });

四．动画效果

1.简单动画

$().show([ 参数 , 函数 ]); 显示元素 - 参数：动画执行的时间，单位是毫秒值 -- 例： $('div').hide(3000);

$().hide([ 参数 , 函数 ]); 隐藏元素 - 函数：动画执行完毕后，该函数会被自动调用，因此也称该函数为回调函数

$().toggle();   切换显示状态，可以多次使用，切换显示状态会判断，如果显示就隐藏，如果隐藏就显示

参数和函数可以不设置，那么该动画效果执行的速度 非常快  

hide() 和 show() 方法 - 本质就是设置 css 样式 display:none/display:block

带 回调函数 的使用：

2.垂直动画

垂直动画：沿着 垂直 的方向是的元素隐藏 / 显示的效果 , 以顶部为基准

$().slideDown([ 参数，函数 ]); 显示 display:block----->height 变大

$().slideUp([ 参数，函数 ]);   隐藏 height 变小 ----->display:none//$('div').slideUp(4000);

$().slideToggle( 时间参数 );    可以多次执行，切换隐藏、显示效果

参数和函数可以不设置，那么该动画效果执行会保持一个 默认 速度 --- $('div').slideUp()

3.颜色渐变动画

通过元素透明度的变化实现隐藏、显示效果，函数不设置，动画效果 默认 速度执行。

$().fadeOut([ 参数，函数 ])   隐藏 opacity 变小 ----->display:none

$().fadeIn([ 参数，函数 ])    显示 display ： block---->opacity 变大

$().fadeToggle([ 参数，函数 ])  切换

$().fadeTo( 时间 , 透明度 (0-1), 函数 ) // 可设置元素透明度

例： $(function(){$('#two').fadeTo(3000,0.4);});

五.each遍历方法

遍历：沿着某一个顺序，对数组中的元素做一次且仅做一次方法

1. each遍历方法使用

$( 多个 dom 对象 ).each(function( 参数 1 ，参数 2){}); // 就是要对每个 dom 对象都进行一次访问

参数 1 ：代表每个 dom 对象的下标，从 0 开始，参数 2 ：代表被遍历的每个 ”dom 对象 ”

给 each 方法中的每个 dom 对象分别设置 css 样式：

$('li').each(function(i,v){ $(v).css('background-color','pink');});

六．jquery插件

什么是jquery插件

jquery 在使用的过程中，可以调用许多方法，例如 css() addClass()  removeClass()  html()  text()  val() each() 等等 , 但是方法的数量终归是有限制的，其不能无限任意满足我们对各种方法的需求，那么我们根据实际需求，灵活地在 jquery 的基础之上增加一些方法的过程，就是 jquery 插件的开发。

增加方法：$.fn.方法名称 = 值(函数);//被增加的方法要在使用之前就设置好

给 jquery 增加一个 setmystyle() 方法，是的对象调用可以设置颜色和背景色效果：

        <script type="text/javascript">// 给 jquery 增加一个 setmystyle 的方法

           $.fn.setmystyle = function(){ $('h2').css('color','blue'); }

        </script>

        <script type="text/javascript">function f1(){$('h2').setmystyle();}</script>

3. 成熟插件

在自己应用中使用时间选取器插件

在 jquery 中 , $ 符号 和 jQuery 符号 互为别名，可以交叉使用

时间选取器插件的应用效果：

      <link rel="stylesheet" href="ui.datepicker.css" type="text/css" />                    // ② 引入对应的 css 样式文件

      <script type="text/javascript" src="jquery-3.1.1.js"></script>

      <!-- 引入 jquery 插件文件，注意，在 jquery 文件之后引入 -->

      <script src="ui.datepicker.js" type="text/javascript" charset="utf-8"></script>// ① 引入 jquery 插件文件

      <script src="zh-cn.js" type="text/javascript" charset="utf-8"></script>          // ③ 引入辅助的 js 文件 ( 例如语言包 )

        <script type="text/javascript">

           $(function(){$('#mytime').datepicker();});

            </script>

    <body> <h2>jquery 插件 -- 时间选取器 </h2> <input type="text" id="mytime" /></body>

使用注意： 1 jquery 版本是否支持使用， 2 先引入 jquery 文件 , 再引入插件文件 ( 如下图 )

jquery 插件使用对 jquery 版本匹配要求高，因此插件的使用，需要查看当前的 jquery 是否支持使用

成熟插件使用步骤： ① 引入 jquery 插件文件 ② 引入对应的 css 样式文件 ③ 引入辅助的 js 文件 ( 例如语言包 ) ④ 引入需要的图片文件

七．属性选择器

基本、层次、并且、内容过滤、表单域选中等选择器

<input type=”text” id=”username” value=”tom” class=”orange” name=”username”>

属性选择器：通过属性也可以找到页面上的元素节点

具体的使用：

1.[name]  节点必须有 name 属性， 2.[name*=value] 包含 ---$('[value*=c]').css('color','red');

3.[name=value]  节点有 name 属性，并且值为 value ， 4.[name^=value] 开头， 5.[name$=value] 结尾

7.[name!=value]  ①节点有 name 属性，并且值不等于 value ② 节点没有 name 属性

8.[][][][] 并且关系的选择器可以 融合多种 选择器： $( 基本 层次 并且 内容过滤 表单域选中 属性 )

节点要求同时满足多个条件，例如： $(‘li:gt(2):lt(4)’) 要求 li 节点同时满足三个选择器

例： $('[value][value!=xiaoming]').css('font-size','40px');

// 要求节点有 "value 属性 " 并且 " 属性值不等于 xiaoming"

Bootstrap

    基于html css javascript的超强的前端框架

    特点：Bootstrap是一移动设备为优先，适用pc机平板手机

Bootstrap的环境------http://v3.bootcss.com/网站

    //cdn.bootcss.com/jquery/1.11.3/jquery.min.js通过该网址来下载jquery文件

引入bootstrap环境的方法一：直接粘贴

1文档要求必须是 html5，以移动设置为优先

引入bootstrap环境的方法二

    <!--以移动设备为优先，屏幕与设备屏幕一致，初始缩放比例为1:1,禁止用户缩放-->

    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">

    <title>引入bootstrap</title>

    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">

    <script src="bootstrap/js/jquery.min.js"></script>

    <script src="bootstrap/js/bootstrap.min.js"></script>

bootstrap布局容器

<div class="container">固定宽度  1170px </div>

<div class="container-fluid">宽度为 100%内容</div>

排版的标签

    h1……h6 36px 30 24 18 14 12

    .page-header 设置页头，给标题加一个分割线

    <small></small>，<big></big>，<strong></strong>，<em></em>，<del></del>删除线

文本对齐方式---.text-left，.text-center，.text-right 右对齐

英文大写写---.text-uppercase 大写，.text-lowercase 小写，. text-capitalize首字母大写

列表

    .list-unstyled去掉列表前面的符号，和去掉原有的格式，.list-inline 把<li></li>之间的内容，变成横向排列

    自定义列表---.dl-horizontal 设置变成横向排列

表格

    .table 表格的一个基类，如果加其他的样式，都在.tabel的基础上

    <div class="table-responsive;">---. table-responsive给table的父元素加，移动设备优先，内容不能完全显示出现滚动条

    <table class="table table-bordered table-hover table-striped table-condensed">

    <!--表 外边框 鼠标悬停效果 斑马线效果 紧凑表格-->

        <tr class="active">---.active, .success, .info, .warning, .danger

响应式图片：.img-responsive响应式图片

    图片的形状---.img-circle椭圆形， .img-rounded 圆角矩形， .img-thumbnail圆角的边框

    例：<img src="images/01.jpg" class="img-responsive img-rounded img-thumbnail"/>.img-circle------.img-responsive响应式图片

栅格系统：栅格系统一定要放入容器中<div class=”container”></div>，<div class=”container-fluid”></div>

    Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列

    栅格系统用于通过一系列的行（row）与列（col）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中

        例：<div class="container" style="background:#ffffff;">

        <div class="row">

            <div class="col-md-6">66</div><div class="col-md-6">66</div>

        </div></div>---(col-md-6其中6表示将屏幕一分为12/6=2份，即每列占6格的空间)

    如果想做成响应式效果，使用栅格系统参数

    小于768px  手机端    Col-xs-,    大于768 小于992 平板    Col-sm-

    大于992 小于1200    Col-md-,    大于1200    Col-lg-

        例：<div class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><img src="images/01.jpg" class="img-responsive"/></div>

    偏移offset（只能向右偏移）---语法:Col-Col-xs/sm/md/lg-offset-数值（如果超出12会另起一行重新计算格子）

        例：<div class="col-md-2 Col-md-offset-5"></div>  pc中等屏幕向右偏移5个列

    排序（了解）语法：col-xs/sm/md/lg-pull  向左偏移,Col-xs/sm/md/lg-push 向右偏移

    辅助样式

        情境文本颜色---.text-muted(柔和) .text-success  .text-info  .text-primary  .text-warning .text-danger

        背景文本颜色--- .bg-success  .bg-info  .bg-primary .bg-waring  .bg-danger

        下拉三角<span class=”caret”></span>

        快速浮动 pull-left 左浮动   pull-right 右浮动

        清除浮动 .clearfix给父盒子加就相当----<div style=”clear:both”></div>

    表单     .form-control 给输入框加<input><textarea></textarea>

         .form-group 给输入框的父元素加 ,给外面包含的盒子加<div class=”form-group”>

        .checkbox-inline 给label 标签加给包含<input >和内容加样式

        .radio-inline  给label 标签加，给<input >和内容加样式

    输入框组

         .input-group-addon给给组合的内容加

         .input-group 给父元素加

        表单行内显示---给表单加  .form-inline

        .form-horizontal给表单加<form>变成响应式效果  ---必须结合栅格系统

            注意：输入框不能使用栅格系统，给<div ><span>…给这类的标签加

    按钮

        可以加按钮效果的有哪些标签

        <input type=”button” value=”按钮”>

        <button>按钮</button>

        <a href=”#”>内容</a>

        .btn是按钮样式的基类

        按钮样式 .btn-primary .btn-default  .btn-success  .btn-warning .btn-danger

        按钮的大小  .btn-lg（最大的）  .btn-sm  .btn-xs（最小的） 默认的就是.btn-md

        按钮组给父元素加  .btn-group

    下拉菜单.dropdown-menu 给下拉列表中的内容给ul加样式

        .dropdown 包含触发的按钮和下拉列表加样式 ---父元素

         .Data-toggle 按钮的触发器，点谁给谁加

        .dropdown-menu-left 下拉列表的对齐  .dropdown-menu-right 右对齐

        .divider  给<li>加<li></li>之间没有内容

    标签页

        .nav是标签页的一个基类 ---给ul加

         .nav-tabs 普通标签页

        .nav-pills 胶囊式标签页

        .nav-stacked垂直排列

         .active 给<li>加默认显示的是哪个标签页内容