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

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


        

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



   一,源码文件简介

            

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

                     



   二,如何引入的问题


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



            

      三,路径导航栏示例


             因为只是为了使用路径导航栏这一个控件,所以,为了脱离Bootstrap的使用环境,我需要把路径导航栏这个控件的CSS和JS文件抽出来,我们在整体的CSS和JS的文件夹中:



             



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

 

             看下成果:


          


    四,小结

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

                      








          

目录
相关文章
|
7月前
|
前端开发 JavaScript
Bootstrap 入门学习
Bootstrap 入门学习
43 0
|
6月前
|
Java 关系型数据库 MySQL
[笔记]Springboot入门《一》springboot+jpa+bootstrap+crud
[笔记]Springboot入门《一》springboot+jpa+bootstrap+crud
|
2月前
Bootstrap5 响应式导航栏
Bootstrap5 响应式导航栏
22 4
|
5月前
|
前端开发 JavaScript
Bootstrap Table写一个Demo
Bootstrap Table写一个Demo
32 0
|
前端开发
组件之 媒体对象(图文混排)、 导航组件, 手动实现bootstrap的导航栏
组件之 媒体对象(图文混排)、 导航组件, 手动实现bootstrap的导航栏
组件之 媒体对象(图文混排)、 导航组件, 手动实现bootstrap的导航栏
|
编解码 开发框架 前端开发
Bootstrap入门【人类的天堂】
Bootstrap入门【人类的天堂】
|
前端开发 JavaScript
Bootstrap项目实践:带有导航栏的响应式网页
Bootstrap项目实践:带有导航栏的响应式网页
236 0
Bootstrap项目实践:带有导航栏的响应式网页
|
编解码 移动开发 前端开发
【JQuery】扩展BootStrap入门——知识点讲解(一)
本期主要介绍扩展BootStrap入门——知识点讲解(一)
112 0
【JQuery】扩展BootStrap入门——知识点讲解(一)
|
前端开发 JavaScript iOS开发
【JQuery】扩展BootStrap入门——知识点讲解(二)
本期主要介绍扩展BootStrap入门——知识点讲解(二)
103 0
【JQuery】扩展BootStrap入门——知识点讲解(二)
|
前端开发