Bootstrap By Example电子书

Bootstrap By Example

Table of Contents

Bootstrap By Example

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. Getting Started

Getting Bootstrap

Setting up the framework

Folder structure

Warming up the sample example

Bootstrap required tags

Building our first Bootstrap example

The container tag

Optionally using the CDN setup

Community activity

Tools

Bootstrap and web applications

Browser compatibility

Summary

2. Creating a Solid Scaffolding

Understanding the grid system

Building our scaffolding

Setting things up

Offset columns

Completing the grid rows

Nesting rows

Finishing the grid

Fluid container

We need some style!

There are headings everywhere

Playing with buttons

More typography and code tags

Manipulating tables

Styling the buttons

Like a boss!

Final thoughts

Box-sizing

Quick floats

Clearfix

Font definitions for typography

Summary

3. Yes, You Should Go Mobile First

Making it greater

Bootstrap and the mobile-first design

How to debug different viewports at the browser

Cleaning up the mess

Creating the landing page for different devices

Mobile and extra small devices

Tablets and small devices

Desktop and large devices

Summary

4. Applying the Bootstrap Style

Changing our grid layout

Starting over the grid system

The header

The introduction header

The about section

The features section

The price table section

The footer

Forming the forms

Newsletter form

Contact form

Let's start with some JavaScript

The sign-in form

Images

Helpers

Floating and centering blocks

Context colors

Spacing

Responsive embeds

Summary

5. Making It Fancy

Using Bootstrap icons

Paying attention to your navigation

Until the navigation collapse

Using different attachments

Coloring the bar

Dropping it down

Customizing buttons dropdown

Making an input grouping

Getting ready for flexbox!

Understanding flexbox

Playing with Bootstrap and flexbox

Summary

6. Can You Build a Web App?

Understanding web applications

Creating the code structure

Adding the navigation

Adding the search input

Time for the menu options!

The option at the thumbnail

Adding the Tweet button

Customizing the navigation bar

Setting up the custom theme

Fixing the list navigation bar pseudo-classes

You deserve a badge!

Fixing some issues with the navigation bar

Do a grid again

Playing the cards

Learning cards in Bootstrap 4

Creating your own cards

Adding Cards to our web application

Another card using thumbnails

Implementing the main content

Making your feed

Doing some pagination

Creating breadcrumbs

Finishing with the right-hand-side content

Summary

7. Of Course, You Can Build a Web App!

Alerts in our web app

Dismissing alerts

Customizing alerts

Waiting for the progress bar

Progress bar options

Animating the progress bar

Creating a settings page

Pills of stack

Tabs in the middle

Adding the tab content

Using the Bootstrap tabs plugin

Creating content in the user info tab

The stats column

Labels and badges

Summary

8. Working with JavaScript

Understanding JavaScript plugins

The library dependencies

Data attributes

Bootstrap JavaScript events

Awesome Bootstrap modals

Modal general and content

The modal header

The modal body

The modal footer

Creating our custom modal

A tool for your tip

Pop it all over

Popover events

Making the menu affix

Finishing the web app

Summary

9. Entering in the Advanced Mode

The master plan

The last navigation bar with flexbox

The navigation search

The menu needs navigation

Checking the profile

Filling the main fluid content

From the side stacked menu

I heard that the left menu is great!

Learning the collapse plugin

Using some advanced CSS

Filling the main content

Rounding the charts

Creating a quick statistical card

Getting a spider chart

Overhead loading

Fixing the toggle button for mobile

Summary

10. Bringing Components to Life

Creating the main cards

The other card using Bootstrap components

Creating our last plot

Fixing the mobile viewport

Fixing the navigation menu

The notification list needs some style

Adding the missing left menu

Aligning the round charts

Learning more advanced plugins

Using the Bootstrap carousel

Customizing carousel items

Creating slide indicators

Adding navigation controls

Other methods and options for the carousel

The Bootstrap spy

Summary

11. Making It Your Taste

Customizing a Bootstrap component

The taste of your button

Using button toggle

The checkbox toggle buttons

The button as a radio button

Doing the JavaScript customization

Working with plugin customization

The additional Bootstrap plugins

Creating our Bootstrap plugin

Creating the plugin scaffold

Defining the plugin methods

The initialize method and plugin verifications

Adding the Bootstrap template

Creating the original template

The slide deck

The carousel indicators

The carousel controls

Initializing the original plugin

Making the plugin alive

Creating additional plugin methods

Summary

Index