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前提下宽度总是当前视口的宽度。




    Bootstrap4 导航栏navbar_第1张图片


    垂直导航栏

    通过删除 .navbar-expand-xl|lg|md|sm 类来创建垂直导航栏:



    不同颜色导航栏

    可以使用以下类来创建不同颜色导航栏:.bg-primary.bg-success.bg-info.bg-warning.bg-danger.bg-secondary.bg-dark 和 .bg-light)。

    提示: 对于暗色背景需要设置文本颜色为浅色的,对于浅色背景需要设置文本颜色为深色的。



     

    不同颜色导航栏


     

    对于暗色背景需要设置文本颜色为浅色的,对于浅色背景需要设置文本颜色为深色的。























你可能感兴趣的:(Bootstrap4 导航栏navbar)