Getting started
Unzip the archive into a folder of your choice. The core files of the bootstrap framework are located in the folders css/bootstrap.min.css and js/bootstrap.min.js (min represents the minified, pre-compressed versions production version of the files). Bootstrap.min.js requires jQuery!
For this tutorial, we're going to treat the bootstrap folder itself as our site root folder. Right outside the 3 subfolders css, fonts and js create a new HTML file, name it index.html.
The basic HTML 5 structure of index.html:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap 3.1.1 tutorial</title>
<!-- Bootstrap implementation -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Just another Bootstrap site!</h1>
<!-- jQuery, most recent version (required for Bootstrap's JavaScript plugins) -->
<!--
Placed at the end of the document so that the pages loads faster -->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<!-- Including all compiled Bootstrap plugins -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Opened in a browser, you page should look like this:
Nothing spectacular, but we're on our way!
Wrap the h1 headline (<h1>Just another Bootstrap site!</h1>, formatted by the bootstrap.min.css) into a <div> tag and apply Bootstrap's default CSS class "container":
<div class="container">
<h1>Just another Bootstrap site!</h1>
</div>
Creating
the header (class=”jumbotron”)
Inside the “container”, just under the <h1> tag,
insert the following code:
<div class="container">
<h1>Just another Bootstrap site!</h1>
<header class="jumbotron">
<!-- header start -->
<h1>Basic layout with Bootstrap 3.1.1</h1>
<p>Mobile first, fully responsive page layout using the new Bootstrap 3.1 classes</p>
<a href="http://getbootstrap.com/getting-started/#migration" class="btn btn-large btn-success">What's new?</a>
</header>
<!-- header end -->
</div>
If you reload your page in a browser, the layout has changed dramatically !
Go on and re-size your browser window - the page content will react responsively.
Content-area (class=”row”)
Bootstrap ships with a 12-column grid layout, since
version 3 as:
Tiny grid (<768 px)
|
.col-xs-*
|
Small grid (>768 px)
|
.col-sm-*
|
Medium grid (>992 px)
|
.col-md-*
|
Large grid (>1200 px)
|
.col-lg-*
|
We are going to create a fluid, responsive layout
based on the small grid (>768 px), with 2 sections:
- col-sm-4: 4 column container for the left sidebar
- col-sm-8: 8 column container for the main content area
Note: The total number of columns in your layout must always to add up to 12!
Under the header, but still inside the overall container, implement a new row (div class="row") with 2 nested div tags for the columns inside:
<!-- header end -->
<div class="row">
<div class="col-sm-4">
<h3>Sidebar left</h3>
</div>
<div class="col-sm-8">
<h3>Main content</h3>
<p>Lorem ipsum dolor sit amet, ...</p>
<p>Aliquam nec facilisis lacus. Quisque...</p>
<p>Fusce vehicula arcu leo, ... </p>
</div>
</div>
The footer (class=”modal-footer”)
Insert the following code under the row, we just created, in order to implement a footer:
<div class="modal-content">
<footer class="modal-footer">Copyright,
legal info etc.</footer>
</div>
You page now looks like this:
Implementing
navigation (navigation bar + drop down sample)
The following code is creating a navigation bar including a drop-down menu at the top of the page, just replace the line <h1>Just another Bootstrap site!</h1> with:
<!--
navigation start -->
<nav class="navbar navbar-default">
<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>
<a
class="navbar-brand" href="#">Home</a>
</div>
<div class="navbar-collapse
collapse">
<ul class="nav navbar-nav">
<li><a
href="#">Projects</a></li>
<li><a
href="#">Services</a></li>
<li><a
href="#">Downloads</a></li>
<li
class="dropdown"> <a href="#"
class="dropdown-toggle" data-toggle="dropdown">Dropdown
<b class="caret"><!-- +icon --></b></a>
<!-- dropdown menu as nested list -->
<ul
class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another
action</a></li>
<li><a href="#">Something else
here</a></li>
<li class="divider"></li>
<li><a href="#">Separated
link</a></li>
<li><a href="#">One more separated
link</a></li>
</ul>
</li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</nav>
<!-- navigation end -->
Finally:
The complete source code of the tutorial is available from:
very nicely explained the basic formation of web site using Bootstrap.........thanks a lot..
ReplyDeleteYou're welcome - thanx for the comment :-)!
ReplyDeleteVery good explanation. Made me understand bootstrap as a begginer. thank you very much!
ReplyDeleteneatly arranged
ReplyDeleteis that supportable html5 and css3..
ReplyDeleteJep :-)!
Delete