Bootstrap css修正
来源：http://www.fbair.net/bbs/simple/?t421.html
CSS 框架 Bootstrap From Twitter
Bootstrap这个东东不好直译，如果直译过来就是“引导”，这里暂且不译，直呼其名“Bootstrap”。Bootstrap是来自国外有名的一个社交网站Twitter。我也是最近得到的资源，公司要求培训这方面的东西，所以今天整理出一份贴上来与大家一起分享Twitter网前端攻城师们给我们事来的成果。
Mark Otto（马克奥托）是这样说的“我们很高兴宣布，Bootstrap是快速开发Web应用程序的前端工具包。它是一个CSS和HTML的集合，它使用了最新的浏览器技术，给你的Web开发提供了时尚的版式，表单，buttons，表格，网格系统等等。”下面我们就一起来分享这个Bootstrap。
关于Bootstrap
在Twitter的早期，Twitter的前端工程师们就使用Bootstrap，用来满足所有Web前端开发的需求，但是在各个Web应用程序之间存在不一致性，所以难以形成规模，并开始停止不前。后来在Twitter许多工程师的探讨和研究后，Bootstrap有了明显的成长，并且成熟起来，不仅包括基本样式，还有更优雅的和持久的前端设计模式。有关于更多的Bootstrap大家可以点击：dev.twitter.com
浏览器的兼容性
现代主流浏览器都支持Bootstrap，比如说Safari,Google Chrome,Firefox4+,IE7+等
Bootstrap内容
Bootstrap包括些什么呢？Bootstrap主要包括了以下几个部分的内容：
Less模板文件，比如说reset.less之类；
全部完成的css或正在修改的css；
样式文档；
实例
现在Bootstrap有些已经开源了，你可以到这里下载所有的代码：Bootstrap on GitHub ?
下面我们一起一个部分一个部分来看Bootstrap。
一、重置样式——reset.css
有关于重置样式，版本实在太多了，比如说：Eric Meyer' reset stylesheet、YUI reset stylesheet、HTML5 reset stylesheet，这几种是应用比较多的，但很多攻城师们是在这些基础上修改过的，我以前在《Drupal主题的基础样式—Reset、Base、Layout、Print》和《Html5的Reset 和Base样式的结合》有介绍过修改后的reset.css样式。同样Bootstrap也在Eric Meyer' reset stylesheet基础上进行了修改，但我个人认为还是有许多没用的标签样式加进来了，今天我在这里贴出的是基于CSSShare站长为之修改的一份重置样式表，针对我们来说更实用，更简洁一点，代码如下
Reset stylesheet
复制代码
@charset "utf-8";
/**
* Author:airenLiao
* Blog: http://www.w3cplus.com
*/
body,ul,ol,dd{
margin:0;
padding:0;
}
table {
border-collapse:collapse;
border-spacing:0;
}
ol, ul {
list-style: none outside none;
}
article, aside, dialog, figure, footer, header,hgroup, nav, section {
display:block;
}
二、网格系统——Grids
网格系统，我曾经在《OOCSS——核心篇》简单的介绍过一种网格系统，目前在网络上也有许多种不同的网格系统，如：960s、YUI Grids、Blueprint CSS、YAML、1140Grids、Columnal等，他们实现的方法是不一样，但他们的基本核心是一致的。Bootstrap中也有一个网格系统，他采用的是960s中的16列格子系，但Bootstrap不在格子上设置任何的margin和padding。同样我在Bootstrap的基础上稍作了一些修改，让我们的类名更有语义化：
Grids Markup:
复制代码
<div id="sorterTable">
...
</table>
CSS Code:
复制代码
.zebraStriped .header {
cursor: pointer;
}
.zebraStriped .header:after {
content: "";
float: right;
margin-top: 7px;
border-width: 0 4px 4px;
border-style: solid;
border-color: #000 transparent;
visibility: hidden;
}
.zebraStriped .headerSortUp,
.zebraStriped .headerSortDown {
background-color: rgba(141, 192, 219, 0.25);
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
-webkit-border-radius: 3px 3px 0 0;
-moz-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
}
.zebraStriped .header:hover:after {
visibility: visible;
}
.zebraStriped .headerSortDown:after,
.zebraStriped .headerSortDown:hover:after {
visibility: visible;
filter: alpha(opacity=60);
-khtml-opacity: 0.6;
-moz-opacity: 0.6;
opacity: 0.6;
}
.zebraStriped .headerSortUp:after {
border-bottom: none;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid #000;
visibility: visible;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
filter: alpha(opacity=60);
-khtml-opacity: 0.6;
-moz-opacity: 0.6;
opacity: 0.6;
}
上面使用了部分css3效果，用来制作排序的三角形，如果你需要兼容更多浏览器，请使用背景图片制作。
样式写好后，我们需要把jquery.js版本库tabesorter插件引进你的项目：
复制代码
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/tablesorter.js"></script>
最后在表格止应用这个排序效果：
复制代码
<script type="text/javascript">
$(document).ready(function(){
$("#sorterTable").tablesorter( {sortList: [[0,0], [1,0]]} );
});
</script>
有关于更详细的表格排序制作，大家可以拼命点这。
表单——Forms
表单这一块主要分成三个部分，第一是表单元素横向排列，第二部分是表单元素纵向排列，第三部分是buttons，下面我们分别来看Bootstrap如何写这几个部分：
1、默认表单样式（横响排列）
先来看Bootstrap是怎么写默认表单的，我将其代码全部Copy过来了，
复制代码
<form>
<fieldset>
<legend>Example form legend</legend>
<div id="xlInput" name="xlInput" size="30">
</div>
</div> <!-- /clearfix formField -->
<div id="disabledInput" name="disabledInput" size="30" placeholder="Disabled input here… carry on." disabled="">
</div>
</div> <!-- /clearfix formField -->
<div id="xlInput" name="xlInput" size="30">
<span id="prependedInput" name="prependedInput" size="16">
</div>
</div>
</div> <!-- /clearfix formField -->
<div name="" id="" value=""></label>
<input type="text" id="prependedInput2" name="prependedInput2" size="16">
</div>
</div>
</div> <!-- /clearfix formField -->
<div id="appendedInput" name="appendedInput" size="16">
<label name="" id="" value="" checked="checked"></label>
</div>
</div>
</div> <!-- /clearfix formField -->
<div id="fileInput" name="fileInput">
</div>
</div> <!-- /clearfix formField -->
</fieldset>
<fieldset>
<legend>Example form legend</legend>
<div name="optionsCheckboxes" value="option1">
<span>Option one is this and that—be sure to include why it’s great</span>
</label>
</li>
<li>
<label>
<input type="checkbox" name="optionsCheckboxes" value="option2">
<span>Option two can also be checked and included in form results</span>
</label>
</li>
<li>
<label>
<input type="checkbox" name="optionsCheckboxes" value="option2">
<span>Option three can—yes, you guessed it—also be checked and included in form results</span>
</label>
</li>
<li>
<label name="optionsCheckboxes" value="option2" disabled="">
<span>Option four cannot be checked as it is disabled.</span>
</label>
</li>
</ul>
<span value="May 1, 2011">
<input type="text" value="12:00am">
to
<input type="text" value="May 8, 2011">
<input type="text" value="11:59pm">
<span id="textarea" name="textarea"></textarea>
<span name="optionsCheckboxes" value="option1">
<span>Option one is this and that—be sure to include why it’s great</span>
</label>
</li>
<li>
<label>
<input type="checkbox" name="optionsCheckboxes" value="option2">
<span>Option two can also be checked and included in form results</span>
</label>
</li>
</ul>
</div>
</div> <!-- /clearfix formField -->
<div style="margin-top: 20px;">
<div type="submit">Submit</button><br/>
<button type="submit">Cancel</button><br/>
<button type="submit">Delete</button><br/>
<button type="sumbit">Large Button</button><br/>
<button type="submit">Small Button</button><br/>
<button type="submit">Disabled Button</button>
</div>
<div value="Submit" /><br />
<input type="submit" value="Cancel" /><br />
<input type="submit" value="Delete" /><br />
<input type="submit" value="Large Button" /><br />
<input type="submit" value="Small Button" /><br />
<input type="submit" value="Disabled Button" /><br />
</div>
<div href="#">Submit</a><br/>
<a href="#">Cancel</a><br/>
<a href="#">Delete</a><br/>
<a href="#">Large Button</a><br/>
<a href="#">Small Button</a><br/>
<a href="#">Disabled Button</a>
</div>
</div>
CSS Code:
复制代码
.btn {
display: inline-block;
background-color: #e6e6e6;
background-repeat: no-repeat;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(0.25, #ffffff), to(#e6e6e6));
background-image: -webkit-linear-gradient(#ffffff, #ffffff 0.25, #e6e6e6);
background-image: -moz-linear-gradient(#ffffff, #ffffff 0.25, #e6e6e6);
background-image: -ms-linear-gradient(#ffffff, #ffffff 0.25, #e6e6e6);
background-image: -o-linear-gradient(#ffffff, #ffffff 0.25, #e6e6e6);
background-image: linear-gradient(#ffffff, #ffffff 0.25, #e6e6e6);
padding: 4px 14px;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
color: #333;
font-size: 13px;
line-height: 18px;
border: 1px solid #ccc;
border-bottom-color: #bbb;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
text-decoration: none;
}
.btn:hover {
background-position: 0 -15px;
color: #333;
text-decoration: none;
}
.primary {
background-color: #0064cd;
background-repeat: repeat-x;
background-image: -khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd));
background-image: -moz-linear-gradient(#049cdb, #0064cd);
background-image: -ms-linear-gradient(#049cdb, #0064cd);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #049cdb), color-stop(100%, #0064cd));
background-image: -webkit-linear-gradient(#049cdb, #0064cd);
background-image: -o-linear-gradient(#049cdb, #0064cd);
background-image: linear-gradient(#049cdb, #0064cd);
color: #fff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
border: 1px solid #004b9a;
border-bottom-color: #003f81;
}
.primary:hover {
color: #fff;
}
.btn {
-webkit-transition: 0.1s linear all;
-moz-transition: 0.1s linear all;
transition: 0.1s linear all;
}
.primary {
color: #fff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
border-color: #0064cd #0064cd #003f81;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}
.cancel,
.delete {
background-color: #9D261D;
background-image: -khtml-gradient(linear, left top, left bottom, from(#D83A2E), to(#9D261D));
background-image: -moz-linear-gradient(#D83A2E, #9D261D);
background-image: -ms-linear-gradient(#D83A2E, #9D261D);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #D83A2E), color-stop(100%, #9D261D));
background-image: -webkit-linear-gradient(#D83A2E, #9D261D);
background-image: -o-linear-gradient(#D83A2E, #9D261D);
background-image: linear-gradient(#D83A2E, #9D261D);
background-repeat: repeat-x;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
color: #fff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.cancel:hover,
.delete:hover,
.primary:hover {
color: #fff;
}
.large {
font-size: 16px;
line-height: 28px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
.small {
padding-right: 9px;
padding-left: 9px;
font-size: 11px;
}
.disabled {
background-image: none;
filter: alpha(opacity=65);
-khtml-opacity: 0.65;
-moz-opacity: 0.65;
opacity: 0.65;
cursor: default;
}
.btn:disabled {
background-image: none;
filter: alpha(opacity=65);
-khtml-opacity: 0.65;
-moz-opacity: 0.65;
opacity: 0.65;
cursor: default;
color: #fff;
}
.btn:active {
-webkit-box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.05);
}
button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
padding: 0;
border: 0;
}
a.btn {
line-height: 15px;
}
a.large {
line-height: 19px;
}
a.small {
line-height: 13px;
}
效果：
当然大家可以根据自己地需求改变大小，并改变适合自己的色系，也可以在上面的基础上制作出,active,focus等效果。如果大家对buttons的制作感兴趣，大家可以去学习一下G爸的按钮样式，绝对是一流的水平。大家也可以点击pixify.com学习google+的按钮制作，要么你直接这里下载源码自己研究去。
导航——Navigation
导航这一部分涉及的内容太多了，Bootstrap主要讲了"固定的顶栏(FixedTopbar)","tabs","导航"，“分页(Pagination)”,我主要想提两个部分出来和大家一起分享，因为这两个部分较为通用的部分，其中一个是“tabs”的制作，另一个则是“分页(Pagination)”的制作。我们先来看第一个部分。
1、Tabs制作
HTML Markup
复制代码
<ul class="btn small">Or do this</a></p>
</div>
CSS Code:
复制代码
.blockMessage {
margin-bottom: 18px;
padding: 14px;
color: #404040;
color: rgba(0, 0, 0, 0.8);
*color: #404040; /* IE 6-7 */
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
.blockMessage p {
color: #404040;
color: rgba(0, 0, 0, 0.8);
*color: #404040; /* IE 6-7 */
margin-right: 30px;
margin-bottom: 0;
}
.blockMessage ul {
margin-bottom: 0;
}
.blockMessage strong {
display: block;
}
.blockMessage.error {
background: #f8dcda;
border: 1px solid #f4c8c5;
}
.blockMessage.warning {
background: #fff0c0;
border: 1px solid #ffe38d;
}
.blockMessage.success {
background: #dff1df;
border: 1px solid #bbe2bb;
}
.blockMessage.info {
background: #c7eefe;
border: 1px solid #ade6fe;
}
效果：
上面这几部分内容是我们平时在Web页面制作中最常见的几部分，我把相关的代码从BootStrap拆分出来，有些并做了小小的修改，仅供参考。其实Bootstrap中不仅这几个部分，他还包含了“Popovers”和“LessCss”等，因为“Popovers”部分大家感兴趣的话可以从下截下来的源码中学习一下，有关于LessCSS部分，我将在后面专会花一节内容来介绍这个LessCSS。
本文大部分内容来自于Bootstrap, from Twitter。如果你对本文的内容感兴趣或者想了解更多有关于这方面的内容可以点击这里,或者像我一样直接从Bootstrap on GitHub ?把他的源码整下来学习，因为这个都是开源的。
