Bootstrap学习笔记

最新推荐文章于 2022-05-28 17:38:22 发布

adf3wswwe3

最新推荐文章于 2022-05-28 17:38:22 发布

阅读量4.4k

点赞数

分类专栏： CSS 文章标签： class div javascript less dropdown makefile

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Bootstrap学习笔记

目录 [ 隐藏]

Bootstrap介绍

2011年8月，Twitter的设计师Mark Otto和Jacob Thornton发布了一个前端开发工具：Bootstrap。2012年2月，Bootstrap 2.0发布，支持HTML5，CSS3，短小精悍。波黎克斯使用VimWiki写作，并用jQuery/Bootstrap优化显示效果的网站，因此有一份Bootstrap的实战记录。

快速上手

Step-1

Bootstrap依赖于jQuery，因此先下载最新的jQuery库。

Step-2

从Github下载Bootstrap 2.0源码。

Step-3

测试Bootstrap可用，在HTML中包含：

jQuery：jquery-1.7.1.js
Bootstrap CSS文件：bootstrap/css/bootstrap.css
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：

Scaffolding，介绍了文档布局方式。
Base CSS，介绍了如何用CSS渲染HTML元素（如table, form, button等），以及使用由Glyphicons提供的icons。
Componets，介绍了常见页面元素，如按钮(Buttons), 导航栏(Navigation)，标签(Labels)，徽标(Badges，如序列行前的数字)，警告条(Alerts)，进度条(Progress bars)等。
Javascript plugins，介绍了多个Javascript扩展库。
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 m
lam 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步：

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

例如以下的一个示例。

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">

扩展和自定义Bootstrap

环境准备

安装npm（Node Package Manager），而npm依赖于Node.js，需先安装：

$ wget http://nodejs.org/dist/v0.6.14/node-v0.6.14.tar.gz
# ./configure && make install
# curl http://npmjs.org/install.sh | sh

编译安装node.js的时间较长，完成后，npm的安装脚本自动下载如 http://registry.npmjs.org/npm/-/npm-1.1.13.tgz 这样的文件，自解压安装。

安装BootStrap编译依赖的工具

# npm install -g less uglify-js jshint recess

这些工具被安装到了 /usr/local/lib/node_modules/

$ ls /usr/local/lib/node_modules/
jshint/    less/      npm/       recess/    uglify-js/

粗略了解了这些工具的作用，记录如下：

recess

recess是Twitter的Jacob Thornton开发的一个工具，目的是处理CSS，建立在LESS的基础上。

jshint

jshint类似jslint，是一个JavaScript代码检测工具（也就是JavaScript的lint）。

uglify-js

uglify-js是一个JavaScript分析/压缩/美化工具（uglify的意思是丑化，有点讽刺阿）。

编译BootStrap

从github下载BootStrap。

可见BootStrap的目录结构：

$ ls
docs  img  js  less  LICENSE  Makefile  package.json  README.md

这里出现了Makefile文件和less目录。

先测试下用 less 重新生成 bootstrap.css：

$ lessc ./less/bootstrap.less > bootstrap.css
$ lessc --compress ./less/bootstrap.less > bootstrap.min.css

测试下生成 BootStrap：

$ make bootstrap
mkdir -p bootstrap/img
mkdir -p bootstrap/css
mkdir -p bootstrap/js
cp img/* bootstrap/img/
recess --compile ./less/bootstrap.less > bootstrap/css/bootstrap.css
recess --compress ./less/bootstrap.less > bootstrap/css/bootstrap.min.css
recess --compile ./less/responsive.less > bootstrap/css/bootstrap-responsive.css
recess --compress ./less/responsive.less > bootstrap/css/bootstrap-responsive.min.css
cat js/bootstrap-transition.js js/bootstrap-alert.js js/bootstrap-button.js js/bootstrap-carousel.js js/bootstrap-collapse.js js/bootstrap-dropdown.js js/bootstrap-modal.js js/bootstrap-tooltip.js js/bootstrap-popover.js js/bootstrap-scrollspy.js js/bootstrap-tab.js js/bootstrap-typeahead.js > bootstrap/js/bootstrap.js
uglifyjs -nc bootstrap/js/bootstrap.js > bootstrap/js/bootstrap.min.tmp.js
echo "/*!\n* Bootstrap.js by @fat & @mdo\n* Copyright 2012 Twitter, Inc.\n* http://www.apache.org/licenses/LICENSE-2.0.txt\n*/" > bootstrap/js/copyright.js
cat bootstrap/js/copyright.js bootstrap/js/bootstrap.min.tmp.js > bootstrap/js/bootstrap.min.js
rm bootstrap/js/copyright.js bootstrap/js/bootstrap.min.tmp.js

这里用recess从.less生成.css，用uglifyjs处理了JavaScript代码，-nc参数的意思是--no-copyright，然后加了BootStrap自己的版权信息。

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的成员整理的，非常简洁实用。

SAE上的BootStrap 新浪对BootStrap提供的CDN。

略晓应该是用Bootstrap，看其css文件，像是修改Bootstrap后用LESS生成。

使用Bootstrap的网站：

http://builtwithbootstrap.com Built With Bootstrap（展示用Bootstrap搭建的网站）
http://cn.pycon.org/2011/ PyCon China 2011(ver1.3.0)
https://jihua.in/ 计划.IN（网站作者是:http://ichuan.net/）
http://code.nasa.gov/project/ code.NASA

adf3wswwe3

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap学习笔记

Bootstrap学习笔记目录 [隐藏]Bootstrap介绍快速上手Bootstrap 详解文档分块页面布局Javascript扩展Carousel（图片循环播放）modalmodal 详解modal 技巧扩展和自定义Bootstrap环境准备编译BootStrapCSS3 渐变其他参考
复制链接

扫一扫