jquery - Bootstrap | Navigation Bar | not working | not compiling classes -


<nav class="navbar navbar-default">   <div class="container-fluid">     <!-- brand , toggle grouped better mobile display -->     <div class="navbar-header">       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">         <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="#">brand</a>     </div>      <!-- collect nav links, forms, , other content toggling -->     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">       <ul class="nav navbar-nav">         <li class="active"><a href="#">link <span class="sr-only">(current)</span></a></li>         <li><a href="#">link</a></li>         <li class="dropdown">           <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">dropdown <span class="caret"></span></a>           <ul class="dropdown-menu">             <li><a href="#">action</a></li>             <li><a href="#">another action</a></li>             <li><a href="#">something else here</a></li>             <li role="separator" class="divider"></li>             <li><a href="#">separated link</a></li>             <li role="separator" class="divider"></li>             <li><a href="#">one more separated link</a></li>           </ul>         </li>       </ul>       <form class="navbar-form navbar-left">         <div class="form-group">           <input type="text" class="form-control" placeholder="search">         </div>         <button type="submit" class="btn btn-default">submit</button>       </form>       <ul class="nav navbar-nav navbar-right">         <li><a href="#">link</a></li>         <li class="dropdown">           <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">dropdown <span class="caret"></span></a>           <ul class="dropdown-menu">             <li><a href="#">action</a></li>             <li><a href="#">another action</a></li>             <li><a href="#">something else here</a></li>             <li role="separator" class="divider"></li>             <li><a href="#">separated link</a></li>           </ul>         </li>       </ul>     </div><!-- /.navbar-collapse -->   </div><!-- /.container-fluid --> </nav> 

i have copied code https://getbootstrap.com/components/#navbar , putted links bootstrap css, , js file , jquery file too, , have downloaded latest version of bootstrap (4.0.0)

i don't know problem .

the code copied bootstrap v3.3.7, have v4.0.0 alpha installed. many of calsses in 4.0.0 have changed.

you can either download current v3.3.7 of bootstrap code work, or @ navbar documentation bootstrap v4.

something similar have v4 be

<nav class="navbar navbar-toggleable-md navbar-light bg-faded">   <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarsupportedcontent" aria-controls="navbarsupportedcontent" aria-expanded="false" aria-label="toggle navigation">     <span class="navbar-toggler-icon"></span>   </button>   <a class="navbar-brand" href="#">navbar</a>    <div class="collapse navbar-collapse" id="navbarsupportedcontent">     <ul class="navbar-nav mr-auto">       <li class="nav-item active">         <a class="nav-link" href="#">home <span class="sr-only">(current)</span></a>       </li>       <li class="nav-item">         <a class="nav-link" href="#">link</a>       </li>       <li class="nav-item">         <a class="nav-link disabled" href="#">disabled</a>       </li>       <li class="nav-item dropdown">         <a class="nav-link dropdown-toggle" href="http://example.com" id="navbardropdownmenulink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">           dropdown link         </a>         <div class="dropdown-menu" aria-labelledby="navbardropdownmenulink">           <a class="dropdown-item" href="#">action</a>           <a class="dropdown-item" href="#">another action</a>           <a class="dropdown-item" href="#">something else here</a>         </div>       </li>     </ul>     <form class="form-inline my-2 my-lg-0">       <input class="form-control mr-sm-2" type="text" placeholder="search">       <button class="btn btn-outline-success my-2 my-sm-0" type="submit">search</button>     </form>   </div> </nav> 

Comments

Popular posts from this blog

php - Vagrant up error - Uncaught Reflection Exception: Class DOMDocument does not exist -

vue.js - Create hooks for automated testing -

.htaccess - ERR_TOO_MANY_REDIRECTS htaccess -