BootStrap笔记-导航
生活随笔
收集整理的這篇文章主要介紹了
BootStrap笔记-导航
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
運行截圖如下：
源碼如下：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>CN_TEST1</title><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><!-- bootstrap css核心文件--><link rel="stylesheet" href="bootstrap-4.4.1-dist/css/bootstrap.min.css"> <!-- bootstrap使用到了jquery，需要提前引用--><script src="js/jquery-3.5.1.min.js"></script> <!-- 彈窗、提示、下拉菜單--><script src="bootstrap-4.4.1-dist/js/bootstrap.bundle.js"></script> <!-- bootstrap核心文件--><script src="bootstrap-4.4.1-dist/js/bootstrap.min.js"></script></head> <body><div class="container-fluid"><ul class="nav"><li class="nav-item"><a class="nav-link" href="#">Link</a></li><li class="nav-item"><a class="nav-link" href="#">Link</a></li><li class="nav-item"><a class="nav-link" href="#">Link</a></li><li class="nav-item"><a class="nav-link disabled" href="#">Link</a></li></ul><ul class="nav justify-content-center"><li class="nav-item"><a class="nav-link" href="#">Link</a></li><li class="nav-item"><a class="nav-link" href="#">Link</a></li><li class="nav-item"><a class="nav-link" href="#">Link</a></li><li class="nav-item"><a class="nav-link disabled" href="#">Link</a></li></ul><ul class="nav justify-content-end"><li class="nav-item"><a class="nav-link" href="#">Link</a></li><li class="nav-item"><a class="nav-link" href="#">Link</a></li><li class="nav-item"><a class="nav-link" href="#">Link</a></li><li class="nav-item"><a class="nav-link disabled" href="#">Link</a></li></ul><ul class="nav flex-column"><li class="nav-item"><a class="nav-link" href="#">Link</a></li><li class="nav-item"><a class="nav-link" href="#">Link</a></li><li class="nav-item"><a class="nav-link" href="#">Link</a></li><li class="nav-item"><a class="nav-link disabled" href="#">Link</a></li></ul><!-- 左列的--><ul class="nav flex-column"><li class="nav-item"><a class="nav-link" href="#">Link</a></li><li class="nav-item"><a class="nav-link" href="#">Link</a></li><li class="nav-item"><a class="nav-link" href="#">Link</a></li><li class="nav-item"><a class="nav-link disabled" href="#">Link</a></li></ul><!-- 選項卡--><ul class="nav nav-tabs"><li class="nav-item"><a class="nav-link" href="#">Link</a></li><li class="nav-item"><a class="nav-link" href="#">Link</a></li><li class="nav-item"><a class="nav-link" href="#">Link</a></li><li class="nav-item"><a class="nav-link disabled" href="#">Link</a></li></ul><!-- 膠囊導航--><ul class="nav nav-pills"><li class="nav-item"><a class="nav-link active" href="#">Link</a></li><li class="nav-item"><a class="nav-link" href="#">Link</a></li><li class="nav-item"><a class="nav-link" href="#">Link</a></li><li class="nav-item"><a class="nav-link disabled" href="#">Link</a></li></ul><!-- 膠囊下拉菜單--><ul class="nav nav-pills"><li class="nav-item"><a class="nav-link active" href="#">Link</a></li><li class="nav-item"><a class="nav-link" href="#">Link</a></li><li class="nav-item"><a class="nav-link" href="#">Link</a></li><li class="nav-item"><a class="nav-link disabled" href="#">Link</a></li><li class="nav-item dropdown"><a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Dropdown</a><div class="dropdown-menu"><a class="dropdown-item" href="#">Link 1</a><a class="dropdown-item" href="#">Link 2</a><a class="dropdown-item" href="#">Link 3</a></div></li></ul><!-- 選項卡--><ul class="nav nav-tabs"><li class="nav-item"><a class="nav-link" href="#">Link</a></li><li class="nav-item"><a class="nav-link" href="#">Link</a></li><li class="nav-item"><a class="nav-link" href="#">Link</a></li><li class="nav-item"><a class="nav-link disabled" href="#">Link</a></li><li class="nav-item dropdown"><a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Dropdown</a><div class="dropdown-menu"><a class="dropdown-item" href="#">Link 1</a><a class="dropdown-item" href="#">Link 2</a><a class="dropdown-item" href="#">Link 3</a></div></li></ul><!-- 動態選項卡--><ul class="nav nav-tabs"><li class="nav-item"><a class="nav-link" href="#">Link</a></li><li class="nav-item"><a class="nav-link" href="#">Link</a></li><li class="nav-item"><a class="nav-link" href="#">Link</a></li><li class="nav-item"><a class="nav-link disabled" href="#">Link</a></li><div class="tab-content"><div class="tab-pane active container" id="home">...</div><div class="tab-pane container" id="menu">...</div><div class="tab-pane container" id="menu2">...</div></div></ul><ul class="nav nav-pills"><li class="nav-item"><a class="nav-link active" href="#">Link</a></li><li class="nav-item"><a class="nav-link" href="#">Link</a></li><li class="nav-item"><a class="nav-link" href="#">Link</a></li><li class="nav-item"><a class="nav-link disabled" href="#">Link</a></li><li class="nav-item dropdown"><a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Dropdown</a><div class="dropdown-menu"><a class="dropdown-item" href="#">Link 1</a><a class="dropdown-item" href="#">Link 2</a><a class="dropdown-item" href="#">Link 3</a></div></li></ul></div></body> </html>解釋：
①在ul元素上添加nav類，li上添加nav-item就可以實現導航的功能；
②ul上添加nav類后還可以添加justify-content-center和justify-content-end，設置導航為居中和右對齊；
③flex-column用于創建垂直導航；
④ul上添加nav類后，再添加nav-tabs就是選項卡了，可以使用li中可以添加active作為選中。
總結
以上是生活随笔為你收集整理的BootStrap笔记-导航的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： PHP笔记-自定义MVC框架
- 下一篇： uint16 累加_如何把一个uint1