Bootstrap浅了解 && jQuery的一些常用函数

Bootstrap是用于设计响应性网页和应用程序的前端框架。它采用移动优先的web开发方法，包括预构建的CSS样式和类，以及一些JavaScript功能。可以使用Bootstrap构建响应性网站，使用其包含的类可以设置按钮、图像、表单、导航和其他常见元素的样式。

Bootstrap会计算出我们的屏幕有多宽，并通过调整HTML元素的大小来做出响应，通过响应式设计，无需设计手机版网站，它在任何宽度的屏幕上都会自适应。通过在HTML顶部添加以下代码将Bootstrap添加到任何应用程序：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"/>

Bootstrap提供的类示例（Bootstrap的大多数类都可以应用于div元素，故用div把别的元素包起来，然后在div上加Bootstrap类，是最保险的）：

给图片加上img-responsive类，图像就会自适合页面的宽度，即随着页面大小而变化宽度。

给标签h1加上text-center类，h1就会居中。

给button加上2个类btn、btn-default，就能出来一个Bootstrap式的按钮了。

再给button加上1个btn-block类，就能出来一个Bootstrap式的块级按钮了。

用btn-primary类代替btn-default类，btn-primary是我们将在应用程序中使用的主要颜色，它对于突出显示我们希望用户采取的操作非常有用。

给h1加上text-primary类，text-primary把文本设置成我们将在应用程序中使用的主要颜色。

Bootstrap为按钮提供了几种预定义的颜色：btn-info类用于提醒用户注意可以采取的可选操作；btn-danger类用于提醒用户该按钮是执行破坏性操作的，如删除。

text-danger类可以使标签内的文字变成红色。

form-control类可以使元素拥有100%的width。

container-fluid类表示元素内的所有内容都是移动(手机)响应的。

Bootstrap有一个名为well的类，它可以为列创建视觉深度感。

Bootstrap使用了一个响应式的12列网格系统，这样可以很容易地将元素放入同一行中并指定每个元素的相对宽度。Bootstrap的大多数类都可以应用于div元素。Bootstrap根据用户屏幕的宽度使用不同的列宽属性。例如，手机屏幕较窄，使用col-xs-*类；笔记本电脑屏幕较宽，使用col-md-*类。xs表示很小，md表示中等，*是一个用于指定元素应该有多少列宽的数字。要使用Bootstrap的grid（网格）将元素并排放置，则要将带有col-xs-*类或col-md-*类的元素置于带有row类的div中。示例：

<div class="row">
   <div class="col-xs-4"></div>
   <div class="col-xs-4"></div>
   <div class="col-xs-4"></div>
   <!--3个列宽数加起来是等于12的！设置不一样的列宽也行，只要全部加起来等于12就可以了。-->
</div>

表单元素也可以使用Bootstrap的网格系统，以使radio、checkbox等表单元素成一排。这样，无论屏幕分辨率有多宽，表单元素都将在页面上均匀分布。比如有2个radio表单元素要成排显示在手机屏幕上，首先将这2个元素嵌套在<div class=“row”>元素中，然后将它们每个都分别嵌套到<div class=“col-xs-6”>元素中即可。

PS：

Font Awesome是一个方便的图标库。这些图标可能是网络字体或矢量图形。它们就像字体一样可以用像素指定大小，默认采用其父HTML元素的字体大小。通过在HTML顶部添加以下代码，可以在任何应用程序中包含Font Awesome：

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">

i元素最初用于使其他元素倾斜，但现在通常用于图标（span元素也可以）。我们可以将Font Awesome类添加到i元素以将其转换为图标，例如：

<i class="fas fa-info-circle"></i>

注：上面的fa-info-circle中的info-circle替换为thumbs-up、trash就可以加载另外的图标了。

<i class="fa fa-paper-plane"></i>

注：上面是fa而不是第一个的fas！

jQuery是世界上使用最广泛的JavaScript库之一。2006年发布时，所有主流浏览器处理JavaScript的方式略有不同。jQuery简化了编写客户端JavaScript的过程，并确保代码在所有浏览器中都能以相同的方式工作。使用jQuery可以选择、删除、克隆和修改页面上的不同元素( 并不是改变实际的HTML元素，也不能把实际的HTML改变 )。jQuery语句置于文档就绪函数里。

