27,59 €
Mehr erfahren.
- Herausgeber: Packt Publishing
- Kategorie: Fachliteratur
- Sprache: Englisch
- Veröffentlichungsjahr: 2018
Bootstrap, the world’s most popular frontend framework, is an open source toolkit for building web applications with HTML, CSS, and JavaScript.
Learning Bootstrap 4 by Building Projects covers the essentials of Bootstrap 4 along with best practices. The book begins by introducing you to the latest features of Bootstrap 4. You will learn different elements and components of Bootstrap, such as the strict grid system, Sass, which replaced Less, flexbox, Font Awesome, and cards. As you make your way through the chapters, you will use a template that will help you to build different kinds of real-world websites, such as a social media website, a company landing page, a media hosting website, and a profile page, with ease.
By the end of this book, you will have built websites that are visually appealing, responsive, and robust.
Das E-Book können Sie in Legimi-Apps oder einer beliebigen App lesen, die das folgende Format unterstützen:
Seitenzahl: 199
Ähnliche
Learning Bootstrap 4 by Building Projects
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 author, 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: Amarabha BanerjeeAcquisition Editor: Shweta PantContent Development Editor: Arun NadarTechnical Editor: Leena PatilCopy Editor: Safis EditingProject Coordinator:Sheejal ShahProofreader: Safis EditingIndexer: Rekha NairGraphics:Jason MonteiroProduction Coordinator:Shantanu Zagade
First published: August 2018
Production reference: 1310818
Published by Packt Publishing Ltd. Livery Place 35 Livery Street Birmingham B3 2PB, UK.
ISBN 978-1-78934-325-0
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 author
Eduonix Learning Solutions creates and distributes high quality technology training content. Our team of industry professionals have been training manpower for more than a decade.
We aim to teach technology the way it is used in industry and professional world. We have professional team of trainers for technologies ranging from Mobility, Web to Enterprise and Database and Server Administration.
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
Learning Bootstrap 4 by Building Projects
PacktPub.com
Why subscribe?
PacktPub.com
Contributors
About the author
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
Download the color images
Conventions used
Get in touch
Reviews
Introduction
Bootstrap 4 Features
What's new in Bootstrap 4 –  introducing new features
Migrating to v4
Setting up the code editor
Initializing a new project
A quick introduction to Sass
Gulp
Hello world example
Summary
Photosharing Website
Building a menu
Footer
Jumbotron
Main content sections
Starting Sass build out
Completing Sass for index
Creating the Contact page
Building the content section of the Contact page
Creating the About page
Building the content section of the About page
Styling the About page
Creating custom media breakpoints
Installing Font Awesome
Grid analysis
Summary
Building a Resume Website
Revising the gulpfile
Creating the HTML layout
Styling the home page
Adding the education and skills section
Adding styles to the education and skills section
Adding services and projects
Summary
Social Network Frontend
Creating the header layout for the Home page
Creating navigation and wall comments
Creating wall comments
Creating and styling bubble comments
Creating the My Friends section
Creating the Latest Groups section
Creating the footer section
Creating the Photos section
Summary
Agency Website
Creating the navigation bar and footer
Creating the landing page 
Adding styles to the navigation and landing page
Creating the WHY CHOOSE US? section
Creating the WHO WE ARE section
Creating OUR CLIENTS section
Creating the contact section
Creating JS code for scrolling animations
Summary
Lightbox Website
Creating the carousel
Creating the tabs
Creating the three-column layout
Summary
Other Books You May Enjoy
Leave a review - let other readers know what you think
Preface
We have come a long way from the first websites that were dull and full of text. While they served their purpose back then, today, websites need to be more dynamic and interactive. In addition to fulfilling their purpose, they must also look aesthetically appeasing.
Websites are primarily designed in HTML and CSS, with HTML being used for the structure and CSS helping with the design and the look-and-feel of the website. Having to code every inch of a website can often be a tedious task, which is why there are templates or frameworks that can be modified to get the desired layout of the website.
Bootstrap is this, and so much more! Bootstrap is a framework that provides a template or a layout that can be used as is or can be modified. It allows you to add items such as jumbotrons, lightboxes, sticky menus, and so much more without have to write the tedious coding that's behind it.
Bootstrap 4, the latest version, is a complete rewrite of the older versions. It offers more support and makes it easier to integrate the framework into your website design. It now comes with features such as switching from LESS to Sass, added support for Flexbox, and dropped support for IE8, IE9, and iOS 6. It has also increased the global font size to 16 px, switched from pixels to root ems, and have even rewritten all the components and jQuery plugins.
This version of Bootstrap requires learning things from scratch, and this is exactly what we are offering. We have designed this book to simplify getting your hands on Bootstrap and actually learn using an example-based approach.
In this book, you will get down to the nitty-gritty of Bootstrap 4 by actually building projects in Bootstrap from the ground up. Using five projects, you will learn the different components and features, all the while learning exactly how to put it into use.
The book has been designed in a manner that will help breakdown Bootstrap for you, and won't talk over your head. So, if you have zero experience with Bootstrap, this book has got your covered.
Who this book is for
If you are a web developer who wants to build real-world responsive website from scratch using Bootstrap 4, then this book is for you. Basic knowledge of HTML and CSS is required.
What this book covers
Chapter 1, Introduction, starts the book off with an introduction to Bootstrap.
Chapter 2, Bootstrap 4 Features, introduces you to all the new features that Bootstrap 4 offers. You will learn how to set up the environment before you start building your projects.
Chapter 3, Photosharing Website, helps you create multiple pages with different layouts. You will be introduced to Font Awesome and media breakpoints.
Chapter 4, Building a Resume Website, teaches you how to create a sophisticated resume site where you will be using the Bootstrap grid system to create layouts for your different sections, such as about me, contact information, education, experience, skills, services, and recent projects.
Chapter 5, Social Network Frontend, covers a number of different features, such as creating bubble comments, adding photos, and creating groups. You will also learn how to add a sidebar to the website.
Chapter 6, Agency Website, helps you build a one-page Bootstrap website where you will have a navigation menu and a jumbotron. You will also learn some JavaScript animation to achieve a smooth scrolling effect.
Chapter 7, Lightbox Website, uses the lightbox plugin to create a gallery of photos with two different layout. You will also learn how to create a carousel, which is basically a image slideshow.
To get the most out of this book
For this book, you will need Visual Studio Code to write our HTML, CSS, and JavaScript codes. You can use any browser (Chrome, Safari, or Firefox) to see the results of the website that you are building. Basic knowledge of HTML and CSS is required.
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 at https://github.com/PacktPublishing/Learning-Bootstrap-4-by-Building-Projects. In case there's an update to the code, it will be updated on the existing GitHub repository.
We also have other code bundles from our rich catalog of books and videos available at https://github.com/PacktPublishing/. Check them out!
Download the color images
We also provide a PDF file that has color images of the screenshots/diagrams used in this book. You can download it here: https://www.packtpub.com/sites/default/files/downloads/LearningBootstrap4byBuildingProjects_ColorImages.pdf.
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: "What they're doing here is creating a variable called $font-stack and assigning it the values Helvetica and sans-serif."
A block of code is set as follows:
$font-stack: Helvetica, sans-serif;$primary-color: #333;body { font: 100% $font-stack; color: $primary-color;}
Any command-line input or output is written as follows:
npm install jquery
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: "We will go ahead and open the terminal, and now, let's go to the Menu, then View, and click on Integrated Terminal."
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.
Introduction
This book is a practical guide that will help you create modern-day apps with the use of Bootstrap 4, a powerful JavaScript library. It starts off with an introduction to Bootstrap, where we learn about some of the differences coming into Bootstrap 4 that didn't exist in Bootstrap 3. We will also be covering the new features that Bootstrap 4 offers. So, let's start with the sites that we have: we've got a photo-sharing site; this is going to use a lightbox and it's also our first introduction to using Bootstrap 4. Now, Bootstrap has a strict grid column setup where you have 12 columns, but you can divide them up in any way you like. We're also going to look at how you can even go outside the 12, which is a limit for Bootstrap. For example, you have added two columns of span 5 and 10 respectively; basically, when you sum up they're going out of the 12, but things still kind of work out mostly in the same way. So, depending on the complexity of your website, you miss and you go over the 12, we're still going to see things work out pretty much fine.
Next, we have our resume site, which gets a little more complex because of the layout. We're going to use multiple rows, and we're going to have our columns deal with the different kinds of icons. Later on, we will check out Font Awesome, which is really going to come into play when we start getting into some of the more complex websites, because we're not actually using icon images, we're using Font Awesome instead, which acts as a font but really gives us icons. We'll look at a social networking website, where we're going to learn what cards are all about. We're going to look at how to create bubble-style comments, and some other different kinds of more complex layout features to get a particular kind of look to your page. Next is the agency website—a very clean, very nice-looking website. It's going to make heavy use of Font Awesome and some of the different icons that are available to us. Then we'll look at another photo site that we're going to integrate with a different lightbox that doesn't require JavaScript.
There is a lot going on. We're going to go through a great introduction and get some hands-on practice with Bootstrap 4, so let's jump into it.
Bootstrap 4 Features
In this chapter, we are going to learn about Bootstrap 4. We will basically get a general introduction to how Bootstrap works through the Hello-World program that we're going to create. This chapter starts off by introducing you to the changes that Bootstrap 4 offers. These changes are pretty exciting, and there are some good changes regarding the grids, fonts, and a lot of other things. We will go into detail about what these new changes are. We will then look into the code editor that we're going to use – it's free, popular, easy to use, and it's cross-platform as well.
We will then get into initializing a new Bootstrap 4 project. Different people have their own ways of doing this — you can either work with the Content Delivery Network (CDN), which means you're always going to be dependent on an internet connection, or you can bring it in locally. These are the two main ways to initialize a Bootstrap project. We will look at both of these ways, but we will focus on bringing it locally so that we can have everything contained in our local environment and not have to depend on the internet, because this allows you then to work without an internet connection. There's a specific way we're going to set it up — just in the same way regarding how folders are laid out inside of a project — and we're also going to use a tool to help us with our Syntactically awesome style sheets (Sass), pre-processing, and the running of different tasks. This means that we're going to have a task runner, and we're going to see how that's going to help us move files around and keep things organized as well.
We will then give you a quick introduction to Sass. If you are not familiar with Sass, this chapter will help you understand what it is and why we're wanting to use it inside of Bootstrap 4. In fact, Bootstrap has moved from Leaner Style Sheets (LESS) to Sass, so if you're familiar with LESS, that's kind of gone away, and we're going to see how our task runner is going to help us with the precompilation of Sass.
So, speaking of task runners, we have Gulp. Gulp is going to do a few things for us; it's going to do the precompilation from Sass to CSS, so we're no longer writing in CSS files – we're just writing in Sass files. Even if you want to write just straight CSS, you could do so, but you need to do it in a Sass file because the CSS file will get overwritten when we run the Gulp task. Therefore, Gulp is going to move JavaScript files from the Bootstrap distribution folder into our project, it's going to move CSS files, it's going to do the compilation for Sass, and it's also going to launch our web browser. It's going to run all of these tasks when we type in Gulp and then it's going to launch our web browser for us. This is going to be part of our workflow and it's going to be fairly streamlined.
Once we have all of that going on and we have our project layout done, we're going to create a simple Hello-World program and see how that works now that everything is in place.
After we have the project folder structures laid out, the files are placed, and we have Gulp fully integrated, we're going to see how everything works from that point on. This is going to be our template as we create and move into these different projects that we're going to be building.
What's new in Bootstrap 4 – introducing new features
In this section, we're going to see what's new in Bootstrap 4. As we go through this book, we're also going to see examples of these new features in action as we build up our different projects.
Bootstrap 4 has got quite a few new features and we will be looking at the more popular ones. Flexbox is one of the main features that has been added, also known as CSS3 Flexible Box, and it's used a lot with the grid. It allows you to accomplish the more popular layouts as well as complex layouts easily, so if you were trying to do the same thing in CSS, it would be a little more difficult and challenging. Therefore, we're going to see how Flexbox really helps make the different kinds of layout that you want to achieve in an easier manner.
LESS has been replaced with Sass, so we will see a few examples of Sass and how to make use of it, how to compile it, and get it into our CSS.
Some of the JavaScript has been rewritten in ES6 so that it has the latest standards and a lot of compatibility and good performance as well, and this relates to some of their plugins that have JavaScript. Other, different areas, of JavaScript have also been updated.
It also added cards and Font Awesome, so we're going to take a look at cards in a little bit and learn about how those are used. Then, we have Glyphs, which are replaced with Font Awesome.
There's a new grid tier for smaller devices that are 576px and below. Here, some of the grid columns and the different ways of accessing the grid layout have been changed. So, when we go and check the website, we will see all of these changes mentioned there.
Next, we have Tether, which is a JavaScript utility that's used for UI placement and tooltips, so we'll see how Tether integrates. It's actually a call at the bottom of your main page if you check out the index.html file, which is where we had the three references for JavaScript: one for jQuery, one for Tether, and one for the Bootstrap JavaScript reference, which needs to go last since it depends on the other two.
Migrating to v4
Without further ado, open your favorite browser and visit the Migrating to Bootstrap 4 documentation page at https://getbootstrap.com/docs/4.0/migration/:
As you can see on the Migrating to v4 documentation page, there are several things on the left, and at the bottom we have Migration. Here, you will see a lot of the different changes that Bootstrap 4 introduced, of which a few were discussed earlier. It has dropped the support for IE8, IE9, and iOS6, which is only for IE10+ and iOS 7+. It has mobile browser support as well.
In the Global changes section, you will see some of the big changes. Flexbox is enabled by default, so they're getting away from things such as floats; they've switched from LESS to Sass for CSS; and another thing is they're favoring rems instead of px. px is still being used, but there's a lot more move toward rem, and the global font size has been increased from 14 to 16, which is interesting. This probably has a lot to do with accessibility, since you get more screens with retina, and they also revamped grid tiers to address the smaller devices which are 576px or below, as mentioned earlier.
You will also see that major updates have been done to the grid system, such as the use of Flexbox and the use of the new attribute naming.
Then, we have components where they've dropped the Glyphicons and instead added Font Awesome. It also has octicons, cards, and so on.
Under Utilities, you will find Flex. The following screenshot shows an example of what this looks like. It has simple to really complex alignments, it's pretty involved, and as you shrink the browser, everything stays as it is:
