35,99 €
Mehr erfahren.
- Herausgeber: Packt Publishing
- Sprache: Englisch
Build responsive, dynamic, and mobile-first applications on the web with Bootstrap 4
Key Features
- 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
Book Description
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.
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
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.
Benjamin Jakobus graduated with a BSc in Computer Science from University College Cork and obtained an MSc in Advanced Computing from Imperial College London. As a software engineer, he has worked on various web-development projects across Europe and Brazil. Jason Marah is VP of Engineering at Teckro. Jason is a University College Cork alumnus, graduating with a BSc in Computer Science. Jason has worked as a full-stack engineer, specialising in JavaScript, on various projects around Europe .Sie lesen das E-Book in den Legimi-Apps auf:
Seitenzahl: 357
Veröffentlichungsjahr: 2018
Ähnliche
Mastering Bootstrap 4 Second Edition
Copyright © 2018 Packt Publishing
All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.
Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the authors, nor Packt Publishing or its dealers and distributors, will be held liable for any damages caused or alleged to have been caused directly or indirectly by this book.
Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.
Commissioning Editor: Kunal ChaudhariAcquisition Editor: Shweta PantContent Development Editor:Francis CarneiroTechnical Editor: Ralph RosarioCopy Editor: Shaila KusanaleProject Coordinator: Devanshi DoshiProofreader: Safis EditingIndexer: Pratik ShirodkarGraphics: Jason MonteiroProduction Coordinator: Deepika Naik
First published: September 2016 Second edition: February 2018
Production reference: 1160218
Published by Packt Publishing Ltd. Livery Place 35 Livery Street Birmingham B3 2PB, UK.
ISBN 978-1-78883-490-2
www.packtpub.com
Mapt is an online digital library that gives you full access to over 5,000 books and videos, as well as industry leading tools to help you plan your personal development and advance your career. For more information, please visit our website.
Why subscribe?
Spend less time learning and more time coding with practical eBooks and Videos from over 4,000 industry professionals
Improve your learning with Skill Plans built especially for you
Get a free eBook or video every month
Mapt is fully searchable
Copy and paste, print, and bookmark content
PacktPub.com
Did you know that Packt offers eBook versions of every book published, with PDF and ePub files available? You can upgrade to the eBook version at www.PacktPub.com and as a print book customer, you are entitled to a discount on the eBook copy. Get in touch with us at [email protected] for more details.
At www.PacktPub.com, you can also read a collection of free technical articles, sign up for a range of free newsletters, and receive exclusive discounts and offers on Packt books and eBooks.
Contributors
About the authors
Benjamin Jakobus graduated with a BSc in computer science from University College Cork and obtained an MSc in advanced computing from Imperial College, London. As a software engineer, he has worked on various web development projects across Europe and Brazil.
Jason Marah is VP of engineering at Teckro. Jason is a University College Cork alumnus, graduating with a BSc in computer science. Jason has worked as a full-stack engineer, specializing in JavaScript on various projects around Europe.
About the reviewer
Alfonso has strong experience and a wide-ranging knowledge base of web development. He has been working almost 20 years for many company sizes, teams, and industries. He fights for best practices, performance, scalability, and Test Driven Development. He’s currently working as technical lead for Aer Lingus, Ireland.
Packt is searching for authors like you
If you're interested in becoming an author for Packt, please visit authors.packtpub.com and apply today. We have worked with thousands of developers and tech professionals, just like you, to help them share their insight with the global tech community. You can make a general application, apply for a specific hot topic that we are recruiting an author for, or submit your own idea.
Table of Contents
Title Page
Copyright and Credits
Mastering Bootstrap 4 Second Edition
Packt Upsell
Why subscribe?
PacktPub.com
Contributors
About the authors
About the reviewer
Packt is searching for authors like you
Preface
Who this book is for
What this book covers
To get the most out of this book
Download the example code files
Conventions used
Get in touch
Reviews
Revving Up Bootstrap
Introducing our demo project
What Bootstrap 4 has to offer
Layout
Content styling
Components
Mobile support
Utility classes
Supported browsers
Sass instead of Less
From pixel to root em
Vendor prefix mixing
Icons
Themes
Customization
Setting up our project
Summary
Making a Style Statement
The grid system
Containers
Container
Container-fluid
Rows
Columns
Nesting
Auto-layout of columns
Alignment
Flex Order
Offsetting
Image elements
Responsive images
Image modifiers
Responsive utilities
Summary
Building the Layout
Creating sections
Adding Bootstrap components
Jumbotron
Tabs
Carousel
Cards
Navbar
Modals
Styling
Summary
On Navigation, Footers, Alerts, and Content
Fixating the navbar
More on navbar styling
Improving navigation using Scrollspy
Customizing scroll speed
Breadcrumbs
Icons
Using and customizing alerts
Creating a footer
Creating and customizing forms
Form validation
Progress indicators
Adding content using media objects
Figures
Quotes
Abbreviations
Summary
Speeding Up Development Using Third-Party Plugins
Browser detection
Enhanced pagination using bootpag
Displaying images using Bootstrap Lightbox
Improving our price list with DataTables
Typeahead
Tooltips
Popovers
Summary
Customizing Your Plugins
Anatomy of a plugin
JavaScript
Setup
Class definition
Data API implementation
jQuery
Sass
Customizing plugins
Customizing Bootstrap's jQuery alert plugin
The markup
Extending alert's style sheets
Extending alert's functionality with JavaScript
Customizing Bootstrap's jQuery carousel plugin
The markup
Extending carousel's functionality with JavaScript
Extending carousel's style sheets
Writing a custom Bootstrap jQuery plugin
The idea – the A11yHCM plugin
The a11yhcm.js file
The markup
Adding some style
Summary
Advanced Third-Party Plugins
Building a testimonial component with Salvattore
Introducing Salvattore
Adding Animate.css to MyPhoto
Bouncing alerts
Animating a Salvattore grid
Hover
Adding Hover to MyPhoto
Making the navbar grow
Awesome Hover icons
Salvattore Hover
Summary
Utilities
Flexbox
Display properties and alignment
Display helpers
Alignment helpers
Borders
Context colors
Margins and padding
Floating
Fixing
Toggling visibility
Text alignment and transformation
Highlighting text
Reducing text size
Lists
Unstyled lists
Inline lists
Width and height
Code
Sub and sup
Formatting user input
Formatting user output
Clearfix
Summary
List Groups and Accordions
List groups
Interacting with list items
Applying badges
Applying context classes
Collapsing content
Accordions
Summary
Optimizing Your Website
CSS optimization
Inline styles
Long identifier and class names
Shorthand rules
Grouping selectors
Rendering times
Minifying CSS and JavaScript
Introducing Grunt
Minification and concatenation using Grunt
Running tasks automatically
Stripping our website of unused CSS
Processing HTML
Deploying assets
Stripping CSS comments
JavaScript file concatenation
Summary
Integrating with AngularJS and React
Introducing AngularJS
Setting up AngularJS
Improving the testimonials component
Making testimonials dynamic
Making a Promise with $q
Creating an AngularJS directive
Writing the testimonials template
Testing the testimonial directive
Importing the Salvatorre library
Introducing React
Setting up React
Making a Gallery component in React
Using carousel in React
Summary
Other Books You May Enjoy
Leave a review - let other readers know what you think
Preface
Bootstrap is a free CSS and JavaScript framework that allows developers to rapidly build responsive web interfaces. The framework was first conceived by Mark Otto and Jacob Thornton while working at Twitter in 2010. Since its release as an open source project in August of 2011, Bootstrap has become a household name among frontend web developers. The framework’s ease-of-use along with its cross-browser compatibility, support for mobile user interfaces, and responsive web design capabilities, make it an essential building block for any modern web application. Totaling over 600 contributors, and more than 34,000 GitHub forks, Bootstrap has become the world’s most popular responsive web development framework. However, despite its popularity, there are relatively few advanced resources on the fourth, and latest, version of Bootstrap. As such, the motivation behind this book is to provide a comprehensive, step-by-step guide for developers that wish to build a complete, production-ready, website using Bootstrap 4. Once you turn the final pages of this book, you should be mastering the framework’s ins and outs, and building highly customizable and optimized web interfaces. You will know how to both extend the framework, integrate it with third-party components and frameworks, as well as optimize and automate your Bootstrapped builds.
Who this book is for
This book targets readers who already have an understanding of HTML, JavaScript and CSS, and who wish to learn how to build responsive websites using Bootstrap 4.The book is not intended to be an introduction to web development.
What this book covers
Chapter 1, Revving Up Bootstrap, places the Bootstrap framework into context by highlighting the relevant features that come bundled with it. It briefly deals with various ways to include the framework and concludes by setting up the required files for the book’s demo project.
Chapter 2, Making a Style Statement, introduces the Bootstrap markup and style rules for the mobile-first grid system and HTML image elements. It also goes into the handy helper classes and responsive utilities that Bootstrap makes available to boost development speed.
Chapter 3, Building the Layout, focuses on starting to flesh out the demo project set up in Chapter 1, Revving Up Bootstrap, by adding a style guide for commonly used HTML elements and structuring the page layout.
Chapter 4, On Navigation, Footers, Alerts, and Content, shows you how to take advantage of Bootstrap to build footers and alerts, and how you can add and style various types of content using Bootstrap’s built-in classes.
Chapter 5, Speeding Up Development Using Third-Party Plugins, demonstrates how to use the handy third-party jQuery plugins to add interactivity and fun to a web page.
Chapter 6, Customizing Your Plugins, delves into the Bootstrap jQuery plugins’ code and customizes it to jazz up this book’s demo page. Plugins will be examined and extended throughout this chapter in an effort to not only make our page better, but to also improve our knowledge of how jQuery plugins are built and how they behave within Bootstrap’s ecosystem.
Chapter 7, Advanced Third-Party Plugins, identifies new features or improvements that we want to make to our demo website. Consequently, the chapter will introduce libraries to help us achieve those goals and figure out how these can be gracefully integrated with our existing architecture.
Chapter 8, Utilities, aims to close any knowledge gaps that we may have of Bootstrap 4 by taking a look at Bootstrap's various utility classes and teaching you how you can use them effectively to speed up website development.
Chapter 9,List Groups and Accordions, shows how your website can be optimized for maximum performance and fast loading time on any device.
Chapter 10, Optimizing Your Website, covers how your website can be optimized for maximum performance and fast loading time on any device.
Chapter 11, Integrating with AngularJS and React, teaches the essentials of using Bootstrap within AngularJS and React. AngularJS is a Model-View-* JavaScript framework, while React is a JavaScript library that concentrates solely on the View part of the Model-View-Controller type stack. A vast amount of web pages are built with the frameworks or libraries, such as AngularJS and React, as they provide very useful abstractions on top of JavaScript and the DOM.
To get the most out of this book
The reader should understand HTML and CSS
The reader should have at least basic knowledge of JavaScript
Download the example code files
You can download the example code files for this book from your account at www.packtpub.com. If you purchased this book elsewhere, you can visit www.packtpub.com/support and register to have the files emailed directly to you.
You can download the code files by following these steps:
Log in or register at
www.packtpub.com
.
Select the
SUPPORT
tab.
Click on
Code Downloads & Errata
.
Enter the name of the book in the
Search
box and follow the onscreen instructions.
Once the file is downloaded, please make sure that you unzip or extract the folder using the latest version of:
WinRAR/7-Zip for Windows
Zipeg/iZip/UnRarX for Mac
7-Zip/PeaZip for Linux
The code bundle for the book is also hosted on GitHub athttps://github.com/PacktPublishing/Mastering-Bootstrap-4-Second-Edition. We also have other code bundles from our rich catalog of books and videos available athttps://github.com/PacktPublishing/. Check them out!
Conventions used
There are a number of text conventions used throughout this book.
CodeInText: Indicates code words in text, database table names, folder names, filenames, file extensions, pathnames, dummy URLs, user input, and Twitter handles. Here is an example: "Mount the downloaded WebStorm-10*.dmg disk image file as another disk in your system."
A block of code is set as follows:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" >
When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold:
[default]exten => s,1,Dial(Zap/1|30)exten => s,2,Voicemail(u100)
exten => s,102,Voicemail(b100)
exten => i,1,Voicemail(s0)
Any command-line input or output is written as follows:
npm initnpm install bootstrap
Bold: Indicates a new term, an important word, or words that you see onscreen. For example, words in menus or dialog boxes appear in the text like this. Here is an example: "Select System info from the Administration panel."
Get in touch
Feedback from our readers is always welcome.
General feedback: Email [email protected] and mention the book title in the subject of your message. If you have questions about any aspect of this book, please email us at [email protected].
Errata: Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you have found a mistake in this book, we would be grateful if you would report this to us. Please visit www.packtpub.com/submit-errata, selecting your book, clicking on the Errata Submission Form link, and entering the details.
Piracy: If you come across any illegal copies of our works in any form on the Internet, we would be grateful if you would provide us with the location address or website name. Please contact us at [email protected] with a link to the material.
If you are interested in becoming an author: If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, please visit authors.packtpub.com.
Reviews
Please leave a review. Once you have read and used this book, why not leave a review on the site that you purchased it from? Potential readers can then see and use your unbiased opinion to make purchase decisions, we at Packt can understand what you think about our products, and our authors can see your feedback on their book. Thank you!
For more information about Packt, please visit packtpub.com.
Revving Up Bootstrap
Bootstrap is a web development framework that helps developers build web interfaces. Originally conceived at Twitter in 2011 by Mark Otto and Jacob Thornton, the framework is now open source and has grown to be one of the most popular web development frameworks in existence. Being freely available for private, educational, and commercial use meant that Bootstrap quickly grew in popularity. Today, thousands of organizations rely on Bootstrap, including NASA, Walmart, and Bloomberg. According to BuiltWith.com, over 10% of the world's top 1 million websites are built using Bootstrap (http://trends.builtwith.com/docinfo/Twitter-Bootstrap). As such, knowing how to use Bootstrap will be an important skill and will serve as a powerful addition to any web developer's tool belt.
The framework itself consists of a mixture of JavaScript and CSS, and provides developers with all the essential components required to develop a fully-functioning web user interface. Over the course of this book, we will be introducing you to all the most essential features that Bootstrap has to offer by teaching you how to use the framework to build a complete website from scratch. As CSS, HTML, and JavaScript alone are already the subjects of entire books in themselves, we assume that you, the reader, have at least a basic knowledge of these languages.
We begin this chapter by introducing you to our demo website, MyPhoto. This website will accompany us throughout this book, and serve as a practical point of reference. Therefore, all lessons learned will be taught within the context of MyPhoto.
We will then discuss the Bootstrap framework, listing its features and contrasting the current release to the last major release (Bootstrap 3).
Last but not least, this chapter will help you set up your development environment. To ensure equal footing, we will guide you toward installing the right build tools, and precisely detail the various ways in which you can integrate Bootstrap into a project. More advanced readers may safely skip this last part and continue to Chapter 2, Making a Style Statement.
To summarize, this chapter will do the following:
Introduce you to our fictional demo project—a website for photographers
Explain what is new in the latest version of Bootstrap, and how the latest version differs from the previous major release
Show you how to include Bootstrap in our web project
Introducing our demo project
This book will teach you how to build a complete Bootstrap website from scratch. Starting with a simple layout in Chapter 2, Making a Style Statement, and Chapter 3, Building the Layout, we will build and improve the website's various sections as we progress through each chapter. The concept behind our website is simple—to develop a landing page for photographers. Using this landing page, (hypothetical) users will be able to exhibit their wares and services. While building our website, we will be making use of the same third-party tools and libraries that you would if you were working as a professional software developer. We chose these tools and plugins specifically because of their widespread use. Learning how to use and integrate them will save you a lot of work when developing websites in the future. The tools that we will use to assist us throughout the development of MyPhoto are node package manager (npm) and grunt.
From a development perspective, the construction of MyPhoto will teach you how to use and apply all the essential user interface concepts and components required to build a fully-functioning website. Among other things, you will learn how to do the following:
Using the Bootstrap grid system to structure the information presented on your website.
Creating a fixed, branded navigation bar with animated scroll effects.
Using an image carousel for displaying different photographs, implemented using Bootstrap's carousel and jumbotron (jumbotron is a design principle for displaying important content). It should be noted that carousels are becoming an increasingly unpopular design choice; however, they are still heavily used and are an important feature of Bootstrap. As such, we do not argue for or against the use of carousels, as their effectiveness depends very much on how they are used, rather than on whether they are used.
Building custom tabs that allow users to navigate through different contents.
Using and applying Bootstrap's modal dialogs.
Applying a fixed page footer.
Creating forms for data entry using Bootstrap's input controls (text fields, text areas, and buttons) and applying Bootstrap's input validation styles.
Making the best use of Bootstrap's context classes.
Creating alert messages and learning how to customize them.
Rapidly developing interactive data tables for displaying product information.
Using drop-down menus, custom fonts, and icons.
Creating breadcrumbs to aid navigation.
Learning to use typeahead.
Effectively using Bootstrap utility classes to speed up website development.
Managing alignment and layout using flexbox.
Building interfaces that support screen readers.
In addition to learning how to use Bootstrap 4, the development of MyPhoto will introduce you to a range of third-party libraries such as Scrollspy (for scroll animations), SalvattoreJS (a library for complementing our Bootstrap grid), Animate.css (for beautiful CSS animations, such as fade-in effects), and Bootstrap DataTables (for rapidly displaying data in tabular form).
The website itself will consist of different sections:
A
Welcome
section
An
About
section
A
Services
section
A
Gallery
section
A
Contact Us
section
The development of each section is intended to teach you how to use a distinct set of features found in third-party libraries. For example, by developing the Welcome section, you will learn how to use Bootstrap's jumbotron and alert dialogs along with different font and text styles, while the About section will show you how to use cards. The Services section of our project introduces you to Bootstrap's custom tabs—that is, you will learn how to use Bootstrap's tabs to display a range of different services offered by our website.
Following on from the Services section, you will need to use rich imagery to really show off the website's sample services. You will achieve this by mastering Bootstrap's responsive core along with Bootstrap's carousel and third-party jQuery plugins. Last but not least, the Contact Us section will demonstrate how to use Bootstrap's form elements and helper functions—that is, you will learn how to use Bootstrap to create stylish HTML forms, how to use form fields and input groups, and how to handle the display of data validation results.
Finally, toward the end of the book, you will learn how to optimize your website, and integrate it with the popular JavaScript frameworks, AngularJS (https://angularjs.org/) and React (https://reactjs.org/). As entire books have been written on AngularJS alone, we will only cover the essentials required for the integration itself.
Now that you have glimpsed a brief overview of MyPhoto, let's examine Bootstrap 4 in more detail and discuss what makes it so different from its predecessor. Take a look at the following screenshot:
What Bootstrap 4 has to offer
Much has changed since Twitter's Bootstrap was first released on August 19th, 2011. In essence, the first version of Bootstrap was a collection of CSS rules offering developers the ability to lay out their website, create forms, buttons, and help with general appearance and site navigation. With respect to these core features, Bootstrap 4 is still much the same as its predecessors—that is, how one uses the framework to create layouts and user interfaces with a consistent appearance. The latter is achieved by applying Bootstrap styles to buttons, forms, and other user interface elements.
While the elementary features of Bootstrap have remained the same, under the hood, the framework has changed completely, as Bootstrap 4 has been rewritten from scratch. As such, the framework introduces new utility classes and new components, and drops support for others at the same time. The appearance of individual components has changed too, and so has the manner in which third-party plugins should be defined and created. The developers of Bootstrap 4 have also stopped support for some older web-browsers and added support for others - namely, Android v5.0 Lollipop’s Browser and WebView. Along with Bootstrap's major features, we will be discussing these changes in the subsections that follow.
Layout
Possibly the most important and widely used feature is Bootstrap's ability to lay out and organize a page. At the core of this functionality lies the Bootstrap grid system: a series of CSS classes and media queries that allow you to easily define the horizontal and vertical position of elements on a page, taking into account different screen sizes at the same time. Using the grid system is as easy as applying a few classes to your elements and specifying a tier (that is, the viewport size at which the sizing for the element takes effect). No JavaScript magic or custom CSS rules need to be written. With Bootstrap 4, this grid system has been completely overhauled, and a new grid tier has been added. This means that in contrast to Bootstrap 3, the grid system now offers tiers for extra-small, small, medium, large, and extra-large displays. We will be talking about tiers, breakpoints, and Bootstrap's grid system extensively in Chapter 2, Making a Style Statement.
Along with the grid system, Bootstrap offers the following:
Responsive containers.
Responsive breakpoints for adjusting page layout in response to differing screen sizes.
Media objects that act as building blocks and allow you to build your own structural components.
Utility classes that allow you to manipulate elements in a responsive manner. For example, you can use the layout utility classes to hide elements, depending on screen size.
Also, Bootstrap 4 now ships with default support for a CSS3 layout mode called flexbox, for the easier positioning of elements while also accounting for different screen sizes. We will be talking about how to manage element alignment using flexbox later on in Chapter 8, Utilities.
Content styling
As already noted, one of Bootstrap’s core objectives is to allow the development of consistent user interfaces. This means that using Bootstrap, one should be able to build web pages that look and feel the same, regardless of which browser is being used to view them. Alternatively, in other words, and as noted in the official Bootstrap 4 documentation:
As different browsers ship with different element styles, Bootstrap overrides all the default browser styles, hence ensuring the consistent rendering of elements across different browsers. The overriding is achieved using a collection of Bootstrap CSS rules collectively known as Reboot. These rules are the Bootstrap team's own modification of Normalize—a third-party library (used by Bootstrap 3) for resetting default element styles.
Building on top of this clean slate, Bootstrap 4 provides a set of basic styles that allow you to effectively improve the general look and feel of the most commonly-used elements used to construct user interfaces. Examples of the elements that Bootstrap allows you to style are buttons (figure 1.2), input fields, headings (figure 1.3), paragraphs, special inline texts, figures, tables, and navigation controls.
In addition, Bootstrap offers state styles for all input controls—for example, styles for disabled buttons or toggle buttons:
It should be noted that the default font size in Bootstrap 4 is now 2 px bigger than in its predecessor, having increased from 14 px to 16 px. Naturally, this makes textual content, such as body text and headings, appear slightly larger without being too obtrusive. The display of text is now also controlled by your native font stack (also known as the system font stack; the native font stack refers to the default collection of fonts used by your operating system) as opposed to the default web fonts. Using the native font stack has the following advantages:
Improved overall rendering speed of text as the web browser no longer needs to download any font files
Allows for a more consistent look and feel as a page's text content matches that of the operating system the browser is running on
Components
Bootstrap offers a large collection of fundamental user interface (UI) components that allow you to quickly construct any type of user interface. Specifically, Bootstrap offers Modal dialogs, progress bars, navigation bars, tooltips, popovers, a carousel, alerts, drop-down menus, input groups, tabs, pagination, cards, forms, list groups, breadcrumbs, and a jumbotron (refer to figure 1.4). All of these components, in addition to collapsible content—such as accordions—come out of the box and ready to use.
In addition, they can be styled using one of four context colors introduced in the previous subsection or customized to suit specific needs.
Readers familiar with Bootstrap 3 will have noted that panels, wells, and thumbnails do not feature in the preceding screenshot, figure 1.4. That is because these components have been replaced with a new concept—cards. To readers unfamiliar with the concept of wells, a well is a UI component that allows developers to highlight text content by applying an inset shadow effect to the element to which it is applied. A panel, on the other hand, also serves to highlight information, but by applying padding and rounded borders. Neither panels nor wells, however, took into account different types of contents.
Cards address this shortcoming by being less restrictive and giving the developer the flexibility to support different types of content, such as images, lists, or text, and allowing for the adding of footers and headers; look at figure 1.5:
Forms in Bootstrap 4 have also been overhauled and now offered for the configuration of different layout options (refer to Figure 1.6) as well as shipping with input validation classes (check out Figure 1.7):
By applying these classes, the developer can quickly indicate erroneous input or inform the user of the successful submission of the form; doing so in the past required the use of third-party libraries or a manual implementation. Individual form controls - such as buttons - can now also be adjusted in size - a feature that seems trivial, but is often widely required:
The form controls can also be themselves customized while maintaining cross-browser consistency across input elements by applying the custom-* classes (refer to figure 1.7). In essence, these classes allow one to replace the default checkbox, radio, select and file upload input controls (check out figure 1.8, as follows) while maintaining a consistent look:
Mobile support
Similar to its predecessor, Bootstrap 4 allows you to create mobile-friendly websites without too much additional development work. By default, Bootstrap is designed to work across all resolutions and screen sizes, from mobile to tablet to a desktop. In fact, Bootstrap's mobile-first design philosophy implies that its components must display and function correctly at the smallest screen size possible. The reasoning behind this is simple. Think about developing a website without consideration for small mobile screens. In this case, you are likely to pack your website full of buttons, labels, and tables. You will probably only discover any usability issues when a user attempts to visit your website using a mobile device, only to find a small web page that is crowded with buttons and forms. At this stage, you will be required to rework the entire user interface to allow it to render on smaller screens. For precisely this reason, Bootstrap promotes a bottom-up approach, forcing developers to get the user interface to render correctly on the smallest possible screen size, before expanding upward.
Utility classes
Apart from ready-to-go components, Bootstrap offers a large selection of utility classes that encapsulate the most commonly needed functionality in order to reduce the number of repetitive style rules. Examples of such utilities include classes for quickly styling borders, clearing floats, creating generic close icons, defining colors, changing the display and visibility properties of elements, and adjusting size and spacing. Some of these utility classes already existed in Bootstrap 3, while others are brand new or have been adapted, renamed, or modified. We will be using these utility classes throughout the course of this book, and they will gain our full, undivided attention in Chapter 8, Utilities, for example, rules for aligning text, hiding an element, or providing contextual colors for warning text.
Supported browsers
Bootstrap 4 supports the latest stable release of all modern browsers on both desktop and mobile devices, that is, Firefox, Chrome, Opera, Safari, Internet Explorer 10 - 11, and Microsoft Edge. Furthermore:
It is important to note that unlike its predecessor, Bootstrap 4 no longer supports Internet Explorer 9 and earlier versions. The decision to only support newer versions of Internet Explorer was a reasonable one, as Microsoft itself doesn't provide technical support and updates for Internet Explorer 8 (and earlier versions) anymore (as of January 2016). Furthermore, as we will discover later on in this book, Bootstrap 4 relies on flexbox, which is also not supported by older browsers.
Furthermore, Internet Explorer 8 (and earlier) does not support rem, meaning that Bootstrap 4 would have been required to provide a workaround. This, in turn, would most likely have implied a large amount of additional development work, with the potential for inconsistencies. Lastly, responsive website development for Internet Explorer 8 (and earlier) is difficult, as the browser does not support CSS media queries. Given these three factors, dropping support for this version of Internet Explorer was the most sensible path of action.
Sass instead of Less
Both Less and Sass (Syntactically Awesome Stylesheets) are CSS extension languages—that is, they are languages that extend the CSS vocabulary with the objective of making the development of many, large, and complex stylesheets easier. Although Less and Sass are fundamentally different languages, the general manner in which they extend CSS is the same—both rely on a preprocessor. As you produce your build, the preprocessor is run, parsing the Less/Sass script and turning your Less or Sass instructions into plain CSS.
Less is the official Bootstrap 3 build, while Bootstrap 4 has been developed from scratch, and is written entirely in Sass. Both Less and Sass are compiled into CSS to produce bootstrap.css. Along with that, it also produces its minified version—bootstrap.min.css—and map files. It is this CSS file that we will be primarily referencing throughout this book (with the exception of Chapter 3, Building the Layout). Consequently, you will not be required to know Sass in order to follow this book. However, we do recommend that you take a 20-minute introductory course on Sass if you are completely new to the language. Rest assured if you already know CSS; you will not need more time than this. The language's syntax is very close to normal CSS, and its elementary concepts are similar to those contained within any other programming language.
Vendor prefix mixing
Since Bootstrap 4 relies on a tool called Autoprefixer to automatically add vendor prefixes to CSS rules, the vendor prefix mixins which were marked as deprecated in Bootstrap version 3.2 have now been completely removed. In addition, the following mixins have also been removed (source: Bootstrap 4 documentation—https://getbootstrap.com/docs/4.0/migration/):
animation, animation-delay, animation-direction, animation-duration, animation-fill-mode, animation-iteration-count, animation-name, animation-timing-function, backface-visibility, box-sizing, content-columns, hyphens, opacity, perspective, perspective-origin, rotate, rotateX, rotateY, scale, scaleX, scaleY, skew, transform-origin, transition-delay, transition-duration, transition-property, transition-timing-function, transition-transform, translate, translate3d, and user-select
Icons
Bootstrap 3 shipped with Glyphicons—a nice collection of over 250 font icons, free of use. While great in theory, font icons come with a number of problems in practice:
Font icons may break screenreaders as the readers will literally try to read out the icon.
Persons with fonts to aid their reading. Font icons will break if that happens.
If the icons fail, then the web browser replaces them with a default fallback. This makes controls using these icons look funny at best.
These three major problems, combined with the desire to make Bootstrap 4 more lightweight, led to the development team’s decision to no longer make Glyphicons available (however, this does not prevent one from including font icon set manually).
Themes
Bootstrap 4 offers a collection of premium themes. At the time of writing, the Bootstrap team offered three distinct themes:
A
Dashboard
theme containing premium components aimed toward admin and analytic websites
A
Marketing
theme for generic e-commerce and marketing websites
An
Application
theme containing components and utilities for building generic web applications (refer to figure 1.9)
Each theme works seamlessly with Bootstrap 4 and ships with all assets included. A multiuse license for these themes costs $99, while an extended license that allows for redistribution and resale costs $999.
Customization
The developers behind Bootstrap 4 have put specific emphasis on customization throughout the development of Bootstrap 4. As such, many new variables have been introduced that allow for the easy customization of Bootstrap. Using the $enabled-*- Sass variables (found in node_modules/bootstrap/scss/_variables.scss), one can now enable or disable specific global CSS preferences.
Setting up our project
Now that we know what Bootstrap has to offer, let's set up our project:
Create a new project directory named MyPhoto. This will become our project root directory.
Create a blank
index.html
file and insert the following HTML code:
<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial- scale=1, shrink-to-fit=no"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>MyPhoto</title> </head> <body> <div class="alert alert-success"> Hello World! </div> </body></html>
