BootStrap5 概览-2 ——组件中的HTML框架尽量不做改动的原则

BootStrap重要的使用原则就是：

不改变它核心组件的HTML框架，否则可能会出现适配，错位，及组件渲染问题。
比如导航栏核心组件：
nav包含div.container
.container包含button，.collapse .navbar-collapse
collapse navbar-collapse包含ul.navbar-nav
ul.navbar-nav包含li.nav-item
尤其是包含bootstrap自定义组件前缀比如这里的nav前缀的class样式，包含这些样式的HTML框架使用时要保持原样
# Bootstrap 5 Navbar Example

This is a sample Bootstrap 5 navbar with a collapsible menu aligned to the right using ms-auto. It’s part of my coding practice to master full-stack development with Bootstrap.

Code

<nav class="navbar navbar-dark bg-dark navbar-expand-lg">
    <div class="container">
        <a href="#" class="navbar-brand">Frontend Bootcamp</a>
        <button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbarNav" type="button">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav ms-auto">
                <li class="nav-item"><a href="#" class="nav-link">Home</a></li>
                <li class="nav-item"><a href="#" class="nav-link">About</a></li>
                <li class="nav-item"><a href="#" class="nav-link">Services</a></li>
                <li class="nav-item"><a href="#" class="nav-link">Portfolio</a></li>
                <li class="nav-item"><a href="#" class="nav-link">Contact</a></li>
            </ul>
        </div>
    </div>
</nav>


2025年了，为什么还学习bootstrap，tailwindcss不香吗？
首先熟练一个前端框架，做到理解和运用自如，再看其他的框架会比较简单上手。大部分前端框架的核心思想都是一致的，且目前bootstrap和tailwindcss在相互靠拢，bootstrap毕竟是最成熟的带核心组件的框架，后端人员熟练使用bootstrap会比较容易上手更多的前端框架