首页 » Bootstrap - 前端框架

Bootstrap介绍

2011年8月,Twitter的设计师Mark Otto和Jacob Thornton发布了一个前端开发工具:Bootstrap。2012年2月,Bootstrap 2.0发布,支持HTML5,CSS3,短小精悍。

Bootstrap是后端程序员的福音。当有一天,作为一个默默无闻的后台程序员也要做一个自己的网站时,Bootstrap可以托付。 如果说你现在所见的这个网站或这个页面多少还有些美观的话,完全是Bootstrap的功劳,而使用它的成本之低,你可以忽略不计。 就算你从未接触过JavaScript、CSS这些东西,你也可以在1小时内掌握Bootstrap,并立即用在你的项目上。 不过要用好还得有许多尝试,尤其是在移动优先的今天,PC、手机、平板一个也不能少(前端好累)。 另,建议在某些场合把Bootstrap封装下再用,特别是navbar(导航栏)这部分,手工写Bootstrap真是要命。

最后,如果你在许多前端框架前犹豫不决,我建议你快速手上试验一把,不要听大家说的云里雾里自己反而失去了判断。 下面就是一份Bootstrap的快速上手指南(备注:这是旧版本的Bootstrap代码,新版本的需要按官网手册修改)。

快速上手

Step-1 Bootstrap依赖于jQuery,因此先下载最新的jQuery库。

Step-2Github下载Bootstrap 2.0源码。

Step-3 测试Bootstrap可用,在HTML中包含:

  1. jQuery:jquery-1.7.1.js
  2. Bootstrap CSS文件:bootstrap/css/bootstrap.css
  3. BootStrap Javascript文件:bootstrap/js/bootstrap.js
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="bootstrap/css/bootstrap.css" type="text/css" />
    <title>Hello BootStrap</title>
  </head>
  <body>
    <h1>Hello BootStrap</h1>
    <ul class="nav nav-pills">
      <li class="active"><a href="#">Regular link</a></li>
      <li class="dropdown" id="menu1">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#menu1">Dropdown<b class="caret"></b></a>
        <ul class="dropdown-menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another Action</a></li>
          <li><a href="#">Something else here</a></li>
          <li class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </li>
    </ul>

    <script src="jquery-1.7.1.js"></script>
    <script src="bootstrap/js/bootstrap.js"></script>
    <script>
      $(".dropdown-toggle").dropdown()
    </script>
  </body>
</html>

打开浏览器,有类似如下输出:

要注意文档类型用HTML5 doctype,即:

<!DOCTYPE html>

Bootstrap 详解

Bootstrap解压后的主要目录/文件:

  • ./css,包括 bootstrap.css, bootstrap.min.css
  • ./js,包括 bootstrap.js, bootstrap.min.js
  • ./img,包括 glyphicons-halflings.png,即Glyphicons的icon集合

手册分为以下几个类别介绍了Bootstrap:

  1. Scaffolding,介绍了文档布局方式。
  2. Base CSS,介绍了如何用CSS渲染HTML元素(如table, form, button等),以及使用由Glyphicons提供的icons。
  3. Componets,介绍了常见页面元素,如按钮(Buttons), 导航栏(Navigation),标签(Labels),徽标(Badges,如序列行前的数字),警告条(Alerts),进度条(Progress bars)等。
  4. Javascript plugins,介绍了多个Javascript扩展库。
  5. Using LESS,介绍了如何用LESS扩展Bootstrap。

以下笔记,也大致按此分类记录。

文档分块

Scaffolding(理解为页面布局)。Bootstrap把一个文档块(Block)分为12列,有固定(grid system)和浮动(Fluid grid system)两种。

固定块:

<div class="row">
    <div class="span4">...</div>
    <div class="span8">...</div>
</div>

浮动块和固定块类似,不过用row-fluid替换row。在row的嵌套上,两者有所区别。固定块:子列的.span*之和,等于父列的.span值(如父列为span6,可有2个span3的子列);浮动块:子列的.span*之和始终可为12(即100%)。

列偏移。 让两个span4分散在两端,中间空出1个span4的宽度,使用.offset

<div class="row-fluid">
    <div class="span4">...</div>
    <div class="span4 offset4">...</div>
