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

一,源代码文件简单介绍

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

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

二,怎样引入的问题

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

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

三,路径导航栏演示样例

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

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

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

看下成果:

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

四,小结

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

05-06 20:47