SlideShare a Scribd company logo

Bootstrap Presentation Mitesh

•
Mitesh Gandhi, profile picture
Mitesh Gandhi

This document provides an outline and overview of the Bootstrap front-end framework. It begins with definitions of Bootstrap and describes how to set it up. It then covers Bootstrap's grid system, typography, components like buttons, forms, navigation, and JavaScript plugins including modals, dropdowns and scrollspy. The document provides descriptions and code examples for incorporating these Bootstrap features into web development.

1 of 19
Download to read offline
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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 Opes sed nonummy tation augue pecus. Venio regula ea fatua incassum. Nisl quia et aliquip, scisco roto. SUB HEADING THREE Opes sed nonummy tation augue pecus. Venio regula ea fatua incassum. Nisl quia et aliquip, scisco roto minim. SUB HEADING FOUR Opes sed nonummy tation augue pecus. Venio regula ea fatua 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/bootstr ap.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 behavior Horizontal at all times Collapsed 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 … Responsive Utilities … Mitesh Gandhi Responsive Utilities … 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. Components… Button Groups Mitesh Gandhi Components… Button Groups 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 <nav class="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 nav component 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 ScrollSpying on 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 Table Subtitle content page with text and table COLUMN 1 COLUMN 2 COLUMN 3 COLUMN 4 Item One Item Two Item Three Item Four INFORMATION TECHNOLOGY

More Related Content

PPT
Javascript Frameworks
Mitesh Gandhi
 
PPTX
Practical html5
Maurice De Beijer [MVP]
 
PDF
Presentation 1 Web--dev
altsav
 
PPTX
Schema less table & dynamic schema
Davide Mauri
 
PPTX
WebNetConf 2012 - Single Page Apps
Pop Apps
 
PPTX
Edy Dawson Notes on SF HTML5 Dev Conf
Edy Dawson
 
PPTX
Iris Multi-Class Classifier with Azure ML
Davide Mauri
 
PPT
Drupal8 Introduction
Madhav Vyas
 
Javascript Frameworks
Mitesh Gandhi
 
Practical html5
Maurice De Beijer [MVP]
 
Presentation 1 Web--dev
altsav
 
Schema less table & dynamic schema
Davide Mauri
 
WebNetConf 2012 - Single Page Apps
Pop Apps
 
Edy Dawson Notes on SF HTML5 Dev Conf
Edy Dawson
 
Iris Multi-Class Classifier with Azure ML
Davide Mauri
 
Drupal8 Introduction
Madhav Vyas
 

Similar to Bootstrap Presentation Mitesh (20)

PPT
Responsive web design
AirticsTrainer
 
PDF
Bootstrap for webtechnology_data science.pdf
Harish Khodke
 
PDF
Introduction to Responsive Web Development
Nikhil Baby
 
PPTX
Bootstrap SLIDES for web development course
dreamy678
 
PPTX
Bootstrap [part 1]
Ghanshyam Patel
 
PPTX
Bootstrap - Basics
FirosK2
 
PPTX
Bootstrap webtech presentation - new
Webtech Learning
 
PDF
Great Responsive-ability Web Design
Mike Wilcox
 
PPTX
Approaches to Responsive Wen Design & Development
Keyideas Infotech Private Limited
 
PPTX
Bootstrap 3
Lanh Le
 
PPTX
Chapter 17: Responsive Web Design
Steve Guinan
 
PPTX
Reboot-Typography.pptx reboot typography to help you in research
AadiChauhan2
 
PPTX
Week 8 - Interactive News Editing and Producing
kurtgessler
 
PPTX
Application Design - Part 1
Kelley Howell
 
PPTX
Create Responsive Website Design with Bootstrap 3
Wahyu Putra
 
PPTX
Advancio, Inc. Academy: Responsive Web Design
Advancio
 
PPTX
Mobile Best Practices
mintersam
 
PPTX
ICT Presentjrjdjdjdkkdkeeation Final.pptx
naziakhan111v
 
PPT
Twitter bootstrap (css, components and javascript)
NexThoughts Technologies
 
PPTX
Bootstrap 3
McSoftsis
 
Responsive web design
AirticsTrainer
 
Bootstrap for webtechnology_data science.pdf
Harish Khodke
 
Introduction to Responsive Web Development
Nikhil Baby
 
Bootstrap SLIDES for web development course
dreamy678
 
Bootstrap [part 1]
Ghanshyam Patel
 
Bootstrap - Basics
FirosK2
 
Bootstrap webtech presentation - new
Webtech Learning
 
Great Responsive-ability Web Design
Mike Wilcox
 
Approaches to Responsive Wen Design & Development
Keyideas Infotech Private Limited
 
Bootstrap 3
Lanh Le
 
Chapter 17: Responsive Web Design
Steve Guinan
 
Reboot-Typography.pptx reboot typography to help you in research
AadiChauhan2
 
Week 8 - Interactive News Editing and Producing
kurtgessler
 
Application Design - Part 1
Kelley Howell
 
Create Responsive Website Design with Bootstrap 3
Wahyu Putra
 
Advancio, Inc. Academy: Responsive Web Design
Advancio
 
Mobile Best Practices
mintersam
 
ICT Presentjrjdjdjdkkdkeeation Final.pptx
naziakhan111v
 
Twitter bootstrap (css, components and javascript)
NexThoughts Technologies
 
Bootstrap 3
McSoftsis
 
Ad

Bootstrap Presentation Mitesh

  • 1. 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 Opes sed nonummy tation augue pecus. Venio regula ea fatua incassum. Nisl quia et aliquip, scisco roto. SUB HEADING THREE Opes sed nonummy tation augue pecus. Venio regula ea fatua incassum. Nisl quia et aliquip, scisco roto minim. SUB HEADING FOUR Opes sed nonummy tation augue pecus. Venio regula ea fatua 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
  • 2. 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
  • 3. 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/bootstr ap.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
  • 4. 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
  • 5. 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 behavior Horizontal at all times Collapsed 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
  • 6. 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
  • 7. 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
  • 8. 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
  • 9. 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
  • 10. 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 … Responsive Utilities … Mitesh Gandhi Responsive Utilities … Demo – Responsive Utilities Mitesh Gandhi
  • 11. 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
  • 12. 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
  • 13. 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. Components… Button Groups Mitesh Gandhi Components… Button Groups 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
  • 14. 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 <nav class="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
  • 15. 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
  • 16. 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 nav component 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
  • 17. 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 ScrollSpying on 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
  • 18. 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
  • 19. 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 Table Subtitle content page with text and table COLUMN 1 COLUMN 2 COLUMN 3 COLUMN 4 Item One Item Two Item Three Item Four INFORMATION TECHNOLOGY