[PPT] - Bootstrap: A framework for CSS Jay Urbain, Ph.D. Credits: PowerPoint Presentation

SLIDE 1

1

Jay Urbain, Ph.D.

Credits: http://getbootstrap.com/ https://getbootstrap.com/docs/4.0/getting-started/introduction/ http://www.tutorialspoint.com/bootstrap/ http://www.w3schools.com/bootstrap/

Bootstrap: A framework for CSS

SLIDE 2

What is Bootstrap?

l Bootstrap is a mobile first front-end framework for faster

and easier web development.

l Uses HTML, CSS, and JavaScript. l Developed by Mark Otto and Jacob Thornton at Twitter. l Released as open source in August 2011 on GitHub. l Very popular. #1 in 2014 on GitHub. One of the most

popular web front-end framework.

l If you’re going to do web development professionally,

you should know Bootstrap.

2

SLIDE 3

Bootstrap

Preprocessors*

l

Bootstrap ships with vanilla CSS, but its source code utilizes the Sass CSS preprocessors.

l

You can get started with precompiled CSS or build on the source. One framework, every device.

l

Bootstrap scales your websites and applications with a single code base, from phones to tablets to desktops with CSS media queries. Full of features

l

You get extensive documentation for common HTML elements, dozens of custom HTML and CSS components, and very nice jQuery plugins.

3

*Pre-processors extend CSS with variables, operators, interpolations, functions, mixins and many more other usable assets. https://htmlmag.com/article/an-introduction-to-css-preprocessors- sass-less-stylus

SLIDE 4

Bootstrap Examples

https://getbootstrap.com/docs/4.1/getting-started/introduction/

4

precompiled source

SLIDE 5

5

Starter Template

https://getbootstrap.com/docs/4.1/getting-started/introduction/

Bootstrap requires the use of the HTML5 doctype. To ensure proper rendering and touch zooming for all devices, add the responsive viewport meta tag to your <head> Bootstrap CSS jQuery, Popper, and Bootstrap JS

SLIDE 6

Bootstrap Examples

l

https://getbootstrap.com/docs/3.3/getting-started/#examples

l

Get the source code for every example below by downloading the Bootstrap

repository. Examples can be found in the docs/examples/ directory

(boostrap-3.3.7)

6

Note: navigate source to examples

SLIDE 7

Bootstrap enhances HTML and CSS to make styling websites easier and consistent

l For example, Bootstrap provides 7 styles of Buttons: l Bootstrap uses predefined HTML classes (along with

predefined CSS rules) to provide this styling:

7

<button type="button" class="btn btn-default">BUTTON</button> bootstrap/bootstrap-gs.html

SLIDE 8

Additional Bootstrap button classes

l Bootstrap provides four button size classes l …and classes to indicate active (pressed) or disabled

(unclickable) states:

8

SLIDE 9

Why Use Bootstrap?

l

Mobile first approach − Framework consists of Mobile first styles throughout the entire library instead of using them in separate files.

l

Browser Support − Supported by all popular browsers.

l

Easy to get started − Knowledge of HTML and CSS. Good documentation.

l

Responsive design − Bootstrap's responsive CSS adjusts to Desktops, Tablets and Mobiles.

l

Open source.

9

SLIDE 10

What does the Bootstrap package include?

l

Scaffolding − Provides a basic structure with Grid System, link styles, and background.

l

CSS − Comes with the feature of global CSS settings, fundamental HTML elements styled and enhanced with extensible classes, and an advanced grid system.

l

Components − Contains over a dozen reusable components built to provide iconography, dropdowns, navigation, alerts, pop-overs, and much more.

l

JavaScript Plugins − Bootstrap contains over a dozen custom jQuery plugins.

l

Customize − You can customize Bootstrap's components, and jQuery plugins to get your very own version.

10

SLIDE 11

Try Bootstrap

The CDN (content delivery network) should be fine. Note: It’s also cached after first use. http://getbootstrap.com/

l

You can download the Bootstrap repository and explore the samples in ../docs/example sub-directory https://github.com/twbs/bootstrap/archive/v3.3.7.zip

l

You can also access the examples here (slightly older version): https://getbootstrap.com/docs/3.3/getting-started/#examples

l

Explore Bootstrap tutorials:

l

http://www.tutorialspoint.com/bootstrap/

l

http://www.w3schools.com/bootstrap/

11

SLIDE 12

Bootstrap HTML Template

1.

Use the HTML 5 DOCTYPE

2.

Specify lang=“en” in the <html> tag

3.

Add the <meta name=“viewport> tag to accommodate mobile devices (zoom and pinch)

4.

Include Bootstrap’s: jQuery.js and popper.js prior to bootstrap.min.js since Bootstrap relies on them.

5.

Enclose the entire web page content in a <div> (or <section>) that uses the predefined container or container-fluid class

12

SLIDE 13

What is Bootstrap Grid System?

l

The mobile first fluid grid system scales up to 12 columns as the device or viewport size increases.

l

Includes predefined classes for easy layout options, as well as extensions.

l

Bootstrap is mobile first in that the code for Bootstrap starts by targeting smaller screens like mobile devices, tablets, and then “expands” components and grids for larger screens such as laptops, desktops.

13

SLIDE 14

Working of the Bootstrap Grid System

Grid systems are used for creating page layouts through a series of rows and columns that house your content.

l

Rows must be placed within a .container or .container-fluid class for proper alignment and padding.

l

Use rows to create horizontal groups of columns.

l

Content is placed within the columns, and only columns may be the immediate children of rows.

l

Predefined grid classes like .row and .col-xs-4 are available for making grid layouts.

l

Columns create gutters (gaps between column content) via padding.

