Hello People.
Today I have code the sample of the first part of the bootstrap tutorial series.
I have used and read over the bootstrap documentation and looked at some of its example templates.
It seems very easy and I have just made a menu and some simple pre-formated text.
This is design for beginners and If you want to learn more keep in touch!
Okay so lets get right into this simple tutorial.
1. BootStrap works upon divs. and uses its set containers in its source files.
2. We need to link to our source files. using this simple template. you might have to change your paths a bit.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Tutorial</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
</head>
<body>
<script src="//code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
3. Now we can add the navbar container.
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<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="#">Bootstrap Tutorial</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#Hello">Hello</a></li>
<li><a href="#Nye">Nye</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
As you can see above it is all pretty easy. its based upon an easy to use table like structure on what you want.
Okay lets move onto the text. #SoSimple!
<div class="starter-template">
<br></br>
<h1>BootStrap Tutorial</h1>
<p class="lead">BootStrap TutorialBootStrap TutorialBootStrap TutorialBootStrap TutorialBootStrap Tutorial</p>
</div>
</div><!-- container -->
easy stuff really. I do not think I will make anymore bootstrap tutorials as I think it is to easy and no need for it as there is plenty already out their.
So thank you and Next we shall cover more HTML and making money.
http://pastebin.com/BhmWPxxq
No comments:
Post a Comment