Bootstrap JQuery Plugins Training Videos for Beginner

1
Bootstrap JQuery Plug-ins Training Videos for
Beginners by
2
Highlights

• Carousel
• Modal Dialogs
• Tooltips
• Popovers
• Affix
• Scroll Spy

3
Carousel

• Carousel plug-in is a component for cycling
  through elements.
• It also called as image or text slide share
  component.
• .carousel(cycle'), .carousel('pause'),
  .carousel(number), .carousel( prev '), and
  .carousel('next') are the carousel methods to
  create, verify, count the slides.
• Direction, related target are the events of
  carousel to sliding either "left" or "right and
  place DOM elements as the active item

4
Modal Dialogs

• It is a dialog box or popup that displays on top
  of the page.
• Toggles hidden content on demand. These are
  streamlined but flexible.
• Modals have two optional sizes, they are large
  modal and small modal.
• Grid system is advantage for bootstrap modals.
• Modal, my modal are the two attributes to trigger
  dialog box.
• Modal opens the modal window, my modal points to
  the id of the modal.

5
Tooltips

•  Small pop up box that appears when ever user
  place the curser over an element.
• Add data-toggle"tooltip" attribute to an element
  to create tooltip.
• Syntax lta href"" data-toggle"tooltip" title"H
  urray!"gtAmazinglt/agt
• Amazing is the element and title attribute is the
  pop-up element when users keep a curser on
  Amazing element.
•  Tooltips are have to be initialized with jquery.
• default, the tooltips appear on top of the
  element.

6
Popovers

• Popovers are appears similar as tooltips.
• This will appear when the user clicks on an
  element.
• Add data-toggle"popover" attribute to an element
  to create popovers.
• Syntax lta href"" data-toggle"popover" title"H
  eader" data-contentThis is very
  important"gtToggle popoverlt/agt
• Title is the popover header and data content is
  popover hidden content.
• Popovers will appear when the user clicks on
  element.

7
Affix

• Allows an element to become affixed to a
  particular area on web pages.
• Often use with navigation menus or social icon
  buttons.
• Toggles based on CSS position from static to fixed
  .
• Toggles based on  .affix, .affix-top,
  and .affix-bottom classes.
• Syntax ltnav class"navbar navbar-inverse" data-sp
  y"affix" data-offset- top"150"gt
•     

8
Scroll Spy

• Automatically update links in a navigation list
  based on scroll position.
• Add data-spy"scroll to elements to create
  scroll spy.
• Add data-target attribute with a value of the id
  to navbar.
• Scrollable elements must match the ID of the
  links inside the navbar's list items.
• Requires Bootstrap nav component for proper
  highlighting of active links.
• Requires the use of position relative on the
  element to spy on. 

9
Feedback
Like It ? Hate It?
We would love to hear from you whatever you think
about the course.
Click HERE to share what you think!
10
Thank you
Thank You for Watching Bootstrap JQuery Plug-ins
Training Videos for Beginner by
http//www.courseing.com