HTML Boot樹形菜單是一段被廣泛應用于網頁開發中的代碼,它可以讓菜單呈現出層級清晰的樹形結構。以下是一段HTML Boot樹形菜單代碼示例:
<nav class="navbar navbar-expand-lg navbar-light bg-light"> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="#">主菜單1 <span class="sr-only">(current)</span></a> <ul class="sub-menu"> <li class="nav-item"><a class="nav-link" href="#">子菜單1</a></li> <li class="nav-item"><a class="nav-link" href="#">子菜單2</a></li> <li class="nav-item"><a class="nav-link" href="#">子菜單3</a></li> </ul> </li> <li class="nav-item"> <a class="nav-link" href="#">主菜單2</a> </li> <li class="nav-item"> <a class="nav-link" href="#">主菜單3</a> <ul class="sub-menu"> <li class="nav-item"><a class="nav-link" href="#">子菜單4</a></li> <li class="nav-item"><a class="nav-link" href="#">子菜單5</a></li> </ul> </li> </ul> </div> </nav>以上代碼中,
<nav>
標簽表示導航菜單,<ul>
標簽表示無序列表,<li>
標簽表示列表項。在菜單中嵌套使用了- 和
- 標簽,實現了樹形結構。
除此之外,
<a>
標簽表示鏈接,在菜單中起到導航到不同頁面的作用。同時,代碼中還出現了一些class屬性,如navbar
、collapse
和nav-item
等,這些屬性為菜單設置了不同的樣式和布局。 總的來說,HTML Boot樹形菜單代碼可以幫助開發者構建出層級清晰、易于使用的導航菜單,同時還能夠根據實際需求進行樣式和布局的設計,非常實用!
上一篇輪回眼CSS樣式
下一篇html 設置單元格長度