Bootstrap is one of the most popular front end development framework built on HTML, CSS and JS which helps to build responsive, mobile first web projects. With a single code base, Bootstrap easily and efficiently scales websites and web applications which ranges from small smart phones to tablets to desktops with the use of CSS media queries. It comes with precompiled CSS, but its source code utilizes the two most popular CSS preprocessors, Less and Sass.
To start web development using Bootstrap, you can download latest compiled and minified CSS and JS from the link. Alternatively, you can use CDN's(which are hosted on different hosting server). Include Bootstrap CSS in head of html file and Javascript file just above the closing body tag. Few contents are under construction, they are under preparation and will be published soon. I apologise for any kind of inconvenience.
You can setup Bootstrap in two ways.
One is download Bootstrap CSS and JS files, unzip, save on the same location of HTML file and write script code to point the location.. Second method is point with URLs provided by Content Delivery Network(CDN) providers.
For both methods, go to Bootstrap official website.
Click getting started link and you will be taken to download page. If you want Bootstrap files to be physically saved, where your main website files reside, click first download button, unzip the files and you will see three folders named CS, JS and Fonts. On header of your file, link css file and and link js file on bottom of body, just before body tag finishes. Use minimized version (bootstrap.min.css and bootstrap.min.js) for production purpose and use full version (bootstrap.css and bootstrap.js) for development purpose. However, if you want to use CDN (those css and js files stored in other hosting servers), follow the below process.
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>Default behavior of Navbars are responsive, they can be used to hold navigational menu links, form elements and they get collapsed and are toggleable for small devices like mobile, iPads.
When the viewport becomes narrower than @grid-float-breakpoint, however the same gets expanded into its horizontal when the viewport is at least @grid-float-breakpoint in width. This variable can be adjusted this variable in the Less source to control when the navbar collapses/expands. The default value is 768px.
For accessibility purpose, it is good idea to use HTML5 element <nav>, however if you are not using <nav> add role="navigation" in generic element,<div>..
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<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="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<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 role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
Source: http://getbootstrap.com