Learning Bootstrap 4 · 2nd Edition by Lambert, Matt -- Read -- Imperial Library of Trantor

Index

Learning Bootstrap 4 - Second Edition

Learning Bootstrap 4 - Second Edition Credits About the Author About the Reviewer www.PacktPub.com

eBooks, discount offers, and more

Why subscribe?

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 Downloading the color images of this book Errata Piracy Questions

1. Introducing Bootstrap 4

Introducing Bootstrap

Bootstrap 4 advantages

Improved grid system and flexbox Card component Rebooting normalize.css Internet Explorer 8 support dropped Other updates

Implementing framework files Inserting the JavaScript files The starter template

HTML5 DOCTYPE Structuring the responsive meta tag

Normalizing and Rebooting Taking the starter template further Using a static site generator Converting the base template to a generator Installing Harp.js Adding Sass in Harp Setting up the project

Inserting the CSS Inserting the JavaScript Other directories

Setting up the layout Compiling your project Previewing your project Deploying your project

Installing Surge Using Surge to deploy your project

Summary

2. Using Bootstrap Build Tools

Different types of tools

Installing Node.js Updating npm Installing Grunt

Download the Bootstrap source files

Installing Ruby Installing the Bundler gem Running the documentation Setting up the static site generator Why use Harp.js Installing Harp.js

Setting up the blog project

css fonts img js partial EJS files

Setting up the JSON files

Creating the data JSON file Setting up the layout Setting up the header Setting up the footer

Creating our first page template

Compiling your project Running your project Viewing your project A note about Sass

Summary

3. Jumping into Flexbox

Flexbox basics and terminology Ordering your Flexbox

Stretching your child sections to fit the parent container Changing the direction of the boxes

Wrapping your Flexbox

Creating equal-height columns

Setting up the Bootstrap Flexbox layout grid

Updating the Sass variable

Setting up a Flexbox project

Adding a custom theme Creating a basic three-column grid Creating full-width layouts

Designing a single blog post Summary

4. Working with Layouts

Working with containers

Creating a layout without a container Using multiple containers on a single page

Inserting rows into your layout Adding columns to your layout

Extra small Small Medium Large Extra large

Choosing a column class Creating a simple three-column layout Mixing column classes for different devices

What if I want to offset a column?

Coding the blog home page

Writing the index.ejs template Using spacing CSS classes Testing out the blog home page layout Adding some content What about mobile devices?

Using responsive utility classes

Coding the additional blog project page grids

Updating _data.json for our new pages Creating the new page templates

Coding the contact page template

Adding the contact page body

Coding the blog post template

Adding the blog post feature Adding the blog post body

Converting the mailing list section to a partial

Summary

5. Working with Content

Reboot defaults and basics

Headings and paragraphs Lists Preformatted text Tables Forms

Learning to use typography

Using display headings

Customizing headings

Using the lead class Working with lists

Coding an unstyled list Creating inline lists Using description lists

How to style images

Making images responsive Using image shapes Aligning images with CSS

Coding tables

Setting up the basic table Inversing a table

Inversing the table header

Adding striped rows Adding borders to a table Adding a hover state to rows Color-coating table rows Making tables responsive

Summary

6. Playing with Components

Using the button component Basic button examples Creating outlined buttons Checkbox and radio buttons

Creating a radio button group Using button groups Creating vertical button groups Coding a button dropdown Creating a pop-up menu Creating different size drop-down buttons

Coding forms in Bootstrap 4

Setting up a form

Adding a select dropdown Inserting a textarea tag into your form Adding a file input form field Inserting radio buttons and checkboxes to a form Adding a form to the blog contact page Updating your project

Additional form fields

Creating an inline form

Hiding the labels in an inline form Adding inline checkboxes and radio buttons Changing the size of inputs Controlling the width of form fields

Adding validation to inputs Using the Jumbotron component Adding the Label component Using the Alerts component

Adding a dismiss button to alerts

Using Cards for layout

Moving the Card title Changing text alignment in cards Adding a header to a Card Inverting the color scheme of a Card Adding a location card to the Contact page

Updating the Blog index page

Adding the sidebar Setting up the Blog post page

How to use the Navs component

Creating tabs with the Nav component Creating a pill navigation Using the Bootstrap Navbar component Changing the color of the Navbar Making the Navbar responsive

Adding Breadcrumbs to a page

Adding Breadcrumbs to the Blog post page

Using the Pagination component

Adding the Pager to the Blog post template

How to use the List Group component Summary

7. Extending Bootstrap with JavaScript Plugins

Coding a Modal dialog

Coding the Modal dialog

Coding Tooltips

Updating the project layout How to use Tooltips How to position Tooltips Adding Tooltips to buttons Updating the layout for buttons

Avoiding collisions with our components Using Popover components

Updating the JavaScript Positioning Popover components Adding a Popover to a button Adding our Popover button in JavaScript

Using the Collapse component

Coding the collapsable content container

Coding an Accordion with the Collapse component Coding a Bootstrap Carousel

Adding the Carousel bullet navigation Including Carousel slides Adding Carousel arrow navigation

Summary

8. Throwing in Some Sass

Learning the basics of Sass Using Sass in the blog project

Updating the blog project Using variables Using the variables in CSS Using other variables as variable values

Importing partials in Sass

Using mixins How to use operators

Creating a collection of variables

Importing the variables to your custom style sheet Adding a color palette Adding some background colors Setting up variables for typography Coding the text color variables Coding variables for links Setting up border variables Adding variables for margin and padding Adding mixins to the variables file Coding a border-radius mixin

Customizing components

Customizing the button component Extending the button component to use our color palette

Writing a theme

Common components that need to be customized Theming the drop-down component Customizing the alerts component Customizing the typography component

Summary

9. Migrating from Version 3

Browser support Big changes in version 4

Switching to Sass

Updating your variables

Updating @import statements Updating mixins

Additional global changes

Using REM units

Other font updates

New grid size

Migrating components

Migrating to the Cards component Using icon fonts

Migrating JavaScript Miscellaneous migration changes

Migrating typography Migrating images Migrating tables Migrating forms Migrating buttons

Summary

← Prev
Back
Next →

← Prev
Back
Next →