Date post: | 10-Feb-2017 |
Category: |
Documents |
Upload: | mitesh-gandhi |
View: | 104 times |
Download: | 0 times |
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/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 …
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 <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
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