Bootstrap Crash Course 20180717

Bootstrap Crash Course
Haim Michael
July 17th
, 2018
All logos, trade marks and brand names used in this presentation belong
to the respective owners.
lifemichael
https://youtu.be/25Mj0blVVtI
Part 1
https://youtu.be/VlMCuGVED9Y
Part 2

© 1996-2018 All Rights Reserved.
Haim Michael Introduction
● Snowboarding. Learning. Coding. Teaching. More
than 18 years of Practical Experience.
lifemichael

© 1996-2018 All Rights Reserved.
Haim Michael Introduction
● Professional Certifications
Zend Certified Engineer in PHP
Certified Java Professional
Certified Java EE Web Component Developer
OMG Certified UML Professional
● MBA (cum laude) from Tel-Aviv University
Information Systems Management
lifemichael

© 2008 Haim Michael 20150805
Introduction

07/17/18 © Haim Michael 2011. All Rights Reserved. 5
What is Twitter Bootstrap?
 Twitter Bootstrap is a front end web development framework
that provides us with the capability to develop a responsive
front end in according with most of today common UI
standard conventions.
 The Twitter Bootstrap framework includes files in
JavaScript, HTML and CSS.
http://twitter.github.io/bootstrap/

Syntactically Awesome StyleSheets
 As of version 4 the framework uses Syntactically Awesome
StyleSheets, also known as 'SASS' (instead of LESS, as it
was in version 3).
 Sass is an extension of CSS that provides us with more
possibilities when creating our style sheets.
 Sass allows us to use variables, nested rules, mixins and
more.

Responsive Web Pages
 The front end we get when using the Twitter Bootstrap is
responsive. Browsing using different devices with different
screen sizes the content and its layout adjust automatically.

Popularity
 Using the Twitter Bootstrap is very common all over the
world. Both for web applications and for hybrid ones.

Popularity
 The trends.builtwith.com/docinfo/Twitter-Bootstrap provides
detailed statistics about the usage of this framework.

Alternative Frameworks
 Twitter Bootstrap is not alone. There are other alternative
frameworks we can use:
Foundation - http://foundation.zurb.com
Gumby - http://gumbyframework.com
Ground - http://groundworkcss.github.io/groundwork
Zimit - http://firezenk.github.io/zimit/
Kickstrap – http://www.getkickstrap.com
YUI Library – http://www.yuilibrary.com

© 1995-2016 Haim Michael. All Rights Reserved. 11
Jump Start

Jump Start Template
 You can find a basic template to start with at
www.getbootstrap.com

Jump Start Template
<!doctype html>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css"
integrity="sha384-Smlep5jCw...." crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>


<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha..."
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity="sha38..." ></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"
integrity="sha38..."></script>
</body>
</html>

Jump Start Template

The HTML5 Doc Type Declaration
 The HTML5 doctype declaration <!DOCTYPE html> tells the
web browser to treat the file in according with the HTML5
specification.

The charset Meta Data
 The <meta charset="utf-8"> meta data element tells
the web browser that UTF-8 is the encoding of this file.

The View Port Meta Data
 The <meta name="viewport"
content="width=device-width, initial-scale=1,
shrink-to-fit=no"> meta data element tells the web
browser that the page should be browsed as if its width is the
same width of the device, with initial scale of 1. The user will
be able to zoom in and out changing that scale.
 The shrink-to-fil=no fixes a bug in iOS9 as described at
http://kihlstrom.com/2015/shrink-to-fit-no-fixes-zoom-problem-in-ios-9

Internet Explorer Edge Mode
 Using the <meta http-equiv="x-ua-compatible"
content="ie=edge"> meta element we forces the internet
explorer to render the content in the recent Edge mode.

The crossorigin Attribute
 Using the crossorigin attribute inside the link element that
points at the external CSS file means that a cross-origin
request is performed but no credential is sent.

The integrity Attribute
 Using the integrity attribute allows the browser to check
the file source to ensure that the code won't be loaded if the
source has been manipulated.
 When using bootstrap we should use the integrity
attribute both inside the link and inside the script
elements.

Components

Introduction
 When using the Twitter Bootstrap framework there is a huge
range of ready to use components.

Buttons Group
 We can place a series of buttons into the same group. Doing
so will render these buttons together in one group.
<button class="btn btn-primary">Simple Button</button>

