BootStrap是什么

BootStrap是基于HTML、CSS和JavaScript的框架，使你只需要写简单的代码就可以很快的搭建一个还不错的前端界面，它是后端程序员的福音，使他们只需要专注业务逻辑，而无须浪费太多的精力在界面设计上。

全响应

它可以开发全响应式网页——不论你使用手机、平板电脑、普通个人电脑浏览网站内容，所有的元素都可以很优雅的呈现，减轻了因为兼容性而带来的工作量。

版本

它的最新版本是4.0，国内目前用的较多的是3.x,本教程也基于BootStrap3.x版本。

二次开发

你可以使用默认的BootStrap样式、组件和插件，你也可以对其进行二次开发，甚至你还可以基于BootStrap环境使用自己开发的组件。

你可以登陆http://v3.bootcss.com点击页面中的下载BootStrap按钮下载完整版。

1.首先把它的文件按照类别放在项目的文件夹中

你可以把CSS文件——bootstrap.min.css放在类似stylesheets这样专门放CSS的文件夹。把js文件——bootstrap.min.js放在类似Scripts文件夹中。当然，最终如何部署可以按照你的个人喜好。

2.在页面中使用BootStrap

将BootStrap的文件bootstrap.min.css、bootstrap.min.js引入当前页面中，由于BootStrap是基于Jquery的，所以在引入它的js文件之前，一定要先引入Jquery.js。注意：这里考虑到文件大小，我们引入了min版的文件，当然，你也可以引入完整版的文件。

示例代码如下：

<!-- Bootstrap 核心 CSS 文件 --></p>
<link rel="stylesheet" href="/stylesheets/bootstrap.min.css">

<!-- jQuery文件 -->
<script src="/scripts/jquery.min.js"></script>

<!-- Bootstrap 核心 JavaScript 文件 -->
<p><script src="/scripts/bootstrap.min.js"></script>

BootStrap栅格布局

BootStrap栅格布局是灵活使用BootStrap的基础。BootStrap将屏幕分为12等分，在具体的DIV中，可以通过设置DIV的所占等分的数字确定其在屏幕中占有的宽度。如：

<div class="row“><!--表示另起一行-->
      <div class="col-md-8" style="border:1px solid black;height:100px;"></div>
      <div class="col-md-4" style="border:1px solid black;height:100px;"></div>
</div>

在第一个DIV中class="col-md-8",第二个DIV中class="col-md-4", 其中‘8’和‘4’就是其DIV所占屏幕宽度的数值，加在一起等于‘12’。也就是第一个DIV占整个屏幕宽度的‘8/12’,第二个DIV占‘4/12’。注：在上述代码中为了突显区块，我们设置了DIV的边框宽度为1像素黑色实线，高度设为100像素。

布局屏幕分类

BootStrap是一种全响应的技术，那么针对不同的屏幕，它是怎么提供支持的呢？别担心，针对不同的显示屏幕尺寸，BootStrap提供了不同的栅格布局的属性：

col-xs-* 超小屏幕手机 (<768px)
col-sm-* 小屏幕平板 (≥768px)
col-md-* 中等屏幕桌面显示器 (≥992px)
col-lg-* 大屏幕大桌面显示器 (≥1200px)

多个布局属性

如果想让一个DIV在不同的屏幕中占有不同的屏宽该怎么做呢？ BootStrap允许我们在一个DIV中写多个类别的布局属性，从而让该DIV在不同的屏幕中呈现不同的屏宽。如：

<div class="row">
      <div class="col-md-8 col-xs-6 col-lg-4"></div>
</div>

该DIV在中等屏幕中占有‘8/12’，在手机中占有‘6/12’，在大屏幕中占有屏幕比例的‘4/12’。

网站首页整体设计思路

整体架构

一般而言首页设计几乎等同与整个网站设计，那么首页中到底应该放些什么内容才好呢？这要看网站有哪些主要的元素。本教程里要设计的网站首页是一个多用户博客类的网站首页，在该网站中用户可以发表博客，也可以推荐图书给其他用户。所以，首页中的板块包括这些应该是恰当的：

整站导航条
文章（博客）展示板块
图书展示板块
用户（会员）展示板块
脚注——footer部分

其中导航条和脚注是整个网站中都要用到的，具体实现时可以放在布局模板中。

板块划分

根据上面的整体架构，我们将首页的板块分为以下几个：

1.文章板块——将最新、最热的文章以标签页（tab）切换方式放在该模块中，为了页面美观，将有图片的文章的第一章图片放在轮换图片（caoursel）插件中,最右侧放置热门文章分类。

