浅谈bootstrap前端框架 -

caoweiju

浏览: 8621 次
性别:
来自: 北京

最近访客更多访客>>

lovemewing

xmlewis

tangcy

youcp999

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

浅谈bootstrap前端框架

博客分类：

web前端

bootstrap、web前端、css、js

现如今web前端的不断更新，在web前端开发也出现了我们开发人员比较喜欢的框架，框架的主要作用就是给开发人员带来方便，同时使得开发之后十分容易维护，这里主要讲的是bootstrap这个框架，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。如果要快速简单的学习的话可以考虑去菜鸟教程：http://www.runoob.com/bootstrap/bootstrap-tutorial.html。

这里只是该要的浅谈下bootstrap，如果你没用用过bootstrap或者你只是听说过，你可以看看本文，我们可以看看bootstrap如何使用，和其他的前端技术差不多，也是通过<link>\<script>标签来完成，可以看看bootstrap的基本文件树目录：

已编译的 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还是值得使用的。