Bootstrap Presentation Mitesh

11/5/2015

1

Introduction to

Bootstrap- Mitesh Gandhi

Content Page with Text and Photo

SUB HEADING ONE

Opes sed nonummy tation augue pecus. Venio regula ea fatua

incassum. Nisl quia et aliquip, scisco roto minim.

SUB HEADING TWO


incassum. Nisl quia et aliquip, scisco roto.

SUB HEADING THREE


incassum. Nisl quia et aliquip, scisco roto minim.

SUB HEADING FOUR


incassum. Nisl quia et aliquip, scisco roto.

Subtitle content page with text and photo

INFORMATION

TECHNOLOGY

• What is Bootstrap?

• Setting Up Bootstrap

• Viewport

• Chrome Device Mode Overview

• Containers

• Grid System

• Grid Rules

• Grid Options

Outline

Mitesh Gandhi

• Customize Default Bootstrap Style

• Bootstrap Typography

• Tables

• Forms

• Buttons

• Images

Outline …

Mitesh Gandhi

11/5/2015

2

• Helper Classes

– Close Icon

– Float Left

– Float Right

– Clearfix

– Screen Readers Only

Outline …

Mitesh Gandhi

• Component

– Glyphicons

– Jumbotron

– Button Groups

– Navs

– NavBar

Outline …

Mitesh Gandhi

• Exploring JavaScript Components

– Modals

– Dropdown Menu

– Scrollspy

– Tooltip

– Carousel

• References

• Q&A

Outline …

Mitesh Gandhi

• Bootstrap is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first web sites.

- W3Schools• Bootstrap is a free and open-source collection of tools for

creating websites and web applications. It contains HTML-and CSS-based design templates for typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions.

- Wikipedia• Bootstrap is a front end framework

What is Bootstrap?

Mitesh Gandhi

11/5/2015

3

• Download and Setup on Local File Server

• Use CDN<link rel="stylesheet"

href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

Note: Bootstrap makes use of certain HTML elements and CSS

properties that require the use of the HTML 5 doctype.

Setting Up Bootstrap

Mitesh Gandhi

Demo – Hello Bootstrap

Bootstrap…

Mitesh Gandhi

• Bootsrap 3 is mobile first

• To ensure proper rendering and touch zooming, add the viewport meta tag

• The viewport is the user’s visible area of a web page.

• The viewport varies with the device, and will be smaller on a mobile phone than on a computer screen.

• HTML5 introduced a method to let web designers take control over the viewport, through the <meta> tag.

• A <meta> viewport element gives the browser instructions on how to control the page's dimensions and scaling.

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

Viewport

Mitesh Gandhi

Viewport …

Demo – Viewport

Mitesh Gandhi

11/5/2015

4

• Test your responsive designs by emulating different screen sizes and resolutions, including Retina displays.

• Visualize and inspect CSS media queries.• Evaluate your site’s performance using the network

emulator, without affecting traffic to other tabs.• Accurately simulate device input for touch events,

geolocation, and device orientation.

• Enhance your current debugging workflow by combining device mode with the existing DevTools.

Chrome Device Mode Overview

Mitesh Gandhi

Chrome Device Mode…

Demo – Device Mode

Mitesh Gandhi

• Bootstrap requires a containing element to wrap site

contents and house our grid system.

• You may choose one of two containers to use in your

projects.

• Use .container for a responsive fixed width container

• Use .container-fluid for a full width container, spanning the entire width of your viewport.

• Due to padding and more, neither container is nestable.

Containers

Mitesh Gandhi

Containers …

Demo – Container

Mitesh Gandhi

11/5/2015

5

• Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases.

• It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts.

Grid System

Mitesh Gandhi

Grid System…

Demo – Grid Stacked to Horizontal

Mitesh Gandhi

• Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.

• Use rows to create horizontal groups of columns.• Content should be placed within columns, and only columns may be immediate

children of rows.

• Predefined grid classes like .row and .col-xs-4 are available for quickly making grid layouts. Less mixins can also be used for more semantic layouts.

• Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via negative margin on .rows.

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

• If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.

Grid Rules

Mitesh Gandhi

Grid Options

Metasys Software

Extra small

devices Phones

(<768px)

Small devices

Tablets (≥768px)

Medium devices

Desktops

(≥992px)

Large

devices

Desktops

(≥1200px)

Grid behaviorHorizontal at all

timesCollapsed to start, horizontal above breakpoints

Container width None (auto) 750px 970px 1170px

Class prefix .col-xs- .col-sm- .col-md- .col-lg-

# of columns 12

Column width Auto ~62px ~81px ~97px

Gutter width 30px (15px on each side of a column)

Nestable Yes

Offsets Yes

Column ordering Yes

11/5/2015

6

Grid System…

Demo – Grid Mobile and Desktop

Mitesh Gandhi

• Add a Custom Style sheet

• Applying Custom Styles

Customize Default Bootstrap Style

Mitesh Gandhi

Customize Default Style…

Demo – Grid Stacked to Horizontal

Mitesh Gandhi

• It defines the styling and formatting of standard HTML tags with Bootstrap.

• Bootstrap's global default font-size is 14px, with a line-height of 1.428.

• This is applied to the <body> and all paragraphs.

• In addition, all <p> elements have a bottom margin that equals half their computed line-height (10px by default).

Bootstrap Typography

Mitesh Gandhi

11/5/2015

7

Bootstrap Typography …

Demo – Bootstrap Typography

Mitesh Gandhi

• A basic Bootstrap table has a light padding and only horizontal dividers.

• The .table class adds basic styling to a table

• The .table-striped class adds zebra-stripes to a table

• The .table-bordered class adds borders on all sides of the table and cells• The .table-hover class enables a hover state on table rows

• The .table-condensed class makes a table more compact by cutting cell padding in half

• Contextual classes can be used to color table rows (<tr>) or table cells (<td>)

• The .table-responsive class creates a responsive table. The table will then scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, there is no difference

Tables

Mitesh Gandhi

Tables…

Demo – Tables

Mitesh Gandhi

Tables…

Demo – Tables Responsive

Mitesh Gandhi

11/5/2015

8

• Bootstrap provides three types of form layouts:

– Vertical form (this is default)

– Horizontal form

– Inline form

• Individual form controls automatically receive some global styling.

• All textual <input>, <textarea>, and <select> elements with .form-

control are set to width: 100%; by default.

• Wrap labels and controls in .form-group for optimum spacing.

• Always use <form role="form"> (helps improve accessibility for people

using screen readers)

Forms

Mitesh Gandhi

Forms …

Demo – Forms

Mitesh Gandhi

• Bootstrap provides 7 styles of buttons

– Default, Primary, Success, Info, Warning, Danger and Link

• The button classes can be used on an <a>, <button>, or <input> element

• Bootstrap provides four button sizes

– Large, Medium, Small and Extra Small

• Block level buttons – Spans the entire width of the parent element

• Button can be set to an active or disabled state

Buttons

Mitesh Gandhi

Buttons …

Demo – Buttons

Mitesh Gandhi

11/5/2015

9

• Images in Bootstrap 3 can be made responsive-friendly via the addition of the .img-responsive class.

• The .img-responsive class applies display: block; and max-width: 100%; and height: auto; to the image

• To center images which use the .img-responsive class, use .center-block

• Images can be shaped with Rounded Corners, Circle and Thumbnail.

Images

Mitesh Gandhi

Images …

Demo – Images

Mitesh Gandhi

• Close Icon

• Carets

• Float Left

• Float Right

• Clearfix

• Screen Readers Only

Helper Classes

Mitesh Gandhi

Helper Classes …

Demo – Helper Classes

Mitesh Gandhi

11/5/2015

10

• For faster mobile-friendly development, use these utility classes for showing and hiding

content by device via media query.

Responsive Utilities

Mitesh Gandhi

Responsive Utilities …


Mitesh Gandhi