2.图书板块——按照图书的分类将图书放在首页中，点击不同的分类切换到不同的选项卡。图书展示使用自己开发的Jquery Tab插件，并将其整合到BootStrap环境中。最右侧同样是图书的分类。

3.用户板块——将新加入的用户和对社区贡献最多的用户放在首页中

要用到的BootStrap元素

那么，我么要用到哪些BootStrap元素才能很好的展示我们的板块内容呢？

1.导航条

这里要用到固定在网页头部的导航条（navbar-fixed-top）,并在其中整合用户登录模块，代码如下

<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
       <div class="container">
         <div class="navbar-header">
          <a class="navbar-brand active" href="首页URL">顶求网</a>
          <a class="navbar-brand" href="图书页面URL">图书</a>
          <a class="navbar-brand" href="文章页面URL">文章</a>
        </div>
        <div class="btn-group" style="margin-top:10px; float:right;">
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
          会员登陆 <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" role="menu">
               <LI><a href="会员登陆页面URL"  target="_top">会员登陆</a></LI>
               <LI><a href="会员注册页面URL"  target="_top">会员注册</a></LI>
            </ul>
        </div>
    </div>
</div>

2.文章板块需要用到的BootStrap元素

1.轮换图片插件（caoursel)——解决了展示图片时图片变形的问题。

2.标签页插件（tabs）——对插件的样式进行了美化，并增加了自动切换功能。

3.信息按钮（btn-info）组件——用它列出文章分类信息。

3.图书板块需要用到的元素

1.自己开发的Jquery Tab插件

2.缩略图(thumbnail)组件

3.分类标签(仿豆瓣)

4.用户板块用到的BootStrap元素

1.BootStrap原生tab

2.圆形图片（image_circle）

文章板块的设计与实现

布局

怎样的布局才能让网站中的文章以较好的形式呈现在首页上呢？既要反应更新，又要有精华。由于文章板块在首页上处于最上面的部分，所以，考虑使用轮换图片插件来吸引眼球，并且还需要展示最新的文章和热门文章以及文章分类。划分如下：

左部——轮换图片(carousel)和文章列表(tabs)部分，各占一半。
右部——文章分类部分。

左边占据（8/12），右边占据（4/12）

布局代码如下：

<!--板块的左部，使用panel，占据8/12-->
<div class="panel panel-default col-md-8">
      <!--轮换图片（carousel）插件,占左部的一半-->
      <div class="col-md-6">
          <div  class="carousel slide" >
          </div>
       </div>
    <!--文章tabs，占左部的一半-->
      <div class="noborder col-md-6">
          <div class="tab" role="tabpanel">
          </div>
    </div>
</div>
<!--板块的右部，使用普通的DIV，占据4/12-->
<div class="col-md-4">
</div>

使用Carousel（轮换图片）插件

首页中使用Carousel插件往往能达到吸睛的目的，是用来展示图文内容的最佳手段。在页面中使用carsouel插件很容易，可以分为以下几个步骤：

1.在DIV的class属性中加入carousel

加入carousel后，该DIV就是一个轮换图片插件了

<div class="carousel slide" data-ride="carousel">

</div>

2.设置内容区（carsouel-inner）

在上述DIV中加入新的DIV作为其主体内容，其class="carsouel-inner"。

<div class="carousel-inner" role="listbox">

</div>

3.在内容区中放入要展示的元素（item）

<div class="item active">
      <a href="包含图片文章路径">
          <img src="图片路径" alt="图片信息"/></a>
          <div class="carousel-caption">
               <h4 class="alpha">
                   <a style="color:white;" href="包含图片文章路径">图片标题</a>
               </h4>
              </div>

      </div>
      <!--其他item-->

可以看到在元素区中包含文章展示信息——文内图片+标题+指向文章的链接。

4.按钮区（carousel-control）

最后放入，“上一个”，“下一个”按钮（左右箭头），用于用户自主切换。

<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>

图片变形

运行右侧的代码中可以看出,当不同长宽比的图片试图占满元素(item)区时，图片发生了变形。

解决展示时图片变形的问题

运行上节的代码我们发现插件中的图片发生了变形，分析其原因为：轮换插件中的图片使用的文章中的第一张图片，图片的大小不一，而轮播插件的大小基本是固定的，所以展示的时候图片出现了变形。下面看看怎么解决这个问题：

1.引入Jqthumb.js

