现如今web前端的不断更新,在web前端开发也出现了我们开发人员比较喜欢的框架,框架的主要作用就是给开发人员带来方便,同时使得开发之后十分容易维护,这里主要讲的是bootstrap这个框架,来自 Twitter,是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。如果要快速简单的学习的话可以考虑去菜鸟教程:http://www.runoob.com/bootstrap/bootstrap-tutorial.html。
这里只是该要的浅谈下bootstrap,如果你没用用过bootstrap或者你只是听说过,你可以看看本文,我们可以看看bootstrap如何使用,和其他的前端技术差不多,也是通过<link>\<script>标签来完成,可以看看bootstrap的基本文件树目录:
也就是主题三类文件,css样式文件、js文件和字体文件,我们可以很快的得出结论,此类css文件已经帮我们完成了一些样式的制作,只要我们想要某些样式时,只需要将原始的class定义出相对应的class名即可,简单的例子——折叠效果:
<!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 折叠面板</title> <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> </head> <body> <div class="panel-group" id="accordion"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> 点击我进行展开,再次点击我进行折叠。第 1 部分 </a> </h4> </div> <div id="collapseOne" class="panel-collapse collapse in"> <div class="panel-body"> Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"> 点击我进行展开,再次点击我进行折叠。第 2 部分 </a> </h4> </div> <div id="collapseTwo" class="panel-collapse collapse"> <div class="panel-body"> Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree"> 点击我进行展开,再次点击我进行折叠。第 3 部分 </a> </h4> </div> <div id="collapseThree" class="panel-collapse collapse"> <div class="panel-body"> Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. </div> </div> </div> </div> </body> </html>
效果如图:
本人之前使用过第三方的paperfold的JS文件,使用起来除了效果好看,但是管理和使用比这个要麻烦,所以说bootstrap还是值得使用的。