</div>

修改默认值

变量 默认值 说明
@gridColumns 12 列数
@gridColumsWidth 60px 列宽
@gridGutterWidth 20px 列间距

页面布局

固定布局的页面:

<body>
    <div class="container">
    </div>
</body>

浮动布局使用<div class="container-fluid">

<div class="container-fluid">
    <div class="row-fluid">
        <div class="span2">
            <!-- nav, sidebar -->
        </div>
        <div class="span10">
            <!-- page content -->
        </div>
    </div>
</div>

Javascript扩展

Carousel(图片循环播放)

<div id="photos" class="carousel">
   <div class="carousel-inner">
       <div class="active item"><img src="images/t1.JPG" />
           <div class="carousel-caption">
               <h4>First Thumbnail label</h4>
               <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget mlam id dolor id nibh ultricies vehicula ut id elit.</p>
           </div>
       </div>
       <div class="item"><img src="images/t2.JPG" /></div>
   </div>
   <a class="carousel-control left" href="#photos" data-slide="prev">&lsaquo;</a>
   <a class="carousel-control right" href="#photos" data-slide="next">&rsaquo;</a>
</div>

modal

当需要弹出一个窗口让用户确认时,可以用alert()函数。但alert()只能输出简单的文本,在不同浏览器显示效果还不同。可以用BootStrap modal弹出一个界面一致的窗口,并在其中输出结构良好的文档,例如:

弹出小窗口后,会把背后的页面锁住,并呈现黑灰色。

使用modal需要3步:

  1. 使用普通的HTML元素定义窗口内容。
  2. 将一个HTML元素与窗口关联。
  3. 激活窗口。

例如以下的一个示例。

1. 定义窗口内容:

<div class="modal" id="mymodal">
    <div class="modal-header">
        <button class="close" data-dismiss="modal">x</button>
        <h3>Are you sure remove item from order ?</h3>
    </div>
    <div class="modal-body">
        <p><img scr="URL"> Any HTML elements. </p>
    </div>
    <div class="modal-footer">
        <a href="#" class="btn" data-dismiss="modal">Close</a>
        <a href="#" class="btn btn-primary">Delete</a>
    </div>  
</div>  

2. 关联窗口:

<a href="#mymodal" data-toggle="modal" class="btn btn-mini">删除商品</a>

3. 激活窗口:

$("#mymodal").modal({show:false});

modal 详解

从以上示例可见,窗口可以有几个部分:

<div class="modal" id="mymodal">
    <div class="modal-header"></div>
    <div class="modal-body"></div>
    <div class="modal-footer"></div>
</div>

控制modal显示和隐藏的方法:

  • $("#mymodal").modal("toggle")
  • $("#mymodal").modal("show")
  • $("#mymodal").modal("hide")

modal 技巧

Bootstrap modal使用有几个技巧。

modal在页面加载时自动隐藏:

<div class="modal hide" id="mymodal">

modal弹出和隐藏时有淡入淡出效果:

<div class="modal hide fade" id="mymodal">

CSS3 渐变

Bootstrap使用到CSS3渐变的特点,如在导航栏,摘取一段渐变代码:

background-color: #2c2c2c;
background-image: -moz-linear-gradient(top, #333333, #222222);
background-image: -ms-linear-gradient(top, #333333, #222222);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#333333), to(#222222));
background-image: -webkit-linear-gradient(top, #333333, #222222);
background-image: -o-linear-gradient(top, #333333, #222222);
background-image: linear-gradient(top, #333333, #222222);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#222222', GradientType=0);

其他

利用Bootstrap写的一个导航栏,默认设置下就挺像Google的置顶导航栏:

参考

Bootstrap支持的icons,这些图标来自Glyphicons

Bootstrap配色生成器 上传一张图片,根据图片色调,生成新的Bootstrap css文件(Generate your own Bootstrap color scheme from an image and customize to your taste)。

在线生成BootStrap新样式 提供可视化的BootStrap元素配置。

构建Twitter BootStrap 图灵社区翻译稿。

less中文版讲解 淘宝UED的成员整理的,非常简洁实用。

Free responsive admin template - 基于BootStrap的应用级theme。

使用Bootstrap的网站:

分享

0