timurcatakli/Intro to Bootstrap

## Intro to Bootstrap
INTRO to BOOTSTRAP


1- Build a bootstrap based web page using bootstrap grid system
2- Learn about bootstrap components
3- Dive into form components
4- Discover how to make a page responsive
5- Places to get unique bootstrap templates

Bootstrap (created by Twitter) is an html, css, javascript framework that you can use as basis for creating web sites or web applications.

Bootstrap makes nice looking websites quickly and efficiently...


Bootstrap official site is located at: http://getbootstrap.com/

In order to get started with Bootstrap, you need 2 things..
1- Bootstrap CSS file
2- Bootstrap JS file


http://getbootstrap.com/getting-started/

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

*** CDN or Local & .min


A basic bootstrap site => 02.html

Let's talk about Bootstrap Grid System

All related info is located at => http://getbootstrap.com/css/

A bootstrap page starts with basic html

<!DOCTYPE html>
<html lang="en">
  ...
</html>

Then
To ensure proper rendering and touch zooming, add the viewport meta tag to your <head>.


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


You can disable zooming capabilities on mobile devices by adding user-scalable=no to the viewport meta tag. This disables zooming, meaning users are only able to scroll, and results in your site feeling a bit more like a native application. Overall, we don't recommend this on every site, so use caution!

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">


As a beginner start your template with a container - Excel itsel
<div class="container">
  ...
</div>


And everything is a row like an excel spreadsheet

<div class="container">
  <div class="row">
  This section is divided into 12 cells - think about excel as a visual
  </div>
</div>

 => 03.html - toggle pesticide (chrome extension)
 https://chrome.google.com/webstore/detail/pesticide-for-chrome/bblbgcheenepgnnajgfpiicnbbdmmooh


Here is how the grid looks like => 04.html - my example... Bootstraps example http://getbootstrap.com/examples/grid/


Pay attention to
===============================================================
Extra small devices Phones (<768px) Class prefix  .col-xs-
Small devices Tablets (≥768px)      Class prefix  .col-sm-
Medium devices Desktops (≥992px)    Class prefix  .col-md-
Large devices Desktops (≥1200px)    Class prefix  .col-lg-


Let's take a look at a sample responsive page... with Google Developer Tools => 05.html


Using Bootstrap is similar to building a house using legos. In our case lego is a bootstrap component...
Lets search Google for "Bootstrap Components"

http://getbootstrap.com/components/ => 06.html


Let's look at form components:


Let's look at typography and more:
http://getbootstrap.com/css/

Biggest Problem of Bootstrap is every site looks the same so now what:

https://wrapbootstrap.com/theme/material-admin-responsive-angularjs-WB011H985
http://www.keenthemes.com/preview/metronic/theme/admin_1/

http://themeforest.net/search?utf8=%E2%9C%93&term=bootstrap&referrer=search&view=list&sort=sales&date=&category=site-templates&price_min=&price_max=&sales=&rating_min=
	INTRO to BOOTSTRAP



	1- Build a bootstrap based web page using bootstrap grid system
	2- Learn about bootstrap components
	3- Dive into form components
	4- Discover how to make a page responsive
	5- Places to get unique bootstrap templates

	Bootstrap (created by Twitter) is an html, css, javascript framework that you can use as basis for creating web sites or web applications.

	Bootstrap makes nice looking websites quickly and efficiently...


	Bootstrap official site is located at: http://getbootstrap.com/

	In order to get started with Bootstrap, you need 2 things..
	1- Bootstrap CSS file
	2- Bootstrap JS file


	http://getbootstrap.com/getting-started/

	<!-- Latest compiled and minified CSS -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

	<!-- Latest compiled and minified JavaScript -->
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

	*** CDN or Local & .min


	A basic bootstrap site => 02.html

	Let's talk about Bootstrap Grid System

	All related info is located at => http://getbootstrap.com/css/

	A bootstrap page starts with basic html

	<!DOCTYPE html>
	<html lang="en">
	...
	</html>

	Then
	To ensure proper rendering and touch zooming, add the viewport meta tag to your <head>.


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


	You can disable zooming capabilities on mobile devices by adding user-scalable=no to the viewport meta tag. This disables zooming, meaning users are only able to scroll, and results in your site feeling a bit more like a native application. Overall, we don't recommend this on every site, so use caution!

	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">


	As a beginner start your template with a container - Excel itsel
	<div class="container">
	...
	</div>


	And everything is a row like an excel spreadsheet

	<div class="container">
	<div class="row">
	This section is divided into 12 cells - think about excel as a visual
	</div>
	</div>

	=> 03.html - toggle pesticide (chrome extension)
	https://chrome.google.com/webstore/detail/pesticide-for-chrome/bblbgcheenepgnnajgfpiicnbbdmmooh


	Here is how the grid looks like => 04.html - my example... Bootstraps example http://getbootstrap.com/examples/grid/


	Pay attention to
	===============================================================
	Extra small devices Phones (<768px) Class prefix .col-xs-
	Small devices Tablets (≥768px) Class prefix .col-sm-
	Medium devices Desktops (≥992px) Class prefix .col-md-
	Large devices Desktops (≥1200px) Class prefix .col-lg-



	Let's take a look at a sample responsive page... with Google Developer Tools => 05.html


	Using Bootstrap is similar to building a house using legos. In our case lego is a bootstrap component...
	Lets search Google for "Bootstrap Components"

	http://getbootstrap.com/components/ => 06.html


	Let's look at form components:


	Let's look at typography and more:
	http://getbootstrap.com/css/

	Biggest Problem of Bootstrap is every site looks the same so now what:

	https://wrapbootstrap.com/theme/material-admin-responsive-angularjs-WB011H985
	http://www.keenthemes.com/preview/metronic/theme/admin_1/

	http://themeforest.net/search?utf8=%E2%9C%93&term=bootstrap&referrer=search&view=list&sort=sales&date=&category=site-templates&price_min=&price_max=&sales=&rating_min=