当前位置:首页 > 经验 > 数码摄影 > it技术

怎么用bootstrap制作导航条

关注:71 发布时间:2021-09-14 14:54:08

导语本文整理了怎么用bootstrap制作导航条经验知识,帮助您全面了解,小白也能成为高手,跟随小编一起来看一看吧!

需要准备的物品

升华文本

详细介绍方法/步骤

首先,我们需要构建一个html页面,如下图所示,并将所需的引导文件导入页面

然后我们在body标签中写下nav元素,如下图所示,并注意给nav元素添加导航条样式

接下来,添加导航内容,如下图所示,使用ul元素,也使用导航风格

如果您想激活哪个导航,只需将激活的样式添加到li元素中。

bootstrap中的导航具有下拉效应的设计。如果你想使用这种效果,你需要使用下拉样式,如下图所示

另外值得一提的是,可以在下拉导航栏中添加分隔线,如下图所示,可以使用分隔线样式

比较后,我们运行页面程序,您会看到如下图所示的效果,下拉导航和激活状态已经显示

猜你喜欢

  • excel横列变竖列及竖列变横列

    excel横列变竖列及竖列变横列66人喜欢

    需要准备的物品excel详细介绍方法/步骤打开excel电子表格,分别输入水平列和垂直列的数据;选中一行,按ctrl c复制,选中一个空白单元格,点击鼠标右键,选择选择性粘贴;检查转置并确认该操作;会发现单元格中…

    更新时间:2021-07-20 18:51:05

  • 如何把超过五分钟的视频发给别人

    如何把超过五分钟的视频发给别人108人喜欢

    1.信是大家都喜欢的,但是很多朋友不知道视频超过5分钟怎么发微信好友。今天就来和大家聊聊视频超过5分钟如何发微信好友。2.在“我”界面点击“收藏夹”,点击右上角的加号。3.单击图片按钮,选择要发…

    更新时间:2022-03-06 14:53:01

  • 怎么导出导入手机通讯录

    怎么导出导入手机通讯录88人喜欢

    如何导出和导入手机通讯录?以下小系列教你。详细介绍方法/步骤首先我们打开手机,然后点击通讯录;,我们点击更多,然后我们点击导入/导出;弹出界面,我们点击导出到存储设备;然后我们点击导出;,我们点击卡1,然…

    更新时间:2021-11-03 07:00:49

  • qq小程序怎么关

    qq小程序怎么关39人喜欢

    需要准备的物品移动qq详细介绍方法/步骤打开qq,在主页底部的导航栏中选择【动态】。除了好友动态、兴趣部落、栏目拓展等功能,其余动态页面都是小程序。如果您想关闭一个小程序,请单击右上角的调整…

    更新时间:2021-08-28 14:54:05

  • excel利用身份证号码计算年龄

    excel利用身份证号码计算年龄96人喜欢

    需要准备的物品excel2010详细介绍方法/步骤首先,打开excel2010,在表格中输入包含身份证号的数据表,然后单击要放置年龄的单元格。点击编辑栏中的插入函数按钮,弹出插入函数对话框,在类别中选择日期和…

    更新时间:2021-06-25 13:55:09

  • 手机wps字数统计

    手机wps字数统计75人喜欢

    需要准备的物品文字处理系统详细介绍方法/步骤首先下载一个wps软件,各大应用商店都可以下载然后打开wps新建一个空白文档,注意word文档,不要建ppt或excel选择“新建空白”,不要点击其他模板,如果你计…

    更新时间:2021-09-16 20:49:01

  • 调整屏幕亮度的方法

    调整屏幕亮度的方法74人喜欢

    1.打开开始菜单,选择计算机设置,进入计算机设置界面。2.点击电脑设置界面左上角的按钮“…”。3.从下拉菜单中选择设置,设置菜单将出现在屏幕的右侧。4.在设置菜单中点击亮度,在弹出的条设置框中点击…

    更新时间:2022-03-27 16:51:01

  • 广电网络机顶盒wifi复位后怎么设置wifi密码

    广电网络机顶盒wifi复位后怎么设置wifi密码98人喜欢

    1.确认机顶盒打开了网络包,不是只能看电视的包。如果您想使用有线网络,您还应该确保网线接口正确插入,因为有两个接口。2.当您打开电视时,您将首先进入一个导航页面。用遥控器选择进入设置页面。一些…

    更新时间:2022-02-14 18:49:04

  • 怎么编辑受保护的ppt

    怎么编辑受保护的ppt35人喜欢

    当打开一个ppt时,我们经常看到ppt的顶部表示该文档受到保护。那么我们如何编辑受保护的ppt呢?以下小系列将与大家分享。需要准备的物品文稿演示软件详细介绍方法/步骤首先,我们打开一个受保护的ppt…

    更新时间:2021-08-07 11:00:05

  • 华为matebook装的什么系统

    华为matebook装的什么系统64人喜欢

    1.豪威matebook采用win10系统。windows 10是美国微软公司开发的新一代操作系统。它最大的优势是具有积极的扩散模式和完善的服务集成特性。在线帐户登录设置可以方便用户在任何win10设备上快速…

    更新时间:2022-04-06 12:55:01

  • 系统还原在哪里

    系统还原在哪里81人喜欢

    1.在控制面板里面。方法:打开控制面板,查找并打开备份和还原选项,选择还原系统设置和计算机。如果您的计算机没有还原功能,您需要打开此功能来打开系统还原。如果有账号控制,会提示你,通过就好。2.启动…

    更新时间:2022-03-17 16:51:05

  • 怎么制作头条视频

    怎么制作头条视频84人喜欢

    1.首先我们需要打开今天安装在手机里的头条app,默认登录我们的账号,点击下方的加号按钮。2.然后,底部会弹出一系列小图标功能,选择要发布的内容,比如小编选择发布图片和文字。3.打开发布界面,可以输入…

    更新时间:2022-02-26 07:00:27