UD5工具箱
导航栏开发术语表
Navbar（导航栏）
Navbar是Navigation Bar的缩写，指网站页面顶部（或侧边）的导航区域。导航栏是用户浏览网站的主要入口，通常包含品牌标识、导航链接、搜索框和功能按钮等元素。一个设计良好的导航栏能显著提升网站的可用性和用户体验。
Bootstrap
Bootstrap是全球最流行的前端UI框架之一，由Twitter团队开发。它提供了丰富的预定义CSS类和JavaScript组件，帮助开发者快速构建响应式网站。Bootstrap的navbar组件封装了导航栏的完整功能，包括响应式折叠、下拉菜单等，开发者只需添加相应的类名即可使用。
Tailwind CSS
Tailwind CSS是一个实用工具类优先的CSS框架，与Bootstrap的组件化思路不同，它提供大量细粒度的工具类（如flex、p-4、bg-blue-500等），让开发者通过组合类名来构建自定义设计。Tailwind不提供预定义组件，因此灵活性更高，但需要编写更多类名。
响应式设计（Responsive Design）
响应式设计是一种网页设计方法，使网站能够在不同尺寸的设备（桌面、平板、手机）上自动调整布局和样式。导航栏的响应式设计通常在小屏幕上将水平菜单折叠为汉堡菜单（hamburger menu），点击后展开完整菜单。
Sticky/Fixed定位
Sticky（粘性定位）和Fixed（固定定位）是CSS中两种让元素固定在视窗特定位置的方式。Fixed定位使元素完全脱离文档流，固定在视窗的指定位置；Sticky定位则在元素达到特定滚动位置时「粘住」。导航栏常使用这两种定位方式，确保用户滚动页面时仍能访问导航。
汉堡菜单（Hamburger Menu）
汉堡菜单是一种由三条水平线组成的图标，用于在移动端表示可展开的导航菜单。点击汉堡图标后，隐藏的导航链接会展开显示。Bootstrap的navbar-toggler和navbar-collapse组件封装了汉堡菜单的实现，Tailwind需要手动添加交互逻辑。
下拉菜单（Dropdown Menu）
下拉菜单是一种点击或悬停后展开子菜单的导航组件。在导航栏中，下拉菜单允许将多个相关链接组织在一个父级菜单项下，节省水平空间。Bootstrap使用dropdown-toggle和dropdown-menu组件实现，Tailwind可使用group-hover或JavaScript实现。
CTA按钮（Call to Action）
CTA按钮是「行动号召」按钮的缩写，是引导用户执行特定操作（如注册、购买、下载）的醒目按钮。在导航栏中放置CTA按钮是常见的转化优化策略，因为导航栏的高可见性能有效提升按钮的点击率。
Brand（品牌区域）
品牌区域是导航栏左侧显示网站Logo或品牌名称的部分，通常链接到网站首页。在Bootstrap中使用navbar-brand类，在Tailwind中使用自定义样式实现。品牌区域是网站身份的重要视觉标识。
断点（Breakpoint）
断点是响应式设计中用于切换布局的屏幕宽度阈值。Bootstrap 5定义了多个断点（xs、sm、md、lg、xl、xxl），导航栏默认在lg断点（992px）处触发折叠。Tailwind也提供类似的断点前缀（sm、md、lg、xl等），用于在不同屏幕尺寸下应用不同的样式。
CDN（内容分发网络）
CDN是Content Delivery Network的缩写，是分布在全球各地的服务器网络，用于加速静态资源（如CSS、JS文件）的分发。使用CDN引入Bootstrap或Tailwind的CSS/JS文件，可以提升页面加载速度并减轻源站压力。