Bootstrap入门Demo——制作路径导航栏
2014-12-15 22:13
204 查看
今天在在群里聊天的时候看到一只程序员发了一张用Bootstrap做的界面,感觉挺好看,然后去官网看了下组件,发现都挺漂亮的,然后看到了路径导航栏,刚好要做这个东西,然后就下了Bootstrap的源码看了看。
找到图中两个文件,然后烤出使用到的样式段,因为做的这个路径导航栏只用到了CSS文件,所以,我们只需抽出用到的这段CSS文件,把它单独拿出来,放到我们系统的CSS元件库就ok了。
看下成果:
一,源码文件简介
下载完源码之后,我们肯定是想着先把源码中的Demo先运行下看看,但是,看着这么多英文的东西还是很迷茫,所以,从整体上熟悉下都有什么东西还是很有必要的。二,如何引入的问题
现在很多UI框架都是基于Jquery的,所以,在使用之前,如果需要,一定要先引入jquery文件,然后是框架的JS文件,css文件等,之前用过EasyUI,相比EasyUI的使用,bootstrap还是挺简单的,只需简单引入三个文件就好了。三,路径导航栏示例
因为只是为了使用路径导航栏这一个控件,所以,为了脱离Bootstrap的使用环境,我需要把路径导航栏这个控件的CSS和JS文件抽出来,我们在整体的CSS和JS的文件夹中:找到图中两个文件,然后烤出使用到的样式段,因为做的这个路径导航栏只用到了CSS文件,所以,我们只需抽出用到的这段CSS文件,把它单独拿出来,放到我们系统的CSS元件库就ok了。
看下成果:
四,小结
最近学习框架,发现为了快速上手,基本步骤都是先看Demo,然后了解大致都有什么内容,最后尝试改动Demo,框架用好了,感觉开发还蛮简单的,省去了好多花在界面上的时间。相关文章推荐
- Bootstrap入门Demo——制作路径导航栏
- Bootstrap入门Demo——制作路径导航栏
- CSS 菜单系列:用 UL 制作横向导航菜单-入门版
- [cocos2d-x学习笔记][入门基础]Box-2d物理引擎的使用02制作一个简易的愤怒小鸟Demo
- 【Bootstrap Demo】入门例子创建
- Flask入门之Bootstrap介绍使用和Flask-Nav快速导航栏
- js入门·表单元素(select下拉列表)制作二级联动菜单和网站导航 .txt
- GAN学习指南:从原理入门到制作生成Demo,总共分几步?
- ajax应用入门——demo制作(2)
- Bootstrap 折叠(Collapse)插件制作侧边栏导航菜单
- GAN学习指南:从原理入门到制作生成Demo
- 通过bootstrap插件制作响应式导航!
- 页面导航制作入门
- CSS3媒体查询入门,制作自己的响应式导航
- bootstrap导航插件wizard--源码demo
- 一周乱弹(3-18 bootstrap模态框表单提交、jsp页面获取项目路径、bootstrap三级导航菜单、css是否显示属性)
- Bootstrap页面布局18 - BS导航路径以及分页器
- bootstrap的导航路径和分页器
- Bootstrap入门书籍之(四)菜单、按钮及导航
- GAN学习指南:从原理入门到制作生成Demo