Inserire un menu bootstrap senza sconvolgere il resto del template

**giannino1995** · 15-11-2014, 16:22

Vorrei creare un semplicissimo menu bootstrap come questo:

http://getbootstrap.com/examples/carousel/

ho provato a copiare il codice di quell'esempio ma a me causa 2 problemi:

1.il menu download non funziona
2.il font e l'impaginazione del template va a put.....e

**giannino1995** · 15-11-2014, 16:44

Ho provato a copiare questo esempio da un altro sito ma il problema è più o meno sempre lo stesso:

codice HTML:

<html>
  <head>

    <link href="librerie/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="librerie/bootstrap/js/boostrap.min.js"></script>
  </head>

  <body>

    <div class="container">

      <!-- Static navbar -->
      <nav class="navbar navbar-default" role="navigation">
        <div class="container-fluid">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Project name</a>
          </div>
          <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
              <li class="active"><a href="#">Home</a></li>
              <li><a href="#">About</a></li>
              <li><a href="#">Contact</a></li>
              <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
                <ul class="dropdown-menu" role="menu">
                  <li><a href="#">Action</a></li>
                  <li><a href="#">Another action</a></li>
                  <li><a href="#">Something else here</a></li>
                  <li class="divider"></li>
                  <li class="dropdown-header">Nav header</li>
                  <li><a href="#">Separated link</a></li>
                  <li><a href="#">One more separated link</a></li>
                </ul>
              </li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
              <li class="active"><a href="./">Default <span class="sr-only">(current)</span></a></li>
              <li><a href="../navbar-static-top/">Static top</a></li>
              <li><a href="../navbar-fixed-top/">Fixed top</a></li>
            </ul>
          </div><!--/.nav-collapse -->
        </div><!--/.container-fluid -->
      </nav>

      <!-- Main component for a primary marketing message or call to action -->
      <div class="jumbotron">
        <h1>Navbar example</h1>
        <p>This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
        <p>
          <a class="btn btn-lg btn-primary" href="../../components/#navbar" role="button">View navbar docs &raquo;</a>
        </p>
      </div>

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


    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="../../dist/js/bootstrap.min.js"></script>
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
  </body>
</html>

i menu a tendina non funzionano...

**giannino1995** · 15-11-2014, 17:22

Sono riuscito a capire dove strava il problema e sono riuscito creare un modello ripulendo un template che incorporava questa libreria ma ho ancora 3 problemi:

1.Netbeans mi dice che non posso scrivere aria-expanded="false"
2.Il validatore di codice mi trova un problema nell'head:
http://validator.w3.org/

Ecco il codice:

codice HTML:

<!DOCTYPE html>
<html>
  <head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap core CSS -->
    <link href="librerie/bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="navbar.css" rel="stylesheet">

    <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
    <!--[if lt IE 9]><script src="librerie/bootstrap/ie/ie8-responsive-file-warning.js"></script><![endif]-->
    <script src="librerie/bootstrap/ie/ie-emulation-modes-warning.js"></script>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="librerie/bootstrap/ie/html5shiv.min.js"></script>
      <script src="librerie/bootstrap/ie/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>

    <div class="container">

      <!-- Static navbar -->
      <nav class="navbar navbar-default" role="navigation">
        <div class="container-fluid">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Nome del progetto</a>
          </div>
          <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
              <li class="active"><a href="#">Home</a></li>
              <li><a href="#">About</a></li>
              <li><a href="#">Contact</a></li>
              <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
                <ul class="dropdown-menu" role="menu">
                  <li><a href="#">Action</a></li>
                  <li><a href="#">Another action</a></li>
                  <li><a href="#">Something else here</a></li>
                  <li class="divider"></li>
                  <li class="dropdown-header">Nav header</li>
                  <li><a href="#">Separated link</a></li>
                  <li><a href="#">One more separated link</a></li>
                </ul>
              </li>
            </ul>
          </div><!--/.nav-collapse -->
        </div><!--/.container-fluid -->
      </nav>
    </div> <!-- /container -->
    <script src="librerie/jquery/jquery-2.1.1.min.js"></script>
    <script src="librerie/bootstrap/js/bootstrap.min.js"></script>
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="librerie/bootstrap/ie/ie10-viewport-bug-workaround.js"></script>
  </body>
</html>

fonte:

http://getbootstrap.com/examples/navbar/

**giannino1995** · 15-11-2014, 18:04

Ok ho capito perché il codice non era validato. Ora Netbeans non mi segna più l'errore quindi sono a posto. L'ultimo problema che mi resta è la personalizzazione del menu. Grigio così non mi piace, mi consigliate qualche comando per personalizzare un po' questo menu in bootstrap?

Dai un help per favore!

**giannino1995** · 15-11-2014, 18:52

Ho aggiunto il menu al mio template ma setta a zero il padding sotto le foto, se provvedo con css il shadowbox mi setta il padding nelle foto che si aprono e mi esce un bordino nero orribile. Sto pensando di lasciar perdere questo bootstrap e di provare a cercare qualcosa di meglio con jquery, voi che dite?

Discussione: Inserire un menu bootstrap senza sconvolgere il resto del template

Strumenti discussione

Ricerca discussione

Visualizza

Inserire un menu bootstrap senza sconvolgere il resto del template

Permessi di invio