examples.html 8.85 KB
Newer Older
1
2
3
4
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
5
    <title>Examples · Twitter Bootstrap</title>
6
7
8
9
10
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Le styles -->
11
12
    <link href="assets/css/bootstrap.css" rel="stylesheet">
    <link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
13
14
15
    <link href="assets/css/docs.css" rel="stylesheet">
    <link href="assets/js/google-code-prettify/prettify.css" rel="stylesheet">

Mark Otto's avatar
Mark Otto committed
16
17
18
19
20
    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

21
22
    <!-- Le fav and touch icons -->
    <link rel="shortcut icon" href="assets/ico/favicon.ico">
Mark Otto's avatar
Mark Otto committed
23
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.png">
24
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png">
25
26
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
    <link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
27

28
29
  </head>

Jacob Thornton's avatar
Jacob Thornton committed
30
  <body data-spy="scroll" data-target=".subnav" data-offset="50">
31
32


33
34
  <!-- Navbar
    ================================================== -->
35
    <div class="navbar navbar-fixed-top">
36
37
      <div class="navbar-inner">
        <div class="container">
38
          <button type="button"class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
Mark Otto's avatar
Mark Otto committed
39
40
41
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
42
          </button>
43
          <a class="brand" href="./index.html">Bootstrap</a>
Jacob Thornton's avatar
Jacob Thornton committed
44
          <div class="nav-collapse collapse">
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
            <ul class="nav">
              <li class="">
                <a href="./index.html">Overview</a>
              </li>
              <li class="">
                <a href="./scaffolding.html">Scaffolding</a>
              </li>
              <li class="">
                <a href="./base-css.html">Base CSS</a>
              </li>
              <li class="">
                <a href="./components.html">Components</a>
              </li>
              <li class="">
                <a href="./javascript.html">Javascript plugins</a>
              </li>
              <li class="">
                <a href="./less.html">Using LESS</a>
              </li>
64
              <li class="divider-vertical"></li>
65
66
67
              <li class="">
                <a href="./download.html">Customize</a>
              </li>
68
69
70
              <li class="active">
                <a href="./examples.html">Examples</a>
              </li>
71
72
            </ul>
          </div>
73
74
75
76
        </div>
      </div>
    </div>

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
<div class="bs-docs-nav">
  <h3 class="bs-docs-logo">Bootstrap</h3>
  <ul>
<!--     <li class="">
      <a href="./index.html">Home</a>
    </li>
 -->
    <li class="">
      <a href="./scaffolding.html">Scaffolding</a>
      <ul>
        <li><a href="">Doctype</a></li>
        <li><a href="">Type and links</a></li>
        <li><a href="">Normalize reset</a></li>
        <li><a href="">Grid system</a></li>
        <li><a href="">Fluid grid system</a></li>
        <li><a href="">Layouts</a></li>
        <li><a href="">Responsive</a></li>
      </ul>
    </li>
    <li class="">
      <a href="./base-css.html">Base CSS</a>
      <ul>
        <li><a href="">Typography</a></li>
        <li><a href="">Code</a></li>
        <li><a href="">Tables</a></li>
        <li><a href="">Forms</a></li>
        <li><a href="">Buttons</a></li>
        <li><a href="">Glyphicons</a></li>
      </ul>
    </li>
    <li class="">
      <a href="./components.html">Components</a>
      <ul>
        <li><a href="#buttonGroups">Button groups</a></li>
        <li><a href="#buttonDropdowns">Button dropdowns</a></li>
        <li><a href="#navs">Nav, tabs, pills</a></li>
        <li><a href="#navbar">Navbar</a></li>
        <li><a href="#breadcrumbs">Breadcrumbs</a></li>
        <li><a href="#pagination">Pagination</a></li>
        <li><a href="#labels">Labels</a></li>
        <li><a href="#badges">Badges</a></li>
        <li><a href="#typography">Typography</a></li>
        <li><a href="#thumbnails">Thumbnails</a></li>
        <li><a href="#alerts">Alerts</a></li>
        <li><a href="#progress">Progress bars</a></li>
        <li><a href="#misc">Miscellaneous</a></li>
      </ul>
    </li>
    <li class="">
      <a href="./javascript.html">Javascript</a>
      <ul>
        <li><a href="#javascript">All plugins</a></li>
        <li><a href="#modals">Modal</a></li>
        <li><a href="#dropdowns">Dropdown</a></li>
        <li><a href="#scrollspy">Scrollspy</a></li>
        <li><a href="#tabs">Tab</a></li>
        <li><a href="#tooltips">Tooltip</a></li>
        <li><a href="#popovers">Popover</a></li>
        <li><a href="#alerts">Alert</a></li>
        <li><a href="#buttons">Button</a></li>
        <li><a href="#collapse">Collapse</a></li>
        <li><a href="#carousel">Carousel</a></li>
        <li><a href="#typeahead">Typeahead</a></li>
      </ul>
    </li>
    <li class="">
      <a href="./less.html">LESS</a>
      <ul>
        <li><a href="#builtWith">Built with Less</a></li>
        <li><a href="#variables">Variables</a></li>
        <li><a href="#mixins">Mixins</a></li>
        <li><a href="#compiling">Compiling Bootstrap</a></li>
      </ul>
    </li>
    <li class="">
      <a href="./download.html">Customize</a>
    </li>
    <li class="active">
      <a href="./examples.html">Examples</a>
    </li>
  </ul>
