Frontend development can be separated into two eras, before Bootstrap and after Bootstrap. In 2011, the greatest frontend framework ever was released. Also, in the same year, the adoption and use of the framework grew in great numbers, reaching almost every segment of the market.
The reason of this is as follows: imagine how painful it was to create a simple, nice button, for instance. You had to declare a lot of classes and styles in your code. This was the foresee of Bootstrap, created by some developers from Twitter. The framework was a paradigm change for developing a fast-paced web page frontend.
The greatness of Bootstrap lies in three aspects. The first is the style sheet, which contains some basic CSS for almost every HTML element in a uniform and beauty way.
The second aspect is the components. They can be reused by just copying and pasting code. The last aspect is the JavaScript plugin, which includes some very common additional elements that cannot be found elsewhere.
Take a deep dive into the Bootstrap frontend framework with the help of examples that will illustrate the usage of each element and component in a proper way. By seeing examples, you will get a better understanding of what is happening and where you want to reach.
During the book, along the examples, you will be able to nail the framework and develop some very common examples using Bootstrap. These are a landing page, a web application, and a dashboard, which is desired by 10 out 10 web developers. You will face these kind of page countless number of times during your life as a developer, and you will do that using Bootstrap at its finest, including component customizations, animations, event handling, and external library integration.
We will start from the basics of the framework, but we will not hesitate from going further to really nail the framework. If you complete the book's examples by yourself, we can guarantee that you will become a true Bootstrap master.
This book is the first one to offer support for version 4 of Bootstrap. However, we will offer support for version 3 as well. So, you will be ready for whatever comes your way.
Chapter 1, Getting Started, introduces the Bootstrap framework and teaches you how to set up the environment.
Chapter 2, Creating a Solid Scaffolding, starts the landing page example using the grid system.
Chapter 3, Yes, You Should Go Mobile First, talks about mobile-first development and how to do it.
Chapter 4, Applying the Bootstrap Style, uses the Bootstrap theme and some Bootstrap elements.
Chapter 5, Making It Fancy, is about adding more Bootstrap elements to the landing page example.
Chapter 6, Can You Build a Web App?, challenges us to create a web application using Bootstrap.
Chapter 7, Of Course, You Can Build a Web App!, creates the web application page using only Bootstrap elements and components.
Chapter 8, Working with JavaScript, starts using some JavaScript plugins in the web application example.
Chapter 9, Entering in the Advanced Mode, is the start of the dashboard example using advanced components and plugin integrations.
Chapter 10, Bringing Components to Life, completes the dashboard example while making the final customizations for our web page.
Chapter 11, Making It Your Taste, is the final challenge, where we customize Bootstrap plugins and create a new plugin for the framework.
To follow this book's developments, you will need a web browser on your computer, preferably Google Chrome, because it will be used in some examples. But other browsers can work as well.
Also, you will need some basic knowledge in HTML, CSS, and JavaScript beforehand. Despite the fact that we will initially talk in a slow pace about those technologies, it will be good for you to know some basic concepts about them.
Another plus is knowledge of the jQuery library, which is a dependency of Bootstrap. We will actually use jQuery in Chapter 7, Of Course, You Can Build a Web App!, and they will be very simple examples. So just keep in mind to train some jQuery skills.
Bootstrap By Example is perfect for frontend developers interested in fast, mobile-first, and responsive development. Bootstrap is the most famous frontend framework, with a big community that needs you as a new member in this world of extensive support for different devices, resolutions, browsers, and ready-to-use components. With this book, you will acquire your ticket to it and play around like a pro.
In this book, you will find a number of text styles that distinguish between different kinds of information. Here are some examples of these styles and an explanation of their meaning.
Code words in text, database table names, folder names, filenames, file extensions, pathnames, dummy URLs, user input, and Twitter handles are shown as follows: "Then, we created a <div> tag using the .navbar-right class to provide a set padding CSS rules and place the list to the right to appear the same way as before."
A block of code is set as follows:
<html> <head></head> <body>Hello World!</body> </html>
When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold:
<html>
<head></head>
<body>Hello World!</body>
</html>New terms and important words are shown in bold. Words that you see on the screen, for example, in menus or dialog boxes, appear in the text like this: "The preceding screenshot shows the final result of the Features section."
Feedback from our readers is always welcome. Let us know what you think about this book—what you liked or disliked. Reader feedback is important for us as it helps us develop titles that you will really get the most out of.
To send us general feedback, simply e-mail <[email protected]>, and mention the book's title in the subject of your message.
If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, see our author guide at www.packtpub.com/authors.
Now that you are the proud owner of a Packt book, we have a number of things to help you to get the most from your purchase.
You can download the example code files for this book 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.
You can download the code files by following these steps:
Log in or register to our website using your e-mail address and password.
Hover the mouse pointer on the SUPPORT tab at the top.
Click on Code Downloads & Errata.
Enter the name of the book in the Search box.
Select the book for which you're looking to download the code files.
Choose from the drop-down menu where you purchased this book from.
Click on Code Download.
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
We also provide you with a PDF file that has color images of the screenshots/diagrams used in this book. The color images will help you better understand the changes in the output. You can download this file from https://www.packtpub.com/sites/default/files/downloads/BootstrapByExample_ColorImages.pdf.
Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you find a mistake in one of our books—maybe a mistake in the text or the code—we would be grateful if you could report this to us. By doing so, you can save other readers from frustration and help us improve subsequent versions of this book. If you find any errata, please report them by visiting http://www.packtpub.com/submit-errata, selecting your book, clicking on the Errata Submission Form link, and entering the details of your errata. Once your errata are verified, your submission will be accepted and the errata will be uploaded to our website or added to any list of existing errata under the Errata section of that title.
To view the previously submitted errata, go to https://www.packtpub.com/books/content/support and enter the name of the book in the search field. The required information will appear under the Errata section.
Piracy of copyrighted material on the Internet is an ongoing problem across all media. At Packt, we take the protection of our copyright and licenses very seriously. If you come across any illegal copies of our works in any form on the Internet, please provide us with the location address or website name immediately so that we can pursue a remedy.
Please contact us at <[email protected]> with a link to the suspected pirated material.
We appreciate your help in protecting our authors and our ability to bring you valuable content.
If you have a problem with any aspect of this book, you can contact us at <[email protected]>, and we will do our best to address the problem.