Buttons Group
 We can place a series of buttons in a group. The buttons will
be rendered together in one group.
<div class="btn-group" role="group">
<button type="button" class="btn btn-secondary">Wind</button>
<button type="button" class="btn btn-secondary">Water</button>
<button type="button" class="btn btn-secondary">Fire</button>
</div>

Button Dropdown
 We can place a button together with a drop down menu by
using the btn-group and dropdown-menu CSS classes.
 Each item in the drop down menu will be created using the
dropdown-item CSS class.

Button Dropdown
<div class="btn-group">
<button type="button" class="btn btn-secondary
dropdown-toggle" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
File
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">New</a>
<a class="dropdown-item" href="#">Save As</a>
<a class="dropdown-item" href="#">Open</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Simple Link</a>
</div>
</div>

Button Dropdown

Forms
 Bootstrap provides us with controls, special layouts for forms
and unique custom components for creating different types of
forms.

Forms
<form>
<fieldset class="form-group">
<label for="emailinput">Email address</label>
<input type="email" class="form-control"
id="emailinput" placeholder="Enter email address">
<small class="text-muted">
Your email won't be shared with others.
</small>
</fieldset>
<fieldset class="form-group">
<label for="passwordinput">Password</label>
<input type="password" class="form-control"
id="passwordinput" placeholder="Enter password">
</fieldset>
<button type="submit" class="btn btn-primary">Submit</button>
</form>

Forms

Forms
 Bootstrap provides us with a grid we can use for placing the
controls.

Forms
<form>
<div class="form-group row">
<label for="inputemail" class="col-sm-2 form-control-label">
Email
</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputemail"
placeholder="Email">
</div>
</div>
<label for="inputpassword" class="col-sm-2 form-control-label">
Password
</label>
<input type="password" class="form-control" id="inputpassword"
placeholder="Password">
</div>
</div>
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-secondary">Sign in</button>
</div>
</div>
</form>

Forms

Input Group
 Using the input-group CSS class we can place together an
input element that functions as a text field with a button or a
span element.
<div class="input-group">
<input type="text" class="form-control"
placeholder="Member Username" aria-describedby="useremail">
<span class="input-group-addon" id="useremail">@gmail.com</span>
</div>

Jumbotron
 We will usually use the jumbotron for displaying a key
marketing message on our website.

Jumbotron
<div class="jumbotron">
<h1 class="display-3">Hello, world!</h1>
<p class="lead">This is a simple hero unit, a simple jumbotron-style
component for calling extra attention to featured content or
information.</p>
<hr class="m-y-2">
<p>It uses utility classes for typography and spacing to space content
out within the larger container.</p>
<p class="lead">
<a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
</p>
</div>

Jumbotron

Labels
 The label is an adaptive tag for adding some context to
specific text.
<h1>We Teach <span class="label label-default">Programming</span></h1>

Alerts
 We can create various contextual feedback messages for
typical user actions.
<div class="alert alert-warning alert-dismissible fade in" role="alert">
<button type="button" class="close" data-dismiss="alert"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<strong>Becarefule!</strong> You should debug your code!
</div>

Cards
 The card is a flexible and extensible content container. It
includes options for header and footer, as well as a wide
variety of content, contextual background colors, and powerful
display options.

Cards
<div class="row">
<div class="card card-block">
<h3 class="card-title">Learn Swift</h3>
<p class="card-text">Bla bla bla. Bla bla bla. Bla bla bla. Bla
bla bla. Bla bla bla. Bla bla bla. Bla bla bla. Bla bla bla.</p>
<a href="#" class="btn btn-primary">More Info</a>
</div>
</div>
<h3 class="card-title">Learn Scala</h3>
<p class="card-text">Bla bla bla. Bla bla bla. Bla bla bla. Bla bla
bla. Bla bla bla. Bla bla bla. Bla bla bla. Bla bla bla.</p>
<a href="#" class="btn btn-primary">More Info</a>
</div>
</div>
</div>

Cards

Nav
 Bootstrap provides us with various types of navigation
components.
 We can create simple links either horizontal or vertical, we
can create tabs or pills. We can have our pills stacked on
each other. We can add dropdowns to our tabs or to our pills.

