如何获取Bootstrap v5.3仅导航栏的自定义文件？

核心逻辑 #

Bootstrap 5.3的导航栏无需引入完整库，只需要提取它依赖的核心CSS和JS组件即可。旧版本的精简思路在v5.3依然适用，但要注意组件依赖的细微变化：

• 必须保留的CSS模块：布局基础样式（容器、网格核心规则）、导航栏自身样式（.navbar、.nav、.dropdown等类）、响应式工具类（用于控制折叠断点）
• 若需交互功能（折叠、下拉），必须引入的JS模块：Popper.js（下拉菜单依赖它做定位）、collapse插件，下拉菜单额外需要dropdown插件

具体实现步骤 #

1. 精简CSS获取
   用Bootstrap官网的自定义构建工具，只勾选「Navbar」「Layout」「Utilities」「Dropdown」相关选项，导出最小化的CSS文件，这样能最大程度减少体积。

2. 精简JS获取
   按需引入对应的插件文件：

   • 仅需折叠功能：引入popper.min.js + bootstrap-collapse.min.js
   • 需折叠+下拉菜单：再额外引入bootstrap-dropdown.min.js

3. 示例代码

   <!DOCTYPE html>
   <html lang="zh-CN">
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>仅Bootstrap 5.3导航栏</title>
     <!-- 自定义构建的精简CSS -->
     <link rel="stylesheet" href="path/to/custom-bootstrap-navbar.css">
   </head>
   <body>
     <nav class="navbar navbar-expand-lg navbar-light bg-light">
       <div class="container-fluid">
         <a class="navbar-brand" href="#">Navbar</a>
         <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
           <span class="navbar-toggler-icon"></span>
         </button>
         <div class="collapse navbar-collapse" id="navbarNav">
           <ul class="navbar-nav">
             <li class="nav-item">
               <a class="nav-link active" aria-current="page" href="#">Home</a>
             </li>
             <li class="nav-item">
               <a class="nav-link" href="#">Features</a>
             </li>
             <li class="nav-item dropdown">
               <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                 Dropdown
               </a>
               <ul class="dropdown-menu">
                 <li><a class="dropdown-item" href="#">Action</a></li>
                 <li><a class="dropdown-item" href="#">Another action</a></li>
               </ul>
             </li>
           </ul>
         </div>
       </div>
     </nav>
   
     <!-- 必要的JS文件 -->
     <script src="path/to/popper.min.js"></script>
     <script src="path/to/bootstrap-collapse.min.js"></script>
     <script src="path/to/bootstrap-dropdown.min.js"></script>
   </body>
   </html>
   

注意事项 #

• 旧版本的精简思路（只引入navbar相关CSS）在v5.3依然有效，但必须确保依赖的基础样式（如容器、响应式类）被包含，否则会出现布局错乱。
• 如果不需要交互功能（比如固定的非折叠导航），可以完全不引入JS，只保留CSS部分即可。

内容的提问来源于stack exchange，提问作者Nina 89