Bootstrap 5-导航栏

导航栏容器

 • navbar

代码图


导航栏

 • navbar-nav

代码图


导航栏项

 • nav-item

代码图


导航栏链接项

 • nav-link

代码图

基本的导航栏

代码图

效果图

响应式导航栏

  • navbar-expand-sm(小)
  • navbar-expand-md(中)
  • navbar-expand-lg(大)
  • navbar-expand-xl(超大)
  • navbar-expand-xxl(特大)

代码图

效果图

导航栏的位置

  • justify-content-start(默认,左对齐)
  • justify-content-center(居中对齐)
  • justify-content-end(右对齐)

代码图

效果图

导航栏颜色

  • bg-light(浅白色)
  • bg-dark(黑色)
  • bg-primary(蓝色)
  • bg-success(绿色)
  • bg-info(天蓝色)
  • bg-warning(黄色)
  • bg-danger(红色)
  • bg-secondary(灰色)
所有的导航栏颜色效果图

2c34386bcdc34ffcbbfb15bbaffddbf1.jpg

 代码图

效果图

导航栏文本颜色

  • navbar-dark(白色)
  • navbar-light(黑色)

 代码图

效果图

  • 1
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值