Book Image

Bootstrap 4 Site Blueprints - Second Edition

By : Ian Whitney, David Cochran
Book Image

Bootstrap 4 Site Blueprints - Second Edition

By: Ian Whitney, David Cochran

Overview of this book

Packed with trade secrets, this second edition is your one-stop solution to creating websites that will provide the best experience for your users. We cover six popular, real-world examples, where each project teaches you about the various functionalities of Bootstrap 4 and their implementation. The book starts off by getting you up and running with the new features of Bootstrap 4 before gradually moving on to customizing your blog with Bootstrap and SASS, building a portfolio site, and turning it into a WordPress theme. In the process, you will learn to recompile Bootstrap files using SASS, design a user interface, and integrate JavaScript plugins. Towards the end of the book, you will also be introduced to integrating Bootstrap 4 with popular application frameworks such as Angular 2, Ruby on Rails, and React.
Table of Contents (15 chapters)
Bootstrap 4 Site Blueprints
Credits
About the Authors
About the Reviewer
www.PacktPub.com
Preface

Chapter 1. Getting Started with Bootstrap

Bootstrap's popularity as a front-end web development framework is easy to understand. It provides a palette of user-friendly, cross-browser, tested solutions for most standard UI conventions. Its ready-made, community-tested, combination of HTML markup, CSS styles, and JavaScript plugins greatly accelerates the task of developing a frontend web interface, and it yields a pleasing result out of the gate. With the fundamental elements quickly in place, we can customize the design on top of a solid foundation.

Bootstrap uses Grunt for its CSS and JavaScript build system, and Jekyll for the written documentation. Grunt is a JavaScript task runner for Node.js. Other tools and technologies can also be used to build Bootstrap. In this book you will get introduced to some alternative solutions to build Bootstrap.

But not all that is popular, efficient, and effective is good. Too often, a handy tool can generate and reinforce bad habits; not so with Bootstrap, at least not necessarily so. Those who have watched it from the beginning know that its first release and early updates have occasionally favored pragmatic efficiency over best practices. The fact is that some best practices, right from semantic markup, to mobile-first design, to performance-optimized assets, require extra time and effort to implement. In this chapter you will get introduced to Bootstrap and will learn:

Creating a solid HTML5 markup structure with many current best practices baked-in

  • Setting up a new Bootstrap project with Bootstrap CLI

  • Building collapsing content into your project pages

  • Creating a navbar for page navigation

  • Turning your navbar into a responsive component