排行时报

如何用Bootstrap制作导航条

科技数码  2022-12-31 08:20:07  热度:54℃

Sublime Text

01、首先我们需要搭建一个html页面,如下图所示,在页面中导入需要的bootstrap文件

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

03、接下来就给导航添加内容,如下图所示,运用的是ul元素,这里也运用了nav导航样式

04、如果想要激活哪个导航,只需要像下图的方式,在li元素中添加active样式即可

05、Bootstrap中的导航有下拉效果的设计,如果想用这种效果,需要用dropdown样式,如下图所示

06、另外,值得一提的下拉导航条中可以加分割线,如下图所示,运用divider样式即可

07、最后我们运行页面程序,你会看到如下图所示的效果,下拉导航以及激活状态都已经显示出来了

最近更新

  • 怎么将wps输出为pdf的文字水印设置为单行

    怎么将wps输出为pdf的文字水印设置为单行

    2025-04-26690阅读

  • Ubuntu 20.04新增仓颉输入法

    Ubuntu 20.04新增仓颉输入法

    2025-04-26666阅读

  • 950显卡能吃鸡吗

    950显卡能吃鸡吗

    2025-04-27828阅读

  • 扫描件是什么格式的

    扫描件是什么格式的

    2025-04-26688阅读

  • win7怎么设置屏幕休眠密码(win7屏幕保护设置密码)

    win7怎么设置屏幕休眠密码(win7屏幕保护设置密码)

    2025-04-26745阅读

  • 电脑怎么删除桌面图标 笔记本电脑如何删除桌面上的图标

    电脑怎么删除桌面图标 笔记本电脑如何删除桌面上的图标

    2025-04-26743阅读

  • 怎么用vlookup匹配数据?

    怎么用vlookup匹配数据?

    2025-04-26619阅读

  • 嗜睡说明了什么问题

    嗜睡说明了什么问题

    2022-12-21835阅读

  • 入睡很困难该怎么办

    入睡很困难该怎么办

    2022-12-20886阅读

  • 发质不好可以怎么办

    发质不好可以怎么办

    2022-12-21875阅读

  • 精选专题