-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
255 lines (203 loc) · 12.2 KB
/
index.html
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
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="Bootstrap, a sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<title>
Bootstrap · The world's most popular mobile-first and responsive front-end framework.
</title>
<!-- Bootstrap core CSS -->
<link href="/bootstrap-docs/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Documentation extras -->
<link href="/bootstrap-docs/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
<link rel="apple-touch-icon" href="/bootstrap-docs/apple-touch-icon.png">
<link rel="icon" href="/bootstrap-docs/favicon.ico">
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-146052-10', 'getbootstrap.com');
ga('send', 'pageview');
</script>
</head>
<body class="bd-home">
<a id="skippy" class="sr-only sr-only-focusable" href="#content">
<div class="container">
<span class="skiplink-text">Skip to main content</span>
</div>
</a>
<header class="navbar navbar-light navbar-static-top bd-navbar">
<div class="container">
<nav>
<div class="clearfix">
<button class="navbar-toggler pull-xs-right hidden-sm-up" type="button" data-toggle="collapse" data-target="#bd-main-nav" aria-controls="bd-main-nav" aria-expanded="false" aria-label="Toggle navigation">
☰
</button>
<a class="navbar-brand hidden-sm-up" href="/bootstrap-docs/">
Bootstrap
</a>
</div>
<div class="collapse navbar-toggleable-xs" id="bd-main-nav">
<ul class="nav navbar-nav">
<li class="nav-item active">
<a class="nav-item nav-link active" href="/bootstrap-docs/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Bootstrap</a>
</li>
<li class="nav-item">
<a class="nav-item nav-link " href="/bootstrap-docs/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Documentation</a>
</li>
<li class="nav-item">
<a class="nav-item nav-link " href="/bootstrap-docs/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
<li class="nav-item">
<a class="nav-item nav-link" href="http://themes.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');">Themes</a>
</li>
<li class="nav-item">
<a class="nav-item nav-link" href="http://expo.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');">Expo</a>
</li>
<li class="nav-item">
<a class="nav-item nav-link" href="http://blog.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');">Blog</a>
</li>
</ul>
</div>
</nav>
</div>
</header>
<main class="bd-masthead" id="content">
<div class="container">
<span class="bd-booticon outline">B</span>
<p class="lead">Bootstrap is the most popular HTML, CSS, and JS framework in the world for building responsive, mobile-first projects on the web.</p>
<p class="lead">
<a href="/bootstrap-docs/getting-started/download" class="btn btn-outline-inverse btn-lg" onclick="ga('send', 'event', 'Jumbotron actions', 'Download', 'Download 4.0.0-alpha.4');">Download Bootstrap</a>
</p>
<p class="version">Currently v4.0.0-alpha.4</p>
<script async type="text/javascript" src="https://cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
</div>
</main>
<div class="bd-featurette">
<div class="container">
<h2 class="bd-featurette-title">Easy to get started.</h2>
<p class="lead">Quickly include Bootstrap's CSS and JS into any project. Use your favorite package manager, download the source, or use the Bootstrap CDN.</p>
<div class="row">
<div class="col-sm-6 m-b-3">
<h4>Managed dependencies</h4>
<p>Include Bootstrap's source Sass and JavaScript files via Bower, Composer, Meteor, or npm. Package managed installs don't include documentation, but do include our Gruntfile and readme.</p>
<p>
<a class="btn btn-bs btn-outline" href="/bootstrap-docs/getting-started/download/#package-managers">View install methods</a>
</p>
</div>
<div class="col-sm-6 m-b-3">
<h4>Bootstrap CDN</h4>
<p>When you just need to include Bootstrap's compiled CSS and JS, use the Bootstrap CDN, free from the Max CDN folks.</p>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css"</span> <span class="na">integrity=</span><span class="s">"2hfp1SzUoho7/TsGGGDaFdsuuDL0LX2hnUp6VkX3CUQ2K4K+xjboZdsXyp4oUHZj"</span> <span class="na">crossorigin=</span><span class="s">"anonymous"</span><span class="nt">></span>
<span class="nt"><script </span><span class="na">src=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/js/bootstrap.min.js"</span> <span class="na">integrity=</span><span class="s">"VjEeINv9OSwtWFLAtmc4JCtEJXXBub00gtSnszmspDLCtC0I4z4nqz7rEFbIZLLU"</span> <span class="na">crossorigin=</span><span class="s">"anonymous"</span><span class="nt">></script></span></code></pre></figure>
</div>
</div>
<hr class="half-rule m-t-0">
<p><strong>Looking for something simpler?</strong> Customized builds of Bootstrap's CSS and JS are also available.</p>
<a href="/bootstrap-docs/getting-started/download/#custom-builds" class="btn btn-bs btn-outline">More download options</a>
</div>
</div>
<div class="bd-featurette">
<div class="container">
<h2 class="bd-featurette-title">Designed for everyone, everywhere.</h2>
<p class="lead">Bootstrap makes front-end web development faster and easier. It's made for folks of all skill levels, devices of all shapes, and projects of all sizes.</p>
<div class="row">
<div class="col-sm-4 m-b-3">
<img src="/bootstrap-docs/assets/img/sass.png" alt="Sass support" class="img-fluid">
<h4>Preprocessor</h4>
<p>Bootstrap ships with vanilla CSS, but its source code utilizes <a href="http://sass-lang.com/">Sass</a>, a popular CSS preprocessor. Quickly get started with precompiled CSS or build on the source.</p>
</div>
<div class="col-sm-4 m-b-3">
<img src="/bootstrap-docs/assets/img/devices.png" alt="Responsive across devices" class="img-fluid">
<h4>One framework, every device.</h4>
<p>Bootstrap easily and efficiently scales your websites and applications with a single code base, from phones to tablets to desktops with CSS media queries.</p>
</div>
<div class="col-sm-4 m-b-3">
<img src="/bootstrap-docs/assets/img/components.png" alt="Components" class="img-fluid">
<h4>Full of features</h4>
<p>With Bootstrap, you get extensive and beautiful documentation for common HTML elements, dozens of custom HTML and CSS components, and awesome jQuery plugins.</p>
</div>
</div>
<hr class="half-rule m-t-0">
<p><strong>Bootstrap is open source!</strong> It's hosted, developed, and maintained on GitHub by folks like you.</p>
<a href="https://github.com/twbs/bootstrap" class="btn btn-bs btn-outline">View the GitHub project</a>
</div>
</div>
<div class="bd-featurette">
<div class="container">
<h2 class="bd-featurette-title">Official Bootstrap Themes.</h2>
<p class="lead">
Take Bootstrap to the next level with official premium themes. Each theme is its own toolkit featuring all of Bootstrap, brand new components and plugins, full docs, build tools, and more.
</p>
<p class="lead">
<a href="http://themes.getbootstrap.com" class="btn btn-bs btn-outline">Browse themes</a>
</p>
<img class="img-fluid m-x-auto" src="/bootstrap-docs/assets/img/bs-themes.png" alt="Bootstrap Themes" width="1024" height="388">
</div>
</div>
<div class="bd-featurette">
<div class="container">
<h2 class="bd-featurette-title">Built with Bootstrap.</h2>
<p class="lead">Millions of amazing sites across the web are being built with Bootstrap. Get started on your own with our growing <a href="../examples">collection of examples</a> or by exploring some of our favorites.</p>
<div class="row bd-featured-sites">
<div class="col-xs-6 col-sm-3">
<a href="http://expo.getbootstrap.com/2014/10/29/lyft/" target="_blank" title="Lyft">
<img src="/bootstrap-docs/assets/img/expo-lyft.jpg" alt="Lyft" class="img-fluid">
</a>
</div>
<div class="col-xs-6 col-sm-3">
<a href="http://expo.getbootstrap.com/2014/09/30/vogue/" target="_blank" title="Vogue">
<img src="/bootstrap-docs/assets/img/expo-vogue.jpg" alt="Vogue" class="img-fluid">
</a>
</div>
<div class="col-xs-6 col-sm-3">
<a href="http://expo.getbootstrap.com/2014/03/13/riot-design/" target="_blank" title="Riot Design">
<img src="/bootstrap-docs/assets/img/expo-riot.jpg" alt="Riot Design" class="img-fluid">
</a>
</div>
<div class="col-xs-6 col-sm-3">
<a href="http://expo.getbootstrap.com/2014/02/12/newsweek/" target="_blank" title="Newsweek">
<img src="/bootstrap-docs/assets/img/expo-newsweek.jpg" alt="Newsweek" class="img-fluid">
</a>
</div>
</div>
<hr class="half-rule">
<p>We showcase dozens of inspiring projects built with Bootstrap on the Bootstrap Expo.</p>
<a href="http://expo.getbootstrap.com" class="btn btn-bs btn-outline">Explore the Expo</a>
</div>
</div>
<footer class="bd-footer text-muted">
<div class="container">
<ul class="bd-footer-links">
<li><a href="https://github.com/twbs/bootstrap">GitHub</a></li>
<li><a href="https://twitter.com/getbootstrap">Twitter</a></li>
<li><a href="/bootstrap-docs/examples/">Examples</a></li>
<li><a href="/bootstrap-docs/about/history/">About</a></li>
</ul>
<p>Designed and built with all the love in the world by <a href="https://twitter.com/mdo" target="_blank">@mdo</a> and <a href="https://twitter.com/fat" target="_blank">@fat</a>. Maintained by the <a href="https://github.com/orgs/twbs/people">core team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p>
<p>Currently v4.0.0-alpha.4. Code licensed <a rel="license" href="https://github.com/twbs/bootstrap/blob/master/LICENSE" target="_blank">MIT</a>, docs <a rel="license" href="https://creativecommons.org/licenses/by/3.0/" target="_blank">CC BY 3.0</a>.</p>
</div>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js" integrity="sha384-THPy051/pYDQGanwU6poAc/hOdQxjnOEXzbT+OuUAFqNqFjL+4IGLBgCJC3ZOShY" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="/bootstrap-docs/assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="/bootstrap-docs/assets/js/vendor/tether.min.js"></script>
<script src="/bootstrap-docs/dist/js/bootstrap.min.js"></script>
<script src="/bootstrap-docs/assets/js/docs.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="/bootstrap-docs/assets/js/ie10-viewport-bug-workaround.js"></script>
<script src="/bootstrap-docs/assets/js/ie-emulation-modes-warning.js"></script>
<script>
Holder.addTheme('gray', {
bg: '#777',
fg: 'rgba(255,255,255,.75)',
font: 'Helvetica',
fontweight: 'normal'
})
</script>
</body>
</html>