Scribd
Upload
5 views

Practical 9

1

Uploaded by

mrjrcartos
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
5 views

Practical 9

1

Uploaded by

mrjrcartos
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

<!

DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Bootstrap Menus</title>

<link rel="stylesheet" href="/bootstrap-5.3.3-dist/css/bootstrap-grid.min.css">

<link rel="stylesheet" href="/bootstrap-5.3.3-dist/css/bootstrap.css">

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>

<body>

<div class="container">

<h2>Right-Aligned Dropdown Menu</h2>

<div class="dropdown">

<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenu1"


data-toggle="dropdown">

Dropdown <span class="caret"></span>

</button>

<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenu1">

<li><a href="#">Action</a></li>

<li><a href="#">Another action</a></li>

<li><a href="#">Something else here</a></li>

</ul>

</div>

<h2>Drop-Up Menu</h2>

<div class="dropdown dropup">

<button class="btn btn-primary dropdown-toggle" type="button" id="dropupMenu1" data-


toggle="dropdown">

Dropup <span class="caret"></span>


</button>

<ul class="dropdown-menu" aria-labelledby="dropupMenu1">

<li><a href="#">Action</a></li>

<li><a href="#">Another action</a></li>

<li><a href="#">Something else here</a></li>

</ul>

</div>

<h2>Menu with Headers</h2>

<div class="dropdown">

<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenu2"


data-toggle="dropdown">

Dropdown with Header <span class="caret"></span>

</button>

<ul class="dropdown-menu" aria-labelledby="dropdownMenu2">

<li class="dropdown-header">Header 1</li>

<li><a href="#">Action 1</a></li>

<li><a href="#">Another action 1</a></li>

<li class="divider"></li>

<li class="dropdown-header">Header 2</li>

<li><a href="#">Action 2</a></li>

<li><a href="#">Another action 2</a></li>

</ul>

</div>

<h2>Menu with Glyphicons</h2>

<div class="dropdown">

<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenu3"


data-toggle="dropdown">

Dropdown with Icons <span class="caret"></span>

</button>

<ul class="dropdown-menu" aria-labelledby="dropdownMenu3">


<li><a href="#"><span class="glyphicon glyphicon-home"></span> Home</a></li>

<li><a href="#"><span class="glyphicon glyphicon-user"></span> Profile</a></li>

<li><a href="#"><span class="glyphicon glyphicon-cog"></span> Settings</a></li>

</ul>

</div>

</div>

</body>

</html>

You might also like