Demo – Responsive Utilities

Mitesh Gandhi

11/5/2015

11

• Over a dozen reusable components built to provide iconography, dropdowns, input groups, navigation, alerts, and much more.

Components

Mitesh Gandhi

• Includes over 250 glyphs in font format from the Glyphicon Halflings set.

• Glyphicons Halflings are normally not available for free, but their creator has made them available for Bootstrap free of cost.

• Glyphicons can be used in text, buttons, toolbars, navigation, forms, etc..

• <span class="glyphicon glyphicon-name"></span>

Components… Glyphicons

Mitesh Gandhi

Components… Glyphicons

Demo – Glyphicons

Mitesh Gandhi

• A lightweight, flexible component that can optionally extend the entire viewport to showcase key content on your site.

• A jumbotron is displayed as a grey box with rounded corners. It also enlarges the font sizes of the text inside it.

• Inside a jumbotron you can put nearly any valid HTML, including other Bootstrap elements/classes.

• Use a <div> element with class .jumbotron to create a jumbotron

Components… Jumbotron

Mitesh Gandhi

11/5/2015

12

Components… Jumbotron

Demo – Jumbotron

Mitesh Gandhi

• A page header is like a section divider

• The .page-header class adds a horizontal line under the heading (+ adds some extra space around the element)

• Use a <div> element with class .page-header to create a page header

Components… Page Header

Mitesh Gandhi

Components… Page Header

Demo – Page Header

Mitesh Gandhi

• Group a series of buttons together on a single line with the button group.

• Use a <div> element with class .btn-group to create a button group.

• Instead of applying button sizes to every button in a group, use class .btn-group-* to size all buttons in the group.

• Use the class .btn-group-vertical to create a vertical button group.

Components… Button Groups

Mitesh Gandhi

11/5/2015

13

• Justified button groups make a group of buttons stretch at equal sizes to span the entire width of its parent.

• Place a .btn-group within another .btn-group when you want dropdown menus mixed with a series of buttons.

• Button toolbar combine sets of <div class="btn-group"> into a <div class="btn-toolbar"> for more complex components.


Mitesh Gandhi


Demo – Button Groups

Mitesh Gandhi

• Navs available in Bootstrap have shared markup, starting with the base .nav class

• Tabs are created with <ul class="nav nav-tabs">

• Pills are created with <ul class="nav nav-pills">

• Pills are also vertically stackable. Just add .nav-stacked.

Navs

Mitesh Gandhi

• Easily make tabs or pills equal widths of their parent at screens wider than 768px with .nav-justified. On smaller screens, the nav links are stacked.

• For any nav component (tabs or pills), add .disabled for gray links and no hover effects

• Tabs and Pills can also hold dropdown menus

Navs …

Mitesh Gandhi

11/5/2015

14

Navs…

Demo – Navs

Mitesh Gandhi

• Navbars are responsive meta components that serve as navigation headers for your application or site.

• With Bootstrap, a navigation bar can extend or collapse, depending on the screen size.

• A standard navigation bar is created with <navclass="navbar navbar-default">

Navbar

Mitesh Gandhi

• The navigation bar can also be fixed at the top or at the bottom of the page.

• The .navbar-fixed-top class makes the navigation bar fixed at the top.

• The .navbar-fixed-bottom class makes the navigation bar stay at the bottom

• Create a full-width navbar that scrolls away with the page by adding .navbar-static-top

Navbar …

Mitesh Gandhi

• Modify the look of the navbar by adding .navbar-inverse.

• The .navbar-right class is used to right-align navigation bar buttons.

• Place form content within .navbar-form for proper vertical alignment and collapsed behavior in narrow viewports.

Navbar …

Mitesh Gandhi

11/5/2015

15

Navbar …

Demo – Navbar

Mitesh Gandhi

• JavaScript bring Bootstrap's components to life with over a dozen custom jQuery plugins. Easily include them all, or one by one.

• Plugins can be included individually using Bootstrap's individual *.js files, or all at once using bootstrap.js or the minified bootstrap.min.js.

