Cover image for Mastering Bootstrap 4 - Second Edition

Mastering Bootstrap 4 - Second Edition

Author Jason Marah , Benjamin Jakobus
Release Date: 2018/02/01
ISBN: 9781788834902
Topic:
0%
192
Chapters
0-1
Hours read
0k
Total Words
    Start Reading Now    
       Add to Wishlist       
View table of contents

Book Description

Build responsive, dynamic, and mobile-first applications on the web with Bootstrap 4

About This Book

  • Master the art of creating highly intuitive and responsive web interfaces with Bootstrap 4
  • Combine the power of Bootstrap and popular front-end JavaScript frameworks such as Angular and React to build cutting-edge web apps
  • Infuse your web pages with life and movement using Bootstrap jQuery plugins

Who This Book Is For

This book targets readers who wish to leverage Bootstrap 4 to create responsive web applications. Basic knowledge of web development concepts and web technologies such as HTML, CSS, and JavaScript is required.

What You Will Learn

  • Create a professional Bootstrap-based website from scratch without using third-party templates
  • Leverage Bootstrap's powerful grid system
  • 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
  • Improve your website's overall user experience with headers and footers
  • Infuse your web pages using Bootstrap jQuery plugins and create your own Bootstrap plugins
  • Learn what utility classes Bootstrap 4 has to offer, how they are implemented, and the best way to use them.
  • Create more advanced web interfaces by leveraging the power of accordions, dropdowns, and list groups.
  • Incorporate Bootstrap into an AngularJS or React application and use Bootstrap components as AngularJS directives

In Detail

Bootstrap 4 is a free CSS and JavaScript framework that allows developers to rapidly build responsive web interfaces. This book will help you use and adapt Bootstrap to produce enticing websites that fit your needs.

You will build a customized Bootstrap website from scratch, using various approaches to customize the framework with increasing levels of skill. You will get to grips with Bootstrap's key features and quickly discover various ways in which Bootstrap can help you develop web interfaces. Then take a walk through the fundamental features, such as its grid system, global styles, helper classes, and responsive utilities. When you have mastered these, you will discover how to structure page layouts, utilize Bootstrap's various navigation components, use forms, and style different types of content.

Among other things, you will also tour the anatomy of a Bootstrap plugin, create your own custom components, and extend Bootstrap using jQuery. You will also understand what utility classes Bootstrap 4 has to offer, and how you can use them effectively to speed up the development of your website.

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 will be able to build highly customizable and optimized web interfaces.

Style and approach

A comprehensive, step-by-step guide to mastering the ins and outs of the Bootstrap framework to produce highly customizable, optimized, and sleek web interfaces.

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. Title Page
  2. Copyright and Credits
    1. Mastering Bootstrap 4 Second Edition
  3. Packt Upsell
    1. Why subscribe?
    2. PacktPub.com
  4. Contributors
    1. About the authors
    2. About the reviewer
    3. Packt is searching for authors like you
  5. Preface
    1. Who this book is for
    2. What this book covers
    3. To get the most out of this book
      1. Download the example code files
      2. Conventions used
    4. Get in touch
      1. Reviews
  6. Revving Up Bootstrap
    1. Introducing our demo project
    2. What Bootstrap 4 has to offer
      1. Layout
      2. Content styling
      3. Components
      4. Mobile support
      5. Utility classes
      6. Supported browsers
      7. Sass instead of Less
      8. From pixel to root em
      9. Vendor prefix mixing
      10. Icons
      11. Themes
      12. Customization
    3. Setting up our project
    4. Summary
  7. Making a Style Statement
    1. The grid system
      1. Containers
        1. Container
        2. Container-fluid
      2. Rows
      3. Columns
        1. Nesting
        2. Auto-layout of columns
        3. Alignment
        4. Flex Order
        5. Offsetting
    2. Image elements
      1. Responsive images
      2. Image modifiers
    3. Responsive utilities
    4. Summary
  8. Building the Layout
    1. Creating sections
    2. Adding Bootstrap components
      1. Jumbotron
      2. Tabs
      3. Carousel
      4. Cards
      5. Navbar
      6. Modals
        1. Styling
    3. Summary
  9. On Navigation, Footers, Alerts, and Content
    1. Fixating the navbar
      1. More on navbar styling
    2. Improving navigation using Scrollspy
      1. Customizing scroll speed
    3. Breadcrumbs
    4. Icons
      1. Using and customizing alerts
    5. Creating a footer
    6. Creating and customizing forms
    7. Form validation
    8. Progress indicators
    9. Adding content using media objects
    10. Figures
      1. Quotes
      2. Abbreviations
    11. Summary
  10. Speeding Up Development Using Third-Party Plugins
    1. Browser detection
    2. Enhanced pagination using bootpag
    3. Displaying images using Bootstrap Lightbox
    4. Improving our price list with DataTables
    5. Typeahead
    6. Tooltips
    7. Popovers
    8. Summary
  11. 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
  12. Advanced Third-Party Plugins
    1. Building a testimonial component with Salvattore
      1. Introducing Salvattore
      2. Adding Animate.css to MyPhoto
      3. Bouncing alerts
      4. 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
  13. Utilities
    1. Flexbox
    2. Display properties and alignment
      1. Display helpers
      2. Alignment helpers
    3. Borders
    4. Context colors
    5. Margins and padding
    6. Floating
    7. Fixing
    8. Toggling visibility
    9. Text alignment and transformation
    10. Highlighting text
    11. Reducing text size
    12. Lists
      1. Unstyled lists
      2. Inline lists
    13. Width and height
    14. Code
    15. Sub and sup
    16. Formatting user input
    17. Formatting user output
    18. Clearfix
    19. Summary
  14. List Groups and Accordions
    1. List groups
      1. Interacting with list items
      2. Applying badges
      3. Applying context classes
    2. Collapsing content
      1. Accordions
    3. Summary
  15. 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
  16. 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
  17. Other Books You May Enjoy
    1. Leave a review - let other readers know what you think
3.137.164.241