日期:2014-05-17  浏览次数:20584 次

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;
&