zoukankan      html  css  js  c++  java
  • nav bar


    • fixed-top 滑动网页时,让nav始终停留在页面顶端。
    • navbar, 当屏幕缩放到很小时,显示navbar-toggler
    •   navbar-brand for your company, product, or project name.
    • <span class="navbar-toggler-icon"></span>.-----图标
    • navbar-toggler下拉的时候显示什么? ----data-target="#navlinks"
    • .collapse.navbar-collapse for grouping and hiding navbar contents by a parent breakpoint. In our case, 
    • all the sub-components included in a responsive light-themed navbar that automatically collapses at the md(medium) breakpoint. 
    • navbar-expand-md ----breakpoint: md
    • Navbar togglers are left-aligned by default, but should they follow a sibling element like a .navbar-brand, they’ll automatically be aligned to the far right. Reversing your markup will reverse the placement of the toggler.在代码里面我们先写到navbar-brand,再写的navbartoggler,所以当屏幕缩小时我们看到的是CANDY在左边,navbartoggle在右边。
     1 <nav id="main_nav" class="navbar navbar-dark navbar-expand-md py-0 fixed-top">
     2     <a href="#" class="navbar-brand">CANDY</a>
     3     <button class="navbar-toggler" data-toggle="collapse" data-target="#navlinks" aria-label="Toggle navigation">
     4       <span class="navbar-toggler-icon"></span>
     5     </button>
     6     <div class="collapse navbar-collapse" id="navlinks">
     7       <ul class="navbar-nav">
     8         <li class="nav-item">
     9           <a href="" class="nav-link">HOME</a>
    10         </li>
    11         <li class="nav-item">
    12           <a href="" class="nav-link">ABOUT</a>
    13         </li>
    14         <li class="nav-item">
    15           <a href="" class="nav-link">US</a>
    16         </li>
    17       </ul>
    18     </div>
    19   </nav>

  • 相关阅读:
    JSP学习笔记
    Java之String、StringBuffer、StringBuilder的区别
    Android开发笔记——Handler总结
    深搜_八皇后(HDU_2553)
    广搜_优先队列和记录搜索路径(HDU_1026)
    深搜_素数环(HDU_1016)
    深搜_奇偶减枝(HDU_1010)
    转载 ASP.NET MVC学习之(5):Html.ActionLink
    启动万维网发布服务(W3SVC)
    What is POID
  • 原文地址:https://www.cnblogs.com/LilyLiya/p/14241730.html
Copyright © 2011-2022 走看看