Bootstrap 3=pluralsight, Shawn Wildermuth;Note=Erxin.txt

Bootstrap 3=pluralsight, Shawn Wildermuth;Note=Erxin

# Boostraps 3
- the content
	+ bootstrap is useful
	+ how to add 
	+ customize boostrap
	+ use boostrap
	+ implement common metaphors using boostrap
	+ how to use boostrap's jquery plugins
	+ how to migrate a boostrap v2 to v3
- developer and designer
	+ not every project has a designer
- redemption
	+ learning from community can help
	+ most websites are made of the same basic parts
	navigation, layout, etc
	+ provide way to structure the webpage
- What is bootstrap
	+ open source framework for building web sites
	+ a bit of css
	+ a bit of javascript
	+ modular
	+ cover the 80% of the metaphor, most of the default common ui elements are provided 
- Tour of Boostrap 3
	+ get boostrap
	getboostrap.com
	+ there are several components in the website
- The mobile web
	+ devices and PCs are equally important now
	your website is just as likely to be viewed on a tablet or phone as on a PC
	This used to mean building a 'mobile' version
	m.domain.com for mobile version
	boostrap built-in way to display different UI to different devices
- Responsive web design
	+ adapt to different mobile devices
	adapt to different view ports
	
	+ approach usually has been to gracefully degrade
	+ for example
	for pc, pad, 
	+ responsive web design
	main css(common design)
	960_ (standard browsers)
	0-959(tablet landscape)
	0-767(mobile sizes)
	0-479(mobile portrait)
	480-767(mobile landscape)
	768-959(tablet portrait and up)
	
	+ media queries
		* works because of cascading rules
		* later rules over-rule(pun!) earlier rules
		* more specific rules overrule earlier rules
		* example, your .css
		# main{width: 989px;}
		
		@media only screen and (min-width:768px) and (max-width:959px){
			#main {width: 760px;}
		}
		
		@media only screen and (max-width: 767px){
			#main {width: 470px;}
		}
	+ problems
		* subtractive solution means too many resources
		gets too much css data for the less capable css and add over load to the server too
		* all JS code is running
		* on platform that is least suited to handle it
		* images are loaded but hidden
	+ boostrap3 is used to fix this problem
	+ comparison of mobile and desktop views
	25% mobile
	4% same size
	37% saving
	...
	reference http://shawnw.me/11vMlhG
- mobile first responsible design
	+ Philosophy created by Luke Wroblewski*
	http://www.lukew.com
	focus on Progressive enhancement
	where RWD is typically graceful degradation
	scales up ... not down
	
	+ the full capability should be started from mobile view
	
	+ mobile first design from 0-480
	main css(common design) (0-480)
	{
		> 480px
			> 768px
				>928px
					>1024px
	}
	
	+ bootstrap < 3
	supported optional responsive web design
	great help to a many sites
	but wasn't mobile first
	
	+ bootstrap 3
	major changes from prior versions
	change to support mobile first but...
	breaks existing clients for bootstrap2 or earlier
	
- bootstrapping of the web
	+ popular
	look like a cookie cutter
	
	+ it's everywhere
	avoid the temptation
	
	+ good example
	healthcare.gov
	wilderminds.com
	
	
# Getting started
- agenda
- get bootstrap, getbootstrap.com
check the dist folder to get the release bootstrap 
the three folder should keep the directory relation
- adding to page
	+ include the css of bootstrap
	<link rel="stylesheet" href="css/bootstrap.min.css"/>
	make custom style sheet below the bootstrap
	
	+ add bootstrap js
	<script src="js/jquery-2.0.3.min.js"></script>
	<script src="js/bootstrap.min.js"></script>
	
	+ define bootstrap container in the page, which is a div classed with "container"
	it's used to contain other bootstrap elements
	<div class="container">
	</div>
- grid system
bootstrap grid system, there will be twelve grid gap for used for each row
.col-xx-6, will take 6 cell of a row

use offset for a column by, the col will start from the third cell of a row
.col-xx-10 .col-xx-offset-2
	
use mix offset will simply control the display element position
- the container could added multiple times, for example the header, context and footer each used a container
then each container will have separated virtual grid system
- multiple grids
	+ grids have a type for screen size
	.col-lg-xx: >= 1200px, at less grid 
	.col-md-xx: >= 992px
	.col-sm-xx: >= 768px
	.col-xs-xx: < 768px
	
	+ specify a element with multiple grid size for different screen resolution
	<element class="col-md-8 col-sm-10 ...">
	</element>
