Aggiunta di un elenco a discesa di accesso in bootstrap

Sto seguendo questa guida

Ho aggiunto il primo frammento di codice per la mia esistenti navbar, e poi aggiunto il secondo frammento di cui si dice . Tuttavia, il pop-up di accesso non viene visualizzata. Qual è il problema con il mio codice? Inoltre, se posso aggiungere il 3 ° frammento di codice?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>SiteTitle</title>
    <meta name"viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="keywords" content="">

    <link href="css/bootstrap.css" rel="stylesheet">
    <style>
      body {
        padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
      }
    </style>

</head>

<body>
<div class="navbar navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </a>
          <a class="brand" href="#">My Site</a>

        <!-- The drop down menu -->
        <ul class="nav pull-right">
          <li><a href="/users/sign_up">Sign Up</a></li>
          <li class="divider-vertical"></li>
          <li class="drop down">
            <a class="dropdown-toggle" href="#" data-toggle="dropdown">Sign In <strong class="caret"></strong></a>
            <div class="dropdown-menu" style="padding: 15px; padding-bottom: 0px;">
                          <!-- Login form here -->
              <form action="[YOUR ACTION]" method="post" accept-charset="UTF-8">
                  <input id="user_username" style="margin-bottom: 15px;" type="text" name="user[username]" size="30" />
                  <input id="user_password" style="margin-bottom: 15px;" type="password" name="user[password]" size="30" />
                  <input id="user_remember_me" style="float: left; margin-right: 10px;" type="checkbox" name="user[remember_me]" value="1" />
                  <label class="string optional" for="user_remember_me"> Remember me</label>

                  <input class="btn btn-primary" style="clear: left; width: 100%; height: 32px; font-size: 13px;" type="submit" name="commit" value="Sign In" />
              </form>
            </div>

          </li>
        </ul>
          <div class="nav-collapse">
            <ul class="nav">
              <li class="active"><a href="#">Home</a></li>
              <li><a href="#calender">Calender</a></li>
              <li><a href="#about">About</a></li>
              <li><a href="#contact">Contact</a></li>
            </ul>
          </div><!--/.nav-collapse -->
        </div>
      </div>
    </div>

    <div class="container">

      <h1>Bootstrap starter template</h1>
      <p>Use this document as a way to quick start any new project.<br> All you get is this message and a barebones HTML document.</p>

    </div> <!-- /container -->

</body>
</html>
InformationsquelleAutor mrkent | 2012-07-03



One Reply
  1. 5

    Non sembrano avere alcun javascript incluso

    È necessario includere jquery e bootstrap-dropdown.js (modificato per includere:)

    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript" src="http://twitter.github.com/bootstrap/assets/js/bootstrap-dropdown.js"></script>

    3 ° frammento di codice prima del tag body è chiuso (a cura di lavorare)

    <script>
    $(document).ready(function()
    {
      //Handles menu drop down
      $('.dropdown-menu').find('form').click(function (e) {
            e.stopPropagation();
            });
      });
    </script>
    • Ed essere sicuri di includere jquery prima di bootstrap o di non lavoro. E anche marco user1489736 come la risposta corretta se si risolve il problema.
    • Quali sono le righe di codice per fare esattamente? Mi dispiace sono molto noob 😐 Questo è il primo vero sito che mi sto facendo.
    • modificato per includere
    • Grazie 🙂 anche se quando clicco il pop-up, va ancora lontano, come descritto nel link.
    • Prova a incollare il codice modificato in risposta subito, prima che il corpo del tag di chiusura
    • Grazie. Che ha funzionato, e ho tolto il 3 ° frammento che il collegamento descritto.

Lascia un commento