1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
|
<div class="bs-docs-section">
<h1 id="examples" class="page-header">Examples</h1>
<p class="lead">Build on the basic template above with Bootstrap's many components. We encourage you to customize and adapt Bootstrap to suit your individual project's needs.</p>
<p>Get the source code for every example below by <a href="{{ site.download.source }}">downloading the Bootstrap repository</a>. Examples can be found in the <code>docs/examples/</code> directory.</p>
<h2 id="examples-framework">Using the framework</h2>
<div class="row bs-examples">
<div class="col-xs-6 col-md-4">
<a class="thumbnail" href="../examples/starter-template/">
<img src="../examples/screenshots/starter-template.jpg" alt="Starter template example" width="800" height="600">
</a>
<h3>Starter template</h3>
<p>Nothing but the basics: compiled CSS and JavaScript along with a container.</p>
</div>
<div class="col-xs-6 col-md-4">
<a class="thumbnail" href="../examples/theme/">
<img src="../examples/screenshots/theme.jpg" alt="Bootstrap theme example" width="800" height="600">
</a>
<h3>Bootstrap theme</h3>
<p>Load the optional Bootstrap theme for a visually enhanced experience.</p>
</div>
<div class="clearfix visible-xs"></div>
<div class="col-xs-6 col-md-4">
<a class="thumbnail" href="../examples/grid/">
<img src="../examples/screenshots/grid.jpg" alt="Multiple grids example" width="800" height="600">
</a>
<h3>Grids</h3>
<p>Multiple examples of grid layouts with all four tiers, nesting, and more.</p>
</div>
<div class="col-xs-6 col-md-4">
<a class="thumbnail" href="../examples/jumbotron/">
<img src="../examples/screenshots/jumbotron.jpg" alt="Jumbotron example" width="800" height="600">
</a>
<h3>Jumbotron</h3>
<p>Build around the jumbotron with a navbar and some basic grid columns.</p>
</div>
<div class="clearfix visible-xs"></div>
<div class="col-xs-6 col-md-4">
<a class="thumbnail" href="../examples/jumbotron-narrow/">
<img src="../examples/screenshots/jumbotron-narrow.jpg" alt="Narrow jumbotron example" width="800" height="600">
</a>
<h3>Narrow jumbotron</h3>
<p>Build a more custom page by narrowing the default container and jumbotron.</p>
</div>
</div>
<h2 id="examples-navbars">Navbars in action</h2>
<div class="row bs-examples">
<div class="col-xs-6 col-md-4">
<a class="thumbnail" href="../examples/navbar/">
<img src="../examples/screenshots/navbar.jpg" alt="Navbar example" width="800" height="600">
</a>
<h3>Navbar</h3>
<p>Super basic template that includes the navbar along with some additional content.</p>
</div>
<div class="col-xs-6 col-md-4">
<a class="thumbnail" href="../examples/navbar-static-top/">
<img src="../examples/screenshots/navbar-static.jpg" alt="Static top navbar example" width="800" height="600">
</a>
<h3>Static top navbar</h3>
<p>Super basic template with a static top navbar along with some additional content.</p>
</div>
<div class="clearfix visible-xs"></div>
<div class="col-xs-6 col-md-4">
<a class="thumbnail" href="../examples/navbar-fixed-top/">
<img src="../examples/screenshots/navbar-fixed.jpg" alt="Fixed navbar example" width="800" height="600">
</a>
<h3>Fixed navbar</h3>
<p>Super basic template with a fixed top navbar along with some additional content.</p>
</div>
</div>
<h2 id="examples-custom">Custom components</h2>
<div class="row bs-examples">
<div class="col-xs-6 col-md-4">
<a class="thumbnail" href="../examples/cover/">
<img src="../examples/screenshots/cover.jpg" alt="A one-page template example" width="800" height="600">
</a>
<h3>Cover</h3>
<p>A one-page template for building simple and beautiful home pages.</p>
</div>
<div class="col-xs-6 col-md-4">
<a class="thumbnail" href="../examples/carousel/">
<img src="../examples/screenshots/carousel.jpg" alt="Carousel example" width="800" height="600">
</a>
<h3>Carousel</h3>
<p>Customize the navbar and carousel, then add some new components.</p>
</div>
<div class="clearfix visible-xs"></div>
<div class="col-xs-6 col-md-4">
<a class="thumbnail" href="../examples/blog/">
<img src="../examples/screenshots/blog.jpg" alt="Blog layout example" width="800" height="600">
</a>
<h3>Blog</h3>
<p>Simple two-column blog layout with custom navigation, header, and type.</p>
</div>
<div class="col-xs-6 col-md-4">
<a class="thumbnail" href="../examples/dashboard/">
<img src="../examples/screenshots/dashboard.jpg" alt="Dashboard example" width="800" height="600">
</a>
<h3>Dashboard</h3>
<p>Basic structure for an admin dashboard with fixed sidebar and navbar.</p>
</div>
<div class="clearfix visible-xs"></div>
<div class="col-xs-6 col-md-4">
<a class="thumbnail" href="../examples/signin/">
<img src="../examples/screenshots/sign-in.jpg" alt="Sign-in page example" width="800" height="600">
</a>
<h3>Sign-in page</h3>
<p>Custom form layout and design for a simple sign in form.</p>
</div>
<div class="col-xs-6 col-md-4">
<a class="thumbnail" href="../examples/justified-nav/">
<img src="../examples/screenshots/justified-nav.jpg" alt="Justified nav example" width="800" height="600">
</a>
<h3>Justified nav</h3>
<p>Create a custom navbar with justified links. Heads up! <a href="{{ site.baseurl }}/components/#nav-justified">Not too Safari friendly.</a></p>
</div>
<div class="clearfix visible-xs"></div>
<div class="col-xs-6 col-md-4">
<a class="thumbnail" href="../examples/sticky-footer/">
<img src="../examples/screenshots/sticky-footer.jpg" alt="Sticky footer example" width="800" height="600">
</a>
<h3>Sticky footer</h3>
<p>Attach a footer to the bottom of the viewport when the content is shorter than it.</p>
</div>
<div class="col-xs-6 col-md-4">
<a class="thumbnail" href="../examples/sticky-footer-navbar/">
<img src="../examples/screenshots/sticky-footer-navbar.jpg" alt="Sticky footer with navbar example" width="800" height="600">
</a>
<h3>Sticky footer with navbar</h3>
<p>Attach a footer to the bottom of the viewport with a fixed navbar at the top.</p>
</div>
</div>
<h2 id="examples-experiments">Experiments</h2>
<div class="row bs-examples">
<div class="col-xs-6 col-md-4">
<a class="thumbnail" href="../examples/non-responsive/">
<img src="../examples/screenshots/non-responsive.jpg" alt="Non-responsive example" width="800" height="600">
</a>
<h3>Non-responsive Bootstrap</h3>
<p>Easily disable the responsiveness of Bootstrap <a href="#disable-responsive">per our docs</a>.</p>
</div>
<div class="col-xs-6 col-md-4">
<a class="thumbnail" href="../examples/offcanvas/">
<img src="../examples/screenshots/offcanvas.jpg" alt="Off-canvas navigation example" width="800" height="600">
</a>
<h3>Off-canvas</h3>
<p>Build a toggleable off-canvas navigation menu for use with Bootstrap.</p>
</div>
</div>
</div>
|
