Teach Yourself HTML5 in 24 Hours

Teach Yourself Bootstrap Table of Contents

Sams Teach Yourself Bootstrap in 24 Hours

Part 1: Getting Started with Bootstrap

1. What is a Framework and Why You Should Use It

  • What is a Web Framework?
  • What is Bootstrap?
  • How is Bootstrap Different from Other Frameworks?
  • Why You Should Use Bootstrap

2. Downloading and Installing Bootstrap

  • Where to Get Bootstrap
  • Other Ways to Get Bootstrap

3. Build Your First Bootstrap Website with the Basic Template

  • The Minimum Bootstrap Page
  • The Basic Bootstrap Template
  • More Bootstrap Sample Templates

4. Understanding Normalize.CSS and the Basics of Bootstrap CSS

  • What is Normalize.CSS?
  • Understanding the Bootstrap Infrastructure

Part 2: Building and Managing Web Pages with Bootstrap

5. Grids and How to Use Them

  • Grids in Design
  • The Bootstrap Grid System
  • How to Create Grids in Bootstrap
  • Responsive Web Layouts in Bootstrap

CSS Classes:

  • .container
  • .container-fluid
  • .row
  • .col-[size]-[number]
  • .col-[size]-offset-[number]
  • .col-[size]-push-[number]
  • .col-[size]-pull-[number]
  • .visible-[size]-block
  • .visible-[size]-inline
  • .visible-[size]-inline-block
  • .hidden-[size]
  • .clearfix

6. Labels, Badges, Panels, Wells, and the Jumbotron

  • Labels and Badges
  • Wells and Panels
  • The Jumbotron

CSS Classes:

  • .label
  • .label-default
  • .label-primary
  • .label-success
  • .label-info
  • .label-warning
  • .label-danger
  • .badge
  • .well
  • .well-lg
  • .well-sm
  • .panel
  • .panel-default
  • .panel-group
  • .panel-primary
  • .panel-success
  • .panel-info
  • .panel-warning
  • .panel-danger
  • .panel-heading
  • .panel-body
  • .panel-footer
  • .panel-title
  • .jumbotron

7. Bootstrap Typography

  • Basic Typography in Bootstrap
  • Headings
  • Body Copy Text
  • Other Text Blocks

CSS Classes:

  • .bg-danger
  • .bg-info
  • .bg-primary
  • .bg-success
  • .bg-warning
  • .blockquote-reverse
  • .center-block
  • .dl-horizontal
  • .h1
  • .h2
  • .h3
  • .h4
  • .h5
  • .h6
  • .initialism
  • .lead
  • .list-inline
  • .list-unstyled
  • .page-header
  • .pre-scrollable
  • .pull-left
  • .pull-right
  • .small
  • .text-capitalize
  • .text-center
  • .text-danger
  • .text-hide
  • .text-info
  • .text-justify
  • .text-left
  • .text-lowercase
  • .text-muted
  • .text-nowrap
  • .text-primary
  • .text-right
  • .text-success
  • .text-uppercase
  • .text-warning

8. Styling Tables

  • Basic Tables
  • Bootstrap Table Classes
  • Panels with Tables
  • Responsive Tables

CSS Classes:

  • .active
  • .danger
  • .info
  • .success
  • .table
  • .table-bordered
  • .table-condensed
  • .table-hover
  • .table-responsive
  • .table-striped
  • .warning

9. Styling Forms

  • Basic Forms
  • Form Controls Supported by Bootstrap
  • Input Groups
  • Interactivity in Bootstrap Forms

CSS Classes:

  • .checkbox
  • .checkbox-inline
  • .control-label
  • .form-control
  • .form-control-feedback
  • .form-group
  • .form-group-lg
  • .form-group-sm
  • .form-horizontal
  • .has-error
  • .has-feedback
  • .has-success
  • .has-warning
  • .input-group
  • .input-group-addon
  • .input-group-lg
  • .input-group-sm
  • .input-lg
  • .input-sm
  • .radio
  • .radio-inline

