bootstrap初步认识1

产生背景：

1.作者为公司内部提供一套标准化的前端开发工具

2.为了完成前端开发任务，工程师们几乎尝试了自己熟悉的所有库。应用之间的不一致性导致它们难以扩展和维护。Bootstrap最初就是这个问题的一个解决方案，而且在Twitter内部第一次Hackweek上得到了认可。Hackweek结束后，我们手头上的项目已经相当稳定，可以在公司内部部署使用了。

3.从最初CSS驱动的项目，发展到内置了很多JavaScript插件和图标，并且涵盖了表单和按钮元素。

4.Bootstrap本身支持响应式Web设计，而且拥有一个非常稳健的12列、940像素宽的网格布局系统。

 

 

 

对于新项目，Bootstrap则提供了一整套有用的基本要素。

一般来说，我在着手开发新项目的时候，都会整合Eric Meyer的Reset CSS（http://meyerweb.com/eric/tools/css/reset/） 等一些工具。

自从有了Bootstrap，只要在网站中引入bootstrap.css这个CSS文件，或者再加上bootstrap.js这个JavaScript文件，整个项目的基础平台就搭建好了。

 

一般开发时使用未压缩版，而在发布时使用压缩版本。

 

全局样式

Bootstrap预定义了一些样式。Bootstrap 1.0使用的是以前的重置样式表。

但Bootstrap 2.0则使用Nicolas Gallagher写的Normalize.css（http://necolas.github.com/normalize.css/）。

HTML5 Boilerplate（http://html5boilerplate.com/）使用的也是这个样式表。

这个样式表包含在bootstrap.css 中。

 

特别值得注意以下几种默认样式，它们专门针对排版和链接：

 

1.从body中去掉了margin，这样内容就会紧贴浏览器窗口边缘；

2.为body应用了background-color: white;；

3.Bootstrap以@baseFontFamily、@baseFontSize和@baseLineHeight属性作为排版的基准，确保整个网站的标题及其他内容的行高一致；

4.Bootstrap通过@linkColor设置全局链接颜色，只在:hover状态下给链接添加下划线。

 

记住，要修改默认颜色，可以直接修改相应.less文件中的全局变量值。要么修改scaffolding.less文件，要么修改你自己的样式表。

 

 

默认网格系统

Bootstrap默认的网格布局（图1-1）包含12列，940像素宽，不支持响应式布局。

加载响应式CSS文件后，网格布局会根据视口（viewport）宽度在724像素到1170像素之间伸缩。

视口宽度小于767像素时，说明是平板电脑或更小的设备，布局中的列会垂直堆叠起来。

默认宽度下，每列宽60像素，且向左平移20像素。

 

基本网格的HTML

创建简单布局时，给作为行的<div>添加.row类，给作为列的<div>添加表示横跨多少列的.span*类即可。因为网格布局可以包含12列，所以.span*中的*加起来必须等于12。这样，可以设计出3-6-3、4-8、3-5-4、2-8-2……布局，你懂了吧？

 

下面的代码使用了.span8和.span4，总共横跨12列：

 

<div class="row">

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

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

</div>

 

 

平移列

使用.offset*类可以向右平移列，*用于指定平移的列数。比如，下面代码中的.offset2会导致.span7向右平移2列（见图1-2）：

 

<div class="row">

  <div class="span2">...</div>

  <div class="span7 offset2">...</div>

</div>

 

嵌套列

要嵌套列，只要在相应的.span*中再增加一个.row，然后在其中包含与父容器列数相等的.span*即可（见图1-3）：

 

<div class="row">

  <div class="span9">

    Level 1 of column

    <div class="row">

      <div class="span6">Level 2</div>

      <div class="span3">Level 2</div>

    </div>

  </div>

</div>

 

 

流式网格系统

流式网格系统的列宽定义使用百分比，而不是像素。

流式网格系统与固定网格系统一样都具有响应能力，可适应不同的屏幕和设备。