- offset and rows
define a separate row for a element in a container
<element class="row">
</element>
- image and responsive helpers
use the pull-right, pull-left to make the image float left or right just like use the class in the standard html development

img-thumbnail, this class will make the image automatic change it's display size by the screen size

use response helpers to allows use to set certain element to display or not for different screen size, such as hidden-xs will hidden for extra small screen
other attribute class is visible-md, visible-xs

- Theming bootstrap, create a container style
.container{
	background-color:#efefef;
}

use the standard navbar navbar-default style to make a element default navigation bar
<div class="navbar navbar-default">
	<div id="logo">
	</div>
	<ul>
		<li><a href=".">Home</a></li>
		<li><a href="about">About</d>
	</ul>
	<button class="btn"></button>
</div>
- supply bootstrap theme at http://www.bootswatch.com
- customizing bootstrap package, the website support supply composite download bootstrap element
	
	
# Bootstrap 3 basics
- typography
	+ standard
	h3, strong, em
	
	+ bootstrap class type
		* lead
		<p class="lead"> </p>
		
		* subheading
		
		* text-muted, text-warning
- Buttons, add class btn for the class, add second class to specify which kind of button but use
<button class='btn btn-warning'>button</button>
<a class='btn btn-warning'>button</a>
- icons use built-in icons support by bootstraper
<span class="glyphicon gliphicon-earphone"></span>
btn-sm, ..

- navs and navBars, specify the built-in navigation style
<div id="menu" class="navbar navbar-default">
	<div class="nav-header navbar-fixed-top">
		<button class="btn btn-success navbar-toggle"
				data-toggle="collapse"
				data-target=".navbar-collpase"><span class="glyphicon glyphicon-chevron-down"></span>
		></button>
		<div id="logo">
		</div>
	</div>
	<div class="navbar-collapse collapse">
		<ul class="nav navbar-nav navbar-right">
			<li class="nav active"><a href=".">Home></a></li>
		</ul>
	</div>
</div>
this example will fix the navigation bar on the top of the page and make the navigation menu disappear when the screen is become small. the toggle button will toggle control the menu 
there will be a css to fix margin when the navigation is fixed on top
body{
	margin-top:70px;
}

- list, to add style for unorder list
<ul class = "list-unorder list-inline"/>
or other styles like
list-unorder,
list-inline
list-group, table like list
<span class="badge"/> add small icon at the left of the list
- table class
add class to table called table
<table class="table">
...
</table>

use table-striped to add strip to each row
table-border, 
table-hover, 
table-condensed, condense the table content
table-response, wide enough to unwrap content for narrow screem
- form
wrap form element with div and add class 
<form>
	<div class="form-group">
		<label for="nameInput">Your name</label>
		<input type="text"
			   name="nameInput"
			   class="form-control"
			   placehoder="e.g. Your Name" />
	</div>
	<div class="form-group">
		<label for="emailInput">Email</label>
		<input type="email" name="emailInput" class="form-control" placeholder="e.g Your Email"/>
	</div>
	<input type="submit" value="Submit" class="btn btn-success"/>
</form>
bootstrapper have three kinds of forms
	+ standard
	form-horizontal
	+ vertical 
	add form contorl label to class="control-label col-md-2"
	+ inline form
	form class="form-inline"


# bootstrap components
- breadcrumbs, page header
	+ page header
	<div class="page-header">
		<ol class="breadcrumb">
			<li><a href="/">Home</a></li>
			<li class="active">About</li>
		</ol>
		<h1>...</h1>
	</div>
	
	+ breadcrumbs is like the file path in a website to info the user where they are and let the navigate to the previous page by one click
- button groups
	+ add a button groups
	<div class="btn-group [btn-group-vertical]">
		<button class="btn btn-success">First</button>
		<button class="btn btn-success">First</button>
		<button class="btn btn-success">First</button>
	</div>
	
	there are also a btn-group-sm to give a toggle able compact 

	the input type could be checkbox or radio to control whether multiple could be selected or only one could be checked
	
	+ this will be convenience for the touch screen users
	
