Bootstrap Jump Start

Bootstrap Jump Start
Haim Michael
August 10th
, 2021
All logos, trade marks and brand names used in this presentation belong
to the respective owners.
life
michae
l
www.lifemichael.com

08/10/21 © Haim Michael 2021. All Rights Reserved. 2
The XtremeJS Conference
life
michae
l
https://xtremejs.dev

Introduction

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.
https://getbootstrap.com/

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.

Awesome Websites
 We can find many Bootstrap's based amazing websites as
inspiration for the one we develop.
https://colorlib.com/wp/bootstrap-websites/
https://www.awwwards.com/websites/bootstrap/
https://bootstrapbay.com/blog/built-with-bootstrap/

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

Popularity

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

Popularity
 The https://w3techs.com/ website provides statistics about
the use of various server side and client side technologies
on the web.

Popularity
 The google trends service at https://trends.google.com
provides information about what the world is searching.

Vanilla JavaScript
 As of version 5 the use of jQuery was removed, and the
framework switched to vanilla JavaScript.

Responsive Font Sizes
 RFS is a unit resizing engine that was initially developed to
resize font sizes. RFS is also capable of rescaling basically
every value for any css property with units. As of version 5
Bootstrap uses this engine.
https://github.com/twbs/rfs

The Support for IE Was Dropped
 As of Bootstrap 5.x, the support for Internet Explorer was
dropped.
 Following the removal of the support for IE, the JavaScript
code no longer need to be compiled to ES5. It can be
compiled to ES6. Thanks to that, the size of the files is
smaller.
 The removal of the support for IE enables the use of new
features of JavaScript and CSS.

Amazing Icons
 As of Bootstrap 5.x, the framework includes a brand new
SVG icon library crafted carefully by Mark Otto, Bootstrap's
co-founder.
https://icons.getbootstrap.com/

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
UI Kit – https://getuikit.com

Materialize - https://materializecss.com
Metro - https://themes.org.ua
YUI Library - http://www.yuilibrary.com
TailwindCSS - https://tailwindcss.com/
Bulma - https://bulma.io/
Pure - https://purecss.io/
MaterialUI - https://material-ui.com/ 66K Starts on Github
Spectre - https://material-ui.com/

LuxaCSS - https://luxacss.com/
MUI - https://www.muicss.com
Milligram - https://milligram.io
Cirrus - https://cirrus-ui.netlify.app
Cardinal - https://cardinalcss.com
Skeleton - http://getskeleton.com

Jump Start

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

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 View Port Meta Data
 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
As of iOS 10 This Meta Element is not Needed

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.
As of Bootstrap 5 This Meta Element is not Needed

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, and 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.

Introduction
 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.
https://getbootstrap.com/docs/5.0/layout/grid/

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 six 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://colorlib.com/wp/cat/bootstrap/
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 Bootstrap Studio
 The Bootstrap studio is a powerful desktop application
for creating responsive websites using the Bootstrap
framework. You can try it online for free!
https://bootstrapstudio.io/

The Bootstrap Build
 Bootstrap Build allows you to create Bootstrap themes
and Bootstrap templates!
https://bootstrap.build

The Bootsnipp Website
 Bootsnipp is an element gallery for web designers and
web developers. We can use it for creating well designed
pages using the Bootstrap framework.
https://bootsnipp.com

The Simbla Website
 The Simbla website allows us to develop web
applications and data driven websites without writing
code. It uses Bootstrap.
https://www.simbla.com

Questions & Answers
Thanks for Your Time!
Haim Michael
haim.michael@lifemichael.com
+972+3+3726013 ext:700
life
michael

Bootstrap Jump Start

More Related Content

What's hot

Similar to Bootstrap Jump Start

More from Haim Michael

Recently uploaded

Bootstrap Jump Start