Bootstrap Site Blueprints电子书

Bootstrap Site Blueprints

Table of Contents

Bootstrap Site Blueprints

Credits

About the Authors

About the Reviewers

www.PacktPub.com

Support files, eBooks, discount offers, and more

Why subscribe?

Free access for Packt account holders

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

1. Getting Started with Bootstrap

Quantity and quality

Improving with age

The power of leaner CSS

Downloading Bootstrap

The files you'll have

Preparing a project template folder

Getting H5BP

Deleting unnecessary Boilerplate files

Evaluating the Boilerplate .htaccess file

Updating required Boilerplate files

Updating the favicon and touch icons

Pulling in the Bootstrap files

Fonts

JavaScript

Holding off on the CSS

Bringing the LESS files over

Taking inventory

Setting up the HTML template file

Giving your site a title

Adjusting the outdated browser message

Setting up major structural elements

Providing a navbar markup

Compiling and linking default Bootstrap CSS

Compiling Bootstrap CSS

Completing the responsive navbar

Troubleshooting

Adding support for Internet Explorer 8

Summary

2. Bootstrappin' Your Portfolio

What we'll build

Surveying the exercise files

Marking up the carousel

Creating responsive columns

Turning links into buttons

Understanding the power of LESS

Nested rules

Variables

Mixins

Operations

Importing files

The modular file organization

Customizing Bootstrap's LESS according to our needs

Customizing variables

Importing our new variables

Editing navbar variables

Adding the logo image

Adjusting nav item padding

Adding icons

Adding Font Awesome icons

Adjusting the navbar icon color

Adjusting the responsive navbar breakpoint

Styling the carousel

Setting Font Awesome icons for the controls

Adding top and bottom padding

Forcing images to their full width

Constraining the carousel height

Repositioning the carousel indicators

Styling the indicators

Tweaking the columns and their content

Styling the footer

Recommended next steps

Summary

3. Bootstrappin' a WordPress Theme

Downloading and renaming the Roots theme

Installing the theme

Configuring the navbar

Bringing in our home page content

Adding images

Customizing a page template

Understanding the Roots base template

Creating a custom base template

Using custom fields for a custom structure

Creating a custom content template

Building our carousel from custom fields

Adding our content columns from custom fields

Putting the footer content in place

Surveying the Roots assets folder

Swapping design assets

Connecting our stylesheet

Connecting our JavaScript files

Adding logo images to the navbar and footer

Adding icon links

Adding back WordPress-specific styles

Summary

4. Bootstrappin' Business

Sizing up our beginning files

Creating a complex banner area

Placing a logo above the navbar

Reviewing and checking navbar dropdown items

Adding utility navigation

Making responsive adjustments

Implementing the color scheme

Styling the collapsed navbar

Styling the horizontal navbar

Designing a complex responsive layout

Adjusting the medium and wide layout

Adjusting headings, font sizes, and buttons

Enhancing the primary column

Adjusting the tertiary column

Fine touches for multiple viewports

Laying out a complex footer

Setting up the markup

Adjusting for tablet-width viewports

Adding a targeted responsive clearfix

Refining the details

Summary

5. Bootstrappin' E-commerce

Surveying the markup for our products page

Styling the breadcrumbs, page title, and pagination

Adjusting the products grid

Styling the options sidebar

Setting up basic styles

Styling the Clearance Sale link

Styling the options list

Adding Font Awesome checkboxes to our option links

Using LESS mixins to arrange option links in columns

Adjusting the options list layout for tablets and phones

Collapsing the options panel for phone users

Summary

6. Bootstrappin' a One-page Marketing Website

Overview

Surveying the starter files

Viewing the page content

Adjusting the navbar

Customizing the jumbotron

Refining the jumbotron message design

Beautifying the features list

Tackling customer reviews

Positioning and styling the captions

Refining the caption position

Adding Bootstrap grid classes

Downloading and linking up the Masonry JavaScript plugin

Initializing Masonry JavaScript on our reviews layout

Cutting and trimming our bricks

Adjusting for tiny screens

Creating attention-grabbing pricing tables

Setting up the variables, files, and markup

Beautifying the table head

Styling the table body and foot

Differentiating the packages

Adjusting for small viewports

Providing visual hierarchy to our tables

Adding the final touches

Adding ScrollSpy to the navbar

Animating the scroll

Summary

A. Optimizing Site Assets

Optimizing images

Optimizing CSS

Optimizing JavaScript

Our optimized results

B. Implementing Responsive Images

Considering our portfolio carousel

Choosing a solution from the available solutions

Preparing our responsive images

Plugging in the JavaScript

Implementing the markup structure

Testing and adjusting

Our end results

C. Adding Swipe to the Carousel

Considering our options

Getting and including the TouchSwipe plugin

Initializing TouchSwipe

Index