如何用Bootstrap制作导航条

Bootstrap作为目前比较流行的前端框架,它给我们开发页面提供了便捷。下面小编给大家介绍一下如何用Bootstrap制作导航条

操作方法

  • 01

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

  • 02

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

  • 03

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

  • 04

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

  • 05

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

  • 06

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

  • 07

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

(0)

相关推荐

  • 如何用div制作导航条

    我们在开发网页的时候经常使用到导航条,那么如何利用div制作导航条呢?今天本人就利用div制作一个导航条,同时把制作过程和截图分享给大家,希望对你有所帮助和启发. 操作方法 01 双击打开dreamw ...

  • HTML+CSS制作导航条

    今天无意中看到一个网站的导航条,觉得效果还不错,而且制作也很简单,就自己试着用HTML+CSS做了个一模一样的,下面就把导航条的制作方法及步骤分享给大家! 操作方法 01 首先在<body> ...

  • 如何用HTML5制作进度条方法教程

    进度条是指网络上文件.上传下载与浏览网页的可视化显示条.用HTML5制作,可以简练代码,防止网页冗余,下面,就让我们一起学习如何用H5制作一个即简单又美观的进度条吧 操作方法 01 先在<bod ...

  • 用css配合HTML代码制作导航条下拉面板

    导航下拉面板能让导航装载更多的内容,添加更多的关键词,有利于优化,也使网站显得更加高端大气,如果您需要,我就来提供! 操作方法 01 首先我们来看看下拉面板的效果吧,这个事稍微复杂一点的下拉面板,我们 ...

  • 如何用Bootstrap制作输入框组

    在应用Bootstrap的时候,输入框是使用率很高的元素.但是,单个的输入框已经不能满足如今的用户需求了,通常需要多个元素组合在一起形成输入框组.下面小编就教大家用Bootstrap来制作输入框组. ...

  • 如何用excel制作两条折线?

    方法:使用"折线"图表. 1.打开EXCEL文档,选中表格中要建立图表的数据内容. 2.之后点击"插入"---折线图. 3.建立后效果如图.

  • HTML和css怎样制作横排导航条,菜单

    很多小伙伴学习了一段时间的HTML和css,就想自己动手试试制作导航条菜单,不过却没有思路,今天小编我就来分享一下HTML和css制作导航条的实例,大家可以参考参考. 操作方法 01 如图,制作导航条 ...

  • 用PS做导航条

    想不想用PS做一个导航条,点击一下导航条上的"C盘"就打开C盘,点击一下导航条上的"图片"就打开我的图片文件夹? 嘿,够酷的吧,还等什么,赶快和我一起来动手吧. ...

  • Excel 技巧:[5]如何制作百分比条图

    有时图形比表格能够更直观的反应数据的变化,因此在处理数据时常常需要将表格中的数据转化成图形,Excel使我们最常使用的数据处理软件,提供了强大的作图能力,下面介绍一下如何用Excel制作百分比条图(p ...