Bootstrap Setup


Download Bootstrap

Bootstrap's latest version can be download from http://getbootstrap.com location by clicking on this link, you will be redirected to get below screen:

Now click on DownloadBootstrap button, this will redirect you to another page. Here you can see Three buttons:

  • Download Bootstrap - By clicking on this option, you can download the precompiled and minified versions of Bootstrap CSS, JavaScript, and fonts.
  • Download Source - By clicking on this option, you can get the latest Bootstrap LESS and JavaScript source code from GitHub.
  • Download Sass - By clicking on this option, you can get the latest Bootstrap LESS to Sass for easy inclusion in Rails, Sass-only projects.

It's based on your requirement, you can download Bootstrap's latest version. If you want to use precompiled version of Bootstrap, click on Download Bootstrap button. As the files are complied and minified you don't requires LESS compiler and setup.

Bootstrap File System

Precompiled Bootstrap

Once downloaded, unzip the compressed folder to see the structure of Bootstrap. You'll find something like this:

bootstrap/
+-- css/
|   +-- bootstrap.css
|   +-- bootstrap.css.map
|   +-- bootstrap.min.css
|   +-- bootstrap.min.css.map
|   +-- bootstrap-theme.css
|   +-- bootstrap-theme.css.map
|   +-- bootstrap-theme.min.css
|   +-- bootstrap-theme.min.css.map
+-- js/
|   +-- bootstrap.js
|   +-- bootstrap.min.js
+-- fonts/
    +-- glyphicons-halflings-regular.eot
    +-- glyphicons-halflings-regular.svg
    +-- glyphicons-halflings-regular.ttf
    +-- glyphicons-halflings-regular.woff
    +-- glyphicons-halflings-regular.woff2
Bootstrap Source Code

The Bootstrap source code download includes the precompiled CSS, JavaScript and font along with source LESS, JavaScript, and documentation.

<bootstrap/
+-- less/
+-- js/
+-- fonts/
+-- dist/
|   +-- css/
|   +-- js/
|   +-- fonts/
+-- docs/
    +-- examples/

Bootstrap CDN

If you don't want to download, you can still use Bootstrap, MaxCDN provides CDN support for Bootstrap's CSS and JavaScript. Just use below Bootstrap CDN links.

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" 
href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>

<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">
</script>

Basic HTML Template

<!DOCTYPE html>
<html lang="en">
<head> <!-- www.techstrikers.com -->
  <title>Basic Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" 
  href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
  <link rel="stylesheet" 
  href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap-theme.min.css">
  <script src="http://code.jquery.com/jquery.min.js"></script> 
  <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h1>Bootstrap Basic Template</h1>
  <p>This is first Bootstrap page.</p> 
</div>

</body>
</html>


See Also

AngularJS Built-in Filters
AngularJS Built-in Directives
AngularJS Expression
AngularJS Built-in Events
AngularJS Scope Methods
AngularJS Built-in Services
AngularJS Controller Inheritance
AngularJS Custom Directives



 
 
SHARE THIS IF YOU LIKE!
submit to reddit

SUBSCRIBE FOR LATEST UPDATES
HAVE WE CONNECTED ON FACEBOOK?
TOP TUTORIALSTOP CODE EXAMPLESTOP LIVE DEMOLINKSSTAY CONNECTED
HTML Tutorial
HTML5 Tutorial
Bootstrap3 Tutorial
Javascript Tutorial
TypeScript Tutorial
AngularJS Tutorial
CSharp Tutorial
PHP Tutorial
Developer Tools
Javascript
AngularJS
Google MAP API V3
ASP.NET
Javascript
AngularJS
Google MAP API V3
Contact Us
Advertise with Us
Privacy Policy
Disclaimer
Stay connected. We actually like you. If you want to get up to the minute updates, then connect with us on your fav below.
 
Twitter   Linkedin   Facebook   Google+    RSS   Pinterest
 
Protected by Copyscape Original Content Checker
 
 
Copyright ©2017 www.techstrikers.com Unauthorized reproduction/replication of any part of this site is prohibited.