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,框架用好了,感觉开发还蛮简单的,省去了好多花在界面上的时间。

                      








          

目录
相关文章
|
前端开发 JavaScript
Bootstrap 入门学习
Bootstrap 入门学习
78 0
|
Java 关系型数据库 MySQL
[笔记]Springboot入门《一》springboot+jpa+bootstrap+crud
[笔记]Springboot入门《一》springboot+jpa+bootstrap+crud
Bootstrap5 导航栏9
导航栏可固定于页面顶部或底部,使用 `.fixed-top` 类将其固定在顶部,如示例所示;而 `.fixed-bottom` 类则用于底部固定。代码片段展示了如何应用这些类以实现固定效果。
|
2月前
|
前端开发
Bootstrap5 导航栏8
使用 `.navbar-text` 类可在导航栏中添加非链接文本,确保文本水平对齐且样式统一。示例代码展示了如何在 Bootstrap 导航栏中加入文本和链接。
Bootstrap5 导航栏7
导航栏中的表单和按钮通过使用 `class="form-inline"` 实现水平布局。示例展示了如何在导航栏中嵌入搜索表单和按钮,以及如何使用 `.input-group` 和 `.input-group-prepend` 在输入框前添加标签,如用户名前缀。
Bootstrap5 导航栏6
此示例展示了如何在导航栏中设置下拉菜单。通过添加`<li class="nav-item dropdown">`和相应的`<div class="dropdown-menu">`,可以实现链接的下拉显示功能。
Bootstrap5 导航栏5
折叠导航栏适用于小屏幕设备,通过点击按钮展开或收起导航选项。实现方法是在按钮上使用 `class="navbar-toggler"` 和 `data-bs-toggle="collapse"` 属性,并设置目标 `id` 以匹配包含导航链接的 `div` 元素。示例代码展示了如何构建一个基本的折叠导航栏。
Bootstrap5 导航栏1
Bootstrap5 导航栏通常位于页面顶部,使用 `.navbar` 类创建标准导航栏,并通过 `.navbar-expand-xxl|xl|lg|md|sm` 类实现响应式布局(大屏水平、小屏垂直)。导航选项使用 `<ul>` 和 `class="navbar-nav"`,每个选项用 `<li>` 和 `class="nav-item"`,链接使用 `<a>` 和 `class="nav-link"`。
Bootstrap5 导航栏4
`.navbar-brand` 类用于在导航栏中高亮显示品牌或Logo。通过此类,可以轻松地将文本或图片作为品牌标识展示,并确保其在不同屏幕尺寸上自适应显示。例如,使用 `<img>` 标签插入图片Logo,并通过内联样式设置宽度,实现响应式设计。
Bootstrap5 导航栏2
通过移除 .navbar-expand-xxl|xl|lg|md|sm 类,可创建垂直导航栏。示例如下:背景为浅色的导航栏,包含三个链接项。每个链接项均为列表元素,通过 .nav-item 和 .nav-link 类进行样式设置。