Saturday, August 12, 2017

What is Bootstrap? Setup and Basic Template Example !


Bootstrap is a free front-end framework for faster and easier web development.

Bootstrap includes HTML , JS and CSS based design templates for forms ,button, input, Nav, Navbar, Label , Grid, Table, Graphic icon etc...

The fastest way to get Bootstrap is to download the precompiled and minified versions of our CSS, JavaScript, and fonts.

In this post you will see download and setup of bootstrap with testing basic template.

Get latest bootstrap download link here . http://bootstrapdocs.com/v3.0.2/docs/



Extract Zip file "bootstrap-3.0.2-dist.zip" you will see something like this.

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

You can also add reference required files from following Bootstrap CDN location.

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>

Please check your setup with following basic template.

basictemplate.html                          Please check the page out here :  Click Here
<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap 101 Template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://code.jquery.com/jquery.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Hope this post help any developer.

Please post your questions in comment below, Thank You !

No comments:

Post a Comment