Dropdown menu-bottom
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Navbar in bootstrap</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-bottom">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="navbar-header">
<a href="#" class="navbar-brand">Bootstrap</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link-1</a></li>
<li><a href="#">Link-2</a></li>
<li><a href="#">Link-3</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Link-4
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">link-4.1</a></li>
<li><a href="#">link-4.2</a></li>
<li><a href="#">link-4.3</a></li>
</ul>
</ul>
</li>
<button class="btn btn-danger navbar-btn">Click me</button>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><i class="glyphicon glyphicon-log-in"></i>Login</a></li>
<li><a href="#"><i class="glyphicon glyphicon-user"></i>About</a></li>
</ul>
<button class="btn btn-danger navbar-btn">Click me</button>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search text">
</div>
<button type="Submit" class="btn btn-primary">Search now</button>
</form>
</div>
</div>
</div>
</nav>
<div class="container-fluid" style="margin-top:50px;">
<div class="row">
<div class="col-md-12">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi, sint nesciunt adipisci cum inventore exercitationem, a sed voluptate, magnam iusto asperiores eos ratione officiis! Sapiente labore, harum aut fugiat temporibus doloribus quae omnis reprehenderit nisi pariatur. Nemo necessitatibus expedita ea, totam temporibus optio facilis consectetur unde? Soluta quae placeat nam nobis quia repellat esse eveniet optio ea debitis corporis, quibusdam delectus. Labore, ab cupiditate. Ducimus fugit ipsum animi alias distinctio! Laborum, commodi! Tenetur inventore porro facilis iste doloremque sint consectetur quos saepe ipsa ut laudantium dolores laboriosam animi possimus consequatur consequuntur voluptates, totam fuga commodi architecto, id voluptatem impedit harum nulla. Alias quam esse quasi dolorum ipsam. Vitae facere vel enim facilis. Dolorum accusantium architecto harum repellat est saepe sed corporis! Ad repudiandae, itaque at, soluta molestias quis consequuntur quia quam provident tempora temporibus amet! Nesciunt ab dolorem cupiditate pariatur alias ex commodi incidunt velit cum expedita debitis obcaecati minima aperiam reprehenderit aut dicta culpa quod ad accusantium odio, ducimus totam distinctio accusamus? Quidem voluptas ullam, similique consequatur ducimus omnis quaerat repellat, eligendi doloremque dolores, voluptatem temporibus modi exercitationem reiciendis debitis itaque! Vel harum eos at dolorem neque ipsa error commodi illo sequi incidunt alias odio quia praesentium, deleniti eum? Aliquam, saepe aut rerum dicta eligendi cupiditate eum ipsa unde optio, debitis fuga illum eveniet magni nostrum pariatur recusandae reprehenderit laborum necessitatibus esse soluta. Laborum itaque quis nesciunt, voluptatem odio odit cum nam sed? Nihil maxime sed suscipit. Suscipit voluptatibus dolorem labore dignissimos illum eos commodi delectus id magnam? Modi harum dolorum at quo dolores est magni dolorem sapiente? Impedit ipsum et perspiciatis molestiae fugiat aliquid labore officia quaerat laboriosam exercitationem, in neque laudantium sequi odit sit magnam eaque distinctio maiores quam dicta ullam voluptates quas recusandae soluta. Eligendi aliquid molestias natus. Porro quia enim qui illum quidem, animi aliquid? Vitae commodi, animi eaque voluptatem dolore inventore nisi atque? Vero libero sed delectus, repellat quia dolorum pariatur recusandae molestiae ex nam labore reiciendis quam ducimus debitis nostrum corrupti totam. Repellat, incidunt! Rerum deleniti nostrum odit culpa recusandae, quasi voluptatum aspernatur assumenda, expedita consequatur cum exercitationem facere debitis tempore vel, ipsa totam iste? Aspernatur provident perferendis eius esse cupiditate eaque quia laborum, magni quis fugit dolorem minus tenetur repellat quasi temporibus consectetur libero optio excepturi eveniet aliquam qui, modi soluta exercitationem quae? Aliquam odio fugiat dignissimos pariatur totam ipsum molestias placeat ipsam numquam, tenetur nam rerum libero quia ad ullam non, id, porro laboriosam sint reiciendis hic! Nam perspiciatis accusamus explicabo! Itaque aspernatur architecto quia eos excepturi, alias veniam ratione deserunt vitae iusto inventore earum veritatis facere corporis fugit. Dicta deserunt deleniti quasi minima ullam natus corrupti accusamus magni explicabo unde recusandae doloremque possimus, ut cum praesentium magnam laudantium sit cumque commodi atque ea enim. Ipsam enim qui nulla cumque dolor, optio molestias animi voluptate consequuntur accusamus modi temporibus aliquam placeat impedit iusto ut quis nostrum alias, quia ex, sapiente ducimus! Iste eveniet temporibus quasi atque modi vitae at, expedita quibusdam adipisci tenetur veritatis libero laborum dicta doloremque eum doloribus ab qui neque dolor recusandae nemo tempore illo? Qui illum vel praesentium animi veniam distinctio illo possimus ab eius inventore doloribus deleniti quod voluptatum maxime, nemo suscipit blanditiis ea facilis dolorum doloremque, laudantium sit dolorem! Nemo quo repellat ratione nostrum numquam praesentium quod voluptas error quaerat tempora eius dolorem est laboriosam assumenda odit ad illum eum fuga, sed veniam reiciendis provident dolores sapiente officiis? Dolorum officia perferendis porro laboriosam, inventore reiciendis odio cum magnam iste at suscipit adipisci laudantium facere vel dignissimos provident aliquam quod ducimus laborum. Autem recusandae distinctio labore et corrupti quas harum ducimus! Tempore in minus fugiat laborum! Ipsum labore vero dolorem fuga, consequatur tenetur soluta? Earum corporis recusandae eligendi deleniti accusamus porro maiores velit enim nisi voluptas nesciunt dolorum, tempora commodi, eveniet ut voluptatem ipsum dolore magni eaque voluptates libero corrupti rem blanditiis. Necessitatibus, modi perspiciatis voluptatibus eum dignissimos voluptas quo distinctio enim quaerat aspernatur officiis nesciunt, porro dicta, architecto harum atque ad magni minima. Laborum cum commodi, aliquid quidem praesentium repellendus consequuntur beatae exercitationem sed nulla culpa vero sunt sequi reiciendis voluptate eos et, accusamus ipsum? Repellendus, a aperiam repudiandae accusantium ullam, facere optio quaerat, laudantium repellat totam quam! Sit numquam, quod animi officiis sunt pariatur alias modi commodi cumque nam, sapiente ad aut, quisquam iure a delectus obcaecati? Temporibus hic pariatur quasi! Exercitationem nihil sed optio ab ullam, nostrum, nemo atque cupiditate inventore commodi totam porro velit soluta itaque, nulla libero. Aliquid, doloribus sunt dolorem omnis voluptas soluta autem quisquam odit id consequatur atque vero recusandae dolores a nulla voluptatem sapiente quaerat facere saepe placeat perspiciatis. Earum placeat modi amet, magni consequatur autem ipsum, laudantium dignissimos repellat esse asperiores repellendus eaque labore fugiat saepe maxime omnis vitae voluptatum, distinctio soluta facere tenetur. Amet quasi, officia unde id beatae temporibus assumenda impedit inventore, quidem reprehenderit excepturi doloremque dignissimos voluptas quos ipsum in mollitia. Delectus autem et veritatis, deserunt sit voluptatem quod minus fugiat a modi tenetur voluptate nihil provident officiis natus exercitationem doloremque quia perspiciatis dicta repellat nobis. Rerum ex minus corporis accusantium est impedit iure rem maiores? Eum sapiente aliquam deserunt quis, accusamus eveniet eligendi illo excepturi assumenda veritatis maxime nisi laboriosam totam debitis laborum velit ad illum, soluta nemo ipsum blanditiis sunt distinctio. Ullam ut harum, sed iusto similique, eius repudiandae deserunt pariatur libero reprehenderit sint expedita exercitationem animi optio, minus possimus necessitatibus consequatur at fugit quas. Consequuntur mollitia adipisci in ducimus ab vero qui repellat molestiae tempora, consectetur ad doloremque sed distinctio totam architecto nam dolorem facere similique dolor neque sit ullam laborum accusantium! Earum mollitia reiciendis culpa maxime porro atque excepturi error est rem. Dolorem, inventore! Quo totam autem blanditiis mollitia impedit eaque neque velit odit distinctio sint modi porro at voluptatum, excepturi debitis? Officia magnam sint nostrum odio, ipsa veniam molestias! Numquam adipisci molestiae nesciunt, tenetur repellendus vitae, facilis dolorum dolores quos eum nulla unde voluptas harum veritatis libero accusamus eos totam. Qui impedit quisquam provident obcaecati facere ea rerum natus tenetur corrupti tempore nisi molestias, totam amet quia illum ab?</p>
</div>
</div>
</div>
<script src="js/jquery-1.12.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
output:
Collapse
navbar
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Navbar in bootstrap</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mynavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand">Bootstrap</a>
</div>
<div class="collapse navbar-collapse" id="mynavbar">
<ul class="nav navbar-nav">
<li><a href="#">Menu-1</a></li>
<li><a href="#">Menu-2</a></li>
<li><a href="#">Menu-3</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Sign In</a></li>
<li><a href="#">About</a></li>
</ul>
</div>
</div>
</nav>
<div class="container" style="margin-top: 50px;">
<div class="row">
<div class="col-md-12">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Impedit, dolor atque delectus, tempora debitis cupiditate soluta dolorum quidem accusamus consequatur quibusdam pariatur aliquam ducimus modi nobis at maxime vel blanditiis!
</div>
</div>
</div>
<script src="js/jquery-1.12.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
output:
minimize output:
No comments:
Post a Comment