zoukankan      html  css  js  c++  java
  • Bootstrap入门Demo——制作路径导航栏


            

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



       一,源代码文件简单介绍

                

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

                         



       二,怎样引入的问题


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



                

          三,路径导航栏演示样例


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



                 



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

                 看下成果:


              


        四,小结

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

                          








              

  • 相关阅读:
    Anaconda + Djongo + spyder 网站开发 (三)
    Anaconda + Djongo + spyder 网站开发 (二)
    Anaconda + Djongo + spyder 网站开发 (一)
    实验室网盘链接方式
    R 缓存画图代码,之后再总结
    换源的重要性!!!!
    latex 调整页边距
    Latex 字体设置
    嵌套交叉验证
    FDR及Benjamini-Hochberg方法
  • 原文地址:https://www.cnblogs.com/zsychanpin/p/6962506.html
Copyright © 2011-2022 走看看