[Link]-ebooks.

info
 Table of Contents

Foreword. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . vii
Preface. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ix

1. Bootstrap Scaffolding. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
What Is Bootstrap? 1
Bootstrap File Structure 2
Basic HTML Template 2
Global Styles 3
Default Grid System 3
Basic Grid HTML 4
Offsetting Columns 4
Nesting Columns 5
Fluid Grid System 5
Container Layouts 6
Responsive Design 6
What Is Responsive Design? 7

2. Bootstrap CSS. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
Typography 9
Headings 9
Lead Body Copy 10
Emphasis 11
Bold 11
Italics 11
Emphasis Classes 11
Lists 15
Code 17
Tables 18
Optional Table Classes 19

iii

[Link]
 Table Row Classes 20
Forms 21
Optional Form Layouts 22
Supported Form Controls 24
Extended Form Controls 27
Form Control Sizing 29
Form Control States 32
Buttons 34
Button Sizes 35
Disabled Button Styling 36
Images 37
Icons 38
GLYPHICONS Attribution 39
Usage 39

3. Bootstrap Layout Components. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41

Dropdown Menus 41
Options 42
Button Groups 42
Button Groups as Radio Buttons and Checkboxes 44
Buttons with Dropdowns 44
Split Button Dropdowns 45
Dropup Menus 46
Navigation Elements 46
Tabular Navigation 47
Basic Pills Navigation 47
Stackable Navigation 48
Dropdowns 49
Navigation Lists 50
Tabbable Navigation 51
Navbar 54
Navbar Links 54
Forms 55
Navbar Menu Variations 55
Breadcrumbs 58
Pagination 59
Pager 61
Labels 62
Badges 62
Typographic Elements 63
Hero Unit 63
Page Header 63

iv | Table of Contents

[Link]
 Thumbnails 64
Alerts 65
Progress Bars 66
Media Object 68
Miscellaneous 70
Wells 71
Helper Classes 72

4. Bootstrap JavaScript Plugins. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73

Overview 73
Programmatic API 74
Transitions 74
Modal 74
Usage 76
Options 76
Methods 77
Events 77
Dropdown 78
Usage 78
Dropdown Usage via JavaScript 79
Method 79
Scrollspy 79
Usage 79
.scrollspy('refresh') Method 80
Options 80
Event 81
Toggleable Tabs 81
Usage 82
Events 82
Tooltips 82
Usage 83
Options 83
Methods 83
Popover 84
Usage 85
Options 85
Methods 86
Alerts 86
Usage 87
Close Method 87
Events 87
Buttons 87

Table of Contents | v

[Link]
 Loading State 87
Single Toggle 88
Checkbox Buttons 88
Radio Buttons 89
Usage 89
Methods 89
Collapse 90
Usage 91
Options 91
Methods 92
Events 92
Carousel 93
Usage 94
Options 94
Methods 94
Events 95
Typeahead 95
Usage 95
Options 96
Affix 96
Usage 97
Option 97

5. Using Bootstrap. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99
GitHub Project 99
Customizing Bootstrap 99
Using LESS 100
Text Snippets 102
Photoshop Templates 103
Themes 104
Built with Bootstrap 104
Conclusion 104

Index. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105

vi | Table of Contents

[Link]
 Foreword

I was a software developer before Mac existed, so I remember how the tech industry
reacted to it. For the most part, the community reacted with a fair amount of skepticism.
The interesting thing is that the negative things people say about Bootstrap today sound
exactly like the negative things people said about the Mac in 1984. And in both cases,
the things that people didn’t like were what made them important.
Apple realized that there is a set of things that all software has to do, so why shouldn’t
they all do them the same way? If they did, software would be easier to develop and
debug, but more important—it would be easier to use. If there was only one way to
create menus, then once a user learned how to use the menus of one app, he would
already know how to use the menus of all others. The same is true with scrollbars,
windows, the keyboard, the mouse, printing, and sound.
The reason programmers didn’t like it, (and I was one of them) was that they took what
we did and commoditized it. Further, there were limits to the one-size-fits-all approach.
There were some apps that didn’t take to the UI standards very well. What to do about
them? Well, you adapted, that’s what you did.
This is a well-known technical process called factoring. If you see yourself doing some‐
thing over and over, do it one more time really well, work on the API so it’s easy and
flexible, and that’s it. You never do it again. It’s how you build ever-taller buildings out
of software. What was the leading edge five years ago is baked into the operating system
today. Progress. It’s a wonderful thing!
The same patterns are observable in the Web. In fact, it’s kind of sad how much of a
repeat it is, how backward today’s development environment is compared to the one
envisioned by the Mac. But at least Bootstrap is out there doing the factoring. If I want
to put up a menu, I can just use the code that creates menus. Sure, my menu looks like
all the others, but that’s a good thing for users. There is no need to learn a second or
third way to use a menu.

vii

[Link]
That this is needed, desperately needed, is indicated by the incredible uptake of Boot‐
strap. I use it in all the server software I’m working on. And it shows through in the
templating language I’m developing, so everyone who uses it will find it’s “just there”
and works any time you want to do a Bootstrap technique. Nothing to do; no libraries
to include. It’s as if it were part of the hardware. It’s the same approach that Apple took
with the Mac OS in 1984.
Like all important technologies, Bootstrap is “good enough” but not too good. In other
words, the designers, Mark Otto and Jacob Thornton, could have factored more than
they did. However, while they could have created something more compact and perhaps
more elegant, it wouldn’t have been nearly as approachable. The great thing about
Bootstrap for a guy like me, who has been busy building software behind websites, is
that it solves a whole bunch of problems that we all have when putting a user interface
on those sites.
However, I think that will turn out to be just the beginning. I see the opportunity for
Bootstrap to become an integral part of the Web—a toolkit that you can count on being
present in every environment you work in. Further, someday, perhaps soon, designers
will be able to plug in skins for Bootstrap that transform the appearance of a site without
any modification to the code or to its styles or scripts. I don’t see any limits to what can
be done with Bootstrap. Rather than being a replacement for designers, it creates op‐
portunities for designers to have more power and reach.
These days, part of the maturing process of any new technology is the release of its
O’Reilly book. Now Bootstrap has one. The author, Jake Spurlock, a web developer, has
been building sites with Bootstrap, has spoken at conferences about it, and he credits
me for getting him started with a series of enthusiastic blog posts I wrote as I was
discovering its power and elegance. Now, I can happily turn you over to Jake’s able hands.
He will show you how the Bootstrap magic works, so you too can help move the web
development world forward.
—Dave Winer
editor, Scripting News, January 2013, New York

viii | Foreword

[Link]