Kyrnin, J. (2016) Sams Teach Yourself Bootstrap in 24 Hours, Sams Publishing
Companion Web Site (with code listings and examples (See below)): https://www.html5in24hours.com/books/teach-yourself-bootstrap-in-24-hours/
In just 24 lessons of one hour or less, Sams Teach Yourself Bootstrap in 24 Hours helps you use the free and open source Bootstrap framework to quickly build websites that automatically reflect each user’s device and experience, without complex hand crafting.
This book’s straightforward, step-by-step approach shows you how to install Bootstrap and quickly build basic sites; extend them with styles, components, and JavaScript plug-ins, and even create sophisticated designs with advanced features. In just a few hours, you’ll be using Bootstrap to bring responsive design to virtually any site. Every lesson builds on what you’ve already learned, giving you a rock-solid foundation for real-world success.
- Step-by-step instructions carefully walk you through the most common Bootstrap development tasks
- Practical, hands-on examples show you how to apply what you learn
- Quizzes and exercises help you test your knowledge and stretch your skills
- Notes and tips point out shortcuts and solution
Learn how to…
- Download Bootstrap and integrate it into your project
- Quickly build your first Bootstrap site with the basic template
- Create beautiful and responsive site layouts with Bootstrap’s built-in grids
- Display more interesting text with labels, badges, panels, and wells
- Style tables and forms so they’re attractive, readable, and responsive
- Use images, media, and icons, including free Glyphicons
- Quickly create navigation and buttons, including dropdowns and search fields
- Add alignment, color, and visibility with Bootstrap’s CSS utilities
- Extend your site with alerts, image carousels, and other JavaScript plugins
- Rapidly create appealing functional prototypes
- Customize Bootstrap with CSS, Less, and Sass
- Lighten Bootstrap downloads by stripping out unnecessary features
- Build accessible sites
- Create complex designs that don’t look generic
Who This Book is For
- Those who already have an understanding of the basics of HTML and CSS
- Having an understanding of JavaScript will make this book a bit easier to absorb, but it is not required because the basics of JavaScript are covered
Contents at a Glance
Part I: Getting Started with Bootstrap
Hour 1: What Is Bootstrap, and Why You Should Use It
Hour 2: Downloading and Installing Bootstrap
Hour 3: Build Your First Bootstrap Website with the Basic Template
Hour 4: Understanding Normalize.CSS and the Basics of Bootstrap CSS
Part II: Building and Managing Web Pages with Bootstrap
Hour 5: Grids and How to Use Them
Hour 6: Labels, Badges, Panels, Wells, and the Jumbotron
Hour 7: Bootstrap Typography
Hour 8: Styling Tables
Hour 9: Styling Forms
Hour 10: Images, Media Objects, and Glyphicons
Hour 11: Styling and Using Buttons and Button Groups
Hour 12: Creating Navigation Systems with Bootstrap
Hour 13: Bootstrap Utilities
Part III: Bootstrap JavaScript Plugins
Hour 14: Using Bootstrap JavaScript Plugins
Hour 15: Modal Windows
Hour 16: Affix, Tab, and ScrollSpy
Hour 17: Popovers and Tooltips
Hour 18: Transitions, Buttons, Alerts, and Progress Bars
Hour 19: Collapse and Accordion
Hour 20: Carousels
Part IV: Customizing Bootstrap
Hour 21: Customizing Bootstrap and Your Bootstrap Website
Hour 22: Making Bootstrap Accessible
Hour 23: Using Less and Sass with Bootstrap
Hour 24: Going Further with Bootstrap
Table of Contents
Introduction
Part I: Getting Started with Bootstrap
Hour 1: What Is Bootstrap, and Why You Should Use It
What Is a Web Framework?
What Is Bootstrap?
How Is Bootstrap Different from Other Frameworks?
Why You Should Use Bootstrap
Hour 2: Downloading and Installing Bootstrap
Where to Get Bootstrap
Other Ways to Get Bootstrap
Hour 3: Build Your First Bootstrap Website with the Basic Template
The Minimum Bootstrap Page
The Basic Bootstrap Template
More Bootstrap Sample Templates
Hour 4: Understanding Normalize.CSS and the Basics of Bootstrap CSS
What Is Normalize.CSS?
Understanding the Bootstrap Infrastructure
Part II: Building and Managing Web Pages with Bootstrap
Hour 5: Grids and How to Use Them
Grids in Design
The Bootstrap Grid System
How to Create Grids in Bootstrap
Responsive Web Layouts in Bootstrap
Hour 6: Labels, Badges, Panels, Wells, and the Jumbotron
Labels and Badges
Wells and Panels
The Jumbotron
Hour 7: Bootstrap Typography
Basic Typography in Bootstrap
Headings
Body Copy Text
Other Text Blocks
Hour 8: Styling Tables
Basic Tables
Bootstrap Table Classes
Panels with Tables
Responsive Tables
Hour 9: Styling Forms
Basic Forms
Form Controls Supported by Bootstrap
Input Groups
Interactivity in Bootstrap Forms
Hour 10: Images, Media Objects, and Glyphicons
Images
Media Objects
Thumbnails
Glyphicons
Hour 11: Styling and Using Buttons and Button Groups
Basic Buttons
Button Groups
Button JavaScript
Hour 12: Creating Navigation Systems with Bootstrap
Standard Navigation Elements
Dropdowns
Navbars
Changing the Navbar Colors and Alignment
Breadcrumbs and Pagination
List Groups
Hour 13: Bootstrap Utilities
Helper Classes
Responsive Utilities
Print Classes
Responsive Embed
Accessibility in Bootstrap
Part III: Bootstrap JavaScript Plugins
Hour 14: Using Bootstrap JavaScript Plugins
How to Use Bootstrap JavaScript Plugins
Setting Options for Plugins
Using the JavaScript API
Hour 15: Modal Windows
What Is a Modal Window?
How to Build a Modal Window
Modifying Modals
Hour 16: Affix, Tab, and ScrollSpy
Affix
Tab
ScrollSpy
Using These Plugins Together
Hour 17: Popovers and Tooltips
Tooltips
Popovers
Hour 18: Transitions, Buttons, Alerts, and Progress Bars
Transitions
Buttons
Alerts
Progress Bars
Hour 19: Collapse and Accordion
The Collapse Plugin
Accordions
Hour 20: Carousels
Creating Carousels
Using the Carousel Plugin
Carousels on the Web
Part IV: Customizing Bootstrap
Hour 21: Customizing Bootstrap and Your Bootstrap Website
Using Your Own CSS
Using the Bootstrap Customizer
Using a Third-Party Bootstrap Customizer
Hour 22: Making Bootstrap Accessible
What Is Accessibility?
Accessible Design in Bootstrap
Tricks for Making Bootstrap Sites Accessible
Hour 23: Using Less and Sass with Bootstrap
What Is a CSS Preprocessor?
Using Less
Using Sass
Hour 24: Going Further with Bootstrap
Bootstrap Editors
Using Bootstrap in WordPress
Extending Bootstrap with Third-Party Add-ons
The Bootstrap Community
Beautiful Bootstrap Websites
Code Listings
1. What is a Framework and Why You Should Use It
2. Downloading and Installing Bootstrap
3. Build Your First Bootstrap Website with the Basic Template
4. Understanding Normalize.CSS and the Basics of Bootstrap CSS
Part 2: Building and Managing Web Pages with Bootstrap
5. Grids and How to Use Them
6. Labels, Badges, Panels, Wells, and the Jumbotron
- Listing 6.1
- Listing 6.2
- Listing 6.3
- Listing 6.4
- Listing 6.5
- Listing 6.6
- Listing 6.7
- Listing 6.8
- Listing 6.9
- Listing 6.10
7. Bootstrap Typography
8. Styling Tables
9. Styling Forms
- Listing 9.1
- Listing 9.2
- Listing 9.3
- Listing 9.4
- Listing 9.5
- Listing 9.6
- Listing 9.7
- Listing 9.8
- Listing 9.9
- Listing 9.10
- Listing 9.11
- Listing 9.12
- Listing 9.13
10. Images and Glyphicons
- Listing 10.1
- Listing 10.2
- Listing 10.3
- Listing 10.4
- Listing 10.5
- Listing 10.6
- Listing 10.7
- Listing 10.8
11. Styling and Using Buttons and Button Groups
12. Creating Navigation Systems with Bootstrap
- Listing 12.1
- Listing 12.2
- Listing 12.3
- Listing 12.4
- Listing 12.5
- Listing 12.6
- Listing 12.7
- Listing 12.8
- Listing 12.9
- Listing 12.10
- Listing 12.11
- Listing 12.12
- Listing 12.13
- Listing 12.14
- Listing 12.15
- Listing 12.16
- Listing 12.17
13. Bootstrap Utilities
- Listing 13.1
- Listing 13.2
- Listing 13.3
- Listing 13.4
- Listing 13.5
- Listing 13.6
- Listing 13.7
- Listing 13.8
Part 3: Bootstrap JavaScript Plugins
14. Using Bootstrap JavaScript Plugins
- Listing 14.1
- Listing 14.2
- Listing 14.3
- Listing 14.4
- Listing 14.5
- Listing 14.6
- Listing 14.7
- Listing 14.8
15. Modal Windows
- Listing 15.1
- Listing 15.2
- Listing 15.3
- Listing 15.4
- Listing 15.5
- Listing 15.6
- Listing 15.7
- Listing 15.8
- Listing 15.9
16. Affix, Tab, and Scrollspy
- Listing 16.1
- Listing 16.2
- Listing 16.3
- Listing 16.4
- Listing 16.5
- Listing 16.6
- Listing 16.7
- Listing 16.8
17. Popovers and Tooltips
18. Transitions, Buttons, Alerts, and Progress Bars
- Listing 18.1
- Listing 18.2
- Listing 18.3
- Listing 18.4
- Listing 18.5
- Listing 18.6
- Listing 18.7
- Listing 18.8
- Listing 18.9
- Listing 18.10
- Listing 18.11
- Listing 18.12
- Listing 18.13
19. Collapse and Accordion
20. Carousels
Part 4: Customizing Bootstrap
21. Customizing Bootstrap and Your Bootstrap Website
22. Making Bootstrap Accessible
23. Using Less and Sass with Bootstrap
- Listing 23.1
- Listing 23.2
- Listing 23.3
- Listing 23.4
- Listing 23.5
- Listing 23.6
- Listing 23.7
- Listing 23.8
- Listing 23.9
- Listing 23.10
- Listing 23.11
- Listing 23.12
24. Going Further with Bootstrap
Examples
Hour 3
Hour 4
Hour 5
Example 5.2
Example 5.3
Example 5.4
Example 5.8
Hour 6
Example 6.1
Example 6.2
Example 6.3
Example 6.4
Example 6.5
Example 6.6
Example 6.7
Example 6.8
Hour 7
Example 7.1
Example 7.2
Example 7.3
Example 7.4
Example 7.5
Example 7.6
Example 7.7
Example 7.8
Example 7.9
Example 7.10
Example 7.11
Example 7.12
Example 7.13
Example 7.14
Example 7.14a
Example 7.15
Example 7.16
Hour 8
Example 8.1
Example 8.2
Example 8.3
Example 8.4
Example 8.5
Hour 9
Example 9.1
Example 9.2
Example 9.3
Example 9.4
Example 9.5
Example 9.6
Example 9.7
Example 9.8
Example 9.9
Example 9.10
Example 9.11
Example 9.12
Example 9.13
Hour 10
Example 10.1
Example 10.2
Example 10.3
Example 10.4
Example 10.5
Example 10.6
Hour 11
Example 11.1
Example 11.2
Example 11.3
Example 11.4
Example 11.5
Example 11.6
Example 11.7
Example 11.8
Example 11.9
Example 11.10
Hour 12
Example 12.1
Example 12.2
Example 12.3
Example 12.4
Example 12.5
Example 12.6
Example 12.7
Example 12.8
Example 12.9
Example 12.10
Example 12.11
Example 12.12
Example 12.13
Example 12 dropup
Example 12 listgroup
Hour 13
Example 13.1
Example 13.2
Example 13.3
Example 13.4
Example 13 clearfix
Hour 14
Hour 15
Example 15.1
Example 15.2
Example 15.3
Hour 16
Example 16.1
Example 16 affix
Example 16 scrollspy
Example 16 tab
Hour 17
Example 17.1
Example 17.2
Example 17.3
Example 17.4
Example 17.5
Hour 18
Example 18.1
Example 18.2
Example 18.3
Example 18.4
Example 18.5
Example 18.6
Example 18.7
Example 18 alert
Hour 19
Example 19.1
Example 19.2
Example 19.3
Example 19 accordion
Example 19 accordion menu
Example 19 collapse
Example 19 collapse horizontally
Hour 20
Example 20.1
Example 20.2
Example 20.3
Example 20 alternatives
Hour 21
Example 21.1
Example 21.2
Example 21.8
Hour 22