41,99 €
Mehr erfahren.
- Herausgeber: Packt Publishing
- Kategorie: Wissenschaft und neue Technologien
- Sprache: Englisch
Take your Bootstrap game to the next level with this practical guide
About This Book
- Packed with easy-to-follow recipes on building responsive web pages with Bootstrap 4 that can be applied to a web project of your choice
- Build intuitive user interfaces that are mobile-ready with the latest features offered by BS4
- Stay on top of the changes that Bootstrap 4 brings to front-end development
- Craft beautiful UIs and learn best practices, tips and tricks for quick, effortless, and proper Bootstrap 4 development
Who This Book Is For
If you are a web designer or a developer who is familiar with the basics of Bootstrap and now want to build highly responsive and professional web pages using Bootstrap 4, this cookbook is for you. Familiarity with the fundamentals of HTML, CSS and jQuery, and some experience of incorporating JavaScript plugins is assumed.
What You Will Learn
- Craft beautiful UIs the right way
- Use jQuery and JavaScript to extend Bootstrap layouts
- Become more efficient by speeding up your workflow to achieve amazing results in the shortest time possible
- Setup your environment for future changes of the framework.
- Stay DRY by quickly prototyping Bootstrap-based websites with the help of Github's own serverless blogging platform, Jekyll
- Integrate Bootstrap with the most popular JS frameworks, Angular and React
- Combine Bootstrap with the .NET platform
In Detail
Bootstrap, one of the most popular front-end frameworks, is perfectly built to design elegant, powerful, and responsive interfaces for professional-level web pages. It supports responsive design by dynamically adjusting your web page layout.
Bootstrap 4 is a major update with many impressive changes that greatly enhance the end results produced by Bootstrap. This cookbook is a collection of great recipes that show you how to use all the latest features of Bootstrap to build compelling UIs.
This book is using the most up-to-date version of Bootstrap 4 in all its chapters. First off, you will be shown how you can leverage the latest core features of Bootstrap 4 to create stunning web pages and responsive media. You will gradually move on to extending Bootstrap 4 with the help of plugins to build highly customized and powerful UIs.
By the end of this book, you will know how to leverage, extend, and integrate bootstrap to achieve optimal results for your web projects.
Style and approach
Packed full of solutions that can be instantly applied, the practical-based recipes will help you get the most from Bootstrap.
Sie lesen das E-Book in den Legimi-Apps auf:
Seitenzahl: 316
Veröffentlichungsjahr: 2017
Ähnliche
BIRMINGHAM - MUMBAI
< html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
Bootstrap 4 Cookbook
Copyright © 2017 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, and its dealers and distributors will be held liable for any damages caused or alleged to be 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.
First published: June 2017
Production reference: 1290617
www.packtpub.com
Credits
Author
Ajdin Imsirovic
Copy Editor
Dhanya Baburaj
Reviewer
Zlatko Alomerovic
Project Coordinator
Ritika Manoj
Commissioning Editor
Ashwin Nair
Proofreader
Safis Editing
Acquisition Editor
Siddharth Mandal
Indexer
Francy Puthiry
Content Development Editor
Arun Nadar
Graphics
Jason Monteiro
Technical Editor
Rashil Shah
Production Coordinator
Shantanu Zagade
About the Author
Ajdin Imsirovic has been working with frontend technologies, as well as web and print design, for almost 2 decades. He is an accomplished video course creator and an author of a wildly popular video course series on Bootstrap development. He is dedicated to making the learning of the practical use of HTML, CSS, and JavaScript technologies with Bootstrap easy and fruitful. In his Bootstrap 4 Cookbook, he brings together all his experience while teaching Bootstrap development to make a must-read guide to the newest version of Bootstrap.
About the Reviewer
Zlatko Alomerovic is a full-stack web developer with a degree in electrical engineering and computer science. Zlatko likes solving problems with Ruby. He chooses Ruby on Rails, ReactJS, and EmberJS to get the job done. In his spare time, he gives lessons in Judo, teaches kids to code, explores Blockchain, Bitcoin, and Ethereum technologies. Check out his website at www.ingneer.com.
www.PacktPub.com
For support files and downloads related to your book, please visit www.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.
https://www.packtpub.com/mapt
Get the most in-demand software skills with Mapt. Mapt gives you full access to all Packt books and video courses, as well as industry-leading tools to help you plan your personal development and advance your career.
Why subscribe?
Fully searchable across every book published by Packt
Copy and paste, print, and bookmark content
On demand and accessible via a web browser
Customer Feedback
Thanks for purchasing this Packt book. At Packt, quality is at the heart of our editorial process. To help us improve, please leave us an honest review on this book's Amazon page at https://www.amazon.com/dp/178588929X.
If you'd like to join our team of regular reviewers, you can e-mail us at [email protected]. We award our regular reviewers with free eBooks and videos in exchange for their valuable feedback. Help us be relentless in improving our products!
Table of Contents
Preface
What this book covers
What you need for this book
Who this book is for
Conventions
Reader feedback
Customer support
Downloading the example code
Errata
Piracy
Questions
Installing Bootstrap 4 and Comparing Its Versions
Introduction
Installing Bootstrap 4 to Cloud9 IDE using npm
Getting ready
How to do it...
Installing Bootstrap 4 to Cloud9 IDE via Git
Getting ready
How to do it...
Installing Bootstrap 4 Jekyll-powered docs
Getting ready
How to do it...
Customizing the styles of Bootstrap 4 docs
Getting ready
How to do it...
Making custom Grunt tasks in Bootstrap 4
Getting ready
How to do it...
How it works...
Comparing Bootstrap 4 versions with Bower
Getting ready
How to do it...
Installing Bootstrap 4 to our Cloud9 IDE with Bower
Getting ready
How to do it...
Layout Like a Boss with the Grid System
Introduction
Preparing a static server with Bootstrap 4, Harp, and Grunt
Getting ready
How to do it...
Deploying your web project with Surge
Getting ready
How to do it...
Splitting up our Harp project into partials
How to do it...
Using containers with margin and padding utility classes
Getting ready
How to do it...
How it works...
Explanation of the data-* HTML5 attributes
There's more...
Renaming main.scss
Adding columns in a row
Getting ready
How to do it...
Making col-* classes work
Getting ready
How to do it...
Building a simple page with the default grid
Getting ready
How to do it...
How it works...
Building a real-life web page example with the default grid
Getting ready
How to do it...
How it works...
Power Up with the Media Object, Text, Images, and Tables
Introduction
Extending the text classes of .display-* and adding hover effects with Hover.css
Getting ready
How to do it...
How it works...
Creating comment sections using media objects
Getting ready
How to do it...
How it works...
Enriching text content with Bootstrap typography classes
Getting ready
How to do it...
How it works...
Customizing the blockquote element with CSS
Getting ready
How to do it...
How it works...
Extending the blockquote styles with Sass
Getting ready
How to do it...
How it works...
Aligning text around images
Getting ready
How to do it...
How it works...
Wrapping text around rounded images
Getting ready
How to do it...
How it works...
Styling a pricing section using Bootstrap's default table classes
Getting ready
How to do it...
How it works...
Diving Deep into Bootstrap 4 Components
Creating custom alerts and positioning them in the viewport
Getting ready
How to do it…
How it works…
Making full-page modals
Getting ready
How to do it…
How it works…
Altering the behavior of popups using tether options
Getting ready
How to do it…
How it works…
Controlling the color and opacity of ToolTips using Sass variables
Getting ready
How to do it…
How it works…
Using Bootstrap's Sass mixins to create custom buttons
Getting ready
How to do it…
How it works…
Adjusting the rounding of corners on buttons and button groups
Getting ready
How to do it…
How it works…
Controlling the number of card columns on different breakpoints with SCSS
Getting ready
How to do it…
How it works…
Making cards responsive
Getting ready
How to do it…
How it works…
Easily positioning inline forms
Getting ready
How to do it…
How it works…
Menus and Navigations
Adding Font Awesome to Bootstrap navbar
Getting ready
How to do it…
How it works…
Placing a single Bootstrap navbar dropdown to the right
Getting ready
How to do it…
How it works…
Centering navbar links
Getting ready
How to do it…
How it works…
Making a transparent navbar on a darker background
Getting ready
How to do it…
How it works…
Creating a Navbar with Icons and Flexbox
Getting ready
How to do it…
How it works…
Adding another row of links to the navbar
Getting ready
How to do it…
How it works…
Adding Yamm3 Megamenu images to a navbar dropdown
Getting ready
How to do it…
How it works…
Adding Yamm3 Megamenu list of links to a navbar dropdown
Getting ready
How to do it…
How it works…
Extending Bootstrap 4
Introduction
Converting checkboxes into Toggles with Bootstrap Toggle plugin
Getting ready
How to do it…
How it works…
Onboarding users with Shepherd
Getting ready
How to do it…
Toggling visibility of password fields with custom jQuery code
Getting ready
How to do it…
How it works…
Extending the functionality of select elements with Bootstrap Select plugin
How to do it…
How it works…
Customizing select boxes with Select2 plugin
Getting ready
How to do it…
How it works…
Adding input sliders with Rangeslider.js
Getting ready
How to do it…
Allowing users to easily add dates to your input fields with jQuery UI Datepicker
How to do it…
Converting plain tables into sophisticated data tables with Bootgrid
Getting ready
How to do it…
How it works…
Navigating easily with simple-sidebar jQuery plugin
Getting ready
How to do it…
How it works…
Adding fully customizable notifications with Notify.js
Getting ready
How to do it…
How it works…
Integrating a fancy modal using animatedModal.js
Getting ready
How to do it…
How it works…
Making pagination dynamic with the jQuery Pagination plugin and simplePagination.js
Getting ready
How to do it…
How it works…
Validating forms with svalidate.js
Getting ready
How to do it…
How it works…
Adding a rating system using jQuery Bar Rating plugin
Getting ready
How to do it…
How it works…
Make Your Own jQuery Plugins in Bootstrap 4
Introduction
Making the simplest possible jQuery plugin
Getting ready
How to do it…
How it works…
Making the plugin customizable with the extend() and each() methods
Getting ready
How to do it…
How it works…
Integrating a simple CSS Class Replacement plugin with Bootstrap 4
Getting ready
How to do it…
How it works…
Bootstrap 4 Flexbox and Layouts
Introduction
Breakpoint-dependent switching of flex direction on card components
Getting ready
How to do it…
How it works…
Letting cards take up space with the .flex-wrap and .col classes
Getting ready
How to do it…
How it works…
Adding any number of columns with Flexbox
Getting ready
How to do it…
How it works…
Combining numbered .col classes with plain .col classes
Getting ready
How to do it…
How it works…
Working with card layouts and the Flexbox grid
Getting ready
How to do it…
How it works…
Center-aligning cards on wider viewports only
Getting ready
How to do it…
How it works…
Positioning nav-tabs with Flexbox
Getting ready
How to do it…
How it works…
Workflow Boosters
Introduction
Customizing Bootstrap builds by cherry-picking Sass partials
Getting ready
How to do it...
How it works...
Cleaning up unused CSS with UnCSS and Grunt
Getting ready
How to do it...
How it works...
Removing CSS comments with the grunt-strip-CSS-comments plugin
Getting ready
How to do it...
How it works...
Creating a Blog with Jekyll and Bootstrap 4
Making Jekyll work with Bootstrap 4
Getting ready
How to do it...
How it works...
Splitting Jekyll files into partials
Getting ready
How to do it...
How it works...
Making Jekyll blog-aware
Getting ready
How to do it...
How it works...
Deploying your blog to the web with GitHub
Getting ready
How to do it...
How it works...
Bootstrap 4 with ASP.NET Core
Starting a project in ASP.NET Core and Bootstrap 4 in Visual Studio 2017
Getting ready
How to do it...
How it works...
Migrating the default web page of a .NET Core project from Bootstrap 3 to Bootstrap 4
Getting ready
How to do it...
How it works...
Working with Bower, Sass, and Grunt in our .NET Core project
Getting ready
How to do it...
How it works...
Integrating Bootstrap 4 with React and Angular
Introduction
Integrating Bootstrap 4 with React
Getting ready
How to do it...
How it works...
Replacing the Default Styles in Angular 2 QuickStart with Bootstrap 4 CDN CSS
Getting ready
How to do it...
How it works...
Integrating Angular 4 and Bootstrap 4 with the help of ng-bootstrap
Getting ready
How to do it...
How it works...
Conclusion
Next Steps
Preface
Bootstrap is the most popular frontend framework today. One of its advantages is that it is easy to start working with. In fact, it is possible to simply get the links for Bootstrap's CSS and JS files over a Content Delivery Network (CDN), and you are good to go!
However, under this low barrier to entry lies a whole world of possibilities to put together websites in Bootstrap 4.
For example, there are additional ways to install Bootstrap, such as cloning it via Git or installing it via NPM or Bower.
There are also several ways to work with it, with increasing levels of complexity. For example, you can simply use its CSS as is. You can also use its SCSS files, which come with the default installation in Bootstrap 4. By tweaking SCSS files, using includes, variables, and mixins (Sass functions), you can create highly customized layouts.
Bootstrap 4 also includes the amazing Flexbox grid, which gives us a whole new way of working with layouts.
When working with any frontend technology, there are always a lot of repetitive tasks, such as minification and Sass-to-CSS compilation. These tasks are performed using task runners, and in this book, the focus is on Grunt. Although working with task runners does add an extra layer of complexity to our development with Bootstrap 4, it also increases our efficiency as frontend developers.
Bootstrap 4 is powered by Sass and jQuery, so due care was given to covering the use of both technologies in this book's recipes.
In the last few chapters, we are looking into integrating Bootstrap with Jekyll, GitHub's serverless blog system, and deploying it onto GitHub pages. We also take a look at using GitHub with .NET Core, Angular, and React.
One of the more ambitious goals of this book was to truly build on the available Bootstrap 4 documentation, rather than just reiterate the existing concepts. If some of the recipes seem a bit too advanced, understanding Bootstrap's official documentation might be a prerequisite for better understanding. Also, each recipe was built to be as straightforward and beginner-friendly as possible, while remaining self-contained.
The world of the frontend web development is changing fast, and it is becoming increasingly complex. In the recipes of this book, emphasis was given to catering for this complexity in a manner that would suit developers of various levels of expertise.
What this book covers
Chapter 1, Installing Bootstrap 4 and Comparing Its Versions, covers various ways of installing Bootstrap 4 and using it with an online IDE, Cloud9, or on your local machine. It also explains the workings of Grunt, Sass, and Jekyll, which are all used in the full local installation of Bootstrap 4.
Chapter 2, Layout Like a Boss with the Grid System, deals with the basics of using containers, rows, and columns, as well as building a couple of real web page examples. All these are done with the help of Harp and Grunt.
Chapter 3, Power Up with the Media Object, Text, Images, and Tables, helps you to create a comments section, customize the blockquote element, align text and images, and work with tables.
Chapter 4, Diving Deep into Bootstrap 4 Components, explores customizing alerts, modals, popups, and tooltips. It also looks into using Bootstrap's Sass mixins to customize components such as cards and buttons.
Chapter 5,Menus and Navigations, explains various ways of working with navbars.
Chapter 6, Extending Bootstrap 4, teaches you a number of ways to extend Bootstrap 4 with the help of jQuery plugins. Some of the recipes in this chapter extend the functionality of the existing components, such as the pagination component. Others deal with integrating nonexisting components, such as the datepicker on input fields.
Chapter 7, Make Your Own jQuery Plugins in Bootstrap 4, covers the foundations of making your own jQuery plugins. Since jQuery is such an integral part of Bootstrap, knowing its inner workings can help in both extending the existing plugins and making Bootstrap 3 plugins work with Bootstrap 4. Also, understanding the basics of how jQuery plugins work opens a new way of working with interactions in your Bootstrap-powered websites.
Chapter 8, Bootstrap 4 Flexbox and Layouts, outlines the amazing changes brought to Bootstrap 4 by the inclusion of the CSS flexbox specification into the framework itself. It is an alternative way of building websites and stepping away from float-based layouts.
Chapter 9, Workflow Boosters, focuses on the use of Sass partials, cleaning up unused CSS in your custom Bootstrap 4 builds, and stripping comments. We'll see how the Grunt task runner is used to achieve these goals, which will help in understanding the general way Grunt tasks are structured and run.
Chapter 10, Creating a Blog with Jekyll and Bootstrap 4, lists the process of including Bootstrap 4 Sass with Jekyll, splitting it into partials, making Jekyll blog-aware, and finally, serving your Bootstrap 4 Jekyll blog online with the help of GitHub Pages.
Chapter 11, Bootstrap 4 with ASP.net Core, takes a look at the process of setting up Bootstrap 4 Sass and Grunt in Visual Studio 2017 and ASP.net Core 1.0/1.1.
Chapter 12, Integrating Bootstrap 4 with React and Angular, discusses the integration of Bootstrap 4 with React and Angular. Component-based frontend development is not the future--it is already here. Understanding at least the basics of how it works is crucial. This chapter aims to remove the complexity of these two frameworks and the complexity of their setup, and strives to show how to make these frameworks work with Bootstrap 4 in a simple and understandable manner.
What you need for this book
In almost all the chapters of this book, the following technologies are used:
Node and NPM
Bower
Ruby and Jekyll
Git and Git Bash
Harp
Chapter 11, Bootstrap 4 with ASP.net Core, is specific because it requires that you have an installation of Visual Studio 2017 Community Edition and a .NET Core 1.x installation.
Chapter 12, Integrating Bootstrap 4 with React and Angular, requires installations of React and Angular via npm.
Who this book is for
This book is for both new and seasoned frontend developers. With so many technologies being affected by Bootstrap and affecting Bootstrap itself, there are plenty of ways of putting them together and working with them, as can be seen throughout this book's recipes.
These are just some of the technologies this book covers: CSS and HTML, jQuery, Sass, Harp, Jekyll, Node and NPM, Bower, Grunt, Angular, React, and .NET Core. All of these technologies are looked at through the lens of Bootstrap 4 framework.
Conventions
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: "After running the npm install command, a number of dependencies will be installed, just as listed in the package.json file."
A block of code is set as follows:
{ "name": "customGrunt", "version": "", "devDependencies": { "grunt": "~1.0.1", "grunt-contrib-copy": "^1.0.0" } }
Any command-line input or output is written as follows:
cd && cd workspace
touch Gruntfile.js package.json
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: "Click on Create a new workspace, and a new page will appear with only a few things to fill in."
Reader feedback
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.
Customer support
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.
Downloading the example code
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
The code bundle for the book is also hosted on GitHub at https://github.com/PacktPublishing/Bootstrap-4-Cookbook. We also have other code bundles from our rich catalog of books and videos available at https://github.com/PacktPublishing/. Check them out!
Errata
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
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.
Questions
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.
Installing Bootstrap 4 and Comparing Its Versions
In this chapter, we will cover:
Installing Bootstrap 4 to c9 IDE using npm
Installing Bootstrap 4 to c9 IDE via git
Installing Bootstrap 4 Jekyll-powered docs
Customizing the styles of Bootstrap 4 docs
Making custom Grunt tasks in Bootstrap 4
Comparing Bootstrap 4 versions with Bower
Installing Bootstrap 4 to c9 IDE with Bower
Introduction
In this chapter, you will learn how to install Bootstrap 4 via the command line on c9.io. The reason for using Cloud9 IDE in this recipe book is that since it is a web-based IDE, it requires you to have only an internet connection and a web browser to run the IDE, which is available at https://c9.io.
Once you access c9.io via your web browser, you have at your fingertips a fully functional Ubuntu virtual machine. The nice thing about this setup is, if you are, for example, running Windows on your computer, you can avoid many of the setup headaches this would usually entail, such as downloading and installing Ruby and Node. Using a web-based IDE is also great if there is a need to work with multiple computers, or if collaboration is important.
Finally, because of its ease of use and a plethora of features, using Cloud9 IDE will make it easier for the less advanced readers to follow along in some of the more complex recipes.
In this chapter, besides learning about how to install Bootstrap 4 via the command line, we will also examine the way it utilizes Grunt for commonly performed tasks, Sass to modularize our CSS, and Jekyll to implement a serverless copy of the official Bootstrap docs.
However, all this comes at a cost. In order to use all that Bootstrap 4 has to offer, we need to be familiar with all of these technologies. For more advanced users, this should not be a problem. Still, an ambitious goal of this book is to be useful for as wide an audience as possible, including less advanced users, while at the same time to still prove valuable to those with more experience, as a quick reference to the brand new version of Bootstrap.
Therefore, in this chapter, we will cover the recipes that deal with this advanced setup and explain in simple terms the workings of Grunt, Sass, and Jekyll.
Note that the official Bootstrap website (getbootstrap.com) runs on GitHub's Jekyll platform.
Installing Bootstrap 4 to Cloud9 IDE using npm
This recipe will cover the required steps for installation of Bootstrap 4 via npm on Cloud9 IDE. In order to begin working on this recipe, it is assumed that you have already registered a c9.io account.
Getting ready
To begin, log in to your c9.io account, which will open your Cloud9 IDE dashboard:
Click on Create a new workspace, and a new page will appear with only a few things to fill in. You only need to add the Workspace name and Description, as you like. You can leave the Clone from Git or Mercurial URL empty, as well as leave the default HTML template selected. Finally, click on Create workspace to spin up a new container.
Once ready, you will be greeted with the following tree structure of your folders (displayed in the left sidebar):
The largest window (to the right from the sidebar) will have the README.md file open, but you can open any other file in that area as well. Under this largest window, you will see an open Terminal window (titled "bash - <your-project-name>"), and another tab with the JavaScript REPL.
We will make use of Node and npm to install the latest version of Bootstrap via the command line (the readily open Bash Terminal). Both Node and npm come preinstalled in Cloud9 IDE.
How to do it...
Inspect the versions of Node and npm installed on our virtual machine:
Inspect the available versions of Bootstrap to be installed:
The preceding command shows us that we can either install Bootstrap 3 (latest stable version) or Bootstrap 4 (latest alpha version); we will install Bootstrap 4.
To install the latest alpha version of Bootstrap 4, run the following command:
Running the preceding command will almost instantly install the newest version of Bootstrap 4 in our node_modules directory. Inspect the directory's contents with ll (c9), or dir (Windows).
Navigate to the
node_modules/bootstrap
folder:
cd node_modules/bootstrap
Install all the dependencies via
npm install
:
npm install
After running the npm install command, a number of dependencies will be installed, just as listed in the package.json file. The installation will take some time. The reason why it takes so long is mostly due to the installation of the PhantomJS headless browser, which is used for testing in Bootstrap 4.
Once the installation process is completed, you will be greeted with a large number of folders and files. There are about 40 folders inside the node_modules folder. These folders house specific dependencies, such as grunt-sass or eslint. All of these dependencies are located inside the node_modules/bootstrap/node_modules path.
Here is the structure of the files installed using the npm approach:
After the installation is completed, the dist folder contains all the CSS and JavaScript needed to run a website.
All that is left now is to add HTML pages, and correctly reference the styles and scripts from the dist folder.
Installing Bootstrap 4 to Cloud9 IDE via Git
There is an alternative approach to install Bootstrap via npm and then by running the npm install command. This alternative involves downloading the latest Bootstrap release from the official GitHub repository. Contrary to the npm installation approach, this installation contains many additional files and folders, for example, the nuget folder. This means that you have downloaded all the available tools for all the platforms supported by Bootstrap. Depending on what you are trying to accomplish, installing via Git might be your preferred approach, as it gives you more options out of the box.
Getting ready
The process starts similarly to the previous recipe. You begin by clicking on Create a new workspace at the Cloud9 IDE dashboard.
How to do it...
Fill out the
Workspace name
and
Description
.
In the
Clone from Git or Mercurial URL
input field, enter the address of the official Bootstrap repo on GitHub at
https://github.com/twbs/bootstrap
:
Click on Create workspace. After clicking on Create workspace, a new container will be spun up. Once the environment is ready, you'll be greeted with the tree structure of Bootstrap 3.3.7, cloned from GitHub.
Run
git fetch
:
git fetch
Checkout the v4-dev branch:
git checkout v4-dev
Running the preceding command will result in the following notifications in Bash:
Branch v4-dev set up to track remote branch v4-dev from origin. Switched to a new branch 'v4-dev'
In other words, you have now switched to a branch that has the latest installation of Bootstrap 4.
Install
grunt-cli
:
npm install -g grunt-cli
Run the
package.json
file:
npm install
Running the preceding command will install PhantomJS, as well as a number of dependencies. At this point, we have the dist folder available with all the compiled .css and .js files. However, to be able to work with Bootstrap docs, we still need to install Bundler and Jekyll, which is explained in the next recipe.
Installing Bootstrap 4 Jekyll-powered docs
In this recipe, you will see how easy it is to install a copy of the official Bootstrap 4 docs. Running a local copy of the official Bootstrap documentation is a great way to experiment with the available Sass variables, as we will see later in this chapter.
Getting ready
In order to follow this recipe successfully, you should first install Bootstrap 4 via Git. Thus, this recipe assumes that you have a running environment in Cloud9 IDE, and that you have a complete Bootstrap 4 installation as explained in the previous recipe.
How to do it...
Verify that Ruby is preinstalled, and Jekyll is not:
which ruby; which jekyll
This command will return only the location of Ruby on your VM. Thus, Jekyll needs to be installed.
To install Jekyll, you need to install Bundler first:
gem install bundler
Now run bundle install, which will install Jekyll:
bundle install
Verify that Jekyll is installed:
bundle show jekyll
Serve Bootstrap 4 Jekyll-powered docs on Cloud9 IDE:
bundle exec jekyll serve --host $IP --port $PORT --baseurl ''
Upon running this command, a notification will pop up with a link to preview the running webpage. Click on the link and choose one of the display options:
Click on the link, and your very own copy of the Bootstrap docs will appear:
Customizing the styles of Bootstrap 4 docs
In the previous recipe, we built our own copy of Bootstrap 4 docs, running on Jekyll. In this recipe, we will see how to change the styling of our Bootstrap 4 docs by making simple changes to Sass variables.
Getting ready
For this recipe to work, you need to complete the previous two recipes, Installing Bootstrap 4 to c9 IDE using npm and Installing Bootstrap 4 to c9 IDE via git. The following steps will show you how to tweak the look of the docs by changing some of the Sass variables in the scss folder.
How to do it...
Stop the running Jekyll server by clicking inside the Bash console tab and using
Ctrl
+
C
.
Navigate to the
scss
folder and open the
_variables.scss
file:
cd && cd workspace/scss && c9 _variables.scss
Find the Sass variable
$enable-rounded
, and uncomment the line it is on, so that it looks like this:
// $enable-rounded: true !default;
