
Learning Bootstrap 4
Description
Alles über E-Books | Antworten auf Fragen rund um E-Books, Kopierschutz und Dateiformate finden Sie in unserem Info- & Hilfebereich.
Key Features
[*] This book shows how to take advantage of the all new features introduced in Bootstrap
[*] Learn responsive web design and discover how to build mobile-ready websites with ease
[*] Find out how to extend the capabilities of Bootstrap with a huge range of tools and plugins, including jQuery,
[*] Do more with JavaScript and learn how to create an enhanced user experience
Book DescriptionBootstrap, the most popular front-end framework built to design elegant, powerful, and responsive interfaces for professional-level web pages has undergone a major overhaul. Bootstrap 4 introduces a wide range of new features that make front-end web design even simpler and exciting. In this gentle and comprehensive book, we'll teach you everything that you need to know to start building websites with Bootstrap 4 in a practical way. You'll learn about build tools such as Node, Grunt, and many others. You'll also discover the principles of mobile-first design in order to ensure your pages can fit any screen size and meet the responsive requirements. Learn to play with Bootstrap's grid system and base CSS to ensure your designs are robust and that your development process is speedy and efficient. Then, you'll find out how you can extend your current build with some cool JavaScript Plugins, and throw in some Sass to spice things up and customize your themes. This book will make sure you're geared up and ready to build amazingly beautiful and responsive websites in a jiffy.What you will learn
[*] Fire up Bootstrap and set up the required build tools to get started
[*] See how and when to use Flexbox with the Bootstrap layouts
[*] Find out how to make your websites responsive, keeping in mind Mobile First design
[*] Work with content such as tables and figures
[*] Play around with the huge variety of components that Bootstrap offers
[*] Extend your build using plugins developed from JavaScript
[*] Use Sass to customize your existing themes
Who this book is forIf you want to learn to build enterprise-level websites efficiently with Bootstrap, this book is for you. You must have a basic and fundamental understanding of HTML, CSS, and JavaScript; however, there is no need to have prior Bootstrap experience.
All prices
More details
Other editions
Additional editions

Person
Matt Lambert is a designer and developer with 15+ years of experience. He currently works full-time as a Senior Software Engineer for CA Technologies in Vancouver, BC, Canada. In his free time he is an author, artist, and musician. In 2005, Matt founded Cardeo Creative, which is a small web design studio based in Vancouver. He works with a select list of clients on a part-time basis while producing his own products on the side. To date, Matt has self-published 3 additional development books titled: Mastering Bootstrap, CSS3 Handbook, and the Freelance Startup Guide.
Content
Introducing Bootstrap 4
Using Bootstrap Build Tools
Jumping into Flexbox
Working with Layouts
Working with Content
Playing with Components
Extending Bootstrap with JavaScript Plugins
Throwing in Some Sass
Migrating from Version 3
Chapter 1. Introducing Bootstrap 4
Bootstrap is the most popular HTML, CSS, and JavaScript framework on the planet. Whether you are new to web development or an experienced master, Bootstrap is a powerful tool for whatever type of web application you are building. With the release of version 4, Bootstrap is more relevant than ever and brings a complete set of components that are easy to learn to use. In this book, I'll jump right into using Bootstrap, what's new in version 4, and strategies you can use to get the most out of the framework. In my opinion, the best way to learn to code is through real-world examples. As we progress through the book, we'll build a blog and portfolio website so that you will have a fully functional template once you're done. In this chapter, I'll cover the following topics:
- Why should you use Bootstrap?
- What's new in Bootstrap 4?
- The basic files and template required to start a project
Introducing Bootstrap
There are several reasons to use Bootstrap but let me boil it down to a few of the key reasons I recommend it. If you're like me, you're constantly starting new web projects. One of the most frustrating parts of getting a project off the ground is to reinvent the base HTML, CSS, and JavaScript for each project. It makes much more sense to reuse the same base code and then build on top of it. Some developers may prefer to write their own framework, and in some cases this may make sense. However, with most projects, I've found that it is easier to just use an existing framework. On top of the components that Bootstrap provides out-of-the-box, there are hundreds of other third-party components you can integrate it with, with a large community of other developers to help you.
Bootstrap is also a powerful prototyping tool in the start-up world. Often, you will want to vet an idea without investing tons of time into it. Bootstrap allows you to quickly build a prototype to prove out your idea without a large time commitment to build out a frontend that you might not end up using. Even better, if you're working in a team of developers, it is very likely everyone will be familiar with the framework. This will allow for code consistency from day one. No arguing over how to name the selectors or the best way to structure a CSS file. Most of the configuration is already set up for you and you can get on with creating your project faster.
Bootstrap 4 advantages
With the release of Bootstrap 4, there are a number of key updates to the framework. One of the biggest changes is the move from Less, which is a CSS preprocessor, to Sass. When Bootstrap first started out, there was no clear favorite when it came to preprocessors. Over the last couple of years, Sass has gained a bit of an edge, so this switch should come as no surprise. If you haven't used Sass before, don't worry; it is similar to Less and really easy to learn. In later chapters, I will cover Sass in greater depth.
Improved grid system and flexbox
Another big new feature in version 4 is the improved grid system and the inclusion of flexbox. For the regular grid, another grid level has been added to better target mobile devices, and media queries have been reworked too. Flexbox is the grid of the future and it's really exciting that it's been included. By default, the regular grid will work out-of-the-box but you can switch to the flexbox grid by switching a simple Sass variable to take advantage of this new layout component.
Card component
Bootstrap 4 sees the deprecation of components such as wells, thumbnails, and panels, and the introduction of the new card component. This is a good thing for a couple of reasons. First of all, it removes a few components that were similar and replaces them with a single card component. This makes the framework a little lighter and easier to learn for the new user. The card component has also seen an increase in popularity lately, so it makes sense to include it here. All one has to do is to look at the popularity of Google's Material Design to see how cards are a great component to use in a web application.
Rebooting normalize.css
One change that you might not notice immediately but is great nonetheless is the improvements to the built-in CSS reset. Bootstrap has taken normalize.css and extended it with a new module called Reboot. Reboot improves on Normalize and tightens up the default browser styling that needs to be reset for all web-based projects.
Internet Explorer 8 support dropped
I couldn't be happier to see that Bootstrap has dropped support for Internet Explorer 8 (IE8). The time has come to leave this browser in the past! If you need IE8 support, the recommendation is to continue using Bootstrap 3.
Other updates
All of the JavaScript plugins that come with Bootstrap have been rewritten in ES6, which allows for the use of the latest JavaScript functionality. The tooltip and popover components have been extended to use the Tether library. This is just scratching the surface, as there are a ton of other minor updates that have been built into the framework.
Implementing framework files
Before we get into building the basic template for a Bootstrap project, we should review the files that we need to include to make the framework run properly. At the very minimum, we require one CSS file and two JavaScript files. These files can either be served from the Bootstrap Content Delivery Network (CDN) or downloaded and included directly in our project. If you are using the CDN, simply include this line of code in the head of your file:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">If you would like to include the CSS file yourself, go to http://getbootstrap.com/ and download the framework. Extract the resultant ZIP file and locate the /css directory. Within this directory will be a number of CSS files. The only one you need to worry about is bootstrap.min.css. Locate that file and copy it to the /css directory of your own project. Once there, link it into the head of your document, which will look something like this:
Inserting the JavaScript files
As I mentioned earlier, we need to include two JavaScript files to implement the framework properly. The files are the jQuery and Bootstrap JavaScript framework files. As with the CSS file, you can either do this through the use of a CDN or download and insert the files manually. The JavaScript files should be inserted at the bottom of your page right before the closing </body> tag. If you choose to use the CDN, insert the following lines of code:
If you prefer to insert the files yourself, go back to the Bootstrap package you downloaded earlier and locate the /js directory. There will be a few files here but the one you want is bootstrap.min.js. You'll need to also head to http://jquery.com to download the jQuery framework file. Once you've done that, drop both files into the /js directory for your own project. Next, enter the following lines of code at the bottom of your page template. Make sure jQuery is loaded before bootstrap.min.js. This is critical; if you load them in the opposite order, the framework won't work properly:
That concludes the explanation of the key Bootstrap framework files you need to include to get your project started. The next step will be to set up the basic starter template so you can begin coding your project.
The starter template
The basic starter template is the bare bones of what you'll need to get a page going using Bootstrap. Let's start by reviewing the code for the entire template and then I'll break down each critical part:
<!DOCTYPE html> <html lang="en"> <head> <!-- Required meta tags always come first --> <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"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css"...System requirements
File format: ePUB
Copy protection: Adobe-DRM (Digital Rights Management)
System requirements:
- Computer (Windows; MacOS X; Linux): Install the free reader Adobe Digital Editions prior to download (see eBook Help).
- Tablet/smartphone (Android; iOS): Install the free app Adobe Digital Editions or the app PocketBook before downloading (see eBook Help).
- E-reader: Bookeen, Kobo, Pocketbook, Sony, Tolino and many more (not Kindle).
The file format ePub works well for novels and non-fiction books – i.e., „flowing” text without complex layout. On an e-reader or smartphone, line and page breaks automatically adjust to fit the small displays.
This eBook uses Adobe-DRM, a „hard” copy protection. If the necessary requirements are not met, unfortunately you will not be able to open the eBook. You will therefore need to prepare your reading hardware before downloading.
Please note: We strongly recommend that you authorise using your personal Adobe ID after installation of any reading software.
For more information, see our ebook Help page.
File format: PDF
Copy-Protection: Adobe-DRM (Digital Rights Management)
System requirements:
- Computer (Windows; MacOS X; Linux): Install the free reader Adobe Digital Editions prior to download (see eBook Help).
- Tablet/smartphone (Android; iOS): Install the free app Adobe Digital Editions or the app PocketBook before downloading (see eBook Help).
- E-reader: Bookeen, Kobo, Pocketbook, Sony, Tolino and many more (only limited: Kindle).
The file format PDF always displays a book page identically on any hardware. This makes PDF suitable for complex layouts such as those used in textbooks and reference books (images, tables, columns, footnotes). Unfortunately, on the small screens of e-readers or smartphones, PDFs are rather annoying, requiring too much scrolling.
This eBook uses Adobe-DRM, a „hard” copy protection. If the necessary requirements are not met, unfortunately you will not be able to open the eBook. You will therefore need to prepare your reading hardware before downloading.
Please note: We strongly recommend that you authorise using your personal Adobe ID after installation of any reading software.
For more information, see our eBook Help page.