只要把某一行的.row改为.row-fluid，这一行就会成为流式的。不改变列的类，是为了简化固定和流式网格的切换。想平移列？跟固定网格中一样，在要平移的列中添加.offset*类即可：

 

<div class="row-fluid">

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

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

</div>

 

<div class="row-fluid">

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

  <div class="span4 offset2">...</div>

</div>

流式网格中的嵌套有点不一样。原因是在使用百分比的情况下，每个.row都会把列数重置为12。举个例子，要想在一个.span8中嵌套两个等宽的列，不能使用两个.span4（尽管两个4平分8），而应该使用两个类为.span6的<div>（见图1-4）。这是为保证内容具有响应性，因为我们希望内容100%填满容器：

 

<div class="row-fluid">

  <div class="span8">

                <div class="row">

                        <div class="span6">...</div>

                        <div class="span6">...</div>

                </div>

  </div>

</div>

 

 

容器布局

要在页面中实现固定宽度、居中的布局，只要把内容统统放到<div class="container">...</div>中即可。

 

如果既想实现流式布局，又想把所有内容都封装到一个容器里，可以使用<div class="container-fluid">...</div>。流式布局适合很多应用、管理界面及其他项目。

<div class="container claearfix">

<div class="col5 column mln">5</div>

<div class="col11 column">11</div>

</div>

<div class="container claearfix">

<div class="col4 column mln">4</div>

<div class="col8 column">8</div>

<div class="col4 column">4</div>

</div>

其中clearfix是用来滁浮动的，而在第一列中加入一个mln是让第一列不具有左边距，如果不用考虑ie6的话，还可以使用:first-child来设置

.container {

  margin: 0 auto;

  width: 940px;

}

.column {

  display: inline;

  float:left;

  margin-left: 20px;

}

.col1 {

  width: 40px;

}

.col2 {

  width: 100px;

}

.col3 {

  width: 160px;

}

.col4 {

  width: 220px;

}

.col5 {

  width: 280px;

}

.col6 {

  width: 340px;

}

.col7 {

  width: 400px;

}

.col8 {

  width: 460px;

}

.col9 {

  width: 520px;

}

.col10 {

  width: 580px;

}

.col11 {

  width: 640px;

}

.col12 {

  width: 700px;

}

.col13 {

  width: 760px;

}

.col14 {

  width: 820px;

}

.col15 {

  width: 880px;

}

.col16 {

  width: 940px;

}

 

固定布局：960水平居中布局是我们见过最多的布局风格，但随着显屏的增大，1140s布局越来越多，如果使用960s布局的话，那么这种固定布局就很像上面说的Grids。我们来看一个模板

 

<div class="container clearfix">

        <div id="left" class="sidebar column col4 mln">left sidebar</div>

        <div id="main" class="column col8">main section</div>

        <div id="right" class="sidebar column col4">right sidebar</div>

</div>

 

 

 

 

 响应式设计

 要让Bootstrap支持响应式布局，必须在<head>标签中添加一个<meta>标签。另外，如果你下载的文件中没有响应式CSS文件，也要单独下载。响应式布局必需的标签和文件如下所示：

 

<!DOCTYPE html>

<html>

        <head>

              <title>My amazing Bootstrap site!</title>

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

              <link href="/css/bootstrap.css" rel="stylesheet">

              <link href="/css/bootstrap-responsive.css" rel="stylesheet">

        </head>

如果发现Bootstrap没有响应能力，请确保这些标签一个也不少。目前，响应能力还不是默认就有的，因为不是所有网站都需要响应式布局。Bootstrap的作者选择了让开发人员需要时添加，而不是不需要时删除响应功能。

 

不过，就算你想找的是移动开发框架，Bootstrap仍然是值得考虑的。

 

浏览器的兼容性

现代主流浏览器都支持Bootstrap，比如说Safari,Google Chrome,Firefox4+,IE7+等