五分钟上手蓝色小导航：从安装到第一个导航栏

蓝色小导航是一款专注于简洁与高效的导航组件，支持多种布局模式，适合各类网站项目。本文将帮助你快速完成安装与初始化配置。

环境要求

蓝色小导航基于纯 HTML、CSS 和 JavaScript 构建，不依赖任何第三方框架。你只需要一个现代浏览器即可开始使用。

安装步骤

第一步，通过 CDN 引入蓝色小导航的核心文件：

<link rel="stylesheet" href="https://blogxtmjf.ratzcb.cn/css/blue-nav.min.css">
<script src="https://blogxtmjf.ratzcb.cn/js/blue-nav.min.js"></script>

第二步，在 HTML 中创建导航容器：

<nav class="bn-nav" id="mainNav">
  <div class="bn-brand">我的网站</div>
  <ul class="bn-menu">
    <li><a href="#">首页</a></li>
    <li><a href="#">产品</a></li>
    <li><a href="#">关于</a></li>
  </ul>
</nav>

第三步，初始化导航组件：

BlueNav.init('#mainNav', {
  theme: 'light',
  fixed: true,
  animated: true
});

基础配置项

蓝色小导航提供了丰富的配置项，让你可以灵活控制导航栏的行为和外观。以下是几个最常用的配置参数：

• theme：主题模式，可选 light、dark、auto
• fixed：是否固定在页面顶部
• animated：是否启用过渡动画
• breakpoint：移动端触发断点，默认 768px

完成以上步骤后，刷新页面即可看到一个简洁优雅的蓝色导航栏出现在你的网站顶部。接下来你可以根据需要进一步配置颜色、间距等细节。