Bootstrap入门Demo——制作路径导航栏

今天在在群里聊天的时候看到一仅仅程序猿发了一张用Bootstrap做的界面。感觉挺好看。然后去官网看了下组件。发现都挺美丽的，然后看到了路径导航栏，刚好要做这个东西，然后就下了Bootstrap的源代码看了看。

一，源代码文件简单介绍

下载完源代码之后，我们肯定是想着先把源代码中的Demo先执行下看看。可是。看着这么多英文的东西还是非常迷茫，所以，从总体上熟悉下都有什么东西还是非常有必要的。

二，怎样引入的问题

如今非常多UI框架都是基于Jquery的。所以。在使用之前，假设须要，一定要先引入jquery文件，然后是框架的JS文件,css文件等，之前用过EasyUI,相比EasyUI的使用。bootstrap还是挺简单的，仅仅需简单引入三个文件就好了。

三，路径导航栏演示样例

由于仅仅是为了使用路径导航栏这一个控件。所以，为了脱离Bootstrap的使用环境。我须要把路径导航栏这个控件的CSS和JS文件抽出来。我们在总体的CSS和JS的目录中：

找到图中两个文件，然后烤出使用到的样式段，由于做的这个路径导航栏仅仅用到了CSS文件。所以。我们仅仅需抽出用到的这段CSS文件，把它单独拿出来，放到我们系统的CSS元件库就ok了。

看下成果：

四，小结

近期学习框架。发现为了高速上手。基本步骤都是先看Demo,然后了解大致都有什么内容。最后尝试修改Demo,框架用好了，感觉开发还蛮简单的。省去了好多花在界面上的时间。