Bootstrap is a popular framework now for designing responsive website. How you can design a very simple webpage using bootstrap as a beginner is shown in this tutorial.
Steps:
1. Create a folder named “bootstrap project” and keep the following files in the folder.
Jquery.js
bootstrap.min.css
bootstrap.min.js
2. Create a html file add the link for the files, jquery.js, bootstrap.min.css and bootstrap.min.js.
<script src="jquery.js"></script>
<link href="bootstrap.min.css" rel="stylesheet">
<script src="bootstrap.min.js"></script>
3. Change the title of the file from the head section.
<title>Bootstrap Tutorial</title>
4. Add the header text and top menu for the page
<div class="title"><h1>Bootstrap Home Page</h1></div>
<nav class="navbar navbar-default" role="navigation">
<div>
<ul class="nav navbar-nav ">
<li><a href="#home" data-toggle="tab">Home</a></li>
<li><a href="#sv" data-toggle="tab">Service</a></li>
<li><a href="#au" data-toggle="tab">About Us</a></li>
<li><a href="#cu" data-toggle="tab">Contact Us</a></li>
</ul>
</div>
</nav>
5. Create a css file named style.css in the current folder and add the following code to centralize the page title.
.title {
text-align: center;
text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
color: #ccc;
}
6. Add link for style.css file in index page.
<link href="style.css" rel="stylesheet">
7. Divide the page into two columns
<div class="container">
<div class="row">
<div class="col-md-4" style="padding-right:5px;">
</div>
<div class="col-md-8" style="padding-right:0;">
</div>
</div>
</div>
8. Add the footer nav
<nav class="navbar navbar-default navbar-fixed-bottom" style="height:10px" >
<div align="center"><br />Copyright@WPSI</div>
</nav>
9. Write CSS in style.css to define the panel height for each divs.
.pn-height
{
height:210px;
}
10. Add three classes in style.css those will be applied within img tag and div tag. .img-left class will set the image in the left and add 5px padding in the right side. .top_margin will set 50px margin in the top of the element and set element position abosulate. .left-mrg will add 2% padding in the left side of the element.
.top_margin
{
top:50px;
position:absolute;
}
.side-mrg
{
padding-left:2%;
padding-right:2%;
}
.img-left {
float: left;
padding-right:5px;
}
11. Add the navigation menu for the div with 4 columns.
<div class="panel panel-default pn-height">
<div class="panel-heading" style="background-color:#888;color:#fff;">Menu</div>
<ul class="nav nav-stacked">
<li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#" >Courses<b class="caret"></b> </a>
<ul class="dropdown-menu">
<li><a href="#html" data-toggle="tab">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">Javascript</a></li>
</ul>
</li>
<li><a href="#tc" data-toggle="tab">Teacher</a></li>
<li><a href="#pc" data-toggle="tab">Practice</a></li>
<li><a href="#ex" data-toggle="tab">Exam</a></li>
</ul>
</div>
12. Create a folder named Images and two jpg images named bg.jpg and img.jpg. Add the contents for the div with 8 columns.
<div class="panel panel-default pn-height" id="col2" >
<div class="panel-heading tab-content" style="background-color:#888;color:#fff;">Site Information
</div>
<div id="home" class="tab-pane fade in active top_margin side-mrg" >
<img src="Images/img.jpg" height="40" width="50" class="side-left img-left">
<p style="margin-right:5%;">After hours Programming teaches you the fundamentals of web development and not just programming. You will learn how to create amazing websites through programming and design tutorials. The web development tutorials on your left are designed for you to move through them in order to have an overall understanding of web design and development.
</p>
</div>
<div id="tc" class="tab-pane fade top_margin side-mrg " >
Teacher Information
</div>
<div id="pc" class="tab-pane fade top_margin side-mrg" >
Practice Question
</div>
<div id="ex" class="tab-pane fade top_margin side-mrg" >
Give Exam
</div>
<div id="html" class="tab-pane fade top_margin side-mrg" >
HTML Course Details......
</div>
</div>
13. Run the page from the browser.
14. Add the following media query in style.css for making the looks better in the small screen.
@media screen and (max-width: 767px) {
#col2{
height:400px;
}
}
15. Again run the site from the browser.
You can check the following video link to complete the above steps clearly.
————————————————GOOD LUCK———————————————-