Bootstrap for Beginners - CodeProject
Open URL: http://getbootstrap.com/examples/starter-template. This is your starting page to develop Bootstrap website. Right click on the page and Click View Page Source, copy source and paste it into Notepad file, rename the Notepad file to Index.html and paste it into Bootstrap_Example folder. This page has almost all basic code you need to start Bootstrap. Go to google.com and read about "Bootstrap Viewport". Specify the correct path for bootstrap.min.css and bootstrap.min.js in Index.html. Keep fixing the Index.html until you get the same UI like
12 Columns Grid System mentioned in CSS page really helps you to design Responsive UI for Mobile, Tablet and Desktop. It tells you division of page according to each device. Since we already referenced Bootstrap CSS, JS and Font, just copy and paste CSS classes in Index.html
div and it will start working. Similarly go to
Button section, copy the CSS from web page into Index.html page's button. You can play around CSS of different controls.
<div class="row"> <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div> <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div> <!-- Add the extra clearfix for only the required viewport --> <div class="clearfix visible-xs-block"></div> <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div> <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div> </div>
There are a lot of useful Components available in this section, e.g., drop down, Labels, Navigation bars, etc. Just copy HTML from page into Index.html and it's all yours. You don't need any expertise to use Bootstrap components.
<!-- Single button --> <div class="btn-group"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> Action <span class="caret"></span> </button> <ul class="dropdown-menu" role="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> </ul> </div>
Test Your Page On Different Device
Open Index.hml in Google Chrome and press F12 to go to developer mode.
Find the small Mobile icon next to Zoom icon and click it.
It will open the following window with Device dropdown where you can select any device to analyze the view. You might need to refresh the page by F5.