Sams Teach Yourself Bootstrap in 24 Hours

Sams Teach Yourself Bootstrap in 24 Hours

by
Released November 2015
Publisher(s): Sams
ISBN: 9780133540246

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

Learn to create great-looking responsive web sites with Bootstrap

In just 24 lessons of one hour or less, Sams Teach Yourself Bootstrap in 24 Hours helps you use the free and open source Bootstrap framework to quickly build websites that automatically reflect each user’s device and experience, without complex hand crafting.

This book’s straightforward, step-by-step approach shows you how to install Bootstrap and quickly build basic sites; extend them with styles, components, and JavaScript plug-ins, and even create sophisticated designs with advanced features. In just a few hours, you’ll be using Bootstrap to bring responsive design to virtually any site. Every lesson builds on what you’ve already learned, giving you a rock-solid foundation for real-world success.

  • Step-by-step instructions carefully walk you through the most common Bootstrap development tasks

  • Practical, hands-on examples show you how to apply what you learn

  • Quizzes and exercises help you test your knowledge and stretch your skills

  • Notes and tips point out shortcuts and solution

    • Learn how to…

  • Download Bootstrap and integrate it into your project

  • Quickly build your first Bootstrap site with the basic template

  • Create beautiful and responsive site layouts with Bootstrap’s built-in grids

  • Display more interesting text with labels, badges, panels, and wells

  • Style tables and forms so they’re attractive, readable, and responsive

  • Use images, media, and icons, including free Glyphicons

  • Quickly create navigation and buttons, including dropdowns and search fields

  • Add alignment, color, and visibility with Bootstrap’s CSS utilities

  • Extend your site with alerts, image carousels, and other JavaScript plugins

  • Rapidly create appealing functional prototypes

  • Customize Bootstrap with CSS, Less, and Sass

  • Lighten Bootstrap downloads by stripping out unnecessary features

  • Build accessible sites

  • Create complex designs that don’t look generic

    • Who This Book is For

  • Those who already have an understanding of the basics of HTML and CSS

  • Having an understanding of JavaScript will make this book a bit easier to absorb, but it is not required because the basics of JavaScript are covered

    •

    Table of contents

    1. About This E-Book
    2. Title Page
    3. Copyright Page
    4. Contents at a Glance
    5. Table of Contents
    6. About the Author
    7. Dedication
    8. Acknowledgments
    9. We Want to Hear from You!
    10. Reader Services
    11. Introduction
      1. Bootstrap Makes Building a Complex Site Easy
      2. How to Use This Book
        1. Organization of This Book
        2. Conventions Used in This Book
      3. Q&A, Quiz, and Exercises
        1. Where to Go to Learn More
    12. Part I: Getting Started with Bootstrap
      1. Hour 1. What Is Bootstrap, and Why You Should Use It
        1. What Is a Web Framework?
          1. A Framework Is More Than Just a Template
          2. Pros and Cons of Frameworks
        2. What Is Bootstrap?
        3. How Is Bootstrap Different from Other Frameworks?
        4. Why You Should Use Bootstrap
        5. Summary
        6. Workshop
          1. Q&A
          2. Quiz
          3. Quiz Answers
          4. Exercise
      2. Hour 2. Downloading and Installing Bootstrap
        1. Where to Get Bootstrap
        2. Other Ways to Get Bootstrap
          1. Source Code with Less
          2. Sass
          3. Bootstrap CDN
        3. Summary
        4. Workshop
          1. Q&A
          2. Quiz
          3. Answers
          4. Exercises
      3. Hour 3. Build Your First Bootstrap Website with the Basic Template
        1. The Minimum Bootstrap Page
        2. The Basic Bootstrap Template
        3. More Bootstrap Sample Templates
          1. The Bootstrap Starter Template
          2. The Bootstrap Theme
          3. Bootstrap Jumbotron
        4. Summary
        5. Workshop
          1. Q&A
          2. Quiz
          3. Quiz Answers
          4. Exercises
      4. Hour 4. Understanding Normalize.CSS and the Basics of Bootstrap CSS
        1. What Is Normalize.CSS?
          1. What Is a CSS Reset?
          2. Pros and Cons of CSS Resets
          3. Normalize.css Isn’t Just a CSS Reset
        2. Understanding the Bootstrap Infrastructure
          1. Bootstrap Uses HTML5
          2. Mobile First
          3. Typography and Basic Link Styling
        3. Summary
        4. Workshop
          1. Q&A
          2. Quiz
          3. Quiz Answers
          4. Exercises
    13. Part II: Building and Managing Web Pages with Bootstrap
      1. Hour 5. Grids and How to Use Them
        1. Grids in Design
          1. Why Use Grids in Web Design
          2. The Rule of Thirds
          3. The Golden Ratio
        2. The Bootstrap Grid System
        3. How to Create Grids in Bootstrap
          1. Create a Basic Grid
          2. Responsive Column Resets
          3. Offsetting, Ordering, and Nesting Columns
        4. Responsive Web Layouts in Bootstrap
        5. Summary
        6. Workshop
          1. Q&A
          2. Quiz
          3. Quiz Answers
          4. Exercises
      2. Hour 6. Labels, Badges, Panels, Wells, and the Jumbotron
        1. Labels and Badges
          1. Labels
          2. Badges
        2. Wells and Panels
          1. Wells
          2. Panels
        3. The Jumbotron
        4. Summary
        5. Workshop
          1. Q&A
          2. Quiz
          3. Quiz Answers
          4. Exercises
      3. Hour 7. Bootstrap Typography
        1. Basic Typography in Bootstrap
        2. Headings
          1. Headlines
          2. Headers
        3. Body Copy Text
          1. Inline Text
          2. Aligning Elements
          3. Transforming Text Elements
        4. Other Text Blocks
          1. Code
          2. Quotations
          3. Lists
          4. Abbreviations
          5. Addresses
        5. Summary
        6. Workshop
          1. Q&A
          2. Quiz
          3. Quiz Answers
          4. Exercises
      4. Hour 8. Styling Tables
        1. Basic Tables
        2. Bootstrap Table Classes
        3. Panels with Tables
        4. Responsive Tables
        5. Summary
        6. Workshop
          1. Q&A
          2. Quiz
          3. Quiz Answers
          4. Exercises
      5. Hour 9. Styling Forms
        1. Basic Forms
          1. Horizontal Forms
          2. Inline Forms
        2. Form Controls Supported by Bootstrap
          1. Basic Input Tags
          2. Checkboxes and Radio Buttons
          3. Dropdown Menus
          4. Sizing Form Controls
          5. Help Blocks
        3. Input Groups
          1. Basic Input Groups
          2. Sizing Input Groups
          3. Fancy Add-ons
        4. Interactivity in Bootstrap Forms
          1. Focus State
          2. Disabled and Read-Only States
          3. Validation States
        5. Summary
        6. Workshop
          1. Q&A
          2. Quiz
          3. Quiz Answers
          4. Exercises
      6. Hour 10. Images, Media Objects, and Glyphicons
        1. Images
          1. Responsive Images
          2. Image Shapes
        2. Media Objects
        3. Thumbnails
        4. Glyphicons
        5. Summary
        6. Workshop
          1. Q&A
          2. Quiz
          3. Quiz Answers
          4. Exercises
      7. Hour 11. Styling and Using Buttons and Button Groups
        1. Basic Buttons
          1. Button Tags
          2. Button Classes and Sizes
          3. Button States
        2. Button Groups
          1. Horizontal Button Groups
          2. Vertical Button Groups
          3. Button Toolbars
        3. Button JavaScript
        4. Summary
        5. Workshop
          1. Q&A
          2. Quiz
          3. Quiz Answers
          4. Exercises
      8. Hour 12. Creating Navigation Systems with Bootstrap
        1. Standard Navigation Elements
        2. Dropdowns
          1. Split Dropdowns
          2. Dropup Variation
        3. Navbars
          1. Navbar Headers and Brands
          2. Toggling the Navigation
          3. Links, Text, Buttons, and Forms in Navbars
        4. Changing the Navbar Colors and Alignment
        5. Breadcrumbs and Pagination
        6. List Groups
        7. Summary
        8. Workshop
          1. Q&A
          2. Quiz
          3. Quiz Answers
          4. Exercises
      9. Hour 13. Bootstrap Utilities
        1. Helper Classes
          1. Changing Colors
          2. Icons
          3. Layout Classes
          4. Displaying and Hiding Content
        2. Responsive Utilities
        3. Print Classes
        4. Responsive Embed
        5. Accessibility in Bootstrap
        6. Summary
        7. Workshop
          1. Q&A
          2. Quiz
          3. Quiz Answers
          4. Exercises
    14. Part III: Bootstrap JavaScript Plugins
      1. Hour 14. Using Bootstrap JavaScript Plugins
        1. How to Use Bootstrap JavaScript Plugins
        2. Setting Options for Plugins
          1. Options as Parameters
          2. Options as Data Attributes
        3. Using the JavaScript API
          1. Events
          2. No Conflict
          3. Disabled JavaScript
        4. Summary
        5. Workshop
          1. Q&A
          2. Quiz
          3. Quiz Answers
          4. Exercises
      2. Hour 15. Modal Windows
        1. What Is a Modal Window?
        2. How to Build a Modal Window
          1. Triggering a Modal
          2. Coding a Modal
        3. Modifying Modals
          1. Changing How a Modal Opens
          2. Changing the Size of Modals
          3. Changing the Layout
          4. Changing Modal Content Dynamically
        4. Summary
        5. Workshop
          1. Q&A
          2. Quiz
          3. Quiz Answers
          4. Exercise
      3. Hour 16. Affix, Tab, and ScrollSpy
        1. Affix
          1. Using Affix
        2. Tab
          1. Using Tab
        3. ScrollSpy
          1. Using ScrollSpy
        4. Using These Plugins Together
        5. Summary
        6. Workshop
          1. Q&A
          2. Quiz
          3. Quiz Answers
          4. Exercises
      4. Hour 17. Popovers and Tooltips
        1. Tooltips
          1. Tooltip Options
          2. Tooltip Methods
          3. Tooltip Events
        2. Popovers
          1. Popover Options
          2. Popover Methods
          3. Popover Events
        3. Summary
        4. Workshop
          1. Q&A
          2. Quiz
          3. Quiz Answers
          4. Exercises
      5. Hour 18. Transitions, Buttons, Alerts, and Progress Bars
        1. Transitions
        2. Buttons
          1. Button States
          2. Toggle Button
          3. Checkbox and Radio Buttons
          4. Button Methods
        3. Alerts
          1. Alert Methods
          2. Alert Events
        4. Progress Bars
          1. Creating a Progress Bar
          2. Styling a Progress Bar
        5. Summary
        6. Workshop
          1. Q&A
          2. Quiz
          3. Quiz Answers
          4. Exercises
      6. Hour 19. Collapse and Accordion
        1. The Collapse Plugin
          1. Creating a Collapsible Section
          2. Horizontal Collapsing Elements
          3. Collapse Options
          4. Collapse Methods
          5. Collapse Events
        2. Accordions
          1. Creating Accordions
          2. Using Accordions as Navigation
        3. Summary
        4. Workshop
          1. Q&A
          2. Quiz
          3. Quiz Answers
          4. Exercises
      7. Hour 20. Carousels
        1. Creating Carousels
          1. Basic Carousels
          2. Fancier Carousels
        2. Using the Carousel Plugin
          1. Adding Multiple Carousels
          2. Carousel Options
          3. Carousel Methods
          4. Carousel Events
        3. Carousels on the Web
          1. Carousel Best Practices
          2. Problems with Carousels and Some Solutions
        4. Summary
        5. Workshop
          1. Q&A
          2. Quiz
          3. Quiz Answers
          4. Exercises
    15. Part IV: Customizing Bootstrap
      1. Hour 21. Customizing Bootstrap and Your Bootstrap Website
        1. Using Your Own CSS
        2. Using the Bootstrap Customizer
          1. Less Files and jQuery Plugins
          2. Less Variables
          3. Downloading and Installing Your Customizations
        3. Using a Third-Party Bootstrap Customizer
        4. Summary
        5. Workshop
          1. Q&A
          2. Quiz
          3. Quiz Answers
          4. Exercises
      2. Hour 22. Making Bootstrap Accessible
        1. What Is Accessibility?
          1. Accessible Design Practices
          2. The WAI-ARIA and Accessibility
        2. Accessible Design in Bootstrap
          1. Skip Navigation
          2. Nested Headings
          3. Color Contrast
        3. Tricks for Making Bootstrap Sites Accessible
        4. Summary
        5. Workshop
          1. Q&A
          2. Quiz
          3. Quiz Answers
          4. Exercises
      3. Hour 23. Using Less and Sass with Bootstrap
        1. What Is a CSS Preprocessor?
        2. Using Less
          1. Less Features
          2. Using Less with Bootstrap
        3. Using Sass
          1. Sass Features
          2. Using Sass with Bootstrap
        4. Summary
        5. Workshop
          1. Q&A
          2. Quiz
          3. Quiz Answers
          4. Exercises
      4. Hour 24. Going Further with Bootstrap
        1. Bootstrap Editors
          1. Web Editors
          2. Theme Builders and Customizers
        2. Using Bootstrap in WordPress
          1. Using a WordPress Plugin
          2. Finding a Bootstrap Theme for WordPress
          3. Building Your Own WordPress Theme
        3. Extending Bootstrap with Third-Party Add-ons
          1. Bootstrap Themes
          2. Bootstrap Plugins
        4. The Bootstrap Community
        5. Beautiful Bootstrap Websites
        6. Summary
        7. Workshop
          1. Q&A
          2. Quiz
          3. Quiz Answers
          4. Exercises
    16. Index
    17. Code Snippets

    Product information

    • Title: Sams Teach Yourself Bootstrap in 24 Hours
    • Author(s):
    • Release date: November 2015
    • Publisher(s): Sams
    • ISBN: 9780133540246