bootstrap 之准备开发

定制bootstrap

所有效果和插件都导入页面,会增加带宽负荷,发生冲突

http://getbootstrap.com/customize/

下载预编译版

https://github.com/twbs/bootstrap/releases/download/v3.0.2/bootstrap-3.0.2-dist.zip

https://github.com/twbs/bootstrap/archive/v3.0.2.tar.gz

下载源代码版

https://github.com/twbs/bootstrap/archive/v3.0.2.zip

Bootstrap 文件结构

bootstrap图片是使用ImageOptim工具进行压缩的

bootstrap.css 完整的boostrap样式表

bootstrap-responsive.css响应式布局,必须置于bootstrap.css之后,否则不具有响应式布局的功能

bootstrap.js 所有JavaScript响应式布局

编码规范

在导入CSS文件时,应该明确定义rel和type声明

[javascript] view plaincopy

1. <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">  

图片的智能响应

参见https://github.com/filamentgroup/Responsive-Images

需要使用两个相关文件rwd-images.js和.htaccess

使用rwd-images.js检测当前设备的屏幕分辨率,如果是大屏幕设备,向页面头部区域添加Base标记

.htaccess文件决定请求所需要的是原始图片还是小尺寸的图片

响应式设计

1.添加meta标签

[javascript] view plaincopy

1. <meta name="viewport" content="width=device-width, initial-scale=1.0">  

2.启用响应式CSS

[javascript] view plaincopy

1. <link href="css/bootstrap-responsive.min.css" rel="stylesheet" media="screen">     

文本风格

[html] view plaincopy

1. <h3>强调</h3>  
2. <p class="muted">提示</p>  
3. <p class="text-warning">警告类文本</p>  
4. <p class="text-error">错误类文本</p>  
5. <p class="text-info">通知类文本</p>  
6. <p class="text-success">成功类文本</p>  

文本对齐风格

[html] view plaincopy

1. <p class="text-left">文本左对齐</p>  
2. <p class="text-center">文本居中对齐</p>  
3. <p class="text-left">文本左对齐</p>  

缩略语风格

[html] view plaincopy

1. <p> <abbr class="initialism" title="Cascading Style Sheets">CSS</abbr>是层叠样式 </p>  

地址风格

[html] view plaincopy

1. <address>  
2.     <a href="mailto:[e-mail]">地址</a> <br>  
3.     A <br>  
4.     B <br>  
5. </address>  

引用风格

[html] view plaincopy

1. <blockquote cite="http://www.baidu.com" class="pull-right">  
2.     <p> 101010101010101010101010 </p>  
3. </blockquote>  

代码块

[html] view plaincopy

1. <p>PHP的变量名 <code> $i=1;</code> </p>  
2. <pre> hello </pre>  

缀式文本框

[html] view plaincopy

1. <div class="input-prepend">  
2.     <span class="add-on">E-mail</span>  
3.     <input class="span2" id="prependedInput" type="text" placeholder="[e-mail]">  
4. </div>  
5. <div class="input-append">  
6.     <input class="span2" type="text" id="appendedInput">  
7.     <span class="add-on">@ihep.ac.cn</span>  
8. </div>  
9. <div class="input-prepend input-append">  
10.     <span class="add-on">E-mail</span>  
11.     <input class="span2" type="text" id="prependedInput" placeholder="Email">  
12.     <span class="add-on">@163.com</span>  
13. </div>  
14. <div class="input-prepend input-append">  
15.     <input type="button" class="btn" value="user" />  
16.     <input type="text" />  
17.     <button class="btn">注册</button>  
18. </div>   

下拉按钮

[html] view plaincopy

1. <div class="input-prepend input-append">  
2.     <input type="button" class="btn" value="Email">  
3.     <input type="text">  
4.     <div class="btn-group">  
5.         <button class="btn">@163.com</button>  
6.         <button class="btn" data-toggle="dropdown" tabindex="-1">  
7.             <span class="caret"></span>  
8.         </button>  
9.         <ul class="dropdown-menu">  
10.             <li><a href="#">@126.com</a></li>  
11.             <li><a href="#">@sohu.com</a></li>  
12.             <li><a href="#">@qq.com</a></li>  
13.             <li><a href="#">@263.com</a></li>  
14.         </ul>  
15.     </div>  
16.     <button class="btn">登录</button>  
17. </div>  

搜索框

[html] view plaincopy

1. <form class="form-search" action="">  
2.     <div class="input-append">  
3.         <input class="span3" type="text">  
4.         <button class="btn" type="submit">快速搜索</button>  
5.     </div>  
6. </form>  
7.   
8. <form class="form-search" action="">  
9.     <input type="text" class="search-query">  
10. </form>  
11. //可以使用form-inline类将表格以行内显示   

http://www.berlinix.com/web/Bootstrap.php

http://kanoha.org/page/2/

http://www.oschina.net/p/topcoat