Learn Bootstrap

Learn Bootstrap from here

Bootstrap Introduction


WHAT YOU SHOULD ALREADY KNOW

Before you continue you should have a basic understanding of the following:

  • HTML
  • CSS
  • (JavaScript/jQuery)

If you want to study these subjects first, find the tutorials on our Home page.


WHAT IS BOOTSTRAP?

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

BOOTSTRAP HISTORY

Bootstrap was developed by Mark Otto and Jacob Thornton at Twitter as a framework to encourage consistency across internal tools. Before Bootstrap, various libraries were used for interface development, which led to inconsistencies and a high maintenance burden.

Bootstrap was released as an open source product in August 2011 on GitHub.

In June 2014 Bootstrap was the No.1 project on GitHub!


WHY USE BOOTSTRAP?

  • Mobile-first approach: Since Bootstrap 3, the framework consists of mobile-first styles throughout the entire library
  • Browser support: Bootstrap is supported by all popular browsers
  • Responsive web design: Bootstrap’s responsive CSS adjusts to Desktops, Tablets, and Mobile phones
  • Easy to get started: With just the knowledge of HTML and CSS anyone can get started with Bootstrap
Note What is Responsive Web Design?
Responsive web design is to create web sites which adjust and align themselves according to what media tool you use for viewing it.

WHAT DOES BOOTSTRAP INCLUDE?

  • Scaffolding: Contains layout, grid system, fluid grid system, and responsive design
  • Base CSS: Contains classes for typography, tables, forms, buttons, images, and more
  • Components: Contains reusable components: icons, dropdowns, navbars, breadcrumbs, alerts, and more
  • JavaScript Plugins: Contains over a dozen custom jQuery plugins. You can include them all, or one by one
  • Customizable Components : Customize Bootstrap’s components, LESS variables, and jQuery plugins to create your own version

THE HTML FILE

Since Bootstrap 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:

<!DOCTYPE html>
<html>
<head>
<meta charset=“utf-8”>
</head>
</html>

Keep in mind that Bootstrap 3 is mobile-first. Mobile-first styles are found throughout the entire Bootstrap library instead of in separate files.

To ensure proper rendering and touch zooming, also add the viewport meta tag inside the <head> element:

<meta name=“viewport” content=“width=device-width, initial-scale=1”>

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.


ADDING BOOTSTRAP TO YOUR WEB PAGES

There are two ways of starting to use Bootstrap on your own web site.

You can:

  • Download Bootstrap from getbootstrap.com
  • Include Bootstrap from a CDN, like MaxCDN

DOWNLOADING BOOTSTRAP

If you want to download Bootstrap, go to getbootstrap.com, and follow the instructions there.


BOOTSTRAP CDN

If you don’t want to download and host Bootstrap yourself, you can include it from a CDN (Content Delivery Network).

MaxCDN provide CDN support for Bootstrap’s CSS and JavaScript. Also include jQuery:

MAXCDN:

<!– Latest compiled and minified CSS –>
<link rel=“stylesheet” href=http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css&#8221;>

<!– Optional: Include the jQuery library –>
<script src=https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js&#8221;></script>
<!– Optional: Incorporate the Bootstrap JavaScript plugins –>
<script src=http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js&#8221;></script>

Note One advantage of using the Bootstrap CDN:
Many users already have downloaded Bootstrap from MaxCDN when visiting another site. As a result, it will be loaded from cache when they visit your site, which leads to faster loading time. Also, most CDN’s will make sure that once a user requests a file from it, it will be served from the server closest to them, which also leads to faster loading time.

PUT YOUR HTML ELEMENTS INSIDE CONTAINERS

Bootstrap also requires a containing element to wrap site contents.

There are two containers to choose from:

1. Use the .container class for a responsive fixed width container:

EXAMPLE

<div class=“container”>

</div>

Try it Yourself »

2. Use the .container-fluid class for a full width container, spanning the entire width of the viewport:

EXAMPLE

<div class=“container-fluid”>

</div>

Try it Yourself »


BOOTSTRAP BROWSER/DEVICE SUPPORT

Bootstrap works best in the latest desktop and mobile browsers.

Older browsers might display different renderings (though fully functional) of certain elements/components.

Bootstrap supports the latest versions of the following browsers and platforms:

CHROME FIREFOX IE OPERA SAFARI
Android YES YES Not available NO Not available
iOS YES Not available Not available NO YES
Mac OS X YES YES Not available YES YES
Windows YES YES YES* YES NO

* Bootstrap supports Internet Explorer 8 and higher.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s