Bootstrap4 导航栏navbar
导航栏一般放在页面的顶部。
我们可以使用 .navbar 类来创建一个标准的导航栏,后面紧跟: .navbar-expand-xl|lg|md|sm 类来创建响应式的导航栏 (大屏幕水平铺开,小屏幕垂直堆叠)。
导航栏上的选项可以使用
- 元素并添加 class=”navbar-nav” 类。 然后在
- 元素上添加 .nav-item 类, 元素上使用 .nav-link 类:
container-fluid遇container的区别
container 响应式
container-fluid 响应式一个宽度是百分百
container
类和container-fluid
类的区别体现在是否有随视口宽度改变的margin
存在。container
类所谓的自适应也是通过margin
的改变来完成,container-fluid
类的百分百宽度是指在固有的15px的padding
前提下宽度总是当前视口的宽度。垂直导航栏
通过删除 .navbar-expand-xl|lg|md|sm 类来创建垂直导航栏:
不同颜色导航栏
可以使用以下类来创建不同颜色导航栏:.bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark 和 .bg-light)。
提示: 对于暗色背景需要设置文本颜色为浅色的,对于浅色背景需要设置文本颜色为深色的。
不同颜色导航栏
对于暗色背景需要设置文本颜色为浅色的,对于浅色背景需要设置文本颜色为深色的。
还没有评论,来说两句吧...