Nav
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#home"
role="tab">Home</a>
</li>
<a class="nav-link" data-toggle="tab" href="#products"
role="tab">Products</a>
</li>
<a class="nav-link" data-toggle="tab" href="#about" role="tab">About</a>
</li>
<a class="nav-link" data-toggle="tab" href="#contact"
role="tab">Contact</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home" role="tabpanel">home screen...</div>
<div class="tab-pane" id="products" role="tabpanel">our products are...</div>
<div class="tab-pane" id="about" role="tabpanel">about our company...</div>
<div class="tab-pane" id="contact" role="tabpanel">contact us at...</div>
</div>

Nav

Navbar
 The navbar is a simple wrapper for putting together the logo,
the navigation and other elements.

Navbar
<nav class="navbar navbar-light bg-faded">
<a class="navbar-brand" href="#">life michael</a>
<ul class="nav navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<a class="nav-link" href="#">Courses</a>
</li>
<a class="nav-link" href="#">About</a>
</li>
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
<form class="form-inline pull-xs-right">
<input class="form-control" type="text" placeholder="Search">
<button class="btn btn-success-outline" type="submit">Search</button>
</form>
</nav>

Navbar

Breadcrumb
 This component indicates about the current page location
within the navigation hierarchy.
<ol class="breadcrumb" style="margin-bottom: 5px;">
<li><a href="#">Home</a></li>
<li><a href="#">Professional Courses</a></li>
<li class="active">Android Platform</li>
</ol>

Pagination
 This component provides us with the capability to display
pages the user can click on.

Pagination
<nav>
<ul class="pagination">
<li class="page-item">
<a class="page-link" href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
<span class="sr-only">Previous</span>
</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item">
<a class="page-link" href="#" aria-label="Next">
<span aria-hidden="true">»</span>
<span class="sr-only">Next</span>
</a>
</li>
</ul>
</nav>

Pagination

Pager
 This component provides us with the capability to display
simple next and previous buttons.
<nav>
<ul class="pager">
<li><a href="#">Previous</a></li>
<li><a href="#">Next</a></li>
</ul>
</nav>

Progress
 This component displays a simple progress bar on screen.
<progress class="progress progress-striped progress-animated"
value="25" max="100">35%</progress>

List Group
 Using this component we can display both simple and
complex lists of elements.

List Group
<ul class="list-group">
<li class="list-group-item">
<span class="label label-default label-pill pull-xs-right">8</span>
Israel
</li>
France
</li>
Canada
</li>
</ul>

List Group

Modal
 The Modal component is a streamlined flexible dialog prompt.

Modal
<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel">
Our Dialog Title
</h4>
</div>
<div class="modal-body">
Bla bla bla. Bla bla bla. Bla bla bla. Bla bla bla. Bla bla
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary"
data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">
Save changes</button>
</div>
</div>
</div>
</div>

Modal

Tooltips
 Using the tooltip component we can display small tooltips next
to specific elements on our page.

Tooltips
<button type="button" class="btn btn-secondary" data-toggle="tooltip"
data-placement="top"
title="tooltip text on top">
Tooltip on top
</button>
data-placement="right"
title="tooltip text on right">
Tooltip on right
</button>
data-placement="bottom"
title="tooltip text on bottom">
Tooltip on bottom
</button>
data-placement="left"
title="tooltip text on left">
Tooltip on left
</button>

Tooltips

Popover
 The popover component allows us to display overlay content
next to any element on our page.
 In order to use this component we must include the tether.js
before bootstrap.js. You can find the tether.js file at
https://github.com/HubSpot/tether

Popover
<button type="button" class="btn btn-lg btn-danger"
data-toggle="popover" title="Popover Title"
data-content="Bla bla bla bla">
Click Here
</button>

Collapse
 Using the collapse plugin we can toggle content on a web
page.

Collapse
<p>
<a class="btn btn-primary" data-toggle="collapse" href="#phpcollapse"
aria-expanded="false" aria-controls="phpcollapse">
PHP Rocks
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse"
data-target="#javacollapse" aria-expanded="false"
aria-controls="javacollapse">
Java 4ever
</button>
</p>
<div class="collapse" id="phpcollapse">
We love PHP! It is the simplest programming language for the server side!
</div>
</div>
<div class="collapse" id="javacollapse">
We love Java! It is the greatest programming language in all times!
</div>
</div>

Collapse

Carousel
 Using the carousel component we can get a magnificent
