关键词搜索

源码搜索 ×
×

BootStrap笔记-导航

发布2022-01-24浏览843次

详情内容

运行截图如下：

源码如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>CN_TEST1</title>
  6.     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  7.  
  8. <!--    bootstrap css核心文件-->
  9.     <link rel="stylesheet" href="bootstrap-4.4.1-dist/css/bootstrap.min.css">
  10. <!--    bootstrap使用到了jquery，需要提前引用-->
  11.     <script src="js/jquery-3.5.1.min.js"></script>
  12. <!--    弹窗、提示、下拉菜单-->
  13.     <script src="bootstrap-4.4.1-dist/js/bootstrap.bundle.js"></script>
  14. <!--    bootstrap核心文件-->
  15.     <script src="bootstrap-4.4.1-dist/js/bootstrap.min.js"></script>
  16.  
  17. </head>
  18. <body>
  19.  
  20.     <div class="container-fluid">
  21.  
  22.         <ul class="nav">
  23.             <li class="nav-item">
  24.                 <a class="nav-link" href="#">Link</a>
  25.             </li>
  26.             <li class="nav-item">
  27.                 <a class="nav-link" href="#">Link</a>
  28.             </li>
  29.             <li class="nav-item">
  30.                 <a class="nav-link" href="#">Link</a>
  31.             </li>
  32.             <li class="nav-item">
  33.                 <a class="nav-link disabled" href="#">Link</a>
  34.             </li>
  35.         </ul>
  36.  
  37.         <ul class="nav justify-content-center">
  38.             <li class="nav-item">
  39.                 <a class="nav-link" href="#">Link</a>
  40.             </li>
  41.             <li class="nav-item">
  42.                 <a class="nav-link" href="#">Link</a>
  43.             </li>
  44.             <li class="nav-item">
  45.                 <a class="nav-link" href="#">Link</a>
  46.             </li>
  47.             <li class="nav-item">
  48.                 <a class="nav-link disabled" href="#">Link</a>
  49.             </li>
  50.         </ul>
  51.  
  52.         <ul class="nav justify-content-end">
  53.             <li class="nav-item">
  54.                 <a class="nav-link" href="#">Link</a>
  55.             </li>
  56.             <li class="nav-item">
  57.                 <a class="nav-link" href="#">Link</a>
  58.             </li>
  59.             <li class="nav-item">
  60.                 <a class="nav-link" href="#">Link</a>
  61.             </li>
  62.             <li class="nav-item">
  63.                 <a class="nav-link disabled" href="#">Link</a>
  64.             </li>
  65.         </ul>
  66.  
  67.         <ul class="nav flex-column">
  68.             <li class="nav-item">
  69.                 <a class="nav-link" href="#">Link</a>
  70.             </li>
  71.             <li class="nav-item">
  72.                 <a class="nav-link" href="#">Link</a>
  73.             </li>
  74.             <li class="nav-item">
  75.                 <a class="nav-link" href="#">Link</a>
  76.             </li>
  77.             <li class="nav-item">
  78.                 <a class="nav-link disabled" href="#">Link</a>
  79.             </li>
  80.         </ul>
  81.  
  82. <!--        左列的-->
  83.         <ul class="nav flex-column">
  84.             <li class="nav-item">
  85.                 <a class="nav-link" href="#">Link</a>
  86.             </li>
  87.             <li class="nav-item">
  88.                 <a class="nav-link" href="#">Link</a>
  89.             </li>
  90.             <li class="nav-item">
  91.                 <a class="nav-link" href="#">Link</a>
  92.             </li>
  93.             <li class="nav-item">
  94.                 <a class="nav-link disabled" href="#">Link</a>
  95.             </li>
  96.         </ul>
  97.  
  98.         <!--        选项卡-->
  99.         <ul class="nav nav-tabs">
  100.             <li class="nav-item">
  101.                 <a class="nav-link" href="#">Link</a>
  102.             </li>
  103.             <li class="nav-item">
  104.                 <a class="nav-link" href="#">Link</a>
  105.             </li>
  106.             <li class="nav-item">
  107.                 <a class="nav-link" href="#">Link</a>
  108.             </li>
  109.             <li class="nav-item">
  110.                 <a class="nav-link disabled" href="#">Link</a>
  111.             </li>
  112.         </ul>
  113.  
  114. <!--        胶囊导航-->
  115.         <ul class="nav nav-pills">
  116.             <li class="nav-item">
  117.                 <a class="nav-link active" href="#">Link</a>
  118.             </li>
  119.             <li class="nav-item">
  120.                 <a class="nav-link" href="#">Link</a>
  121.             </li>
  122.             <li class="nav-item">
  123.                 <a class="nav-link" href="#">Link</a>
  124.             </li>
  125.             <li class="nav-item">
  126.                 <a class="nav-link disabled" href="#">Link</a>
  127.             </li>
  128.         </ul>
  129.  
  130.  
  131. <!--        胶囊下拉菜单-->
  132.         <ul class="nav nav-pills">
  133.             <li class="nav-item">
  134.                 <a class="nav-link active" href="#">Link</a>
  135.             </li>
  136.             <li class="nav-item">
  137.                 <a class="nav-link" href="#">Link</a>
  138.             </li>
  139.             <li class="nav-item">
  140.                 <a class="nav-link" href="#">Link</a>
  141.             </li>
  142.             <li class="nav-item">
  143.                 <a class="nav-link disabled" href="#">Link</a>
  144.             </li>
  145.  
  146.             <li class="nav-item dropdown">
  147.                 <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Dropdown</a>
  148.                 <div class="dropdown-menu">
  149.                     <a class="dropdown-item" href="#">Link 1</a>
  150.                     <a class="dropdown-item" href="#">Link 2</a>
  151.                     <a class="dropdown-item" href="#">Link 3</a>
  152.                 </div>
  153.             </li>
  154.  
  155.         </ul>
  156.  
  157.         <!--        选项卡-->
  158.         <ul class="nav nav-tabs">
  159.             <li class="nav-item">
  160.                 <a class="nav-link" href="#">Link</a>
  161.             </li>
  162.             <li class="nav-item">
  163.                 <a class="nav-link" href="#">Link</a>
  164.             </li>
  165.             <li class="nav-item">
  166.                 <a class="nav-link" href="#">Link</a>
  167.             </li>
  168.             <li class="nav-item">
  169.                 <a class="nav-link disabled" href="#">Link</a>
  170.             </li>
  171.  
  172.             <li class="nav-item dropdown">
  173.                 <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Dropdown</a>
  174.                 <div class="dropdown-menu">
  175.                     <a class="dropdown-item" href="#">Link 1</a>
  176.                     <a class="dropdown-item" href="#">Link 2</a>
  177.                     <a class="dropdown-item" href="#">Link 3</a>
  178.                 </div>
  179.             </li>
  180.         </ul>
  181.  
  182. <!--        动态选项卡-->
  183.         <ul class="nav nav-tabs">
  184.             <li class="nav-item">
  185.                 <a class="nav-link" href="#">Link</a>
  186.             </li>
  187.             <li class="nav-item">
  188.                 <a class="nav-link" href="#">Link</a>
  189.             </li>
  190.             <li class="nav-item">
  191.                 <a class="nav-link" href="#">Link</a>
  192.             </li>
  193.             <li class="nav-item">
  194.                 <a class="nav-link disabled" href="#">Link</a>
  195.             </li>
  196.  
  197.             <div class="tab-content">
  198.                 <div class="tab-pane active container" id="home">...</div>
  199.                 <div class="tab-pane container" id="menu">...</div>
  200.                 <div class="tab-pane container" id="menu2">...</div>
  201.             </div>
  202.         </ul>
  203.  
  204.         <ul class="nav nav-pills">
  205.             <li class="nav-item">
  206.                 <a class="nav-link active" href="#">Link</a>
  207.             </li>
  208.             <li class="nav-item">
  209.                 <a class="nav-link" href="#">Link</a>
  210.             </li>
  211.             <li class="nav-item">
  212.                 <a class="nav-link" href="#">Link</a>
  213.             </li>
  214.             <li class="nav-item">
  215.                 <a class="nav-link disabled" href="#">Link</a>
  216.             </li>
  217.  
  218.             <li class="nav-item dropdown">
  219.                 <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Dropdown</a>
  220.                 <div class="dropdown-menu">
  221.                     <a class="dropdown-item" href="#">Link 1</a>
  222.                     <a class="dropdown-item" href="#">Link 2</a>
  223.                     <a class="dropdown-item" href="#">Link 3</a>
  224.                 </div>
  225.             </li>
  226.  
  227.         </ul>
  228.  
  229.     </div>
  230.  
  231. </body>
  232. </html>

解释：

①在ul元素上添加nav类，li上添加nav-item就可以实现导航的功能；

②ul上添加nav类后还可以添加justify-content-center和justify-content-end，设置导航为居中和右对齐；

③flex-column用于创建垂直导航；

④ul上添加nav类后，再添加nav-tabs就是选项卡了，可以使用li中可以添加active作为选中。

相关技术文章

最新源码

下载排行榜
点击QQ咨询
开通会员
返回顶部
×
微信扫码支付 元
微信扫码支付
确定支付下载
请使用微信描二维码支付
×

提示信息

×

选择支付方式

  • 微信支付
  • 支付宝付款
确定支付下载