• Some plugins and CSS components depend on other plugins. If you include plugins individually, make sure to check for dependencies in the docs.

JavaScript

Mitesh Gandhi

• All plugins depend on jQuery (this means jQuery must be included before the plugin files)

JavaScript …

Mitesh Gandhi

• The Modal plugin is a dialog box/popup

window that is displayed on top of the

current page.

Modal (modal.js)

Mitesh Gandhi

11/5/2015

16

Modal (modal.js) …

Demo – Modal

Mitesh Gandhi

• A dropdown menu is a toggleable

menu that allows the user to choose

one value from a predefined list.

Dropdown (dropdown.js)

Mitesh Gandhi

Dropdown (dropdown.js) …

Demo – Dropdowns

Mitesh Gandhi

• The ScrollSpy plugin is used to automatically update links in a navigation list based on scroll position.

• ScrollSpy currently requires the use of a Bootstrap navcomponent for proper highlighting of active links

• Navbar links must have resolvable id targets. For example, a <a href="#home">home</a> must correspond to something in the DOM like <div id="home"></div>.

• Target elements that are not :visible according to jQuery will be ignored and their corresponding nav items will never be highlighted.

ScrollSpy (scrollspy.js)

Mitesh Gandhi

11/5/2015

17

• No matter the implementation method, ScrollSpy requires the use of position: relative; on the element you're spying on. In most cases this is the <body>. When ScrollSpyingon elements other than the <body>, be sure to have a height set and overflow-y: scroll; applied.

ScrollSpy (scrollspy.js)…

Mitesh Gandhi

ScrollSpy (scrollspy.js)…

Demo – ScrollSpy

Mitesh Gandhi

• The Tooltip plugin is small pop-up box that appears when the user moves the mouse pointer over an element.

• Inspired by the excellent jQuery.tipsy plugin written by Jason Frame; Tooltips are an updated version, which don't rely on images, use CSS3 for animations, and data-attributes for local title storage.

• Tooltips with zero-length titles are never displayed.

• To create a tooltip, add the data-toggle="tooltip" attribute to an element.

ToolTip (tooltip.js)

Mitesh Gandhi

• Use the title attribute to specify the text that should be displayed inside the tooltip.

• Use the data-placement attribute to set the position of the tooltip on top, bottom, left or the right side of the element.

• By default, the tooltip will appear on top of the element.

• For performance reasons, the Tooltip and Popover data-apis are opt-in, meaning you must initialize them yourself. select the specified element and call the tooltip() method.

• One way to initialize all tooltips on a page would be to select them by their data-toggle attribute.

ToolTip (tooltip.js) …

Mitesh Gandhi

11/5/2015

18

ToolTip (tooltip.js) …

Demo – ToolTip

Mitesh Gandhi

• A slideshow component for cycling through elements, like a carousel.

• Nested carousels are not supported.

• Carousels are not supported properly in Internet Explorer 9 and earlier because they use CSS3 transitions and animations to achieve the slide effect.

Carousel (carousel.js)

Mitesh Gandhi

Carousel (carousel.js) …

Demo – Carousel

Mitesh Gandhi

• Download Bootstrap

http://getbootstrap.com

• Getting Started

http://getbootstrap.com/getting-started/

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

• Twitter

https://twitter.com/getbootstrap

• GitHub

https://github.com/twbs/bootstrap

• Docs

http://bootstrapdocs.com

References

Mitesh Gandhi

11/5/2015

19

Thank You!

Introduction to Bootstrap..

Mitesh Gandhi

• Place holder for first level text

• More placeholder text and more

– Place holder for second level text

• Place holder for third level

• More placeholder third level text

Content Page with Text and TableSubtitle content page with text and table

COLUMN 1 COLUMN 2 COLUMN 3 COLUMN 4

Item One

Item Two

Item Three

Item Four

INFORMATION

TECHNOLOGY

Bootstrap Presentation Mitesh

Documents

Transcript of Bootstrap Presentation Mitesh