You are previewing Mastering Bootstrap 4.
O'Reilly logo
Mastering Bootstrap 4

Book Description

Learn how to build beautiful and highly customizable web interfaces by leveraging the power of Bootstrap 4

About This Book

  • Adapt and customize Bootstrap to produce enticing websites that fit your needs

  • Explore Bootstrap's grid system, helper classes, and responsive utilities

  • Extend Bootstrap with jQuery plugins and learn how to create your own custom plugins

  • Who This Book Is For

    This book targets intermediate-level front-end web-developers. The book is not intended to be an introduction to web development. As such, the book assumes that readers have a firm grasp on the basic concepts behind web-development, as well as essential HTML, JavaScript and CSS skills.

    What You Will Learn

  • Create a professional Bootstrap-based website from scratch without using third-party templates

  • Apply the Bootstrap mobile-first grid system and add responsiveness and aesthetic touches to image elements

  • Style various types of content and learn how to build a page’s layout from scratch by applying the power of Bootstrap 4

  • Take advantage of Bootstrap’s form helper and contextual classes

  • Infuse your web pages with life and movement using Bootstrap jQuery plugins

  • Customize the behavior and features of Bootstrap’s jQuery Plugins extensively

  • Optimize your Bootstrap-based project before deployment

  • Incorporate Bootstrap into an AngularJS or React application and use Bootstrap components as AngularJS directives or React components

  • In Detail

    Bootstrap 4 is a free CSS and JavaScript framework that allows developers to rapidly build responsive web-interfaces.

    Right from the first chapter, dive into building a customized Bootstrap website from scratch. Get to grips with Bootstrap’s key features and quickly discover the various ways in which Bootstrap can help you develop web-interfaces. Then take walk through the fundamental features, such as its grid system, helper classes, and responsive utilities. When you have mastered these, you will discover how to structure page layouts, use forms, style different types of content and utilize Bootstrap’s various navigation components. Among other things, you will also tour the anatomy of a Bootstrap plugin, creating your own custom components and extending Bootstrap using jQuery. Finally, you will discover how to optimize your website and integrate it with third-party frameworks.

    By the end of this book, you will have a thorough knowledge of the framework’s ins and outs, and be able to build highly customizable and optimized web interfaces.

    Style and approach

    This comprehensive step-by-step guide walks you through building a complete website using Bootstrap 4. Each chapter is accompanied by source code and screenshots, and focuses on a distinct set of lessons that are illustrated within the context of a demo project.

    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 code file.

    Table of Contents

    1. Mastering Bootstrap 4
      1. Mastering Bootstrap 4
      2. Credits
      3. About the Authors
      4. About the Reviewers
      5. www.PacktPub.com
        1. Why subscribe?
      6. 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. Downloading the color images of this book
          3. Errata
          4. Piracy
          5. Questions
      7. 1. Revving Up Bootstrap
        1. Introducing our demo project
        2. What Bootstrap 4 Alpha 4 has to offer
          1. Layout
          2. Content styling
          3. Components
          4. Mobile support
          5. Utility classes
          6. Cross-browser compatibility
          7. Sass instead of Less
          8. From pixel to root em
          9. No more support for Internet Explorer 8
          10. A new grid tier
          11. Bye-bye GLYPHICONS
          12. Bigger text: no more panels, wells, and thumbnails
          13. New and improved form input controls
          14. Customization
        3. Setting up our project
        4. Summary
      8. 2. Making a Style Statement
        1. The grid system
          1. Containers
            1. container
            2. container-fluid
          2. Rows
          3. Columns
            1. Nesting
            2. Pulling and pushing
            3. Offsetting
        2. Image elements
          1. Responsive images
          2. Image modifiers
        3. Responsive utilities
        4. Helper classes
          1. Context
          2. Centering and floating
          3. Toggling visibility
        5. Text alignment and transformation
        6. Summary
      9. 3. Building the Layout
        1. Splitting it up
        2. Adding Bootstrap components
          1. Jumbotron
          2. Tabs
          3. Carousel
          4. Cards
          5. Navbar
            1. Styling
        3. Summary
      10. 4. On Navigation, Footers, Alerts, and Content
        1. Fixating the navbar
        2. Improving navigation using Scrollspy
        3. Customizing scroll speed
        4. Icons
          1. A note on icons in Bootstrap 3
        5. Using and customizing alerts
        6. Creating a footer
        7. Creating and customizing forms
        8. Form validation
        9. Progress indicators
        10. Adding content using media objects
        11. Figures
        12. Quotes
        13. Abbreviations
        14. Summary
      11. 5. Speeding Up Development Using jQuery Plugins
        1. Browser detection
        2. Enhanced pagination using bootpag
        3. Displaying images using Bootstrap Lightbox
        4. Improving our price list with DataTables
        5. Summary
      12. 6. Customizing Your Plugins
        1. Anatomy of a plugin
          1. JavaScript
            1. Setup
            2. Class definition
            3. Data API implementation
            4. jQuery
          2. Sass
        2. Customizing plugins
          1. Customizing Bootstrap's jQuery alert plugin
            1. The markup
            2. Extending alert's style sheets
            3. Extending alert's functionality with JavaScript
          2. Customizing Bootstrap's jQuery carousel plugin
            1. The markup
            2. Extending carousel's functionality with JavaScript
            3. Extending carousel's style sheets
        3. Writing a custom Bootstrap jQuery plugin
          1. The idea – the A11yHCM plugin
          2. The a11yHCM.js file
          3. The markup
          4. Adding some style
        4. Summary
      13. 7. Integrating Bootstrap with Third-Party Plugins
        1. Building a testimonial component with Salvattore
          1. Introducing Salvattore
          2. Integrating Salvattore with Bootstrap
          3. Adding Animate.css to MyPhoto
          4. Bouncing alerts
          5. Animating a Salvattore grid
        2. Hover
          1. Adding Hover to MyPhoto
          2. Making the navbar grow
          3. Awesome Hover icons
          4. Salvattore Hover
        3. Summary
      14. 8. Optimizing Your Website
        1. CSS optimization
          1. Inline styles
          2. Long identifier and class names
          3. Shorthand rules
          4. Grouping selectors
          5. Rendering times
        2. Minifying CSS and JavaScript
        3. Introducing Grunt
          1. Minification and concatenation using Grunt
        4. Running tasks automatically
        5. Stripping our website of unused CSS
          1. Processing HTML
          2. Deploying assets
          3. Stripping CSS comments
        6. JavaScript file concatenation
        7. Summary
      15. 9. Integrating with AngularJS and React
        1. Introducing AngularJS
          1. Setting up AngularJS
          2. Improving the testimonials component
            1. Making testimonials dynamic
            2. Making a Promise with $q
            3. Creating an AngularJS directive
            4. Writing the testimonials template
            5. Testing the testimonial directive
            6. Importing the Salvatorre library
        2. Introducing React
          1. Setting up React
          2. Making a Gallery component in React
          3. Using carousel in React
        3. Summary