O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Learning Bootstrap

Book Description

Unearth the potential of Bootstrap to create responsive webpages using modern techniques

In Detail

This book will help you harness the powerful facets of the Bootstrap toolkit and streamline your web designing experience. You'll get started with the initial download and customization and a brief introduction to LESS, then move on to learn about the Grid system and Base CSS, which is tailor-made for quicker and more robust web design. Learn about components, jQuery plugins, and other unique features that make Bootstrap an amazing utility to create remarkable web pages. Get to grips with the Bootstrap technical hub, which hosts the third-party resources, themes, and templates that enhance Bootstrap. By the end of the book, you will learn how to build a powerful and trendy e-commerce website that will help you with the practical implementation of Bootstrap.

What You Will Learn

  • Empower yourself with the inner workings of Bootstrap and understand the mobile-first paradigm of Bootstrap
  • Get to know the Bootstrap Grid system and implement custom layout elements
  • Integrate LESS to further enhance the look of a web page
  • Get familiar with Base CSS and the various ready-made official components
  • Understand the workings of the jQuery plugins
  • Discover the additional resources and utilities that make web designing a breeze
  • Develop a responsive and aesthetic e-commerce website to learn the practical implementation of Bootstrap

Downloading the example code for this book. You can download the example code files for all Packt books you have purchased from your account at http://www.PacktPub.com. If you purchased this book elsewhere, you can visit http://www.PacktPub.com/support and register to have the files e-mailed directly to you.

Table of Contents

  1. Learning Bootstrap
    1. Table of Contents
    2. Learning Bootstrap
    3. Credits
    4. About the Authors
    5. About the Reviewers
    6. www.PacktPub.com
      1. Support files, eBooks, discount offers, and more
        1. Why subscribe?
        2. Free access for Packt account holders
    7. Preface
      1. What this book covers
      2. What you need for this book
      3. Who this book is for
      4. Conventions
      5. Reader feedback
      6. Customer support
        1. Downloading the example code
        2. Errata
        3. Piracy
        4. Questions
    8. 1. Getting Started with Bootstrap
      1. Mobile-first design
      2. Why Bootstrap
      3. Summary
    9. 2. Installing and Customizing Bootstrap
      1. Including Bootstrap in your HTML file
      2. The Bootstrap CDN
      3. Overriding with custom CSS
      4. Using the Bootstrap customizer
      5. Deep customization of Bootstrap
        1. Downloading the Bootstrap source code
        2. Compiling LESS files
          1. Using SimpLESS to compile LESS files
          2. Using WinLess to compile LESS files
          3. Using the command line to compile LESS files
      6. Putting it all together
      7. Summary
    10. 3. Using the Bootstrap Grid
      1. Using the Bootstrap Grid classes
        1. Adding rows and columns
        2. Customizing the grid for small devices
        3. Adding offsets to columns
        4. Pulling and pushing columns
        5. Nesting columns
      2. Using the Bootstrap variables and mixins
        1. Bootstrap Grid variables
        2. Bootstrap Grid mixins
      3. Creating a blog layout with the Bootstrap Grid mixins and variables
        1. Styling the blog
      4. Summary
    11. 4. Using the Base CSS
      1. Implementing the Bootstrap Base CSS
        1. Headings
        2. Body copy
        3. Typographic elements
          1. Emphasis inline elements
          2. Alignment classes
          3. Emphasis classes
          4. Addresses
          5. Blockquotes
          6. Abbreviations
          7. Lists
        4. Tables
          1. Basic styling
        5. Buttons
        6. Forms
          1. Inline forms
          2. Horizontal forms
        7. Code
        8. Images
        9. Font families
          1. Sans-serif font family
          2. Serif font family
          3. Monospace font family
        10. Font sizes
          1. Font sizes variables
          2. Font sizes for headings
      2. Customizing the Base CSS using LESS variables
      3. Summary
    12. 5. Adding Bootstrap Components
      1. Components and their usage
        1. Glyphicons
        2. Nav tabs
        3. Nav pills
        4. Justified tabs and pills
        5. Dropdowns
        6. Navbar
        7. Breadcrumbs
      2. Summary
    13. 6. Doing More with Components
      1. Components to streamline your web designing projects
        1. Jumbotron
        2. Page header
        3. Wells
        4. Badges
        5. Labels
        6. Progress bars
        7. Panels
        8. Thumbnails
        9. Pagination
        10. List groups
        11. Button groups
        12. The button toolbar
        13. Split button dropdowns
        14. Justifying button groups
        15. Checkbox and radio buttons
        16. Alerts
        17. Media objects
        18. Responsive scalable embed
      2. Summary
    14. 7. Enhancing User Experience with JavaScript
      1. Streamlining your projects with official plugins
        1. Tooltips
        2. Popovers
        3. Accordion
        4. ScrollSpy
        5. Modals
        6. Carousels
      2. Summary
    15. 8. Bootstrap Technical Hub – A One-stop Shop for Powerful Bootstrap Utilities
      1. Themes and templates
        1. Open source themes and templates
        2. Commercial themes and templates
      2. Ready-made resources and plugins
        1. Font Awesome
        2. Social Buttons for Bootstrap
        3. Bootstrap Magic
        4. Jasny Bootstrap
        5. Fuel UX
        6. Bootsnipp
        7. Bootdey
        8. BootBundle
        9. Start Bootstrap
      3. Development tools and editors
        1. Bootply
        2. LayoutIt
        3. UI Bootstrap
        4. Kickstrap
        5. ShoeStrap
        6. StrapPress
        7. Summernote
      4. Official Bootstrap resources
        1. Bootlint
        2. Bootstrap with SaaS
        3. Bootstrap Expo
      5. Summary
    16. Index