Bootstrap 3.3.7学习笔记15

来源：互联网发布：python中什么叫装饰器编辑：程序博客网时间：2024/05/21 19:31

Bootstrap 3.3.7学习笔记15

先给一个昨天刚刚翻到的特别好的bootstrap中文资料站，感觉它比官方的文档做的更加贴近中文用户，它的程度不仅仅是翻译，而且考虑到了中文用户特别像我这种菜鸟的学习需求。给了比较充分的代码示例。
这次的主题是关于js在Bootstrap中的应用。在之前学习的过程中就有重复出现过一个问题，现在举两个例子。
之前有学过像下拉菜单，我们在html中写了一个按钮和一个ul，它们俩到底是怎么联系在一起才会有点击按钮出现一个下拉菜单？另外一个例子就是我们在学nav导航的时候曾经又提到，如果在小屏幕上出现nav，那么这个nav不会把导航中的栏目都一一列举在屏幕上，而会有一个按钮出现（当然在大屏幕中并不会有这个按钮），点击按钮的时候所有栏目会显示出来。那这又是怎么做到的呢？
html和css只是负责了网页的布局和元素的样式，就只是个UI，在这个UI上发生的事件，比如上面说的点击按钮，它到底在bootstrap中是如何被响应出来的？真相只有一个，那就是js！因为js方面目前为止没有任何的经验，所以很可能之后还会有关于js的学习笔记。不过其实说js也不太确切，Bootstrap是使用了一个js库，叫做jQuery,从名字可以看出来，它的开发者用意在于用js做query（查询），查啥呢？当然是查找网页上的元素辣！下面是wiki上对jQuery的简介：

jQuery, at its core, is a Document Object Model (DOM) manipulation library. The DOM is a tree-structure representation of all the elements of a Web page. jQuery simplifies the syntax for finding, selecting, and manipulating these DOM elements. For example, jQuery can be used for finding an element in the document with a certain property (e.g. all elements with an h1 tag), changing one or more of its attributes (e.g. color, visibility), or making it respond to an event (e.g. a mouse click).

jQuery also provides a paradigm for event handling that goes beyond basic DOM element selection and manipulation. The event assignment and the event callback function definition are done in a single step in a single location in the code. jQuery also aims to incorporate other highly used JavaScript functionality (e.g. fade ins and fade outs when hiding elements, animations by manipulating CSS properties).

所以jQuery对于网页元素（以按钮为最典型代表）做的工作不止于查询，还有选择，操作和响应一些关于这个元素的事件。那从目前对html的理解，html里的数据结构是一个超级大标签包着一层一层的小标签们，其实就是一个多叉树，从根节点<html>出发向下扩散。所以对网页元素的query就是如何在这棵大树上遍历，查询的问题。那这个任务在很多数据结构的内容里面都有涉及，甚至还有最优的算法去完成。所以猜测jQuery开发者就是想，既然现成的最优解都已经被找出来了，何必让每个要处理网页事件的人再重新根据这个最优算法写一套自己代码出来，我直接给大家写好，大家用就得了，不造重复的轮子。
写了这么多无非就是为了把思路理清楚，想明白接下来学习Bootstrap当中js的应用到底学点啥好？重心放在哪里？那目前的想法是：既然jQuery已经做好了轮子，Bootstrap拿去用了，那我就先不纠结Bootstrap到底怎么用的轮子，我的首要任务是知道如何按照Boostrap的方式利用轮子，说白了还是重点在于html中要怎么写代码才可以作出像最开始两个例子的效果。

接下来总结一下之前Bootstrap学习笔记当中遇到的与js有关的地方：
1. dropdown
2. navbar-collapse
3. alert

已经还没有提到的一些控件：
1. modal
2. data-spy
3. tooltip
4. popover
5. carousel
6. affix
7. nav-tab, nav-pill
8. button
9. checkbox/radio
在具体分析Bootstrap中如何应用这些控件之前先总结一点：这些控件在使用的时候都有名字为“data-XXX”的属性，这些以data开头的属性就是核心。简单的说就是凡是带了“data-XXX”属性的控件，bootstrap.js文件会利用jQuery提供的查找，操作元素的功能去控制这些控件的表现。然后bootstrap官方称这些属性为“data attributes”。闲话说到这，先从已经涉及到的控件开始总结。