</div>

160
    <div class="bs-docs-container">
161
162
163
164
165

<!-- Masthead
================================================== -->
<header class="jumbotron subhead" id="overview">
  <h1>Bootstrap examples</h1>
166
  <p class="lead">We've included a few basic examples as starting points for your work with Bootstrap. We encourage folks to iterate on these examples and not simply use them as an end result.</p>
167
168
169
</header>


170
171
<ul class="thumbnails bootstrap-examples">
  <li class="span4">
Jacob Thornton's avatar
Jacob Thornton committed
172
    <a class="thumbnail" href="examples/hero.html">
173
      <img src="assets/img/examples/bootstrap-example-hero.jpg" alt="">
174
175
    </a>
    <h3>Basic marketing site</h3>
176
    <p>Featuring a hero unit for a primary message and three supporting elements.</p>
177
178
  </li>
  <li class="span4">
Jacob Thornton's avatar
Jacob Thornton committed
179
    <a class="thumbnail" href="examples/fluid.html">
180
      <img src="assets/img/examples/bootstrap-example-fluid.jpg" alt="">
181
182
    </a>
    <h3>Fluid layout</h3>
183
    <p>Uses our new responsive, fluid grid system to create a seamless liquid layout.</p>
184
185
  </li>
  <li class="span4">
Jacob Thornton's avatar
Jacob Thornton committed
186
    <a class="thumbnail" href="examples/starter-template.html">
187
      <img src="assets/img/examples/bootstrap-example-starter.jpg" alt="">
188
    </a>
189
190
    <h3>Starter template</h3>
    <p>A barebones HTML document with all the Bootstrap CSS and javascript included.</p>
191
192
  </li>
</ul>
193

194

195
196
197
198
199
200
     <!-- Footer
      ================================================== -->
      <footer class="footer">
        <p>Designed and built with all the love in the world <a href="http://twitter.com/twitter" target="_blank">@twitter</a> by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.</p>
        <p>Code licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>. Documentation licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
        <p>Icons from <a href="http://glyphicons.com">Glyphicons Free</a>, licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
201
        <p><a href="#">Back to top</a></p>
202
203
204
205
206
      </footer>

    </div><!-- /container -->


207
208
209

    <!-- Le javascript
    ================================================== -->
210
    <!-- Placed at the end of the document so the pages load faster -->
211
    <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
Jacob Thornton's avatar
Jacob Thornton committed
212
    <script src="assets/js/jquery.js"></script>
213
    <script src="assets/js/google-code-prettify/prettify.js"></script>
Jacob Thornton's avatar
Jacob Thornton committed
214
215
216
217
218
219
220
221
222
223
224
225
    <script src="assets/js/bootstrap-transition.js"></script>
    <script src="assets/js/bootstrap-alert.js"></script>
    <script src="assets/js/bootstrap-modal.js"></script>
    <script src="assets/js/bootstrap-dropdown.js"></script>
    <script src="assets/js/bootstrap-scrollspy.js"></script>
    <script src="assets/js/bootstrap-tab.js"></script>
    <script src="assets/js/bootstrap-tooltip.js"></script>
    <script src="assets/js/bootstrap-popover.js"></script>
    <script src="assets/js/bootstrap-button.js"></script>
    <script src="assets/js/bootstrap-collapse.js"></script>
    <script src="assets/js/bootstrap-carousel.js"></script>
    <script src="assets/js/bootstrap-typeahead.js"></script>
226
    <script src="assets/js/application.js"></script>
227
228


229
230
  </body>
</html>