Bootstrap 教程第二课:制作网站导航条
发布日期:2021-11-30 16:49:52
浏览次数:7
分类:技术文章
本文共 2003 字,大约阅读时间需要 6 分钟。
上一课介绍了用Bootstrap前端框架制作一个简易的主页,其中介绍了使用Bootstrap框架所需要的准备工作,以及文档格式要求,在这里及以后将不再复述,如有不明白的地方,可以查看上一节的内容()。 制作网站的导航条,先从导航开始,导航的结构代码很简单,如下:添加了.nav样式的导航,将会像如下图样显示: 要把这个导航变成网站的横排导航条,需要继续给 ul 添加 .navbar-nav 样式,代码如下:
显示结果如下: 导航的栏目默认提供了两种,一种是.navbar-default 默认样式,另一种是 .navbar-inverse 黑色底色样式,我们可以分别给上面的ul外层添加一个DIV,然后加入两个样式,同时还要给这个DIV添加 .navbar 导航条样式,并给导航中的li添加当前高亮样式.active,代码如下:
navbar-default样式如下: navbar-inverse样式如下: 接下来,我们需要给导航添加自适应的导航隐藏展开按钮,同时给导航添加一个文字LOGO,代码如下:
导航条隐藏时显示效果如下: 导航条显示时如下: 接着,我们可以在导航后面添加一个搜索框,搜索框代码添加在</ul>下面,代码如下:
效果如下: 我们还可以在导航上添加右边的功能导航,这个代码添加在刚刚添加的form表单后面,代码如下:
显示效果如下: 最后,在导航中添加一个下拉菜单功能,我们可以把这个代码添加在留言的后面,代码如下:
显示效果: 一个完整的带有LOGO、主导航、功能导航、搜索框、下拉菜单的导航条就制作完成了,下面贴出完整的代码供大家参考,Bootstrap很强大,需要大家在实践中去学习,所以,简单的复制粘贴,很快就能见到效果,但不如手写一篇来得印象深刻。 完整代码如下:下拉菜单
转载地址:https://leeguoren.blog.csdn.net/article/details/51721226 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!
发表评论
最新留言
很好
[***.229.124.182]2024年04月21日 09时32分16秒
关于作者
喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!
推荐文章
spring boot 与 Ant Design of Vue 实现删除用户(三十)
2019-04-27
Druid连接池实现自定义场景的多数据库的连接
2019-04-27
CentOs7命令行(静默)的方式安装oracle数据库
2019-04-27
基于VMware安装CentOs7的镜像
2019-04-27
PL/SQL数据库管理工具的使用
2019-04-27
带你玩转属于自己的spring-boot-starter系列(一)
2019-04-27
带你玩转属于自己自己的spring-boot-starter系列(二)
2019-04-27
带你玩转属于自己的spring-boot-starter系列(三)
2019-04-27
基于SnowFlake算法如何让分库分表中不同的ID落在同一个库的算法的实现
2019-04-27
Linux文件管理参考
2019-04-27
FTP文件管理项目(本地云)项目日报(一)
2019-04-27
FTP文件管理项目(本地云)项目日报(二)
2019-04-27
FTP文件管理项目(本地云)项目日报(三)
2019-04-27
FTP文件管理项目(本地云)项目日报(七)
2019-04-27
【Linux】血泪教训 -- 动态链接库配置方法
2019-04-27