Teach Yourself Bootstrap Table of Contents

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