Bootstrap插件的使用

　　昨天，我偶然间发现了它——BootStrap插件，它是一一套功能强大的前端组件。说起来，我跟这插件还真算得上有缘，我本来并不是去找这个插件的，我本来是找BootStarp Paginator这个分页插件（稍后我将分享一下该插件实现分页的功能），结果阴差阳错，就碰到它了，我只想说“幸福来的太突然了”。下面我将具体介绍一个这个神奇的插件。

　　首先，我们来看看它到底有些什么东西，再来看看它具体怎么使用。左边是该插件所包含的组件列表。相信大家一看就明白了，这是什么，我就不多说了。

　　相信大家己经对它有一定的了解了，下面我们来说说他具体怎么使用吧。

　　其实，像这类插件，用法大致都差不多，基本上的前端插件用来来都大同小异，不外乎就三点：引入相关的css,引入相关的js，引入相关的字体（这个主要解决中文乱码引起的问题）；这个思路大家以后在学习过程中肯定会经常用到，像比较常见的EasyUI,JQuery minUI,FCKEditor,UEditor等等这一类，都是这样的。

　　首先，大家到官网下载BootStrap;解压后，里面的目录结构稍加整理后是这样的：

　　

　　这是myeclipse里的目录结构，大家以后有在项目中使用相关插件，大家不妨使用这种目录结构（首先为你使用的插件单独建立一个文件夹，这里我使用的是bootstrap,然后在这个文件夹下面建立如下目录：一般是css/js/font/resource/build/images/theme大家看自己下的插件建立就好），这样一大家使用也方便，别人一看就知道，这里是使用了什么插件。

　　接下来，我看来看这个插件具体引入的文件。

  <!-- ------------------------bootstrap---------------------------------- -->
  <link href="bootstrap/css/bootstrap.css" rel="stylesheet">
  <script src="bootstrap/js/jquery-1.8.3.js"></script>
  <script src="bootstrap/bootstrap.js"></script> 

　这是一个分页组件（这里着重是为了讲解怎么使用，分页组件只是一个示例，大家完全可以根据自己的需要去选择自己需要的组件）

<ul class="pagination">
		  <li><a href="#">«</a></li>
		  <li><a href="#">1</a></li>
		  <li><a href="#">2</a></li>
		  <li><a href="#">3</a></li>
		  <li><a href="#">4</a></li>
		  <li><a href="#">5</a></li>
		  <li><a href="#">»</a></li>
</ul>

　这是效果

　这里我只贴一下关键代码，其它的的代码大家自己补全就好了。只要我们引入了前面那些文件，我们就可以快速地生成一个组件，相关组件api,大家可以参照BootStrap组件这里面的，好了，想必大家肯定很想亲自试试吧，那大家开始吧。