Coursera web frameworks

##Bootstrap Grid system

Viewport

Ensures that the screen width is set to the device width and the content is rendered with this width in mind

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

Bootstrap Grid

Four classes available: xs, sm, md and lg

	Extra small (<768px)	Small (≥768px)	Medium (≥992px)	Large (≥1200px)
Tipical device	Mobile phones	Tablets	Laptops	Desktops
Grid Behavior	Horizontal	Collapsed to start, horizontal above vrekpoints	Collapsed to start, horizontal above vrekpoints	Collapsed to start, horizontal above vrekpoints
Container width	None(auto)	750px	970px	1170px
Class prefix	.col-xs-	.col-sm-	.col-md-	.col-lg-
# of columns	12	12	12	12
Column width	Auto	~62px	~81px	~97px
Gutter width	30px (15px on each side)	30px (15px on each side)	30px (15px on each side)	30px (15px on each side)

Each row in Bootstrap grid system is divided to 12 columns
Use the classes .col-xs-, .col-sm-... for defining the layouts for the various screen sizes
Specify how many columns each piece of content will occupy within a row, all adding up to 12 or a multiple thereof
A small white margin between each piece of content, called "gutter"

<div class="container">
    <div class="row">
        <div class="col-sm-5"></div>
        <div class="col-sm-7"></div>
    </div>
</div>

Navbar

Normal Navbar Example:

<nav class="navbar navbar-default" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Ristorante Con Fusion</a>
    </div>
    <ul class="nav navbar-nav">	
      <li class="ac9ve"><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Menu</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
    <ul class="nav navbar-nav navbar-right"
      <li><a href="#">Sign in</a></div>
      <li><a href="#">Contact</a></div>
    </ul>
  </div>
</nav>

Responsive Navbar Example:

<nav class="navbar navbar-default" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbardata" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      ...
    </div>
    <div id="navbardata" class="navbar-collapse collapse">
      <ul class="nav navbar-nav">...</ul>
    </div>
  </div>
</nav>

Positioning Navbar:

.navbar-fixed-top and .navbar-fixed-bottom
Fixed to top/bottom of window and does not scroll
.navbar-static-top
Full-width navbar at the top that scrolls
.navbar-inverse
Dark navbar with light text (opposite to .navbar-default)

Dropdown

<li class="dropdown">
  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span class="caret"></span></a>
  <ul class="dropdown-menu">
    <li><a href="#">Appetizers</a></li>
    <li><a href="#">Drinks</a></li>
    <li role="separator" class="divider"></li>
    <li class="dropdown-header">Specials</li>
    <li><a href="#">Lunch Buffet</a></li>
    <li><a href="#">Weekend Brunch</a></li>
  </ul>
</li>

Icon Fonts

Icon fonts is set of symbols and glyphs and can be used just like regular fonts.

<span class="glyphinco glyphicon-home" aria-hidden="true"></span> <!-- Glyphicons -->
<i class="fa fa-phone"> <!-- Font Awesome -->
<a class="btn btn-social-icon btn-facebook" href="http://www.facebook.com/profile.php?id="><i class="fa fa-facebook"></i></a> <!-- Bootstrap-social -->

Bootstrap Buttons

Colors

Default colors:

primary - Dark blue
success - Green
info - Light blue
warning - Orange
danger - Red

For ex.: text-primary, btn-success, alert-danger, bg-info

Button Classes

Button classes can be applied to <a>, <button> and <input>. All these will get the button appearance but only <button> can be used in nav and navbar.

Examples:

<div class="row"> 
	<div class="col-md-5 col-md-offset-1"> 
	   <button type="button" class="btn btn-primary btn-lg">Large Primary</button> 
	   <button type="button" class="btn btn-default">Default</button> 
	   <button type="button" class="btn btn-success btn-sm">Small Success</button> 
	   <button type="button" class="btn btn-info btn-xs">Extra Small Info</button> 
	   <button type="button" class="btn btn-link">Link</button> 
	</div> 
	<div class="col-md-3"> 
	   <button type="button" class="btn btn-warning btn-block">Warning</button> 
	   <button type="button" class="btn btn-danger btn-block" disabled="disabled">Danger</button>
	</div>