10. Images and Glyphicons

  • Images
  • Media Objects
  • Thumbnails
  • Glyphicons

CSS Classes:

  • .caption
  • .glyphicon
  • .img-circle
  • .img-responsive
  • .img-rounded
  • .img-thumbnail
  • .media
  • .media-body
  • .media-bottom
  • .media-heading
  • .media-left
  • .media-list
  • .media-middle
  • .media-object
  • .media-right
  • .thumbnail

11. Styling and Using Buttons and Button Groups

  • Basic Buttons
  • Button Groups
  • Button Dropdown Menus
  • Button JavaScript

CSS Classes:

  • .active
  • .btn
  • .btn-block
  • .btn-danger
  • .btn-default
  • .btn-group
  • .btn-group-lg
  • .btn-group-sm
  • .btn-group-vertical
  • .btn-group-xs
  • .btn-info
  • .btn-lg
  • .btn-link
  • .btn-primary
  • .btn-sm
  • .btn-success
  • .btn-toolbar
  • .btn-warning
  • .btn-xs
  • .disabled

12. Creating Navigation Systems with Bootstrap

  • Standard Navigation Elements
  • Dropdowns
    • Split Dropdowns
    • Dropup Variation
  • Navbars
    • Navbar Headers and Brands
    • Toggling the Navigation
    • Links, Text, Buttons, and Forms in Navbars
    • Changing the Navbar Colors and Alignment
  • Breadcrumbs and Pagination
  • List Groups

CSS Classes:

  • .breadcrumb
  • .caret
  • .collapse
  • .collapsed
  • .divider
  • .dropdown
  • .dropdown-header
  • .dropdown-menu
  • .dropdown-menu-left
  • .dropdown-menu-right
  • .dropdown-toggle
  • .dropup
  • .icon-bar
  • .list-group
  • .list-group-item
  • .list-group-item-danger
  • .list-group-item-heading
  • .list-group-item-info
  • .list-group-item-success
  • .list-group-item-text
  • .list-group-item-warning
  • .nav
  • .nav-justified
  • .nav-pills
  • .nav-stacked
  • .nav-tabs
  • .navbar
  • .navbar-btn
  • .navbar-collapse
  • .navbar-default
  • .navbar-fixed-bottom
  • .navbar-fixed-top
  • .navbar-form
  • .navbar-header
  • .navbar-inverse
  • .navbar-link
  • .navbar-nav
  • .navbar-static-top
  • .navbar-text
  • .navbar-toggle
  • .next
  • .pager
  • .pagination
  • .pagination-lg
  • .pagination-sm
  • .previous

13. Bootstrap Utilities

  • Helper Classes
    • Changing Colors
    • Icons
    • Layout Classes
    • Displaying and Hiding Content
  • Responsive Utilities
  • Print Classes
  • Responsive Embed
  • Accessibility in Bootstrap

CSS Classes:

  • .bg-danger
  • .bg-info
  • .bg-primary
  • .bg-success
  • .bg-warning
  • .caret
  • .center-block
  • .close
  • .embed-responsive
  • .embed-responsive-16by9
  • .embed-responsive-4by3
  • .embed-responsive-item
  • .hidden-lg
  • .hidden-md
  • .hidden-print
  • .hidden-sm
  • .hidden-xs
  • .pull-left
  • .pull-right
  • .text-danger
  • .sr-only
  • .sr-only-focusable
  • .text-hide
  • .text-info
  • .text-muted
  • .text-primary
  • .text-success
  • .text-warning
  • .visible-lg-block
  • .visible-lg-inline
  • .visible-lg-inline-block
  • .visible-md-block
  • .visible-md-inline
  • .visible-md-inline-block
  • .visible-print-block
  • .visible-print-inline
  • .visible-print-inline-block
  • .visible-sm-block
  • .visible-sm-inline
  • .visible-sm-inline-block
  • .visible-xs-block
  • .visible-xs-inline
  • .visible-xs-inline-block

