Bootstrap零基础入门教程(三)

168 阅读 0 评论 111 点赞

我是靠谱客的博主开心早晨，最近开发中收集的这篇文章主要介绍Bootstrap零基础入门教程(三)，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

什么是 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属性赋相应的值，就可以得到自己想要的效果。

　　举一个最简单的例子：

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