-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
314 lines (282 loc) · 20.1 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
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap 4 in TailwindCSS</title>
<!-- Tailwind core CSS -->
<link rel="stylesheet prefetch" href="https://unpkg.com/[email protected]/dist/tailwind.min.css">
<!-- Custom CSS -->
<style>
.caret-down::after {
display: inline-block;
width: 0;
height: 0;
margin-left: .255em;
vertical-align: .255em;
content: "";
border-top: .3em solid;
border-right: .3em solid transparent;
border-bottom: 0;
border-left: .3em solid transparent;
}
</style>
<!-- Favicons -->
<link rel="apple-touch-icon" href="./assets/img/favicons/apple-touch-icon.png" sizes="180x180">
<link rel="icon" href="./assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
<link rel="icon" href="./assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
<link rel="manifest" href="./assets/img/favicons/manifest.json">
<link rel="mask-icon" href="./assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
<link rel="icon" href="./favicon.ico">
<meta name="msapplication-config" content="./assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
</head>
<body class="font-sans">
<header class="bg-purple-dark">
<div class="mx-auto px-2 lg:px-4 py-2">
<div class="flex items-center px-10">
<div class="flex flex-col w-full md:w-auto items-center md:flex-row">
<a href="#" class="text-white md:mr-2 py-1">
<svg width="36" height="36" viewBox="0 0 612 612" xmlns="http://www.w3.org/2000/svg"
focusable="false"><title>Bootstrap</title>
<path fill="currentColor"
d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"></path>
<path fill="currentColor"
d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"></path>
</svg>
</a>
<div class="overflow-x-scroll scrolling-touch max-w-full md:overflow-hidden">
<div class="flex items-center mt-1 md:mt-0 ">
<a href="#" class="no-underline text-sm lg:text-base text-white font-medium leading-normal p-2">
Home
</a>
<a href="#"
class="text-sm lg:text-base hover:text-white no-underline text-grey-light leading-normal p-2">
Documentation
</a>
<a href="#"
class="text-sm lg:text-base hover:text-white no-underline text-grey-light leading-normal p-2">
Examples
</a>
<a href="#"
class="text-sm lg:text-base hover:text-white no-underline text-grey-light leading-normal p-2">
Themes
</a>
<a href="#"
class="text-sm lg:text-base hover:text-white no-underline text-grey-light leading-normal p-2">
Jobs
</a>
<a href="#"
class="text-sm lg:text-base hover:text-white no-underline text-grey-light leading-normal p-2">
Expo
</a>
<a href="#"
class="text-sm lg:text-base hover:text-white no-underline text-grey-light leading-normal p-2">
Blog
</a>
</div>
</div>
</div>
<div class="hidden md:flex text-right items-center ml-auto">
<div class="flex items-center mr-2">
<a href="#" class="p-2 no-underline text-grey-light leading-normal hover:text-white caret-down">
v4.0
</a>
</div>
<div class="flex items-center">
<a href="#" class="p-2 text-grey-light leading-normal hover:text-white">
<svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 499.36"
focusable="false"><title>GitHub</title>
<path d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z"
fill="currentColor" fill-rule="evenodd"></path>
</svg>
</a>
</div>
<div class="flex items-center">
<a href="#" class="p-2 text-grey-light leading-normal hover:text-white">
<svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 416.32"
focusable="false"><title>Twitter</title>
<path d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92"
fill="currentColor"></path>
</svg>
</a>
</div>
<div class="flex items-center">
<a href="#" class="p-2 text-grey-light leading-normal hover:text-white">
<svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"
focusable="false"><title>Slack</title>
<path fill="currentColor"
d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"></path>
<path d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z"
fill="currentColor"></path>
</svg>
</a>
</div>
<div class="hidden lg:flex items-center ml-2">
<button class="hover:bg-yellow hover:text-grey-darkest rounded border py-2 px-3 ml-2 text-yellow border-yellow font-medium">
Download
</button>
</div>
</div>
</div>
</div>
</header>
<main class="py-8 px-4">
<div class="py-4 md:py-8">
<div class="md:py-4">
<div class="container mx-auto md:px-8">
<div class="flex flex-col md:flex-row-reverse md:items-center mx-auto">
<div class="md:w-1/2">
<div class="w-1/2 md:w-auto px-4 mx-auto">
<img class="max-w-full h-auto mb-3" src="./assets/img/bootstrap-stack.png" alt=""
width="1024"
height="860">
</div>
</div>
<div class="px-4 md:w-1/2">
<h1 class="text-4xl md:text-5xl mb-4 font-medium text-center md:text-left text-purple">Bootstrap</h1>
<div class="text-center md:text-left md:pr-6 text-xl font-light leading-normal">
<p class="mb-4">
Build responsive, mobile-first projects on the web with the world's most popular front-end
component
library.
</p>
<p class="mb-4">
Bootstrap is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype
your
ideas or build your entire app with our Sass variables and mixins, responsive grid system,
extensive
prebuilt components, and powerful plugins built on jQuery.
</p>
</div>
<div class="flex flex-col md:flex-row">
<button class="w-full hover:bg-purple hover:text-white text-xl mb-4 md:mr-4 rounded border py-4 px-8 sm:px-4 text-purple border-purple font-medium">
Get started
</button>
<button class="w-full hover:bg-grey-darker hover:text-white text-xl mb-4 rounded border py-4 px-8 sm:px-4 text-grey-darker border-grey-darker font-medium">
Download
</button>
</div>
<p class="text-center sm:text-left text-grey-dark">
Currently v4.0.0
</p>
</div>
</div>
</div>
</div>
</div>
</main>
<div class="flex flex-col md:flex-row w-full">
<div class="md:w-1/3 bg-grey-lightest border-white border p-4">
<div class="p-8">
<!-- Icon by Bytesize https://github.com/danklammer/bytesize-icons -->
<svg xmlns="http://www.w3.org/2000/svg" focusable="false" width="32" height="32" fill="none"
stroke="currentcolor" stroke-width="2" class="text-blue mb-2" viewBox="0 0 32 32"
stroke-linecap="round"
stroke-linejoin="round"><title>Import icon</title>
<path d="M28 22v8H4v-8M16 4v20m-8-8l8 8 8-8"></path>
</svg>
<h3 class="text-3xl font-medium mb-2">Installation</h3>
<p class="text-base leading-normal mb-4">Include Bootstrap's source Sass and JavaScript files via npm, Composer or Meteor. Package managed installs
don't include documentation, but do include our build system and readme.</p>
<figure class="mb-4 py-2 font-mono overflow-y-scroll">
<pre><code><span class="text-purple-darkest">$</span> npm <span class="text-teal-darker">install </span>bootstrap</code></pre>
</figure>
<figure class="mb-4 py-2 font-mono overflow-y-scroll">
<pre><code><span class="text-purple-darkest">$</span> gem <span class="text-teal-darker">install </span>bootstrap <span
class="text-blue-dark">-v</span> 4.0.0</code></pre>
</figure>
<hr class="w-24 my-8 mx-0 border-t">
<button class="hover:bg-blue hover:text-white mb-4 md:mr-4 rounded border py-2 px-4 sm:px-4 text-blue border-blue">
Read installation docs
</button>
</div>
</div>
<div class="md:w-1/3 bg-grey-lightest border-white border p-4">
<div class="p-8">
<!-- Icon by Bytesize https://github.com/danklammer/bytesize-icons -->
<svg xmlns="http://www.w3.org/2000/svg" focusable="false" width="32" height="32" fill="none"
stroke="currentcolor" stroke-width="2" class="text-blue mb-2" viewBox="0 0 32 32"
stroke-linecap="round"
stroke-linejoin="round"><title>Download icon</title>
<path d="M9 22c-9 1-8-10 0-9C6 2 23 2 22 10c10-3 10 13 1 12m-12 4l5 4 5-4m-5-10v14"></path>
</svg>
<h3 class="text-3xl font-medium mb-2">BootstrapCDN</h3>
<p class="text-base leading-normal mb-4">
When you only need to include Bootstrap's compiled CSS or JS, you can use
<a class="no-underline text-blue" href="https://www.bootstrapcdn.com/">BootstrapCDN</a>.
</p>
<h5 class="text-xl font-medium mb-2">CSS only</h5>
<figure class="mb-4 py-2 font-mono overflow-y-scroll">
<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/css/bootstrap.min.css"</span> <span
class="na">integrity=</span><span
class="s">"sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"</span> <span
class="na">crossorigin=</span><span class="s">"anonymous"</span><span class="nt">></span></code></pre>
</figure>
<h5 class="text-xl font-medium mb-2">JS, Popper.js, and jQuery</h5>
<figure class="mb-4 py-2 font-mono overflow-y-scroll"><pre><code class="language-html" data-lang="html"><span
class="nt"><script </span><span class="na">src=</span><span
class="s">"https://code.jquery.com/jquery-3.2.1.slim.min.js"</span> <span
class="na">integrity=</span><span
class="s">"sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"</span> <span
class="na">crossorigin=</span><span class="s">"anonymous"</span><span
class="nt">></script></span>
<span class="nt"><script </span><span class="na">src=</span><span
class="s">"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"</span> <span
class="na">integrity=</span><span
class="s">"sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"</span> <span
class="na">crossorigin=</span><span class="s">"anonymous"</span><span
class="nt">></script></span>
<span class="nt"><script </span><span class="na">src=</span><span
class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"</span> <span
class="na">integrity=</span><span
class="s">"sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"</span> <span
class="na">crossorigin=</span><span class="s">"anonymous"</span><span
class="nt">></script></span></code></pre>
</figure>
<hr class="w-24 my-8 mx-0 border-t">
<button class="hover:bg-blue hover:text-white mb-4 md:mr-4 rounded border py-2 px-4 sm:px-4 text-blue border-blue">
Explore the docs
</button>
</div>
</div>
<div class="md:w-1/3 bg-grey-lightest border-white border p-4">
<div class="p-8">
<!-- Icon by Bytesize https://github.com/danklammer/bytesize-icons -->
<svg xmlns="http://www.w3.org/2000/svg" focusable="false" width="32" height="32" fill="none"
stroke="currentcolor" stroke-width="2" class="text-blue mb-2" viewBox="0 0 32 32"
stroke-linecap="round"
stroke-linejoin="round"><title>Lightning icon</title>
<path d="M18 13l8-11L8 13l6 6-8 11 18-11z"></path>
</svg>
<h3 class="text-3xl font-medium mb-2">Official Themes</h3>
<p class="text-base leading-normal mb-4">
Take Bootstrap 4 to the next level with official premium themes—toolkits built on Bootstrap with new
components and plugins, docs, and build tools.
</p>
<img class="w-full h-auto mt-3 mx-auto" src="./assets/img/bootstrap-themes.png" alt="Bootstrap Themes"
width="1024"
height="388">
<hr class="w-24 my-8 mx-0 border-t">
<button class="hover:bg-blue hover:text-white mb-4 md:mr-4 rounded border py-2 px-4 sm:px-4 text-blue border-blue">
Browse themes
</button>
</div>
</div>
</div>
<footer class="p-4 bg-grey-lighter text-center sm:text-left">
<div class="md:p-8 text-sm leading-normal">
<ul class="list-reset flex mb-4 w-1/2 mx-auto sm:w-auto">
<li><a class="no-underline text-grey-darkest font-medium hover:underline hover:text-blue" href="https://github.com/twbs/bootstrap">GitHub</a></li>
<li class="ml-4"><a class="no-underline text-grey-darkest font-medium hover:underline hover:text-blue" href="https://twitter.com/getbootstrap">Twitter</a></li>
<li class="ml-4"><a class="no-underline text-grey-darkest font-medium hover:underline hover:text-blue" href="/docs/4.0/examples/">Examples</a></li>
<li class="ml-4"><a class="no-underline text-grey-darkest font-medium hover:underline hover:text-blue" href="/docs/4.0/about/overview/">About</a></li>
</ul>
<p class="text-grey-dark">Designed and built with all the love in the world by <a class="no-underline text-grey-darkest font-medium hover:underline hover:text-blue" href="https://twitter.com/mdo" target="_blank" rel="noopener">@mdo</a> and <a class="no-underline text-grey-darkest font-medium hover:underline hover:text-blue" href="https://twitter.com/fat" target="_blank" rel="noopener">@fat</a>. Maintained by the <a class="no-underline text-grey-darkest font-medium hover:underline hover:text-blue" href="https://github.com/orgs/twbs/people">core team</a> with the help of <a class="no-underline text-grey-darkest font-medium hover:underline hover:text-blue" href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p>
<p class="text-grey-dark">Currently v4.0.0. Code licensed <a class="no-underline text-grey-darkest font-medium hover:underline hover:text-blue" href="https://github.com/twbs/bootstrap/blob/master/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a class="no-underline text-grey-darkest font-medium hover:underline hover:text-blue" href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</p>
</div>
</footer>
</body>
</html>