- dropdowns
add button group to dropdowns
<div class="dropdown">
	<button class="btn" data-toggle="dropdown">Show me</button>
	<ul class="dropdown-menu" style="display: block;">
		<li><a href="#" textindex="1"> Walter</a></li>
		<li><a href="#" textindex="1"> Walter</a></li>
		<li><a href="#" textindex="1"> Walter</a></li>
	</ul>
</div>

inorder to show the drop down
never use inline style in production code

support add disable element for the drop down menu, also support add divider for the menu
<li class="disable">...</li>
<li class="divider"></li>

add btn relative to drop down, to control the dropdown menu 

- button dropdowns
integrate the dropdown menu with the button groups, make the 
<div class="btn btn-group btn-group-sm">
	<button class="btn btn-success">other<button>
	<button class="btn btn-success" data-toggle="dropdown"><span class="caret"></span></button>
</div>

- use a dropdown for a select
replace the select relative method with button and dropdown list, add javascript to handle the click event to change the button text when the caret click and then selected
- input group, use the add input group with text input box such as add icon in front or at the tail of a input group
<div class="input-group">
	<span class="input-group-addon">!</span>
	<input type="text" name="nameInput" class="form-control" placeholder="e.g. Your Name"/>
	<span class="input-group-addon">!</span>
</div>

- pagination components, add pager
<ul class="pager"/>
	<li class="previous"><a href="#">previous</a></li>
	<li class="next"><a href="#">next</a></li>
</ul>

add pagination for number of pages
<ul class="pagination pagination-sm">
	<li class="disabled"><a href="#">&laquo;</a></li>
	<li class="active"><a href="#">1</a></li>
	<li ><a href="#">2</a></li>
	<li ><a href="#">3</a></li>
	<li ><a href="#">&raquo;</a></li>
</ul>
display
<< 1 2 3 >>

- thumbnails
<div class="col-md-4 col-sm-6">
	<a href="#">
		<img class="img-responsive"> ..</img>
	</a>
</div>

the class responsive is to tell the element resize themself to fit for their container size

add thumbnail class for the anchor which is the container of the image, or add a div for them
also support add caption for the image
<div class"thumbnail>
	<a href="#">
		<img src="/images/lebowski-1.jpg" class="img-resposive" alt="1">
	</a>
	<div class="caption">
		<h3>First</h3>
		<p>
			....
		</p>
	</div>
</div>

use css control the image high then the tumbnail will display with same size

- panels, display for a logical section for a page
	<section id="sidebar" class="col-md-4 col-sm-3">
		<div class="panel panel-default|panel-info|panel-primary">
			<div class="panel-heading">
				...
				<h2> class="panel-title"</h2>
			</div>
			<div class="panel-body">
			</div>
			<div> class="panel-footer">
			</div>
		</div>
	</section>
- wells, use to info the user the content is highlight, such as a summary of a passage
<div class="well well-sm">
	<p class="lead">
		...
	</p>
</div>

the lead class is used to hight something is important

# bootstrapper plugins
- collapse, allow collapse visible and invisible navigation bar
<ul class="nav nav-pills navbar-default">
	<li><a href="#attributions" data-toggle="collapse">Attributions</a></li>
	<li><a href="#pics">Pictures</a></li>
</ul>

<div id="attributions" class="collapse">
</div>

# by default collapse in will display the content
<div id="pics" class="collapse in">
</div>
- accordion, when click the content will be shown
<div id="accordion" class="panel-group">
	<div class="panel panel-info">
		<div class="panel-heading">
			<div class="panel-title">
				<a href="#first" 
				   data-toggle="collapse"
				   data-parent="#accordion"> First </a>   
			</div>
		</div>
		<div class="panel-collapse collapse" id="first">
			<div class="panel-body">
				<img src="images/1.jpg" alt="1"/>
			</div>
		</div>
	</div>
	<div class="panel panel-info">
		<div class="panel-heading">
			<div class="panel-title">
				<a href="#second" 
				   data-toggle="collapse"
				   data-parent="#accordion"> Second </a>   
			</div>
		</div>
		<div class="panel-collapse collapse" id="second">
			<div class="panel-body">
				<img src="images/2.jpg" alt="2"/>
			</div>
		</div>
	</div>
</div>
- modal markup, modal windows
create popup dialog like appearance, create a new div with class modal

<a href="#sentDialog" class="btn btn-info" data-toggle="modal">Show dialog</a>