Part 3: Bootstrap JavaScript Plugins

14. Using Bootstrap JavaScript Plugins

  • How to Use Bootstrap JavaScript Plugins
  • Setting Options for Plugins
    • Options as Parameters
    • Options as Data Attributes
  • Using the JavaScript API
    • Events
    • No Conflict
    • Disabled JavaScript

15. Modal Windows

  • What is a Modal Window?
  • How to Build a Modal Window
    • How to Trigger a Modal
    • Coding a Modal
  • Modifying Modals
    • Changing How a Modal Opens
    • Changing the Size of Modals
    • Changing the Layout
    • Changing Modal Content Dynamically

Options:

  • backdrop
  • keyboard
  • show

Methods:

  • .modal(options)
  • .modal(‘handleUpdate’)
  • .modal(‘hide’)
  • .modal(‘show’)
  • .modal(‘toggle’)

Events:

  • hidden.bs.modal
  • hide.bs.modal
  • loaded.bs.modal
  • show.bs.modal
  • shown.bs.modal

CSS Classes:

  • .fade
  • .modal
  • .modal-backdrop
  • .modal-body
  • .modal-content
  • .modal-dialog
  • .modal-footer
  • .modal-header
  • .modal-lg
  • .modal-open
  • .modal-sm
  • .modal-title

16. Affix, Tab, and Scrollspy

  • Affix
    • Using Affix
  • Tab
    • Using Tab
  • Scrollspy
    • Using Scrollspy
  • Using These Plugins Together

Options:

  • Affix
    • offset
    • target
  • Scrollspy
    • offset
  • Tab – none

Methods:

  • Affix – none
  • Scrollspy
    • .scrollspy(‘refresh’)
  • Tab
    • $().tab(‘show’)

Events:

  • Affix
    • affix.bs.affix
    • affix-bottom.bs.affix
    • affix-top.bs.affix
    • affixed.bs.affix
    • affixed-bottom.bs.affix
    • affixed-top.bs.affix
  • Scrollspy
    • activate.bs.scrollspy
  • Tab
    • hidden.bs.tab
    • hide.bs.tab
    • show.bs.tab
    • shown.bs.tab

CSS Classes:

  • .affix
  • .affix-bottom
  • .affix-top
  • .in
  • .tab-content
  • .tab-pane

17. Popovers and Tooltips

  • Tooltips
    • Tooltip Options
    • Tooltip Methods
    • Tooltip Events
  • Popvers
    • Popover Options
    • Popover Methods
    • Popover Events

Options:

  • Popover
    • animation
    • container
    • content
    • delay
    • html
    • placement
    • selector
    • template
    • title
    • trigger
    • viewport
  • Tooltip
    • animation
    • container
    • delay
    • html
    • placement
    • selector
    • template
    • title
    • trigger
    • viewport

Methods:

  • Popover
    • $().popover(options)
    • .popover(‘destroy’)
    • .popover(‘hide’)
    • .popover(‘show’)
    • .popover(‘toggle’)
  • Tooltip
    • $().tooltip(options)
    • .tooltip(‘destroy’)
    • .tooltip(‘hide’)
    • .tooltip(‘show’)
    • .tooltip(‘toggle’)

Events:

  • Popover
    • hide.bs.popover
    • hidden.bs.popover
    • show.bs.popover
    • shown.bs.popover
  • Tooltip
    • hide.bs.tooptip
    • hidden.bs.tooltip
    • show.bs.tooltip
    • shown.bs.tooltip

CSS Classes:

  • .arrow
  • .bottom
  • .left
  • .popover
  • .popover-content
  • .popover-title
  • .right
  • .tooltip
  • .tooltip-arrow
  • .tooltip-inner
  • .top