l

Padding is offset in rows for the first and the last column via negative margin on .rows to maintain consistent sizing.

l

Grid columns are created by specifying the number of twelve available columns you wish to span. E.g., three equal columns would use three .col-xs-4.

14

SLIDE 15

Containers

l

Containers are the most basic layout element in Bootstrap and are required when using the default grid system.

l

Choose from a responsive, fixed-width container or a fluid-width (meaning it’s 100% wide all the time).

l

While containers can be nested, most layouts do not require a nested container.

15

SLIDE 16

Responsive breakpoints

l

To be mobile first, BS uses a handful of media queries to create breakpoints for layouts and interfaces.

l

These breakpoints are mostly based on minimum viewport widths and allows scaling elements up as the viewport changes.

l

Bootstrap uses media query ranges—or breakpoints—in Sass files for layout, grid system, and components.

l

// Extra small devices (portrait phones, less than 576px)

l

// No media query since this is the default in Bootstrap

l

// Small devices (landscape phones, 576px and up)

l

@media (min-width: 576px) { ... }

16

SLIDE 17

Media Queries

l A media query is a "conditional CSS rule". l Media Queries in Bootstrap allow you to move, show and

hide content based on the viewport size.

/* Extra small devices (phones, less than 768px) */ /* No media query since this is the default in Bootstrap */ /* Small devices (tablets, 768px and up) */ @media (min-width: @screen-sm-min) { ... } /* Medium devices (desktops, 992px and up) */ @media (min-width: @screen-md-min) { ... } /* Large devices (large desktops, 1200px and up) */ @media (min-width: @screen-lg-min) { ... }

17

SLIDE 18

Z-index

l

Several Bootstrap components utilize z-index, the CSS property that helps control layout by providing a third axis to arrange content.

l

A default z-index scale in Bootstrap layers, navigation, tooltips, popovers, modals, and more.

l

$zindex-dropdown: 1000 !default;

l

$zindex-sticky: 1020 !default;

l

$zindex-fixed: 1030 !default;

l

$zindex-modal-backdrop: 1040 !default;

l

$zindex-modal: 1050 !default;

l

$zindex-popover: 1060 !default;

l

$zindex-tooltip: 1070 !default;

l

Background elements—like the backdrops tend to reside on a lower z-indexes, while navigation and popovers utilize higher z-indexes to ensure they overlay surrounding content.

18

SLIDE 19

Grid Classes

The Bootstrap grid system has four classes:

l xs (for phones) l sm (for tablets) l md (for desktops) l lg (for larger desktops)

The classes above can be combined to create more dynamic and flexible layouts. The correct class is selected dynamically through use of a media query.

19

SLIDE 20

Basic Structure of a Grid

20

First, create a row (<div class="row">). Then, add the desired number of columns (tags with appropriate .col-*-* classes). Note that numbers in .col-*-* should always add up to 12 for each row. <div class="row"> <div class="col-sm-4">.col-sm-4</div> <div class="col-sm-4">.col-sm-4</div> <div class="col-sm-4">.col-sm-4</div> </div> Examples: <div class="row"> <div class="col-sm-4">.col-sm-4</div> <div class="col-sm-8">.col-sm-8</div> </div>

SLIDE 21

Tables

21

SLIDE 22

Typography

<!DOCTYPE html> <html lang="en"> <head> … </head> <body> <div class="container"> <h1>h1 Bootstrap heading (36px)</h1> <h2>h2 Bootstrap heading (30px)</h2> <h3>h3 Bootstrap heading (24px)</h3> <h4>h4 Bootstrap heading (18px)</h4> <h5>h5 Bootstrap heading (14px)</h5> <h6>h6 Bootstrap heading (12px)</h6> </div> </body> </html>

22

http://www.w3schools.com/bootstrap/bootstrap_ref_css_text.asp http://www.w3schools.com/bootstrap/bootstrap_ref_css_helpers.asp

SLIDE 23

Typography

<!DOCTYPE html> <html lang="en"> <head> … </head> <body> <div class="container"> <h2>Contextual Colors</h2> <p>Use the contextual classes to provide "meaning through colors":</p> <p class="text-muted">This text is muted.</p> <p class="text-primary">This text is important.</p> <p class="text-success">This text indicates success.</p> <p class="text-info">This text represents some information.</p> <p class="text-warning">This text represents a warning.</p> <p class="text-danger">This text represents danger.</p> </div> </body> </html>

23

SLIDE 24

Bootstrap JS

l

The affix plugin allows an element to become affixed (locked) to an area on the page.

l

The alert plugin include options and methods to close alert messages.

l

Button plugin if you want to have more control over your buttons.

l

Carousel plugin is a component for cycling through elements, like a carousel (slideshow). http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_js_ca rousel2&stacked=h

l

Collapse plugin provides base styles and flexible support for collapsible components like accordions and navigation http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_js_co llapse_simple&stacked=h

24

SLIDE 25

Bootstrap Images

25

SLIDE 26

Bootstrap’s responsive utilities

l These classes are used to show and/or

hide content by device via media queries.

26

SLIDE 27

To do

Mini-lab: Bootstrap Hands on! 1) Download base Bootstrap starter template: https://getbootstrap.com/docs/4.1/getting-started/introduction/ Note: You may (or may not) want to remove the navbar. 2) Review the examples for inspiration: http://getbootstrap.com/examples/theme/ 3) Convert your resume (or *.*) to use Bootstrap 3) Submit to Blackboard Helpful references:

l

http://getbootstrap.com/css/

l

http://getbootstrap.com/

l

http://www.tutorialspoint.com/bootstrap/

l

http://www.w3schools.com/bootstrap/

27