# the fade is a jquery effect
<div class="modal fade" id="sentDialog" tabindex="-1">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<a href="#" class="close" data-dismiss="modal">&times;</a>
				<h4> thanks for clicking </h4>
			</div>
			<div class="modal-body">
				<p>
					info
				</p>
			</div>
			<div class="modal-footer">
				<button class="btn btn-success" data-dismiss="modal">Close</button>
			</div>
		</div>
	</div>
<div>
the class close will make the anchor move to right and looks like a close button of window

- modal events
add additional event handling by jquery, rewrite the default submit event

use javascript to rewrite the submit button, give the form a id contactForm

var $sentDialog = $("#contactForm");
$("#contactForm").on("submit", function(){
	$sendDialog.modal("show");
	return false; //prevent the form real send
})

$sendDialog.on("hidden.bs.modal", function(){
	//...handle hidden event
	// bootstrap modal event extends the default javascript event, such as hidden.bs.modal
	// other extend events such as hidding, shown, showing event
});

the event have a name patter, event.bs.class bs is the namespace of bootstrapper the class is the element style
- tab
create other unorder list, and take some section of info id

use nav-tabs class to add navigation tab view
the class justify class will make all the tab buttons extend as a row 
<ul class="nav nav-tabs [nav-justify]">
	<li class="active"><a href="#formTab">Contact form</a>
	<li><a href="#addressTable">Contact form</a>
</ul>

use class tab-content to mark the tab content panels, the active class should be match between panel and li element
<div class="tab-content" >
	<div class="well tab-pane active" id="formTab">
	</div>

	<div class="well tab-pane" id="addressTable">
	</div>
</div>

- tooltip, add tooltip for a element, the default use a tooltip is to use javascript to accelerate the performance
<div class="col-md-10">
	<input type="submit" class="btn btn-success" title="tool tip info"  [data-toggle="tooltip" data-placement="right" data-delay="500"]/>
</div>

$(#id).tooltip([placement:"right", show:500, hide:0]);

bootstrapper use jquery tooltip method

use a image as a tooltip, set the property data-html to true and then set the title with a html content string. When the tooltip show the html title will be parsed
<div class="col-md-10">
	<input id="id" type="submit" class="btn btn-success" title="<img src='images/tooltip.jpg' class='img-responsive'/>"  data-html="true"]/>
</div>

$(#id).tooltip([placement:"right", show:500, hide:0]);

- alert, use alert and alert-warning to add alert style, set the alert div into top of 

<div class="alert alert-warning collapse">
	<a href="#" data-dismiss="alert" class="close"/>&time;</a>
	<p>
	this doesn't work and it's not real
	</p>
</div>

use js call show to show the alert div

var $sentAlert = $("#sentAlert");

$sentAlert.show();

$sentAlert.on("hidden.bs.alert", function(){
	$sentAlert.hide();
	return false;
});

- carousel, the carousel element need to call carousel in the javascript to initial it
this container make the carousel visible for pc and pad but hide for the mobile

<div class="row visible-md visible-lg">
	<div class="carousel slide" id="theCarousel" data-interval="2000">
		<div class="carousel-inner">
			<div class="item active">
				<img src="images/carousel-1.jpg" alt="1" class="img-reponsive" />
			</div>
			<div class="item active">
				<img src="images/carousel-1.jpg" alt="1" class="img-reponsive" />
			</div>
		</div>
	</div>
</div>

$(#theCarousel).carousel();

- carousel indicators add indicators ol in the theCarousel 
<ol class="carousel-indicators">
	<li data-target="#theCarousel" the-slide-to="0" class="active"></li>
	<li data-target="#theCarousel" the-slide-to="1" ></li>
	<li data-target="#theCarousel" the-slide-to="2" ></li>
</ol>

- navigation without indicators, carousel
<a href="#theCarousel" class="carousel-control left" data-slide="pre"><span class="icon-prev"></span></a>
<a href="#theCarousel" class="carousel-control right" data-slide="next"><span class="icon-next"></span></a>

- add captions for carousel
add caption for each carousel image div
<div class="item active">
	<img src="images/carousel-1.jpg" alt="1" class="img-reponsive" />
	<div class="carousel-caption">
		<h4>bowling</h4>
		<p> ... </p>
	</div>
</div>


# Migrate to bootstrap3
- migrating to bootstrap 3 from previous buttons