</div>

Button Groups and Toolbars

<div class="col-md-5 col-md-offset-1">
  <div class="btn-toolbar" role="toolbar">
    <div class="btn-group btn-group-sm" role="group">
      <button type="button" class="btn btn-primary">Primary</button>
      <button type="button" class="btn btn-default">Default</button>
      <button type="button" class="btn btn-success">Success</button>
    </div>
    <div class="btn-group btn-group-lg" role="group">
      <button type="button" class="btn btn-info">Info</button>
      <button type="button" class="btn btn-warning">warning</button>
      <button type="button" class="btn btn-danger">Danger</button>
    </div>
  </div>
</div>
  <div class="col-md-3">
    <div class="btn-group-ver]cal" role="group">
      <button type="button" class="btn btn-info">Info</button>
      <button type="button" class="btn btn-warning">Warning</button>
      <button type="button" class="btn btn-danger">Danger</button>
    </div>
  </div>
</div>

Bootstrap Forms

form-horizontal

<form class="form-horizontal" role="form">
  <div class="form-group">
    <label for="firstname" class="col-sm-2 control-label">First Name</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="firstname"
          name="firstname" placeholder="Enter First Name">
    </div>
  </div>
</form>

Inline Form

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="email">Email address</label>
    <input type="email" class="form-control" id="email" placeholder="Email">
  </div>
  <div class="form-group">
    <label class="sr-only" for="password">Password</label>
    <input type="password" class="form-control" id="password" placeholder="Password">
  </div>
  <div class="checkbox">
    <label><input type="checkbox">Remember me</label>
  </div>
  <button type="submit" class="btn btn-default">Sign in</button>
</form>

Input Group with Addons

<div class="input-group"> 
   <div class="input-group-addon">(</div> 
   <input type="tel" class="form-control"
       id="areacode" name="areacode" 
       placeholder="Area code"> 
   <div class="input-group-addon">)</div> 
</div>

Bootstrap JavaScript Components

Tabs and Tabbed Navigation

Tabs and pills nav structure

Both nav-tabs and nav-pills provides exactly same functionality but different look and feel.

<ul	class="nav nav-tabs" role="tablist">	
<li	role="presenta0on" class="ac0ve">	
    <a	href=”#peter”>Peter Pan, CEO</a></li>	
<li	role="presenta0on">	
    <a	href="#danny”>Danny Witherspoon, CFO</a></li>	
<li	role="presenta0on">	
    <a	href="#agumbe”>Agumbe Tang, CTO</a></li>	
<li	role="presenta0on”>	
    <a	href="#alberto>Alberto Somayya,	Exec. Chef</a></li>	
</ul>

Other classes can be also applied to tabs and pills nav:

nav-justified: stretch the width of the parent
disabled: disable the element
nav-stacked: display pills vertically (not available for tabs)

Tab content and panes

Entire content should be enclosed within a <div class="tab-content"> block and each pane should be contained within a <div class="tab-pane"> block. Example:

<ul class="nav nav-tabs" role="tablist">
    <li role="presenta0on" class="ac0ve">
        <a href="#peter" aria-controls="home" role="tab"
           data-toggle="tab">Peter Pan, CEO</a>
    </li>
        ...
</ul>
<div class="tab-content">
    <div role="tabpanel" class="tab-pane fade in ac0ve" id="peter">
        <h3>Peter Pan <small>Chief Epicurious Officer</small></h3>
        <p> ... </p>
    </div>
        ...
</div>

Collapse

<div class="col-md-5 col-md-offset-1">
<div class="collapse in" id="collapseExample">
   <div class="well">
      <h3>Some Collapsible Content</h3>
    <p>This is some collapsible content that will be toggled
         with the bu?on on the right</p>
   </div>