文档就绪函数：

<!--当前位于html页面-->
<script>
  $(document).ready(function(){});
</script> 

放入此函数中的代码将在浏览器加载页面后立即运行，这很重要，因为如果没有文档就绪函数，代码可能会在HTML呈现之前运行，这会导致错误。所有jQuery函数都以美元符$开头。jQuery通常使用选择器选择HTML元素，然后对该元素执行某些操作。例如：

<script>
  $(document).ready(function() {
    $("button").addClass("animated bounce");
    $(".well").addClass("animated shake");
    $("#target3").addClass("animated fadeOut");    
    $("button").removeClass("btn-default");
    $("#target1").css("color","red");
    $("#target1").prop("disabled",true);
    $("#target4").text("<em>#target4</em>");
    $("#target4").html("<em>#target4</em>");
    $("#target4").remove();
    $("#target2").appendTo("#right-well")
    $("#target5").clone().appendTo("#left-well");
    $("#target1").parent().css("background-color","red");
    $("#right-well").children().css("color","orange");
    $(".target:nth-child(2)").addClass("animated bounce");
    $(".target:odd").addClass("animated shake");
    $(".target:even").addClass("animated shake");
    $("body").addClass("animated hinge");

  });
</script>

解析：

第一句用$("button")选择所有button按钮，然后用.addClass("animated bounce")给这些按钮添加CSS类。

第二句用$(".well")选择所有带类名.well的元素，然后用.addClass("animated shake")给这些元素添加CSS类。

第三句一样的意思，选出带有id的元素。

第四句使用jQuery的.removeClass()函数删除添加到button中的btn-default类。

第五句使用jQuery的.css()函数将id为target1的元素的color改为red。

第六句使用jQuery的.prop()函数将id为target1的元素的disabled属性改为true。

第七句使用jQuery的.text()函数将id为target4的元素的文本改为<em>#target4</em>。

第八句使用jQuery的.html()函数将id为target4的元素的文本改为#target4并用em标签强调该文本。

第九句使用jQuery的.remove()函数将id为target4的元素从页面中删除。

第十句使用jQuery的.appendTo()函数将id为target2的元素移动到id为right-well的元素里的末尾。

第十一句使用jQuery的.clone()函数将id为target5的元素复制，然后使用.appendTo()函数将复制的元素移动到id为left-well的元素的末尾。这里运用了函数链接，它是使用jQuery完成工作的一种简便方法。

第十二句使用jQuery的.parent()函数获取id为target1的元素的父元素，然后用.css()将获取到的父元素的background-color设置为red。

第十三句使用jQuery的.children()函数获取id为right-well的元素的子元素，然后用.css()将获取到的子元素的color设置为orange。

第十四句使用jQuery的:nth-child(n)语句选取类名为.target的元素中的第2个，然后用.addClass()为第2个元素添加类animated、bounce。

第十五句使用jQuery的:odd（奇数）选取类名为.target的元素中第(偶数位)个的元素（因为下标从0开始），然后用.addClass()为这些元素添加类animated、bounce。

第十六句使用jQuery的:even（偶数）选取类名为.target的元素中第(奇数位)个的元素（因为下标从0开始），然后用.addClass()为这些元素添加类animated、bounce。

最后一句表示jQuery也可以以body元素为目标，使用.addClass()为body元素添加类animated、hinge。

总结jQuery的一些函数：

.addClass()向元素添加类，.removeClass()从元素删除类，.css()设置或更改元素的css样式，.prop()更改元素的属性值,.text()更改元素的文本，.html()不仅能更改元素的文本还能识别文本中的html标签，.remove()删除html元素，.appendTo()将元素移动到另一个元素里的末尾，.clone()复制元素，.parent()获取元素的父元素，.children()获取元素的子元素，:nth-child(n)获取符合选择器的第n个元素，

注意，jQuery中索引是从0开始的，这意味着选中的第一个元素的位置为0，是偶数位的元素。

:even（偶数）选择第1个元素（位置0）、第3个元素（位置2），依此类推。

:odd（奇数）选择第2个元素（位置1）、第4个元素（位置3），依此类推。

。。。