在BootStrap中我们找不到解决办法，所以我们需要借助其它工具。Jqthumb插件是专门用来为图片生成缩略图的，它可以从图片中的任何坐标点开始取指定大小的图片区域作为图片的缩略图。你可以点击 https://github.com/pakcheong/jqthumb 来下载它，并将其应用到项目中(假设在当前项目中，jqthumb.js放置在scripts文件夹中):

<script type="text/javascript" src="/scripts/jqthumb.js"></script>

2.在图片加载(onload)的时候调用DrawImage()函数来生成缩略图

DrawImage()函数正是基于jqthumb.js库的，注意该函数一定要写在轮换插件前，因为我们必须在图片加载前生成缩略图。DrawImage()函数代码如下：

<!--导入插件-->
<script type="text/javascript" src="/scripts/jqthumb.js"></script>
<script>
function DrawImage(hotimg)
{
    $(hotimg).jqthumb({
    classname      : 'jqthumb',
            width          : '100%',//宽度
            height         : '300px',//高度
            position       : { y: '50%', x: '50%'},//从图片的中间开始产生缩略图
            zoom           : '1',//缩放比例
            method         : 'auto',//提交方法，用于不同的浏览器环境，默认为‘auto’
    });
}
</script>

在上述代码中，我们使用了jqthumb，并且传入了相关初始化参数。调用了该函数后，在图片加载的时候，就会按照上述参数产生图片的缩略图，从而解决图片变形问题。由于缩略图是从原始图片的正中间开始往两边取得，所以该缩略图包含了图片的主要内容。

针对BootStrap tab的二次开发

为什么要进行二次开发

在文章列表部分，我们使用了BootStrap的Tab插件。BootStrap中的tab控件是在一小块区域展示大量信息的首选。但是，它的样式比较单一。而在展示文章列表模块时，我希望它可以更美观，而且选项卡可以自动切换。

使用Tab插件

在页面中使用BootStrap的Tab插件的方法如下：

1.在DIV加入role=”tabpanel”

加入该属性值后，该DIV则变成了tab插件。

<div class="tab" role="tabpanel">
</div>

2.使用列表制作切换标签

列表项即为切换标签项。

<ul class="nav nav-tabs" role="tablist" style="margin-top:0px;" id="docTabs">
<li role="presentation" class="active"><a href="#Section_new"
aria-controls="home" role="tab" data-toggle="tab"> 最新</a></li>
<!--其余标签卡……-->
</ul>

代码中可以看出，在超级链接元素（a）中有指向该标签页内容的链接地址，如“最新”标签中，href="#Section_new",而这个地址一定要跟后面的标签内容页（tab-pane）的ID一一对应。

3.标签内容页区域（tab-content）

所有的标签内容页均放在这个区域。

<div class="tab-content">
    <!--最新-->
    <!--7天热门-->
    <!--30天热门-->
</div>

4.单个标签页（tab-pane）

tab插件的最小元素，具体的标签内容页。

<div role="tabpanel" class="tab-pane fade in active" id="Section_new">
    <P>
        tab中的内容
    </P>
</div>
<!--其余标签页……-->

tab样式美化

下面我们来美化一下tab的样式吧，通过CSS代码来设置tab插件的样式，这些样式会覆盖掉bootstrap中的原有样式达到美化tab的效果，主要包括:

标签的形状和背景色
当前(被选中)标签的样式和背景色
标签内容页样式
与小屏幕兼容

//标签样式
.tab .nav-tabs {
……//详见右侧代码
}
//标签链接样式
.tab .nav-tabs li a {
background: transparent;
……//详见右侧代码
}
//当前选中标签样式
.tab .nav-tabs li.active a, .tab .nav-tabs li.active a i {
……//详见右侧代码
}
//当前选中标签之后插入的样式
.tab .nav-tabs li.active a:after {
……//详见右侧代码
}
//标签内容页样式
.tab .tab-content {
……//详见右侧CSS代码
}
//在小屏幕中的样式
@media only screen and (max-width: 480px) {
……//详见右侧代码
}

tabs自动切换功能的实现

文章列表中列出的最新、7天热门、30天热门这三个选项卡每隔5秒钟自动切换，当鼠标悬停到某选项卡的时候，则暂停轮换，移开后，继续切换。代码设计思路如下：

设置一个定时器timer()，每隔5秒钟对标签页进行切换一次。
在网页加载完以后就运行该定时器。
当用户鼠标悬停到某个标签页上时，清除该（clearInterval）定时器。
鼠标移开后，继续使用定时器。