18. Transitions, Buttons, Alerts, and Progress Bars

  • Buttons
    • Button States
    • Toggle Button
    • Checkbox and Radio Buttons
    • Button Methods
  • Alerts
    • Alert Methods
    • Alert Events
  • Progress Bars
    • Creating a Progress Bar
    • Styling a Progress Bar

Methods:

  • Alert
    • $().alert()
    • $().alert(‘close’)
  • Button
    • $().button(‘reset’)
    • $().button(string)
    • $().button(‘toggle’)

Events:

  • Alert
    • close.bs.alert
    • closed.bs.alert

CSS Classes:

  • .alert
  • .alert-danger
  • .alert-dismissable
  • .alert-dismissible
  • .alert-info
  • .alert-link
  • .alert-success
  • .alert-warning
  • .progress
  • .progress-bar
  • .progress-bar-danger
  • .progress-bar-info
  • .progress-bar-striped
  • .progress-bar-success
  • .progress-bar-warning
  • .progress-striped

19. Collapse and Accordion

  • The Collapse Plugin
    • Creating a Collapsible Section
    • Horizontal Collapsing Elements
    • Collapse Options
    • Collapse Methods
      Collapse Events
  • Accordions
    • Creating Accordions
    • Using Accordions as Navigation

Options:

  • parent
  • toggle

Methods:

  • $().collapse(options)
  • .collapse(‘hide’)
  • .collapse(‘show’)
  • .collapse(‘toggle’)

Events:

  • hide.bs.collapse
  • hidden.bs.collapse
  • show.bs.collapse
  • shown.bs.collapse

CSS Classes:

  • .collapse
  • .collapsing
  • .panel-collapse
  • .width

20. Carousels

  • Creating Carousels
    • Basic Carousels
    • Fancier Carousels
  • Using the Carousel Plugin
    • Adding Multiple Carousels
    • Carousel Options
    • Carousel Methods
    • Carousel Events
  • Carousels on the Web
    • Carousel Best Practices
    • Problems with Carousels and Some Solutions

Options:

  • interval
  • keyboard
  • pause
  • wrap

Methods:

  • $().carousel(options)
  • .carousel(‘cycle’)
  • .carousel(‘next’)
  • .carousel(number)
  • .carousel(‘pause’)
  • .carousel(‘prev’)

Events:

  • slide.bs.carousel
  • slid.bs.carousel

CSS Classes:

  • .carousel
  • .carousel-caption
  • .carousel-control
  • .carousel-indicators
  • .carousel-inner
  • .item
  • .slide

Part 4: Customizing Bootstrap

21. Customizing Bootstrap and Your Bootstrap Website

  • Using Your Own CSS
  • Using the Bootstrap Customizer
    • Less Files and jQuery Plugins
    • Less variables
    • Download and Install Your Customizations
  • Using a Third-Party Bootstrap Customizer

22. Making Bootstrap Accessible

  • What is Accessibility?
    • Accessible Design Practices
    • The WAI-ARIA and Accessibility
  • Accessible Design in Bootstrap
    • Skip Navigation
    • Nested Headings
      C
    • olor Contrast
  • Tricks for Making Bootstrap Sites Accessible

23. Using Less and Sass with Bootstrap

  • What is a CSS Preprocessor
  • Using Less
    • Less Features
    • Using Less with Bootstrap
  • Using Sass
    • Sass Features
    • Using Sass with Bootstrap

24. Going Further with Bootstrap

  • Bootstrap Editors
    • Web Editors
    • Theme Builders and Customizers
  • Using Bootstrap in WordPress
    • Use a WordPress Plugin
    • Find a Bootstrap Theme for WordPress
    • Build Your Own WordPress Theme
  • Extending Bootstrap with 3rd Party Add-Ons
    • Bootstrap Themes
    • Bootstrap Plugins
  • The Bootstrap Community
  • Beautiful Bootstrap Websites