In this tutorial, am going to show you how to create html templates using twitter bootstrap. Demo This Twitter Bootstrap HTML template has : 3 types of Menus Banner image 4 types of Heading Style Footer with Scroll Top Button Download bootstrap here http://getbootstrap.com/ and extract it into your server or local. Bootstrap folder structure
| bootstrap/ ├── css/ │ ├── bootstrap.css │ ├── bootstrap.min.css │ ├── bootstrap-theme.css │ └── bootstrap-theme.min.css ├── js/ │ ├── bootstrap.js │ └── bootstrap.min.js ├── fonts/ | ├── glyphicons-halflings-regular.eot | ├── glyphicons-halflings-regular.svg | ├── glyphicons-halflings-regular.ttf | └── glyphicons-halflings-regular.woff ├── index.html ├── style.css |
Create index.html and style.css in bootstrap root folder. Index.html Add these code in <head> section
| <head> <link href="css/bootstrap.min.css" rel="stylesheet"> <link href="style.css" rel="stylesheet"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> </head> |
Add these code in <body> section For Fixed menu bar add these code next to <body> tag
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <!--fixed menu bar starts--> <div class="navbar navbar-inverse navbar-fixed-top" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Project name</a> </div> <div class="navbar-collapse collapse"> <form class="navbar-form navbar-right"> <div class="form-group"> <input type="text" placeholder="Email" class="form-control"> </div> <div class="form-group"> <input type="password" placeholder="Password" class="form-control"> </div> <button type="submit" class="btn btn-success">Sign in</button> </form> </div><!--/.navbar-collapse --> </div> </div> <!--fixed menu bar ends--> |
Now the…read more