时间:2021-07-01 10:21:17 帮助过:8人阅读
什么是 Bootstrap?
Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。
历史
Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的。Bootstrap 是 2011 年八月在 GitHub 上发布的开源产品。
写到这里,这篇从零开始学Bootstrap(3)我想写以下几个内容:
1. 基于我对Bootstrap的理解,做一个小小的总结。
2. 对从零开始学Bootstrap(2)例子进行UI美化和代码优化,主要是说说我是怎么做出自己想要的效果的。
3. 授人以鱼不如授人以渔,以自己的例子(因为自己也是新手,写出来的东西可能更适合初学者),讲讲代码编写过程中遇到的坑和需要注意的点。
废话不多说,下面开始:
一、 Bootstrap的小小总结
基于以Bootstrap的官方文档(http://v3.bootcss.com/)的说明,Bootstrap分为三个大块:CSS样式,组件,Javascript插件。
首先要明确一点:Bootstrap是一个框架,意思就是别人造好了轮子,你可以直接拿来用,免去了自己去造轮子。所以咱们需要明确两点:这些轮子是什么样的轮子,怎么样去使用这些轮子。
1. CSS样式:主要介绍了栅格系统和Bootstrap的全局样式。通过设定Class的值实现。
1.1栅格系统:
让我们可以很方便的实现HTML页面的布局(http://v3.bootcss.com/css/#grid)。
我觉得栅格系统很重要。因为HTML页面的布局是很重要也很繁琐的一项任务(你看一下W3School里关于布局的介绍http://www.w3school.com.cn/html/html_layout.asp,看一下例子里的代码,就明白了),并且需要考虑到不同浏览器、不同设备的兼容性。
栅格系统把这一切大大简化了。打开上面关于栅格系统的连接,你会发现只需要根据你想要实现的效果,给HTML元素Class属性赋相应的值,就可以实现,并且还能设置针对不同屏幕大小的设备展现不同的效果。
1.2 Bootstrap全局样式:
也就是Bootstrap对常用HTML元素(eg: DIV、Button、 P、 Table、 Img等等)是怎样美化的。通过给HTML元素的Class属性赋相应的值,就可以得到自己想要的效果。
举一个最简单的例子:
如上图所示,Bootstrap可以让你仅仅改变Button元素的class的值就是改变按钮的大小,而不用很麻烦的去修改css文件,或者给元素内嵌style的值。
2. 组件:我认为组件就是Bootstrap把一些元素(HTML元素和Javascript代码)组合起来,就变成了组件,并且提供了很多很好看很实用的图标。这些组件基本都是HTML开发过程中常用的。通过设定Class的值实现。(http://v3.bootcss.com/components/)
举一个最简单的例子:
如上图所示,当我们需要实现导航功能的时候。找到Boostrap里相应的组件,依照其给的代码模板,根据自己的需求,赋相应的class和ul、li值就可以了
3. Javascript插件:我认为Bootstrap的Javascript插件就是封装了常用网页交互功能的”轮子”。只需要设定class属性和data属性就可以实现常用的网页交互功能,而不用自己写一大堆javascript代码。
首先说一个小插曲,新手可能误以为”javascript”和”java”有着很深的联系,甚至会认为javascript是java的变种。其实并不是这样,javascript是网景(Netscape)公司开发的应用于互联网的脚本语言,其实它最先的名字”是livescript”,后来网景公司与Sun公司(也就是发明Java的公司,后来被Oracle收购)达成合作,当时Java语言如日中天,名气很大,为了搭顺风车,就把livesript改名为javascript。以至于有人开玩笑:”Java”和”Javascrip”的区别就好比”雷锋”和”雷峰塔”的区别一样。
言归正传,我们知道,Javascript是为了赋予网页交互功能而存在的。所以,Bootsript上丰富的Javascript插件能够让你很方便的实现常用的网页交互功能,而不用把精力放在”造轮子”上。
如上图所示,利用Bootstrap的轮播插件(http://www.runoob.com/bootstrap/bootstrap-carousel-plugin.html, Bootstrap的官方文档这里没有翻译成中文,runoob上却有很详细的中文翻译,并且可以在线修改代码提交观察效果,强烈推荐),你可以很方便的实现现在很多网站都采用的图片轮播功能。这里只需要根据上述链接里面的教程,赋相应的class和图片src值就可以了,连data值都不用设。
二、 对从零开始学Bootstrap(2)例子进行UI美化和代码优化
下图是上期教程中实现的效果:
我们可以看到有以下几个缺点需要改正:
(1) 点击具体同学,显示其信息之后,没有处于被选中的状态。(你一开始点击,会处于被选中状态,但那只是button的点击效果,你点一下空白处,被选中的状态就消失了)
(2) 色彩单调,不太美观。
(3) 布局方面需要调整,信息框是呈现我们需要的信息的地方,应该尽可能大,最好其显示的时候能把不需要的框给隐藏起来。
(4) 对于代码方面,对从零开始学Bootstrap(2)中的Javascript代码都写在HTML页面里了,并且有重复的代码段,应该把重复的代码段写成函数,这样可以减少代码体积,再一个修改代码的时候,我直接修改相应的函数就可以了,而不用一个地方一个地方的找。Javascript代码可以写到JS文件里,实现HTML页面和Javascript代码的分离。
技术选型(直白的说就是思考怎样利用Bootstrap框架里已有的东西,实现想要的效果):
1、首先调整布局,把信息框和同学框调整在一起,班级框显示在最上面。
显然,我们只需要把信息框所在的DIV和同学框的DIV放在同一个row的DIV里,并把修改跟栅格系统相关的class属性值”col-md”就可以实现。比如我们想让他们2:1的比例显示,那么信息框的class属性应该有col-md-8,而同学框的应该是col-md-4了。
值得注意的是,前端永远不可能是一步到位的开发,往往最开始的代码都不是我们想要的完美结果,需要细细调整。以下面为例,大家要学会自己搜,去尝试,去不断的调整(后面的调整,具体过程就不交代了):
我们修改完代码后,呈现的效果是下面这样的:
很明显的,上面每行只显示一个Class,有点浪费空间。下面的两个部分没有对齐。
把上面DIV组件的class属性里的”btn-group-vertical”删掉,把col-md-6添加到js代码里的tmp_button的class属性中。另外观察到这样设定了之后,第一行与第二行相比有奇怪的缩进:
毫无疑问,这种外观、布局类的变化跟CSS有关。这时候我们可以看一下元素具体的CSS。
以Chrome为例:
在这个元素上点鼠标右键,选择Inspect,即审查,你会在右边的框里查到相应的代码。通过比对,我们发现是margin-left的问题,这个属性是bootstrap框架里默认的,从上层元素继承而来,有的为 -1px,有的为0px,我们只需要改成一样就可以了,比如都改成0px:
在js代码里的tmp_button,修改style属性,添加”margin-left:0px;”,有的人觉得字体居中不好看,可以添加text-align:left,设定按钮上的文字从左边起。
改正后的效果:
2、添加折叠按钮,让用户可以通过这个按钮隐藏/打开class框,点击classmate显示详细信息的时候,自动隐藏,以把大量的空间省给信息框来显示。
添加折叠按钮可以参考http://www.runoob.com/bootstrap/bootstrap-collapse-plugin.html 来实现。
另外,我们可以给折叠按钮加一个好看的图标,参考http://v3.bootcss.com/components/#glyphicons的教程就可以轻松实现。
实现点击classmate显示详细信息的时候,自动隐藏,需要修改classmate按钮的点击事件,即相应的js代码。
我们查看Bootstrap折叠插件的用法http://www.runoob.com/bootstrap/bootstrap-collapse-plugin.html(这个更好,官方的这部分还没翻译好),查到下面的内容:
原来Class属性里的cllapse和in值控制了隐藏和显示功能,那我们只需要在按钮的click事件js代码里修改相应的要进行”显示/隐藏”操作的HTML元素的class属性就可以了,于是在classmate按钮的click函数里添加以下语句就可以了:
$("#collapseOne").attr("class","panel-collapse collapse");
3、修正”点击具体同学,显示其信息之后,没有处于被选中的状态”的bug。
我们通过查阅文档,http://www.runoob.com/bootstrap/bootstrap-button-plugin.html, 给button的data-toggle属性设置为”button”,可以使其变成点击后自动呈现被选中的状态。
所以我们给classmate的button添加属性data-toggle=”button”。
此时又出现了另一个问题,我想接下去点击其他classmate的时候,原来点的还是处于激活状态,怎么办?
通过查阅http://www.runoob.com/bootstrap/bootstrap-buttons.html, button的class赋值有active时,才会呈现被选中的状态,也就是说,上面的设定,也就是bootstrap做了这么一件事情:当data-toggle=”button”的按钮被点击时,自动把active添加到class里,此时呈现被选中状态,当再次被点击时,自动把active从class里移除,就呈现未被选中的状态。
也就是说,我们只要自己去做这个操作,比如在点击classmate时,我可以把所有的classmate按钮的active都从class属性里移除,这样点击完成后,只有我最新点击的Button处于active状态。
因此,只需要在classmate按钮的click函数里加入这样的语句:
代码如下:
$(".btn-classmate").attr("class","btn btn-default btn-classmate btn-info");
效果如下图:
4、美化按钮外观
找到bootstrap里CSS关于按钮的部分:
http://www.runoob.com/bootstrap/bootstrap-buttons.html
按照教程修改,我这里只是简单的修改了一下按钮的颜色,大家可以按照需求自己改。效果如下图:
5、 HTML页面和Javascript代码的分离
其实分为两步:
第一步:把javascript代码放到js文件里,并在HTML文件里链接上。
第二步:把javascript里复用,或者有明确功能的代码块,写进一个函数里,直接调用函数。
由于这两步都比较简单,任何学过编程语言的应该都会。我就不展开写了。
值得注意的是,在链接JS文件时,要注意顺序。
比如Bootstrap的JS文件,里面的代码是基于Jquery写的,用了很多Jquery的函数,所以Jquery的JS文件要在Bootstrap的JS文件之前声明链接。
同理,咱们的JS文件时基于Bootstrap,所以要在Bootstrap之后,不然代码就不起作用了。
最后国际惯例,贴一下相关的代码:
getClassmate.html:
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>getClassmate</title> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script> <![endif]--> <style type="text/css"> #btn-group-vertical-classes { overflow-y:auto; overflow-x:auto; height:100px; } #btn-group-vertical-classmates { overflow-y:auto; overflow-x:auto; height:500px; } button { text-overflow: ellipsis; overflow: hidden; border-radius: 0px; } #context_div { overflow-y:auto; overflow-x:auto; height:500px; } </style> </head> <body> <div class="container"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title" style="text-align:right;"> <a id="collapse_a" data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> <span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span> Click this to show/hide class </a> </h4> </div> <div id="collapseOne" class="panel-collapse collapse in"> <div class="panel-body"> <div class="row" id="div1-classes-classmates"> <div class="btn-group-lg col-md-12" role="group" aria-label="..." id="btn-group-vertical-classes"> <!-- where classes show--> </div> </div> </div> </div> </div> <br></br> <div class="row"> <div class="btn-group-vertical btn-group-lg col-md-4 " id="btn-group-vertical-classmates" role="group" aria-label="..."> <!-- where classmates show--> <button type="button" style="border-radius: 0px;" class="btn btn-default">Click class to show classmate.</button> </div> <div class="form-group"> <div class="col-md-8"> <div class="jumbotron" id="context_div"> <p>Click classmate to show details.</p> </div> </div> </div> </div> </div> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="js/jquery-3.0.0.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="js/bootstrap.min.js"></script> <script src="js/script_getClassmate.js"></script> </body> </html>
script_getClassmate.js:
$(document).ready(function(){ $.getJSON("resource/classmates.json",function(result){ $.each(result, function(i, field){ var tmp_button=$('<button type="button" style="border-radius: 0px; text-align:left; margin-left:0px" class="btn btn-default btn-class col-md-6 btn-success" data-toggle="button" chosen_state=0></button>').text(i); tmp_button.attr("title",i); $("#btn-group-vertical-classes").append(tmp_button); }); $(".btn.btn-default.btn-class").click(function(){ var tmp_chosen=Number($(this).attr("chosen_state"))^1; $(this).attr("chosen_state",String(tmp_chosen)); showClassmates(result); $(".btn.btn-default.btn-classmate").click(function(){ $(".btn-classmate").attr("class","btn btn-default btn-classmate btn-info"); $("#collapseOne").attr("class","panel-collapse collapse"); var selected_classmate=$(this).text(); showClassmateDetail(result,selected_classmate); }); }); }); }) function showClassmates(result){ $("#btn-group-vertical-classmates").empty(); var chosen_list=new Array(); $(".btn.btn-default.btn-class").filter(function(){ judgeflag=false; if($(this).attr("chosen_state")=="1"){ judgeflag=true; chosen_list.push($(this).text()); } return judgeflag; }); $.each(result,function(i,field){ var chosen_list_x; for (chosen_list_x in chosen_list){ if(chosen_list[chosen_list_x]==i){ $.each(field,function(j,field2){ var tmp_button=$('<button type="button" style="border-radius: 0px;" class="btn btn-default btn-classmate btn-info" data-toggle="button" chosen_state=0></button>').text(j); tmp_button.attr("title",j); $("#btn-group-vertical-classmates").append(tmp_button); }); } } }); } function showClassmateDetail(result,selected_classmate){ var classmate_context_item; $("#context_div").empty(); $.each(result,function(i,field){ $.each(field,function(j,field2){ if(j==selected_classmate){ $.each(field2,function(k,field3){ //alert(k); //alert(field3); classmate_context_item=k + ": " + field3; var tmp_p=$('<p></p>').text(classmate_context_item); $("#context_div").append(tmp_p); }); } }); }); }
classmates.json:
{ "Class 001": { "Xiao Wang": { "Gender": "Male", "Age": "18", "Interest": "Football", "Hometown": "Shanghai", "Chinese": "78", "Math": "90", "English": "66", "Physics": "81", "Chemistry": "88", "History": "69", "Geography": "92" }, "Xiao Li": { "Gender": "Male", "Age": "20", "Interest": "Basketball", "Hometown": "Beijing", "Chinese": "98", "Math": "77", "English": "97", "Physics": "72", "Chemistry": "73", "History": "88", "Geography": "81" } }, "Class 002": { "Xiao Cai": { "Gender": "Female", "Age": "19", "Interest": "Dance", "Hometown": "Gaoxiong", "Chinese": "93", "Math": "80", "English": "92", "Physics": "82", "Chemistry": "77", "History": "89", "Geography": "83" } }, "Class 003": { "Xiao Ma": { "Gender": "Male", "Age": "18", "Interest": "Reading", "Hometown": "Taibei", "Chinese": "91", "Math": "93", "English": "96", "Physics": "97", "Chemistry": "100", "History": "94", "Geography": "92" } }, "Class 005": { "Xiao Zhang": { "Gender": "Male", "Age": "20", "Interest": "Running", "Hometown": "Guangzhou", "Chinese": "67", "Math": "70", "English": "66", "Physics": "80", "Chemistry": 68, "History": "79", "Geography": "93" } } }
以上所述是小编给大家介绍的Bootstrap零基础入门教程(三),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!