Search This Blog

Translate

» » Bootstrap 3 Easy Steps Getting Started part One
Monday 1 December 2014

Bootstrap 3 Easy Steps Getting Started part One

Bootstrap 3 Easy Steps Getting Started part One

This Tutorial Is Part One. If You Want To See Part Two.

What is Bootstrap3?

  1. Bootstrap3 is a free collection of tools for creating websites and web applications.
  2. Bootstrap3 contains HTML and CSS-based design templates for text, forms, buttons, navigation and other components.
  3. Bootstrap3 also contains optional JavaScript extensions.
  4. Bootstrap3 is open source and available on GitHub.

It's Very Important To Know For Bootstrap3

  1. Since Bootstrap3 uses HTML elements and CSS properties that require the use of the HTML5 doctype, include the HTML5 doctype at the beginning of the page, along with the correct character set:
    2. <!DOCTYPE html>
  2. The metadata can be used by browsers (how to display content or reload page), search engines (keywords), or other web services.
    3. <meta charset="utf-8" />
  3. Keep in mind that Bootstrap 3 is mobile-first. Mobile-first styles are found throughout the entire Bootstrap3 library instead of in separate files. To ensure proper rendering and touch zooming, also add the viewport meta tag inside the head element: The width=device-width sets the width of the page to follow the screen-width of the device (which will vary depending on the device). The initial-scale=1 sets the initial zoom level when the page is first loaded by the browser.
    4. <meta name="viewport" content="width=device-width, initial-scale=1" />

Only Online Work Bootstrap3 With CDN Download Link

  1. If you don't want to download and host Bootstrap3 yourself, you can include it from a CDN (Content Delivery Network). MaxCDN provide CDN support for Bootstrap's CSS and JavaScript. Also include jQuery:
    2. <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

Offline Work Bootstrap3 And Download Bootstrap3 Own Computer

  1. If you want to download on own machine and work offline library to follow the very simple way copy the CDN library url see screenshot.
    2. http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css

  https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js

  http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js

Let's Start Now Final

  1. Open your favorite text editor like notepade++, sublimeText3 and paste this code.
    2. <!DOCTYPE html>
<html>
  <head>
    <title>Easy Steps Getting Started With Bootstrap3</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.2.0/css/bootstrap.min.css">
  </head>

  <body>
    <div class="container">
    <h1>Hallow IRtutor Welcom my First Bootstrap 3 Web Page.</h1>
    </div>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  </body>
</html>

Note

You always place any javascript file down ward. And css any file always place at top because css file is very lite to javascript file that's why first load css then load javascript your web site performance will be very Good.

This Tutorial Is Part One. If You Want To See Part Two.