Bootstrap Introduction?

Bootstrap is a most using front end framework for developing responsive, mobile friendly web sites and app. It’s free source and open source Collection.

Main Features

Sass and less: Bootstrap provided a two most popular css preprocessors, less and Sass. Easy to pre compiled css.
One framework, Work Multi devices: It’s a free collection of tools for creating websites and web applications. It’s easy to get started, based on grid systems and easily scales your websites and application according to devices or screen resolution.
Why programmers preferred Bootstrap Framework: With bootstrap, you get typography, forms, buttons, grids, and also Jquery plugins like (Modal, Scrollspy, Tooltips, Popover, Alert, Button). So when we use this framework most of the day based plugins are available for designing your website

How we use and include bootstrap?

There are two ways you can use the bootstrap on your own webpage.

a) Include CDN (Content Delivery Network)live url on the file.
b) Download bootstrap files from getbootstrap.com

A) MaxCDN provide CDN support for Bootstrap’s CSS and JavaScript files. Use Bootstrap CDN like below example.

<!--  minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<!-- Optional theme Css -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

<!-- Latest minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

Include Bootstrap files for CDN to html page

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Trick Collab</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
     <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>CDN files are working </h1>

    <!-- jQuery (Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  </body>
</html>

2) Download bootstrap libraries

If you want a whole bootstrap files directory on your project on your own server then you will download the latest bootstrap version from getbootstrap.com.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">     
    <title>Trick Collab Page</title>
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Other Links

Bootstrap Grid Structure

Leave a Comment.