Если вас интересует вопрос, как создать меню на Bootstrap, то привожу два варианта адаптивного меню.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
<!--Варианты меню на bootstrap --> <!doctype html> <html> <head> <meta charset="utf-8"> <title>Варианты меню на bootstrap</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="/?wpfb_dl=15" rel="stylesheet"> <script src="js/respond.js"></script> </head> <body> <div class="container"> <!--Первый вариант меню --> <nav class="row"> <ul class="nav nav-pills nav-justified"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li class="active"><a href="#">Services</a></li> <li><a href="#">Contact</a></li> </ul> </nav> <div style="margin-top:20px"> </div> <!--Второй вариант меню --> <div class="row"> <nav class="navbar navbar-default navbar-inverse "> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse" id="collapse"> <ul class="nav navbar-nav"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li class="active"><a href="#">Services</a></li> <li><a href="#">Contact</a></li> </ul> </div> </nav> </div> </div> <!-- javascript --> <script src="http://code.jquery.com/jquery-latest.min.js"></script> <script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script> </body> </html> |
Результат можно посмотреть здесь
Если вы начнете экран сжимать, то во втором меню появится иконка, щелкнув по которой, развернуться пункты меню.