//tabs自动轮换
function timer(i)
{
```
interval=setInterval(function()
```
{
```
 $("#docTabs li:eq("+i+") a").tab('show');
 i++;
 if(i>2)
 i=0;
}
```
,5000);
return interval;
}
$(function(){
var i=0;
interval=timer(i);
//当鼠标悬停在列表区域时暂停轮换
$(“.tab-pane”).mouseover(function(){
```
    clearInterval(interval);
});
```
//鼠标移开时继续轮换
$(“.tab-pane”).mouseout(function(){
```
   timer(i);
});
```
});

分类展示

实现过程

文章分类展示部分采用了BootStrap原生的信息按钮（btn-info）,当鼠标悬停时变色，点击则转向相应的二级页面，代码如下：

<div class="col-md-4" style="float:right;">
<div> 
    <H5>分 类</H5>
    <div style="font-size:14px;" id="blogclas">
        <a style="margin-left:5px; margin-bottom:5px;" class="btn btn-info col-md-3" href="二级页面地址" role="button">分类名</a>
           <!--其他分类信息-->
    </div>
</div>
</div>

代码分析

由代码可知，分类区域占有的宽度为（4/12）col-md-4，而其中的单个分类又占有其中的（3/12） col-md-3，也就是每4个分类占一行（实际上由于分类之间要有间隔，只能是3个分类占一行）。

图书板块的设计与实现

布局

图书板块的布局既要考虑到分类展示图书信息，还需要考虑与前面文章板块的对应，所以，图书板块也分为左右两部分，左边同样使用col-md-8,右边使用col-md-4来划分宽度。当然，如果在其它屏幕有不同的布局需求，你也可以添加上其他的属性值，如col-xs-6（在手机屏幕中占6/12）等。布局代码如下：

<div class="col-md-8" id="indexbooks">
首页图书展示区……
</div>
<div class="col-md-4">
图书分类展示区……
</div>

开发Jquery tab

为什么要自己写tab

为了更好的在首页图文并茂的展示图书信息以及按类别展示尽可能多的图书，我决定使用Jquery开发自己的tab。下面来看看我的实现过程。

HTML部分

1.标签项

标签仍然使用列表来完成，列表项即为标签项。

<ul id="booksfilter" style="float:right;font-size:14px;"> 
    <li><a class="cur" href="javascript:void(0);">入门</a><span>|</span></li>
    <li><a href="javascript:void(0);">实战</a><span>|</span></li>
    <li><a href="javascript:void(0);">进阶</a><span>|</span></li>
</ul>

其中’a’标签的class=”cur”表示当前被选中的标签。后面再CSS中会设置它的样式。

2.标签页内容区

使用3个DIV,分别存放入门、实战和进阶的图书。

<div class="booklist">
    入门级图书……
</div>
<div class="booklist" style="display:none;">
    实战类图书……
</div>
<div class="booklist" style="display:none;">
    进阶类图书……
</div>

可以看到，初始时，只有第一个标签页的内容是显示的，而其它两个标签页内容是隐藏（style="display:none;"）的,后面会利用Jquery来控制他们的切换。

3.使用缩略图（thumbnail）组件展示图书信息

在该组件中包含了图书封面、图书标题、和链接到该图书页面的超级链接。

<div class="thumbnail" style="height:220px; border-width:0px;">
  <a href="/book/577e11aa2f33c" target="_blank">
                <img style="height:130px;" src="http://img3.doubanio.com/mpic/s1039608.jpg">            
  </a>
  <div class="caption">
    <h5 style="text-align:center;">
    <a href="/book/577e11aa2f33c" target="_blank">
    LINUX权威指南（...        </a></h5>
     <p style="text-align:center;">
    评论(0) <span class="badge">1推荐</span></p>
  </div>
</div>

另外，每本图书所占的宽度为col-md-3,也就是每4本书占据一行。

设计Tab的样式

下面我们来设计他的CSS样式，让我们的tabs尽量美观。这些样式主要包括：

标签项样式
标签项中链接的样式
当前被选中标签的样式（cur）

//选项卡列表样式
#booksfilter li
{
```
padding:5px;//内边距 5px
list-style-type:none;
float:left;
padding:0px;
```
}
//设置‘|’的左右边距
#booksfilter span
{
```
margin-left:5px;
margin-right:5px;
```
}

//选项卡链接的样式
#booksfilter a
{
```
padding:5px;//内边距：5px
text-decoration:none;//无下划线
```
}
//选项卡被选中或当鼠标移动到选项卡时的样式
#booksfilter a.cur,#booksfilter a:hover
{
```
background-color:#e67e22;//背景色
color:white;//前景色
border-radius:5px;//圆角
```
}

代码注释已经很详细了，当然大家也可以修改它来设计出更美的样式。

实现Tab的行为

当标签项点击切换的时候，这部分的交互就要交给Jquery代码来完成了。代码设计思路如下：

遍历所有的标签页，为每个标签页添加点击(click)事件的处理函数

在该处理函数，高亮（使用Jquery在该标签项的class中添加cur）显示当前标签项和其对应的标签页，隐藏其它。

$(function()
        {
    $('#booksfilter a').each(function(i)
    {//对每个tabs中的标签添加点击（click）事件的处理函数

        $(this).click(function(){
            $(this).addClass('cur');
            $(this).parent().siblings().find('a').removeClass('cur');//删除其他任何选项的cur类
            $('.booklist').eq(i).show();//显示本节点
            $('.booklist').eq(i).siblings().hide();//隐藏兄弟节点
        })

    });

        });

在右侧具体代码中，为了适应屏幕大小，将col-md-3改为了col-xs-3,如果你想使用这个插件的话在你的项目中记得改回去:)。另外，js代码直接放在了HTML的尾部。

仿豆瓣分类标签的实现

为了和文章分类部分的样式进行区分，我决定自己动手写一个具有其他样式的分类标签集。刚好看到豆瓣读书板块的首页中的图书分类标签还不错，于是决定自己写一个类似的样式。首先是HTML代码部分：

<div class="col-md-4">
<h5 style="margin-top:0px;">
     图书分类
</h5>
<div class="row" id="bookclass">
    <a href="图书分类页面" class="col-md-3">分类名</a>
    <!--其他分类-->
</div>
</div>

可以看到图书分类标签很简单——直接使用’a’标签作为分类标签，下面只要针对它写CSS样式就可以了。

//a标签样式
#bookclass a
{
    display:block;//区块显示
    background-color:#f5f5f5;//背景色（跟豆瓣相同）
    text-align:center;//文字居中
    padding:2px 5px;//内边距，上下2px，左右5px
    float:left;//左浮动，从而可以实现水平排列
    margin:2px 2px;//外边距，上下2px,左右2px
}
//当鼠标悬停时改变背景色
#bookclass a:hover
{
    background-color:#e8e8e8;//同豆瓣颜色
}

用户板块的设计与实现

布局

由于项目开发时间仓促，用户板块没有加入特别的样式美化和行为，而是使用了原生tab。在用户板块中，主要展示最新加入的用户和为博客社区做出最多贡献的用户（高分用户）。布局比较简单，采用整块布局，利用它来展示用户信息。布局主要代码如下：

<div class="panel panel-default">
<!--用户展示区-->
</div>

用户板块的实现

用到的BootStrap元素

在用户板块主要用到的BootStrap元素如下：

Bootstrap tab——以标签页的方式展示新会员和高分会员
圆形图片区（img-circle）——用于展示用户的头像。

实现过程

用户板块主要使用了BootStrap tab,前面的章节已经介绍过其使用方法。主要包括：

1.在DIV中加入role=”tabpanel”，该DIV则会成为tab

<div role="tabpanel">
</div>

2.使用列表来制作标签页

<ul id="myTabregister" class="nav nav-tabs" role="tablist">
      <li role="presentation" class="active">
         <a href="#newRegister" id="home-tab" role="tab" data-toggle="tab" aria-controls="home" aria-expanded="true">新会员</a>         
     </li>
      <li role="presentation" class="">
          <a href="#highScoreRegister" role="tab" id="profile-tab" data-toggle="tab" aria-controls="profile" aria-expanded="false">高分会员</a>
     </li>

</ul>

同样，列表中，超级链接的地址href的值和单个标签内容页的id值一一对应，如最新会员标签项的href="newRegister"。

3.标签内容区域（tab-content）

<div id="myTabContent" class="tab-content" style="text-align:center;">
    <!--最新会员展示区-->
    <!--高分会员展示区-->
</div>

4.单个标签页(tabpanel)

<div role="tabpanel" class="tab-pane fade active in" id="newRegister" aria-labelledby="home-tab">
                    <div class="row" style="margin-top:10px;">
                        <div class="col-md-2" style="height:200px;">
                            <a href="会员主页">
                                <img class="img-circle" src="图片路径"style="width:80px; height: 80px;" >
                            </a>
                        </div>
                        <!--其他最新会员……-->
                  </div>
                  <!--高分会员-->

该示例代码中主要列出了“最新会员”的展示信息，其ID为newRegister,与其标签项的链接地址相同。其中每个会员信息占有的屏幕宽度为col-md-2(在右侧代码中为了满足屏幕尺寸需要改为col-xs-2),也就是每6个用户占据一行。

本课程内容转自：汇智网