Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Bootstrap 4 ppt

3.991 Aufrufe

Veröffentlicht am

Bootstart 4 grid, Changes, Support, Flex, Utilities, Headings, Display, Borders, Colors, Tables, Forms, Alerts, Lists, Buttons, Dropdowns, Collapse, Navs -tabs n pills, Popover,Scrollspy,

Veröffentlicht in: Technologie
  • ➤➤ How Long Does She Want You to Last? Here's the link to the FREE report ★★★ https://tinyurl.com/rockhardxxx
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • DOWNLOAD FULL. BOOKS INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • DOWNLOAD FULL. BOOKS INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier

Bootstrap 4 ppt

  1. 1. Bootstrap 4 HEADS UP AUG 2017__ BOOTSTRAP 4 BETA IS OUT!
  2. 2. Support Changes  v4 is now only IE10+ and iOS 7+  Added official support for Android v5.0 Lollipop’s Browser and WebView.
  3. 3. Grid Has Changed  Looking back at Bootstrap 3, the 4 grid tiers (‘xs’, ’sm’, ‘md’ and ‘lg’ breakpoints) .  The smallest breakpoint has a wide range of devices less than 768px in width.
  4. 4. Bootstrap 4 Grid  Introducing the new XL grid tier  There are 5 tiers (or breakpoints) to support typical portrait and landscape screen widths.  New grid breakpoint with the col-xl-* classes  Breakpoints:  The XL breakpoint is screen widths > 1200px  The LG breakpoint is screen widths > 992px  The MD breakpoint is screen widths > 768px  The SM breakpoint is screen widths > 544px  The XS breakpoint is screen widths < 544px
  5. 5. Utilities Width w-25%, w-50%,w-75%, w-100% Height h-25%, h-50%,h-75%, h-100% Padding p Margin m Margin-top or padding-top t Margin-bottom or padding-bottom b Margin-left or padding-left l Margin-right or padding-right r for classes that set both *-left and *-right x for classes that set both *-top and *-bottom y for the classes that set on all four sides (margin and padding) blank
  6. 6. Border – borders, colors and radius
  7. 7. Colors
  8. 8. Headings and paragraphs  Headings have margin-bottom: .5rem added and paragraphs margin-bottom: 1rem for easy spacing.
  9. 9. Display Headings**  A larger, slightly more opinionated heading style.
  10. 10. Blockquotes  Wrap <blockquote class="blockquote"> around any HTML as the quote.  Add a <footer class="blockquote-footer"> for identifying the source.  Add .blockquote-reverse for a blockquote with right-aligned content.
  11. 11. Lists  .list-unstyled removes the default list-style and left margin on list items (immediate children only). This only applies to immediate children list items.  Inline: Remove a list’s bullets and apply some light margin with a combination of two classes, .list-inline and .list-inline-item.
  12. 12. Images  Renamed .img-respnsive to .img-fluid  Renamed .img-rounded to .rounded  Renamed img-circle to .rounded-circle  .img-thumbnail to give an image a rounded 1px border appearance.
  13. 13. Tables  Responsive tables no longer require a wrapping element. Instead, just put the .table-responsive right on the <table>.  Renamed .table-condensed to .table-sm for consistency.  Added a new .table-inverse option.  Added table header modifiers: .thead-default and .thead-inverse.  Renamed contextual classes to have a .table--prefix. Hence .active, .success, .warning, .danger and .table-info to .table- active, .table-success, .table-warning, .table-danger and .table-info.
  14. 14. Figures  included .figure , .figure-img and .figure-caption classes to provide some baseline styles for the HTML5 <figure> and <figcaption> elements.  Images in figures have no explicit size, so be sure to add the .img-fluid class to your <img> to make it responsive.  Aligning the figure’s caption is easy with text utilities.
  15. 15. Alerts  For proper styling, use one of the four required contextual classes (e.g., .alert-success).  For inline dismissal, use the alerts jQuery plugin.  Link Color: Use the .alert-link utility class to quickly provide matching colored links within any alert.  Alerts can also contain additional HTML elements like headings, paragraphs and dividers. 
  16. 16. Alert Dismissing  Using the alert JavaScript plugin, it’s possible to dismiss any alert inline.  Add a dismiss button and the .alert- dismissible class, which adds extra padding to the right of the alert and positions the .close button.  On the dismiss button, add the data- dismiss="alert" attribute, which triggers the JavaScript functionality. Be sure to use the <button> element with it for proper behavior across all devices.  To animate alerts when dismissing them, be sure to add the .fade and .show classes.
  17. 17. Alerts JavaScript Behaviour Method Description $().alert() Makes an alert listen for click events on descendant elements which have the data- dismiss="alert" attribute. (Not necessary when using the data- api’s auto-initialization.) $().alert('close') Closes an alert by removing it from the DOM. If the .fade and .show classes are present on the element, the alert will fade out before it is removed. Event Description close.bs.alert This event fires immediately when the close instance method is called. closed.bs.alert This event is fired when the alert has been closed (will wait for CSS transitions to complete).
  18. 18. Button tags
  19. 19. Outline buttons
  20. 20. Button Sizes and Actives States Button Sizes  Add .btn-lg or .btn-sm for additional sizes.  Create block level buttons—those that span the full width of a parent—by adding .btn-block. Active and Disabled States  active appearance with .active  Buttons will appear pressed (with a darker background, darker border, and inset shadow) when active.  .disabled class to make it visually appear disabled.
  21. 21. Cards  A card is a flexible and extensible content container.  It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options.  Card titles are used by adding .card-title  Card subtitles used by adding .card-subtitle  .card-img-top places an image to the top of the card  Mix and match multiple content types to create the card you need, or throw everything in there.  an optional header and/or footer within a card an be added
  22. 22. Cards  Cards can include top and bottom “image caps”—images at the top or bottom of a card. Image overlays  Turn an image into a card background and overlay your card’s text  Cards include various options for customizing their backgrounds, borders, and color.  Includes a few options for laying out series of cards.
  23. 23. Collapse  Toggle the visibility of content across your project with a few classes and our JavaScript plugins.  Examples  .collapse hides content  .collapsing is applied during transitions  .collapse.show shows content  You can use a link with the href attribute, or a button with the data- target attribute. In both cases, the data-toggle="collapse" is required.  Multiple targets  Multiple <button> or <a> can show and hide an element if they each reference it with their ‘href’ or ‘data-target’ attribute
  24. 24. Collapse with JavaScript Methods  .collapse(options)  .collapse('toggle') - Returns to the caller before the collapsible element has actually been shown or hidden  .collapse('show') - Returns to the caller before the collapsible element has actually been shown  .collapse('hide') - Returns to the caller before the collapsible element has actually been hidden
  25. 25. Collapse with JavaScript Events Event Type Description show.bs.collapse This event fires immediately when the show instance method is called. shown.bs.collapse This event is fired when a collapse element has been made visible to the user (will wait for CSS transitions to complete). hide.bs.collapse This event is fired immediately when the hide method has been called. hidden.bs.collapse This event is fired when a collapse element has been hidden from the user (will wait for CSS transitions to complete). $('#myCollapsible').on('hidden.bs.collapse', function () { // do something… })
  26. 26. Forms  Renamed .control-label to .form-control-label.  Renamed .input-lg and .input-sm to .form-control-lg and .form-control-sm, respectively.  Dropped .form-group-* classes for simplicity’s sake. Use .form-control-* classes instead now.  Dropped .help-block and replaced it with .form-text for block-level help text. For inline help text and other flexible options, use utility classes like .text-muted.  Horizontal forms overhauled:  Dropped the .form-horizontal class requirement.  .form-group no longer applies styles from the .row, so .row is now required for horizontal grid layouts (e.g., <div class="form-group row">).  Added new .form-control-label class to vertically center labels with .form-controls.  Added custom forms support (for checkboxes, radios, selects, and file inputs).
  27. 27. Jumbotron  Lightweight, flexible component for showcasing hero unit style content.  To make the jumbotron full width, and without rounded corners, add the .jumbotron-fluid modifier class and add a .container or .container-fluid within.
  28. 28. Navs - Alignments  Centered with .justify-content-center  Right-aligned with .justify-content-end  Vertical : By changing the flex item direction with the .flex-column  Tabs : Uses .nav-tabs class to generate a tabbed interface.  Pills : Use .nav-pills class to generate a pilled interface  To proportionately fill all available space with your .nav-items, use .nav-fill  For equal-width elements, use .nav-justified
  29. 29. Toggble Navs and Pills  Can activate a tab or pill navigation without writing any JavaScript by simply specifying data-toggle="tab" or data-toggle="pill" on an element.  Via JavaScript  $('#myTab a').click(function (e) {  e.preventDefault()  $(this).tab('show')  })
  30. 30. Activate individual tabs in several ways  $('#myTab a[href="#profile"]').tab('show') // Select tab by name  $('#myTab a:first').tab('show') // Select first tab  $('#myTab a:last').tab('show') // Select last tab  $('#myTab li:eq(2) a').tab('show') // Select third tab (0-indexed)
  31. 31. Nav - Events  When showing a new tab, the events fire in the following order:  hide.bs.tab (on the current active tab)  show.bs.tab (on the to-be-shown tab)  hidden.bs.tab (on the previous active tab, the same one as for the hide.bs.tab event)  shown.bs.tab (on the newly-active just-shown tab, the same one as for the show.bs.tab event)
  32. 32. Navbar  .navbar-nav for a full-height and lightweight navigation  We can avoid the list-based approach entirely by using classes for navs.  .navbar-text for adding vertically centered strings of text.  Dropdown menus require a wrapping element for positioning, so be sure to use separate and nested elements for .nav-item and .nav-link.
  33. 33. Navbars  Place various form controls and components within a navbar with .form- inline.  Navbars may contain bits of text with the help of .navbar-text. This class adjusts vertical alignment and horizontal spacing for strings of text.  Theming the navbar has never been easier thanks to the combination of theming classes and background-color utilities.
  34. 34. Navbar Responsive behaviour  Navbars can utilize .navbar-toggler, .navbar-collapse, and .navbar-expand{- sm|-md|-lg|-xl} classes to change when their content collapses behind a button.  With a toggler on the left and brand name on the right:  With a brand name shown on the left and toggler on the right:
  35. 35. Popover  Popovers rely on the 3rd party library Popper.js for positioning. You must include popper.min.js before bootstrap.js in order for popovers to work!  Popovers require the tooltip plugin as a dependency.  Specify container: 'body' to avoid rendering problems in more complex components (like our input groups, button groups, etc).  Triggering popovers on hidden elements will not work.  Popovers for .disabled or disabled elements must be triggered on a wrapper element.
  36. 36. Popover Everywhere  initialize all popovers on a page would be to select them by their data-toggle attribute:  $(function () {  $('[data-toggle="popover"]').popover()  })  Using the container option  $(function () {  $('.example-popover').popover({  container: 'body'  })  })
  37. 37. Dismiss on next click  Use the focus trigger to dismiss popovers on the next click that the user makes. <a tabindex="0" class="btn btn-lg btn-danger" role="button" data- toggle="popover" data-trigger="focus" title="Dismissible popover" data- content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a> Or $('.popover-dismiss').popover({ trigger: 'focus' })
  38. 38. Scrollspy  It must to be used on a Bootstrap nav component or list group.  Scrollspy requires position: relative; on the element you’re spying on, usually the <body>.  When spying on elements other than the <body>, be sure to have a height set and overflow-y: scroll; applied.  Anchors (<a>) are required and must point to an element with that id.
  39. 39. Scrollspy - with nested nav and list- group  Scrollspy also works with nested .navs. If a nested .nav is .active, its parents will also be .active.  Scroll the area next to the navbar and watch the active class change.  Scrollspy also works with .list-groups. Scroll the area next to the list group and watch the active class change.
  40. 40. Nested Nav List-group
  41. 41. Scrollspy - Using JavaScript  After adding position: relative; in your CSS, call the scrollspy via JavaScript:  Methods  $('[data-spy="scroll"]').each(function () {  var $spy = $(this).scrollspy('refresh')  }) $('body').scrollspy({ target: '#navbar-example' })
  42. 42. Options and Events  Options can be passed via data attributes or JavaScript.  Events  $('#myScrollspy').on('activate.bs.scrollspy', function () {  // do something…  }) Name Type Default Description offset number 10 Pixels to offset from top when calculating position of scroll. Event Type Description activate.bs.scrollspy This event fires whenever a new item becomes activated by the scrollspy.
  43. 43. Embeds - Aspect ratios  Aspect ratios can be customized with modifier classes.
  44. 44. Flex  Direction  Use .flex-row to set a horizontal direction (the browser default), or .flex- row-reverse to start the horizontal direction from the opposite side.  Use .flex-column to set a vertical direction, or .flex-column-reverse to start the vertical direction from the opposite side.  Justify content  Use justify-content utilities on flexbox containers to change the alignment of flex items on the main axis - start (browser default), end, center, between, or around.
  45. 45. Flex - Alignments  Align items  Use align-items utilities on flexbox containers to change the alignment of flex items on the cross axis (the y-axis to start, x-axis if flex-direction: column). Choose from start, end, center, baseline, or stretch (browser default).  Align Self  Use align-self utilities on flexbox items to individually change their alignment on the cross axis
  46. 46. Flex - Auto margins  With justify-content  move all flex items to one side, but keep another on the opposite end by mixing justify-content with margin-right: auto or margin-left: auto.  With align-items  move one flex item to the top or bottom of a container by mixing align-items, flex-direction: column, and margin-top: auto or margin- bottom: auto.
  47. 47. Flex - Wrap
  48. 48. Flex - Align content  Use align-content utilities on flexbox containers to align flex items together on the cross axis.  Choose from start (browser default), end, center, between, around, or stretch.
  49. 49. Float Toggle floats on any element, across any breakpoint, using our responsive float utilities.
  50. 50. Text  Text transform  <p class="text-lowercase">Lowercased text.</p>  <p class="text-uppercase">Uppercased text.</p>  <p class="text-capitalize">CapiTaliZed text.</p>  Font weight and italics  <p class="font-weight-bold">Bold text.</p>  <p class="font-weight-normal">Normal weight text.</p>  <p class="font-italic">Italic text.</p>

×