Bootstrap 登录和注册页面相同

Question

我在 Bootstrap 中制作了不同的登录和注册按钮，但它们显示相同的页面。我想制作采用不同数据的表格，但它会弹出相同的表格。请帮忙

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<title>Hello, world!</title>
</head>

<body>
  <nav class="navbar navbar-light bg-light">
    <a class="navbar-brand">Time Table</a>
    <!--Added by online for Login-->
    <button data-toggle="modal" data-target=".bs-example-modal-sm" role="button" class="btn btn-outline-success my-2 my-sm-0" type="submit"><b>Login</b></button>
    <div class="modal fade bs-example-modal-sm" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h4 class="modal-title" id="myModalLabel">Login</h4>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                    aria-hidden="true">&times;</span></button>

          </div>
          <div class="modal-body">
            <form name="reg-form">
              <div class="form-group">
                <label for="email" class="control-label">Email:</label>
                <input type="email" class="form-control" id="email" required>
              </div>
              <div class="form-group">
                <label for="passward" class="control-label">passward:</label>
                <input type="password" class="form-control" id="password" required>

              </div>
              <div class="form-group">
                <button type="submit" class="btn btn-primary" value="submit">Submit</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
              </div>
            </form>
          </div>

        </div>
      </div>
    </div>


    <!--Added by online for Register-->
    <button data-toggle="modal" data-target=".bs-example-modal-sm" role="button" class="btn btn-outline-info my-2 my-sm-0" type="submit"><b>Register</b></button>
    <div class="modal fade bs-example-modal-sm" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h4 class="modal-title" id="myModalLabel">Register</h4>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                    aria-hidden="true">&times;</span></button>

          </div>
          <div class="modal-body">
            <form name="reg-form">
              <div class="form-group">
                <label for="username" class="control-label">Name:</label>
                <input type="text" class="form-control" id="username" required>
              </div>
              <div class="form-group">
                <label for="email" class="control-label">Email:</label>
                <input type="email" class="form-control" id="email" required>
              </div>
              <div class="form-group">
                <label for="passward" class="control-label">passward:</label>
                <input type="password" class="form-control" id="password" required>

              </div>
              <div class="form-group">
                <label for="con-passward" class="control-label">Confirm passward:</label>
                <input type="password" class="form-control" id="password" required>

              </div>
              <div class="form-group">
                <button type="submit" class="btn btn-primary" value="submit">Submit</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
              </div>
            </form>
          </div>

        </div>
      </div>
    </div>
  </nav>



  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

我在 Bootstrap 中制作了不同的登录和注册按钮，但它们显示相同的页面。我想制作采用不同数据的表格，但它会弹出相同的表格。请帮忙

Answer 1

只需为每个按钮的 data-target 提供唯一值。设置完毕！

<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
    integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
  <link rel="stylesheet" href="styles.css">
  <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <title>Hello, world!</title>
</head>

<body>
  <nav class="navbar navbar-light bg-light">
    <a class="navbar-brand">Time Table</a>
    <!--Added by online for Login-->
    <button data-toggle="modal" data-target="#myModal1" role="button"
      class="btn btn-outline-success my-2 my-sm-0" type="submit"><b>Login</b></button>
    <div class="modal fade bs-example-modal-sm" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h4 class="modal-title" id="myModalLabel">Login</h4>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                aria-hidden="true">&times;</span></button>

          </div>
          <div class="modal-body">
            <form name="reg-form">
              <div class="form-group">
                <label for="email" class="control-label">Email:</label>
                <input type="email" class="form-control" id="email" required>
              </div>
              <div class="form-group">
                <label for="passward" class="control-label">passward:</label>
                <input type="password" class="form-control" id="password" required>

              </div>
              <div class="form-group">
                <button type="submit" class="btn btn-primary" value="submit">Submit</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
              </div>
            </form>
          </div>

        </div>
      </div>
    </div>


    <!--Added by online for Register-->
    <button data-toggle="modal" data-target="#myModal2" role="button"
      class="btn btn-outline-info my-2 my-sm-0" type="submit"><b>Register</b></button>
    <div class="modal fade bs-example-modal-sm" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h4 class="modal-title" id="myModalLabel">Register</h4>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                aria-hidden="true">&times;</span></button>

          </div>
          <div class="modal-body">
            <form name="reg-form">
              <div class="form-group">
                <label for="username" class="control-label">Name:</label>
                <input type="text" class="form-control" id="username" required>
              </div>
              <div class="form-group">
                <label for="email" class="control-label">Email:</label>
                <input type="email" class="form-control" id="email" required>
              </div>
              <div class="form-group">
                <label for="passward" class="control-label">passward:</label>
                <input type="password" class="form-control" id="password" required>

              </div>
              <div class="form-group">
                <label for="con-passward" class="control-label">Confirm passward:</label>
                <input type="password" class="form-control" id="password" required>

              </div>
              <div class="form-group">
                <button type="submit" class="btn btn-primary" value="submit">Submit</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
              </div>
            </form>
          </div>

        </div>
      </div>
    </div>
  </nav>

  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->


  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
    integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
    crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
    integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
    crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
    integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
    crossorigin="anonymous"></script>
</body>

</html>

Bootstrap 登录和注册页面相同

Bootstrap Login and Register Page are Same

html

bootstrap-modal

bootstrap-4