]>
Commit | Line | Data |
---|---|---|
91e44d91 S |
1 | --- |
2 | layout: simple | |
3 | title: Examples | |
4 | --- | |
5 | ||
6 | [Download the Bootstrap source code]({{ site.download.source }}) to snag these examples. | |
7 | ||
8 | ## Framework | |
9 | ||
10 | Examples that focus on implementing uses of built-in components provided by Bootstrap. | |
11 | ||
12 | <div class="row bd-examples"> | |
13 | <div class="col-6 col-md-4"> | |
14 | <a href="{{ site.baseurl }}/examples/starter-template/"> | |
15 | <img class="img-thumbnail" src="{{ site.baseurl }}/examples/screenshots/starter-template.jpg" alt=""> | |
16 | </a> | |
17 | <h4>Starter template</h4> | |
18 | <p>Nothing but the basics: compiled CSS and JavaScript.</p> | |
19 | </div> | |
20 | <div class="col-6 col-md-4"> | |
21 | <a href="{{ site.baseurl }}/examples/grid/"> | |
22 | <img class="img-thumbnail" src="{{ site.baseurl }}/examples/screenshots/grid.jpg" alt=""> | |
23 | </a> | |
24 | <h4>Grids</h4> | |
25 | <p>Multiple examples of grid layouts with all four tiers, nesting, and more.</p> | |
26 | </div> | |
27 | <div class="clearfix hidden-md-up"></div> | |
28 | ||
29 | <div class="col-6 col-md-4"> | |
30 | <a href="{{ site.baseurl }}/examples/jumbotron/"> | |
31 | <img class="img-thumbnail" src="{{ site.baseurl }}/examples/screenshots/jumbotron.jpg" alt=""> | |
32 | </a> | |
33 | <h4>Jumbotron</h4> | |
34 | <p>Build around the jumbotron with a navbar and some basic grid columns.</p> | |
35 | </div> | |
36 | <div class="col-6 col-md-4"> | |
37 | <a href="{{ site.baseurl }}/examples/narrow-jumbotron/"> | |
38 | <img class="img-thumbnail" src="{{ site.baseurl }}/examples/screenshots/jumbotron-narrow.jpg" alt=""> | |
39 | </a> | |
40 | <h4>Narrow jumbotron</h4> | |
41 | <p>Build a more custom page by narrowing the default container and jumbotron.</p> | |
42 | </div> | |
43 | </div> | |
44 | ||
45 | ## Navbars | |
46 | ||
47 | Taking the default navbar component and showing how it can be moved, placed, and extended. | |
48 | ||
49 | <div class="row bd-examples"> | |
50 | <div class="col-6 col-md-4"> | |
51 | <a href="{{ site.baseurl }}/examples/navbars/"> | |
52 | <img class="img-thumbnail" src="{{ site.baseurl }}/examples/screenshots/navbar.jpg" alt=""> | |
53 | </a> | |
54 | <h4>Navbar</h4> | |
55 | <p>Super basic template that includes the navbar along with some additional content.</p> | |
56 | </div> | |
57 | <div class="col-6 col-md-4"> | |
58 | <a href="{{ site.baseurl }}/examples/navbar-top/"> | |
59 | <img class="img-thumbnail" src="{{ site.baseurl }}/examples/screenshots/navbar-static.jpg" alt=""> | |
60 | </a> | |
61 | <h4>Static top navbar</h4> | |
62 | <p>Super basic template with a static top navbar along with some additional content.</p> | |
63 | </div> | |
64 | <div class="clearfix hidden-md-up"></div> | |
65 | ||
66 | <div class="col-6 col-md-4"> | |
67 | <a href="{{ site.baseurl }}/examples/navbar-top-fixed/"> | |
68 | <img class="img-thumbnail" src="{{ site.baseurl }}/examples/screenshots/navbar-fixed.jpg" alt=""> | |
69 | </a> | |
70 | <h4>Fixed navbar</h4> | |
71 | <p>Super basic template with a fixed top navbar along with some additional content.</p> | |
72 | </div> | |
73 | </div> | |
74 | ||
75 | ## Custom components | |
76 | ||
77 | Brand new components and templates to help folks quickly get started with Bootstrap and demonstrate best practices for adding onto the framework. | |
78 | ||
79 | <div class="row bd-examples"> | |
80 | <div class="col-6 col-md-4"> | |
81 | <a href="{{ site.baseurl }}/examples/album/"> | |
82 | <img class="img-thumbnail" src="{{ site.baseurl }}/examples/screenshots/album.jpg" alt=""> | |
83 | </a> | |
84 | <h4>Album</h4> | |
85 | <p>Simple one-page template for photo galleries, portfolios, and more.</p> | |
86 | </div> | |
87 | <div class="col-6 col-md-4"> | |
88 | <a href="{{ site.baseurl }}/examples/cover/"> | |
89 | <img class="img-thumbnail" src="{{ site.baseurl }}/examples/screenshots/cover.jpg" alt=""> | |
90 | </a> | |
91 | <h4>Cover</h4> | |
92 | <p>A one-page template for building simple and beautiful home pages.</p> | |
93 | </div> | |
94 | <div class="clearfix hidden-md-up"></div> | |
95 | ||
96 | <div class="col-6 col-md-4"> | |
97 | <a href="{{ site.baseurl }}/examples/carousel/"> | |
98 | <img class="img-thumbnail" src="{{ site.baseurl }}/examples/screenshots/carousel.jpg" alt=""> | |
99 | </a> | |
100 | <h4>Carousel</h4> | |
101 | <p>Customize the navbar and carousel, then add some new components.</p> | |
102 | </div> | |
103 | <div class="col-6 col-md-4"> | |
104 | <a href="{{ site.baseurl }}/examples/blog/"> | |
105 | <img class="img-thumbnail" src="{{ site.baseurl }}/examples/screenshots/blog.jpg" alt=""> | |
106 | </a> | |
107 | <h4>Blog</h4> | |
108 | <p>Simple two-column blog layout with custom navigation, header, and type.</p> | |
109 | </div> | |
110 | <div class="clearfix hidden-md-up"></div> | |
111 | ||
112 | <div class="col-6 col-md-4"> | |
113 | <a href="{{ site.baseurl }}/examples/dashboard/"> | |
114 | <img class="img-thumbnail" src="{{ site.baseurl }}/examples/screenshots/dashboard.jpg" alt=""> | |
115 | </a> | |
116 | <h4>Dashboard</h4> | |
117 | <p>Basic admin dashboard shell with fixed sidebar and navbar.</p> | |
118 | </div> | |
119 | <div class="col-6 col-md-4"> | |
120 | <a href="{{ site.baseurl }}/examples/signin/"> | |
121 | <img class="img-thumbnail" src="{{ site.baseurl }}/examples/screenshots/sign-in.jpg" alt=""> | |
122 | </a> | |
123 | <h4>Sign-in page</h4> | |
124 | <p>Custom form layout and design for a simple sign in form.</p> | |
125 | </div> | |
126 | <div class="clearfix hidden-md-up"></div> | |
127 | ||
128 | <div class="col-6 col-md-4"> | |
129 | <a href="{{ site.baseurl }}/examples/justified-nav/"> | |
130 | <img class="img-thumbnail" src="{{ site.baseurl }}/examples/screenshots/justified-nav.jpg" alt=""> | |
131 | </a> | |
132 | <h4>Justified nav</h4> | |
133 | <p>Create a custom navbar with justified links. Heads up! Not too Safari friendly.</p> | |
134 | </div> | |
135 | <div class="col-6 col-md-4"> | |
136 | <a href="{{ site.baseurl }}/examples/sticky-footer/"> | |
137 | <img class="img-thumbnail" src="{{ site.baseurl }}/examples/screenshots/sticky-footer.jpg" alt=""> | |
138 | </a> | |
139 | <h4>Sticky footer</h4> | |
140 | <p>Attach a footer to the bottom of the viewport when the content is shorter than it.</p> | |
141 | </div> | |
142 | <div class="clearfix hidden-md-up"></div> | |
143 | ||
144 | <div class="col-6 col-md-4"> | |
145 | <a href="{{ site.baseurl }}/examples/sticky-footer-navbar/"> | |
146 | <img class="img-thumbnail" src="{{ site.baseurl }}/examples/screenshots/sticky-footer-navbar.jpg" alt=""> | |
147 | </a> | |
148 | <h4>Sticky footer w/ navbar</h4> | |
149 | <p>Attach a footer to the bottom of the viewport with a fixed top navbar.</p> | |
150 | </div> | |
151 | </div> | |
152 | ||
153 | ## Experiments | |
154 | ||
155 | Examples that focus on future-friendly features or techniques. | |
156 | ||
157 | <div class="row bd-examples"> | |
158 | <div class="col-6 col-md-4"> | |
159 | <a href="{{ site.baseurl }}/examples/offcanvas/"> | |
160 | <img class="img-thumbnail" src="{{ site.baseurl }}/examples/screenshots/offcanvas.jpg" alt=""> | |
161 | </a> | |
162 | <h4>Offcanvas</h4> | |
163 | <p>Build a toggleable off-canvas navigation menu for use with Bootstrap.</p> | |
164 | </div> | |
165 | </div> |