Scribd
Upload
52 views4 pages

Operation Sheet 2.4

This document provides step-by-step instructions for creating a top navigation bar and sidebar menu using Bootstrap. It describes adding necessary CSS and JavaScript links, and inserting HTML tags for the navbar header, right navbar, sidebar menu with single and multiple dropdown levels, and page content section.

Uploaded by

Markos Mathewos
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
52 views4 pages

Operation Sheet 2.4

This document provides step-by-step instructions for creating a top navigation bar and sidebar menu using Bootstrap. It describes adding necessary CSS and JavaScript links, and inserting HTML tags for the navbar header, right navbar, sidebar menu with single and multiple dropdown levels, and page content section.

Uploaded by

Markos Mathewos
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/ 4

Learning Guide 2 – Using Advanced Bootstrap Technology

Operation Sheet 2.4 Advanced Bootstrap Technology

Creating Top NavBar

1. Create a new php file using your Dreamweaver and save it as main.php inside the folder you created.
2. Insert the line of code below the <meta charset="utf-8"> tag.

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

3. After your </title> tag, link the following CSS.

<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

<link href="vendor/metisMenu/metisMenu.min.css" rel="stylesheet">

<link href="vendor/bootstrap-social/bootstrap-social.css" rel="stylesheet">

<link href="dist/css/customized.css" rel="stylesheet">

<link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">

4. After the </body> tag, add the following scripts.

<script src="vendor/jquery/jquery.min.js"></script>

<script src="vendor/bootstrap/js/bootstrap.min.js"></script>

<script src="vendor/metisMenu/metisMenu.min.js"></script>

<script src="dist/js/customized.js"></script>

5. Insert the following html tags inside the <body> ….</body> tags.

<div class="wrapper"> <!--start of wrapper-->

</div> <!-- end of wrapper-->

6. Inserting the NavBar. Insert the following tags after the <!--start of wrapper -->

<nav class="navbar navbar-default navbar-fixed-top" role="navigation"> <!--start NavBar -->

</nav><!--end of NavBar -->

7. Inserting the NavBar Header. Insert the following tags after the <!--start NavBar -->.
<!-- Header -->
<div class="navbar-header">
<a class="navbar-brand" href="index.html">TVET Institute</a>
</div>
<!--end of header -->

Course Title: Author: Tesfaye Yirga Page 1


Advanced Web Technology October 2024
Learning Guide 2 – Using Advanced Bootstrap Technology
Operation Sheet 2.4 Advanced Bootstrap Technology

8. Inserting the Right NavBar. Insert the following tags after the <!--end of header -->.

<ul class="nav navbar-nav navbar-right"> <!-- start of Right Navbar -->

</ul><!-- end of the Right NavBar-->

9. Inserting the ABOUT MENU. Insert the following tags after the <!-- start of the Right NavBar-->

<!-- About Menu -->


<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">About the Institute
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Background</a></li>
<li><a href="#">Mission-Vision</a></li>
<li><a href="#">Objectives</a></li>
</ul>
</li>
<!-- end of About Menu-->

10. Inserting the My Account and Logout Button. Insert the following tags after the <!-- end of About Menu-->
<!-- My Account Button -->
<li><a href="#"><span class="glyphicon glyphicon-user"></span> My Account</a></li>

<!-- Logout Button -->


<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Logout</a></li>

Try to execute your page

Course Title: Author: Tesfaye Yirga Page 2


Advanced Web Technology October 2024
Learning Guide 2 – Using Advanced Bootstrap Technology
Operation Sheet 2.4 Advanced Bootstrap Technology

11. Inserting the SideBar. Insert the following tags after the <!-- end of Right NavBar-->

<!-- start of Sidebar-->


<div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav navbar-collapse"><!-- start of Sidebar Collapse-->
<ul class="nav" id="side-menu"> <!-- start of Side Menu-->

</ul> <!-- endof Side Menu-->


</div> <!-- end of Sidebar Collapse-->
</div><!-- end of Sidebar-->

12. Inserting SideBar menu with no dropdown. Insert the following tags after the <!-- start of Side Menu-->

<li><!-- Sample 1 No Dropdown-->


<a href="#"><i class="fa fa-dashboard fa-fw"></i> Sample1-No Dropdown</a>
</li><!-- end of Sample 1 No Dropdown-->

<li> <!-- Sample 2 No Dropdown-->


<a href="#"><i class="fa fa-table fa-fw"></i> Sample2-No Dropdown</a>
</li> <!-- end of Sample 2 No Dropdown-->

13. Inserting SideBar menu with dropdown. Insert the following tags after the <!-- end of Sample 2 No Dropdown-->

<!-- start of Menu with Dropdown-->


<li>
<a href="#"><i class="fa fa-bar-chart-o fa-fw"></i> With Dropdown<span class="fa arrow"></span></a>
<ul class="nav nav-second-level">
<li>
<a href="#">Dropdown 1</a>
</li>
<li>
<a href="#">Dropdown 2</a>
</li>
</ul>
</li>
<!-- end of Menu with Dropdown-->

Course Title: Author: Tesfaye Yirga Page 3


Advanced Web Technology October 2024
Learning Guide 2 – Using Advanced Bootstrap Technology
Operation Sheet 2.4 Advanced Bootstrap Technology

14. Inserting SideBar menu with Multi- dropdown. Insert the following tags after the <!-- end of Menu with Dropdown-->
<!-- start of Menu with Multi Level Dropdown-->
<li>
<a href="#"><i class="fa fa-sitemap fa-fw"></i> Multi-Level Dropdown<span class="fa arrow"></span></a>
<ul class="nav nav-second-level">
<li>
<a href="#">Second Level Item</a>
</li>
<li>
<a href="#">Second Level Item</a>
</li>

<li>
<a href="#">Third Level <span class="fa arrow"></span></a>

<ul class="nav nav-third-level">


<li>
<a href="#">Third Level Item</a>
</li>
<li>
<a href="#">Third Level Item</a>
</li>
</ul>

</li>
</ul>

</li>
<!-- end of Menu with Multi Level Dropdown-->

15. Inserting the Page Content. Insert the following scripts after <!--end of NavBar -->

<!-- Page Content -->


<div id="page-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<br>
<h1 class="page-header">Hello User</h1>
</div>
</div>
</div>
</div>
<!-- End of Page Content -->

16. Collapsing the SideBar. Include the following scripts under <div class="navbar-header">

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">


<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Course Title: Author: Tesfaye Yirga Page 4
Advanced Web Technology October 2024

You might also like