在登录页面上完成用户信息的初步检查，检查通过才可以提交到目标页面。 （1）用户名必须为6-20位字符； （2）密码不为空； （3）新增导航栏，导航栏有 首页、新闻、论坛 （4）用bootstrap设计样式

在登录页面上，为了保证用户体验并确保数据安全，开发者通常会进行一些基本的用户信息验证。以下是您所描述的功能点：

1. **用户名有效性检查**：限制输入的用户名长度，要求它介于6到20个字符之间。可以使用前端JavaScript正则表达式验证，如果不符合规定，则显示错误提示。

2. **密码验证**：确保密码不能为空，同样通过前端验证，可以设置相应的必填标志，并在用户尝试提交时进行检查。

3. **导航栏设计**：添加一个包含首页（Home）、新闻（News）和论坛（Forum）三个选项的导航栏。在Bootstrap中，可以使用`<nav>`标签配合`<ul>`和`<li>`元素，以及对应的Bootstrap按钮或链接样式来自定义导航菜单。

<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">网站名称</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 me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" href="#home">首页</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#news">新闻</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#forum">论坛</a>
        </li>
      </ul>
    </div>
  </div>
</nav>