Bootstrap零基础入门教程(三)


Posted in Javascript onJuly 18, 2016

什么是 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零基础入门教程(三)

如上图所示,Bootstrap可以让你仅仅改变Button元素的class的值就是改变按钮的大小,而不用很麻烦的去修改css文件,或者给元素内嵌style的值。

2. 组件:我认为组件就是Bootstrap把一些元素(HTML元素和Javascript代码)组合起来,就变成了组件,并且提供了很多很好看很实用的图标。这些组件基本都是HTML开发过程中常用的。通过设定Class的值实现。(http://v3.bootcss.com/components/)

举一个最简单的例子:

Bootstrap零基础入门教程(三)

如上图所示,当我们需要实现导航功能的时候。找到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零基础入门教程(三)

如上图所示,利用Bootstrap的轮播插件(http://www.runoob.com/bootstrap/bootstrap-carousel-plugin.html, Bootstrap的官方文档这里没有翻译成中文,runoob上却有很详细的中文翻译,并且可以在线修改代码提交观察效果,强烈推荐),你可以很方便的实现现在很多网站都采用的图片轮播功能。这里只需要根据上述链接里面的教程,赋相应的class和图片src值就可以了,连data值都不用设。

二、 对从零开始学Bootstrap(2)例子进行UI美化和代码优化

下图是上期教程中实现的效果:

Bootstrap零基础入门教程(三)

我们可以看到有以下几个缺点需要改正:

(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了。

值得注意的是,前端永远不可能是一步到位的开发,往往最开始的代码都不是我们想要的完美结果,需要细细调整。以下面为例,大家要学会自己搜,去尝试,去不断的调整(后面的调整,具体过程就不交代了):

我们修改完代码后,呈现的效果是下面这样的:

Bootstrap零基础入门教程(三)

很明显的,上面每行只显示一个Class,有点浪费空间。下面的两个部分没有对齐。

把上面DIV组件的class属性里的”btn-group-vertical”删掉,把col-md-6添加到js代码里的tmp_button的class属性中。另外观察到这样设定了之后,第一行与第二行相比有奇怪的缩进:

Bootstrap零基础入门教程(三)

毫无疑问,这种外观、布局类的变化跟CSS有关。这时候我们可以看一下元素具体的CSS。

以Chrome为例:

在这个元素上点鼠标右键,选择Inspect,即审查,你会在右边的框里查到相应的代码。通过比对,我们发现是margin-left的问题,这个属性是bootstrap框架里默认的,从上层元素继承而来,有的为 -1px,有的为0px,我们只需要改成一样就可以了,比如都改成0px:

在js代码里的tmp_button,修改style属性,添加”margin-left:0px;”,有的人觉得字体居中不好看,可以添加text-align:left,设定按钮上的文字从左边起。

改正后的效果:

Bootstrap零基础入门教程(三)

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(这个更好,官方的这部分还没翻译好),查到下面的内容:

Bootstrap零基础入门教程(三)

原来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");

效果如下图:

Bootstrap零基础入门教程(三)

4、美化按钮外观

找到bootstrap里CSS关于按钮的部分:

http://www.runoob.com/bootstrap/bootstrap-buttons.html

按照教程修改,我这里只是简单的修改了一下按钮的颜色,大家可以按照需求自己改。效果如下图:

Bootstrap零基础入门教程(三)

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零基础入门教程(三),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
sina的lightbox效果。
Jan 09 Javascript
Prototype 工具函数 学习
Jul 23 Javascript
jquery实现的超出屏幕时把固定层变为定位层的代码
Feb 23 Javascript
YUI Compressor压缩JavaScript原理及微优化
Jan 07 Javascript
JavaScript验证电子邮箱的函数
Aug 22 Javascript
JS实现向表格行添加新单元格的方法
Mar 30 Javascript
JQuery页面地址处理插件jqURL详解
May 03 Javascript
在iframe中使bootstrap的模态框在父页面弹出问题
Aug 07 Javascript
JS 音频可视化插件Wavesurfer.js的使用教程
Oct 31 Javascript
微信小程序获取用户信息的两种方法wx.getUserInfo与open-data实例分析
May 03 Javascript
ionic4+angular7+cordova上传图片功能的实例代码
Jun 19 Javascript
vue-video-player 解决微信自动全屏播放问题(横竖屏导致样式错乱问题)
Feb 25 Javascript
15位和18位身份证JS校验的简单实例
Jul 18 #Javascript
Bootstrap零基础入门教程(二)
Jul 18 #Javascript
Bootstrap插件全集
Jul 18 #Javascript
全面了解javascript中的错误处理机制
Jul 18 #Javascript
JavaScript中ES6 Babel正确安装过程
Jul 18 #Javascript
深入理解JS正则表达式---分组
Jul 18 #Javascript
基于jQuery实现弹出可关闭遮罩提示框实例代码
Jul 18 #Javascript
You might like
PHP写UltraEdit插件脚本实现方法
2011/12/26 PHP
php传值赋值和传地址赋值用法实例分析
2015/06/20 PHP
jQuery技巧大放送 学习jquery的朋友可以看下
2009/10/14 Javascript
js 获取radio按钮值的实例
2013/08/17 Javascript
推荐10 款 SVG 动画的 JavaScript 库
2015/03/24 Javascript
浅谈JSON.parse()和JSON.stringify()
2015/07/14 Javascript
理解js回收机制通俗易懂版
2016/02/29 Javascript
模板视图和AngularJS之间冲突的解决方法
2016/11/22 Javascript
移动端脚本框架Hammer.js
2016/12/15 Javascript
修改ligerui 默认确认按钮的方法
2016/12/27 Javascript
js中new一个对象的过程
2017/02/20 Javascript
原生js实现放大镜特效
2017/03/08 Javascript
JS实现针对给定时间的倒计时功能示例
2017/04/11 Javascript
基于jQuery解决ios10以上版本缩放问题
2017/11/03 jQuery
uni-app之APP和小程序微信授权方法
2019/05/09 Javascript
Jquery使用each函数实现遍历及数组处理
2020/07/14 jQuery
vue 项目@change多个参数传值多个事件的操作
2021/01/29 Vue.js
[59:26]DOTA2上海特级锦标赛D组资格赛#1 EG VS VP第二局
2016/02/28 DOTA
[02:38]2018年度DOTA2最佳劣单位选手-完美盛典
2018/12/17 DOTA
Python中捕捉详细异常信息的代码示例
2014/09/18 Python
Python的Django框架中消息通知的计数器实现教程
2016/06/13 Python
Python爬取网易云音乐热门评论
2017/03/31 Python
matplotlib作图添加表格实例代码
2018/01/23 Python
关于Numpy数据类型对象(dtype)使用详解
2019/11/27 Python
Python控制台输出时刷新当前行内容而不是输出新行的实现
2020/02/21 Python
django中url映射规则和服务端响应顺序的实现
2020/04/02 Python
浅谈优化Django ORM中的性能问题
2020/07/09 Python
日本运动品牌美津浓官方购物网站:MIZUNO SHOP
2016/08/21 全球购物
Unineed中文官网:高端护肤美妆与时尚配饰,英国直邮
2020/07/23 全球购物
Python如何定义一个函数
2015/09/01 面试题
大学生未来职业生涯规划书
2014/02/15 职场文书
平安工地建设方案
2014/05/06 职场文书
会计试用期工作总结2015
2015/05/28 职场文书
2016年优秀团支部事迹材料
2016/02/26 职场文书
基于python的matplotlib制作双Y轴图
2021/04/20 Python
Python数据分析之pandas函数详解
2021/04/21 Python