这是我们基础的下拉菜单代码，dropdown类可以给div标签也可以像nav里面给到li标签，那重点是在button中的data-toggle="dropdown"这个属性，有了它bootstrap.js就知道这个button是用来做下拉菜单的trigger的，并且具体的菜单位置在button的sibling，类为dropdown-menu。就这么简单！只需要给button加一个data-toggle属性，然后在button的sibling为止放上一个类为dropdown-menu的list就可以啦（所以可以在button的前或后都可以），其他的代码部分bootstrap.js早就已经给事先写好了。就像上面说的那样，不造重复的轮子。

<div class="dropdown">  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">    下拉菜单    <span class="caret"></span>  </button>  <ul class="dropdown-menu" role="menu">    <li role="presentation">        <a role="menuitem" href="#">下拉菜单项</a>    </li>  </ul></div>

同上面下拉菜单一样，重点在button的data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"这两个属性。第一个属性是说明这个按钮用来在小屏幕的时候收起导航条中可以不直接被显示的部分，第二个属性用id去指定哪些内容是可以不直接被显示的部分。有了这两个属性，再加上bootstrap.js当中的代码，这个按钮就不会在大屏幕中出现辣～
除了，在可以不直接被显示的部分中必须给一个id之外，这个部分还必须是class=”collapse navbar-collapse”这两个类的！因为折叠起来要考虑样式呀！不可以瞎折叠。
是不是也很简单。所以稍微解释一下下面的代码，首先它包括一个折叠按钮，名字叫做Toggle navigation，然后它包含了一个一直被显示的ul，里面只有一个li，叫做3，最后就是可以不被直接显示出来的部分，id为bs-example-navbar-collapse-1。

<nav class="navbar navbar-default">    <!-- Brand and toggle get grouped for better mobile display -->    <div class="navbar-header">      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">        <span class="sr-only">Toggle navigation</span>        <span class="icon-bar"></span>        <span class="icon-bar"></span>        <span class="icon-bar"></span>      </button>      <a class="navbar-brand" href="#">Brand</a>    </div>    <!-- navbar elements always shown-->    <ul class="nav navbar-nav">        <li><a href="##">3</a></li>    </ul>    <!-- Collect the nav links, forms, and other content for toggling -->    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">      <ul class="nav navbar-nav">        <li><a href="#">Link</a></li>      </ul>    </div></nav>

alert

重点是button中的data-dismiss=”alert”，至于alert-dismissable，close这些类都是给这个叉叉添加了好看的样式而已。

<div class="alert alert-success alert-dismissable" role="alert">    <button class="close" type="button" data-dismiss="alert">&times;</button>    恭喜您操作成功！</div>

陌生的部分呢，就只以modal[官方文档]举例，作为case study。其他的基本上都可以类比，因为学到目前为止可以感觉到bootstrap在各个控件的处理上是由规律可循的。
首先modal就是一个弹出来的对话框，它在html上的结构比较死板，一共三层，最外层div.modal，中间层div.modal-dialog,最里层div.modal-content，这三层包裹着具体的内容，div.modal-header,div.modal-footer,div.modal-body.为什么说它死板呢，就是因为如果一改顺序，它在弹出的时候就没有正常的动画效果了。那如何引入动画效果呢？就是将最外层变为div.modal .fade。
这是实际的代码

<div class="modal fade" id="myModal" role="dialog" aria-labelledby="myModalLabel">  <div class="modal-dialog" role="document">    <div class="modal-content">      <div class="modal-header">        ...      </div>      <div class="modal-body">        ...      </div>      <div class="modal-footer">        ...      </div>    </div>  </div></div>

