在 Bootstrap 3 中,navbar 是一个非常重要的组件,用于创建响应式的导航栏。下面是一些主要的样式类和它们的作用:
.navbar
这是基本的导航栏容器类,用于包裹整个导航栏。 它会应用一些基本的样式,如背景颜色、内边距等,并且具有响应式行为。 .navbar-header
包含 .navbar 内的标志或相关按钮。 在较小的视口上,.navbar-header 会浮动到左侧。 .navbar-brand
用于显示网站的品牌名称或logo。 当导航栏折叠时,这个元素仍然可见。 .navbar-toggle
用于在小屏幕设备上切换展开/折叠导航栏的按钮。 它会在较小的视口上显示,并且当点击时会触发 .navbar-collapse 的展开/折叠。 .navbar-collapse
用于包裹 .navbar 中可折叠的内容,比如导航链接。 在较大的视口上默认展开,在较小的视口上默认折叠。 .navbar-nav
用于创建一组垂直堆叠的导航链接。 在较大的视口上这些链接会变成水平排列。 .navbar-left 和 .navbar-right
用于将导航项固定在 .navbar 的左端或右端。 在折叠状态下,这些元素会被移动到折叠菜单内部。 .navbar-form
用于在导航栏中添加表单。 表单会根据视口大小自动调整布局。 .navbar-fixed-top 和 .navbar-fixed-bottom
将导航栏固定在页面顶部或底部。 导航栏不会随着页面滚动而移动。 .navbar-inverse 和 .navbar-default
分别定义深色和浅色主题的导航栏样式。 .navbar-static-top
创建一个不随滚动而移动的静态导航栏
|