Navbar 代表导航栏,是网页的一个组成部分。它列出了网站内外的许多链接,并使不同部分之间的导航变得容易。目录、菜单和索引是导航栏的一些常见示例。
构建导航栏可能既耗时又令人困惑。因此,像 Bootstrap 这样的库可以派上用场,有很多内置的类和选项。
示例 1:没有 Bootstrap 的导航栏(Vanilla HTML CSS)
Navbar Geeksforgeeks
说明:
HTML:
- 所有按钮和图标的父元素。
-
- :(
- :用于图标。
- :用作导航栏的按钮。
CSS:
- float:此属性将元素的对齐方式从垂直更改为水平。
- list-style:当设置为 none 时,它会删除列表的项目符号。
- text-decoration:负责链接的下划线。
- 宽度:它指的是一个元素所占用的水平空间。
- 高度:元素占用的垂直空间。
输出:
示例 2:使用 Bootstrap 的导航栏
bootstrapNavbar Geeksforgeeks
说明:因为我们的目标是一个没有任何 JavaScript 的静态导航栏,所以使用grid 代替 nav是可行的。
- 将 html 文档与官方 Bootstrap CDN(内容交付网络)链接。
- 用 bootstrap 类定义一个 div 行(这个类帮助我们将一行分成小列)。
- 接下来定义四个类分别为 col-3、4、2 和 3(整数对应于列的宽度)(总宽度为 12)的 div。
- 根据需要创建嵌套的 div。
- 为所有按钮提供一个引导类 btn,它为我们提供所需的填充、边距和悬停效果。
CSS:
- 这一次我们的 CSS 代码要小得多,并且包括一些小的样式,例如字体大小和颜色。
- 填充和边距由引导类负责。
- 导航栏的整个布局由引导行和列组成,这进一步减少了我们的 CSS。
输出:
两种方法的区别:
- bootstrap 版本中的 CSS 非常少。
- 与引导程序相比,香草代码非常灵活。
- 编写普通代码非常乏味,而一旦理解引导代码就变得非常容易。