接下来一个问题就是如何让这个对话框弹出来了，如果用按钮的话可以有两种方式：
1. <a class="btn btn-primary" data-toggle="modal" href="#mymodal" role="button">anchor modal</a>
2. <button class="btn btn-primary" data-toggle="modal" data-target="#mymodal" type="button">button modal</button>
注意，在使用a当作button来用的时候请千万记得把role=”button”带上，方便残疾人设备。
ok，注意了，那说到现在为止bootstrap.js貌似只是在背后默默的工作，我们的实质内容和前面的几篇学习笔记没有啥区别，都是在按照bootstrap推荐的方式写html代码。高级的内容来了！作为一点JavaScript不会的同学，比如我，我们可以通过很简单的方式在html文件当中加入自己的js代码来操作控件。具体到modal身上，请看：

使用js绑定button和modal

刚刚说过button和modal之间通过data-toggle="modal" data-target="#mymodal"这两个属性链接，第二种方式，（不推荐哦，只是说有这个可能性，毕竟bootstrap.js里面已经给我们写的很方便了，只要写两个属性就能搞定的事情），在body最下面，引入完jQuery和bootstrap.js之后加上代码：

$(function(){    $(".btn").click(function(){        $("#mymodal").modal();    });});

这样所有.btn类的东西只要一点就可以触发modal了！当然不至于此辣！我们还可以通过这个方式操控一下弹出来的modal:比如我们可以取消按esc键就关闭对话框的功能，还可以取消单击对话框周边灰色背景关闭对话框功能。请看：

$(function(){    $(".btn").click(function(){        $("#mymodal").modal({            backdrop:false,            keyboard:false        });    });});

backdrop:false取消单击对话框周边灰色背景关闭对话框功能，keyboard:false取消按esc键就关闭对话框的功能。
另外，还要高级的是，modal的弹出动作在bootstrap中根据时间顺序被分为了4个小的段落：

事件类型描述,modal官方翻译中文是模态框 show.bs.modal show 方法调用之后立即触发该事件。如果是通过点击某个作为触发器的元素，则此元素可以通过事件的 relatedTarget 属性进行访问。 shown.bs.modal 此事件在模态框已经显示出来（并且同时在 CSS 过渡效果完成）之后被触发。如果是通过点击某个作为触发器的元素，则此元素可以通过事件的 relatedTarget 属性进行访问。 hide.bs.modal hide 方法调用之后立即触发该事件。 hidden.bs.modal 此事件在模态框被隐藏（并且同时在 CSS 过渡效果完成）之后被触发。

使用方式：跟着上面说的写，如下

$(function(){    $(".btn").click(function(){        $("#mymodal").modal();    });});$("#mymodal").on('hidden.bs.modal',function(){    alert("ok");});

这个代码的意思是当hidden.bs.modal事件发生之后立马调用function(){alert("ok");}这个函数。当然有时候会发现即使我这么写了，alert("ok")并没有在modal被隐藏（并且同时在 CSS 过渡效果完成）之后被触发，而是在modal还存在的时候就被调用了。这是为什么呢？因为最终解析执行js代码的还是浏览器辣，不同的浏览器有自己的规矩，它们可不会老老实实的都把最新最全的行业指南给实现的。这也是为什么我们查html和css的文档的时候，有一些文档会特意指出这个功能在哪些浏览器里支持，哪些不支持。所以换个浏览器打开试试吧。
最后，总结上面提到的，来一个综合版modal代码：

<body><button class="btn btn-default" type="button" id="mybtn">Modal</button><div class="modal fade" id="mymodal">    <div class="modal-dialog">    <div class="modal-content">        <div class="modal-header">            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>            <h4 class="modal-title">Here Comes The Title</h4>        </div>        <div class="modal-body">            <p>This is the body.</p>        </div>        <div class="modal-footer">            <button type="button" class="btn btn-default" data-dismiss="modal">close</button>            <button type="button" class="btn btn-primary">Save</button>        </div>    </div><!-- /.modal-content -->    </div><!-- /.modal-dialog --></div><!-- /.modal --><script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><!-- 最新的 Bootstrap 核心 JavaScript 文件 --><script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <script>    $(function(){        $("#mybtn").click(function(){            $("#mymodal").modal();        });    });    $("#mymodal").on('hidden.bs.modal',function(){        alert("ok");    });</script></body>

阅读全文

0 0