slideshow.

Carousel
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0"
class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img src="images/slide1.jpg" alt="First slide">
</div>
<div class="carousel-item">
<img src="images/slide2.jpg" alt="Second slide">
</div>
<div class="carousel-item">
<img src="images/slide3.jpg" alt="Third slide">
</div>
</div>
<a class="left carousel-control" href="#carousel-example-generic" role="button"
data-slide="prev">
<span class="icon-prev" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button"
data-slide="next">
<span class="icon-next" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>

Carousel

Images

Introduction
 Bootstrap provides us with CSS classes that assist us with the
inclusion of images in the web page we develop.

Image Shapes
 Using the img-rounded, img-circle and the img-
thumbnail CSS classes we can create styled images
shaped with rounded corners, as a circle or as a simple
rectangular thumbnail.

Image Shapes
<div class="row">
we love earth!
</div>
<img src="earth.jpg" class="img-circle img-fluid" alt="Responsive image">
</div>
</div>

Image Shapes

Layout

Introduction
 Bootstrap provides us with a powerful grid system we can use
for setting the layouts we want for each and every platform we
target.
 The grid system is based on a 12 column layout, and has
multiple tiers. Each tier refers a specific media query range.
 Bootstrap provides us with CSS classes we can use for
setting the containers, the rows and the columns we want to
have in our layout.

Rows
 The rows are horizontal groups of columns that ensure our
columns are lined up properly.
 The content is placed within columns. The columns are the
only children the rows can have.

Columns
 The column CSS class we are using indicates about the
number of columns we would like to use out of the possible
12 columns each row has (e.g. using the .col-sm-4 CSS
class means that we want to have a three equal width
columns row).

The Grid Tiers
 There are five grid tiers. Each tier refers a specific
responsive breakpoint (extra small, small, medium, large
and extra large).
 The tiers are based on minimum widths. They apply to the
one tier they specifically refer, and all of the other ones that
above it.

The Grid Tiers
<div class="container">
<div class="row">
One of three columns
</div>
</div>
</div>
</div>
</div>
<div class="row">
One of four columns
</div>
One of four columns
</div>
One of four columns
</div>
One of four columns
</div>
</div>
</div>

The Grid Tiers
<div class="row">
One of six columns
</div>
One of six columns
</div>
One of six columns
</div>
One of six columns
</div>
One of six columns
</div>
One of six columns
</div>
</div>
</div>

The Grid Tiers

The Grid Tiers
 The documentation includes a detailed table that describes
the supported tiers.

The Grid Tiers

Stacked Columns
 When the device width is too small for having the columns
we created to apply we will have those columns stacked on
each other.

Stacked Columns
<div class="row">
<div class="col-md-8">.col-md-8</div>
</div>
<div class="row">
</div>
<div class="row">
</div>
</div>

Stacked Columns

Desktop and Mobile
 If we don’t want our columns to be stacked in smaller
devices we can use the extra small and medium device grid
classes by adding the .col-xs-* and .col-md-* to the
columns.

Desktop and Mobile

Themes

Introduction
 Bootstrap themes are packages of HTML, CSS and
JavaScript code that provide styling, UI components and page
layouts you can use in your Bootstrap based website.

Types of Themes
 When it comes to Bootstrap there are four different types of
themes.
 There are themes that modify the look and feel of Bootstrap’s
existing components, there are themes that add new
components and new page layouts, there are themes that do
both of the two, and there are themes that integrate with an
existing CMS, such as WordPress.

Bootstrap Official Themes
 You can find them all organized and ready for purchase at
https://themes.getbootstrap.com

Templates

Introduction
 The bootstrap template is kind of a collection of single themed
pages.
 You can find many websites that sell ready to use Bootstarp
templates.
https://themeforest.net
https://startbootstrap.com/template-categories/all/

Visual Designers

Introduction
 There are many tools that simplify the creation of a Bootstrap
based web page, some of them are available for free, and
some of them are even available online.

The bootstrapstudio.io Application

The simbla.com Application

Bootstrap Crash Course 20180717

Recommended

Recommended

More Related Content

Similar to Bootstrap Crash Course 20180717

Similar to Bootstrap Crash Course 20180717 (20)

More from Haim Michael

More from Haim Michael (20)

Recently uploaded

Recently uploaded (20)

Bootstrap Crash Course 20180717