</div>
</div>
<div class="col-md-3">
<a class="btn btn-primary" role="bu?on"
     data-toggle="collapse" href="#collapseExample"
     aria-expanded="false" aria-controls="collapseExample">
   Toggle Info
</a>
</div>

Accordion

<div class="panel-group" id="accordion” role="tablist”>
	<div class="panel panel-default">
		<div class="panel-heading" role="tab" id="headingPeter">
			<h3 class="panel-Stle">
			<a role="bu?on" data-toggle="collapse"
					data-parent="#accordion" href="#peter”>
					Peter Pan
					<small>Chief Epicurious Officer</small></a>
			</h3>
			</div>
			<div role="tabpanel" class="panel-collapse collapse in” id="peter”>
			<div class="panel-body">
			...
			</div>
		</div>
	</div>
        ...
</div>

Scrollspy

Add data-* attributes to body of the page

<body data-spy="scroll" data-target="#myScrollspy" data-offset="200">

Add a nav element to the page

<nav class="hidden-xs col-sm-2" id="myScrollspy">
    <ul class="nav nav-pills nav-stacked" data-spy="affix" data-offset-top="400">
        <li><a href="#history">Our History</a></li>
        <li><a href="#corporate">Corporate</a></li>
        <li><a href="#facts">Facts</a></li>
    </ul>
</nav>

Affix

Add the affix data-* classes to the <ul> nav element:

<ul class="nav nav-pills nav-stacked" data-spy="affix" data-offset-top="400">

Add the affix CSS class:

.affix {
    top:100px;
}

Tooltips, Popovers and Modals

Tooltip

Simplest way to display content Pops up when the user hovers over an element
Three aGributes:

data-toggle="tooltip"
data-placement="top|bottom|left|right"
title="message string"

Javascript code to be included:

<script>
	$(document).ready(func$on() {
	$('[data-toggle="tooltip"]').tooltip(); });
</script>

Example

<a type="buGon" class="btn btn-warning btn-block"
	data-toggle="tooltip" title="Or Call us at +852 12345678”
	data-placement="bottom" href="#reserveform">
	Reserve Table</a>

Popover

Includes a $tle and content – Pops up when the user clicks on an element
Four attributes:

data-toggle="tooltip" 
data-placement=""top|boGom|leM|right"
title="message title"
data-content="message string"

Javascript code to be included:

<script> 
$(document).ready(func$on() { 
$('[data-toggle="popover"]').popover(); }); 
</script>

Example:

<button type="button" class="btn btn-warning"  
data-toggle="popover" title="Our Tel. Number"
data-content="+852 12345678"
data-placement="right"style="color:#000;"> 
Call Us 
</button>

Modal

More detailed information can be presented than tooltips and popovers
Modal contains header, body and footer
Can use the Bootstrap grid in the body to organize content Example:

<div id="loginModal" class="modal fade" role="dialog">
	<div class="modal-dialog">
	<!-- Modal content-->
		<div class="modal-content">
			<div class="modal-header">
				<button type="buGon" class="close"
				data-dismiss="modal">&times;</button>
				<h4 class="modal-title">Login </h4>
			</div>
			<div class="modal-body">
			. . .
			</div>
		</div>
	</div>
</div>

<a data-toggle="modal" data-target="#loginModal">Login</a>

Carousel

Allows the inclusion of a slideshow with captions

 <div id="mycarousel" class="carousel slide" data-ride="carousel"> 
   . . . 
</div>

Adding Slides:

<div class="carousel-inner" role="listbox"> 
	<div class="item active"> 
	   <img class="img-responsive" src="…" alt="…"> 
	   <div class="carousel-caption"> 
	   ... 
	   </div> 
	</div> 
	<div class="item"> 
	   ... 
	   <div class="carousel-caption"> 
	   ... 
	   </div> 
	</div> 
</div>

Adding Indicator Controls

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

Adding Left and Right Controls

<a class="  carousel-control" href="#mycarousel" role="buSon" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>

<a class="right carousel-control" href="#mycarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>

proxygen / coursera-web-frameworks Goto Github PK