forked from jasny/bootstrap
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathgetting-started.html
313 lines (282 loc) · 13.7 KB
/
getting-started.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
---
layout: default
title: Getting started
slug: getting-started
lead: "An overview of Jasny Bootstrap, how to download and use, basic templates and examples, and more."
base_url: "../"
---
<!-- Getting started
================================================== -->
<div class="bs-docs-section">
<div class="page-header">
<h1 id="jasny-bootstrap">Jasny Bootstrap</h1>
</div>
<p class="lead">Jasny Bootstrap is an extension to <a href="http://getbootstrap.com">Twitter Bootstrap</a>, adding a number of features and components.</p>
<p>The aim of Jasny Bootstrap is to provide all the required features for building highly interactive web applications for desktop and mobile.</p>
<div class="bs-callout bs-callout-warning">
<h4>Delivered as extension only</h4>
<p>As of version 3.1.0 Jasny Bootstrap is no longer bundeled with Twitter Bootstrap. You should load Twitter Bootstrap's CSS before this extension.</p>
</div>
</div>
<!-- Getting started
================================================== -->
<div class="bs-docs-section">
<div class="page-header">
<h1 id="download">Download</h1>
</div>
<p class="lead">Jasny Bootstrap has a few easy ways to quickly get started, each one appealing to a different skill level and use case. Read through to see what suits your particular needs.</p>
<h3 id="download-compiled">Compiled CSS and JS</h3>
<p>The fastest way to get Jasny Bootstrap is to download the compiled and minified versions of our CSS and JavaScript. No documentation or original source files are included.</p>
<p><a class="btn btn-lg btn-primary" href="{{ site.download.dist }}" onclick="_gaq.push(['_trackEvent', 'Getting started', 'Download', 'Download compiled']);">Download Jasny Bootstrap</a></p>
<h3 id="download-additional">Additional downloads</h3>
<div class="bs-docs-dl-options">
<h4>
<a href="{{ site.download.source }}" onclick="_gaq.push(['_trackEvent', 'Getting started', 'Download', 'Download source']);">Download source code</a>
</h4>
<p>Get the latest Jasny Bootstrap LESS and JavaScript source code by downloading it directly from GitHub.</p>
<h4>
<a href="{{ site.repo }}" onclick="_gaq.push(['_trackEvent', 'Getting started', 'Download', 'GitHub project']);">Clone or fork via GitHub</a>
</h4>
<p>Visit us on GitHub to clone or fork the Jasny Bootstrap project.</p>
<h4>
Install with <a href="http://bower.io">Bower</a>
</h4>
<p>Install and manage the original files for all CSS and JavaScript, along with a local copy of the docs, using <a href="http://bower.io">Bower</a>.</p>
{% highlight bash %}$ bower install jasny-bootstrap{% endhighlight %}
</div>
<h3 id="download-cdn">Jasny Bootstrap @ cdnjs</h3>
<p><a href="http://cdnjs.com" target="_blank">CDNJS</a> is a community driven CDN hosted by CloudFlare, supporting over a hundred projects. To use this CDN, swap your local instances for the CDN links listed below.</p>
{% highlight html %}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="{{ site.cdn.css }}">
<!-- Latest compiled and minified JavaScript -->
<script src="{{ site.cdn.js }}"></script>
{% endhighlight %}
<div class="bs-callout bs-callout-warning" id="callout-less-compilation">
<h4>Compiling Jasny Bootstrap's LESS files</h4>
<p>If you work with Jasny Bootstrap's uncompiled source code, you need to compile the LESS files to produce usable CSS files. For compiling LESS files into CSS, we only officially support <a href="http://twitter.github.io/recess/">Recess</a>, which is Twitter's CSS hinter based on <a href="http://lesscss.org">less.js</a>.</p>
</div>
</div>
<!-- File structure
================================================== -->
<div class="bs-docs-section bs-jasny">
<div class="page-header">
<h1 id="whats-included">What's included</h1>
</div>
<p class="lead">Within the download you'll find the following directories and files, logically grouping common resources and providing both compiled and minified variations.</p>
<p>Once downloaded, unzip the compressed folder to see the structure of (the compiled) Jasny Bootstrap. You'll see something like this:</p>
<!-- NOTE: This info is intentionally duplicated in the README.
Copy any changes made here over to the README too. -->
{% highlight bash %}
jasny-bootstrap/
├── css/
│ ├── jasny-bootstrap.css
│ ├── jasny-bootstrap.min.css
└── js/
├── jasny-bootstrap.js
└── jasny-bootstrap.min.js
{% endhighlight %}
<p>This is the most basic form of Jasny Bootstrap. We provide compiled CSS and JS (<code>jasny-bootstrap.*</code>), as well as compiled and minified CSS and JS (<code>jasny-bootstrap.min.*</code>).</p>
<p>The <code>jasny-bootstrap.*</code> files should be loaded in conjunction with the original Twitter Bootstrap files.</p>
<div class="bs-callout bs-callout-danger" id="jquery-required">
<h4>jQuery required</h4>
<p>Please note that <strong>all JavaScript plugins require jQuery</strong> to be included, as shown in the <a href="#template">starter template</a>. <a href="{{ site.repo }}/blob/v{{ site.current_version }}/bower.json">Consult our <code>bower.json</code></a> to see which versions of jQuery are supported.</p>
</div>
</div>
<!-- Template
================================================== -->
<div class="bs-docs-section">
<div class="page-header">
<h1 id="template">Basic template</h1>
</div>
<p class="lead">Start with this basic HTML template, or modify <a href="../getting-started#examples">these examples</a>. We hope you'll customize our templates and examples, adapting them to suit your needs.</p>
<p>Copy the HTML below to begin working with a minimal Bootstrap document.</p>
{% highlight html %}
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="css/jasny-bootstrap.min.css" rel="stylesheet" media="screen">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script src="js/jasny-bootstrap.min.js"></script>
</body>
</html>
{% endhighlight %}
</div>
<!-- Template
================================================== -->
<div class="bs-docs-section">
<div class="page-header">
<h1 id="examples">Examples</h1>
</div>
<p class="lead">Create diverse and advanced user interfaces using Jasny's Bootstrap components. See also <a href="#customizing">Customizing Bootstrap</a> for tips on maintaining your own Bootstrap variants.</p>
<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="">
</a>
<h4>Starter template</h4>
<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/navmenu/">
<img src="../examples/screenshots/navmenu.jpg" alt="">
</a>
<h4>Navmenu</h4>
<p>A basic template showing the navmenu element and demonstrates usage of the offcanvas plugin.</p>
</div>
<div class="clearfix visible-xs visible-sm"></div>
<div class="col-xs-6 col-md-4">
<a class="thumbnail" href="../examples/navmenu-push/">
<img src="../examples/screenshots/navmenu-push.jpg" alt="">
</a>
<h4>Off Canvas Push Menu</h4>
<p>A template demonstrating a push effect for the off canvas navmenu.</p>
</div>
<div class="clearfix visible-md visible-lg"></div>
<div class="col-xs-6 col-md-4">
<a class="thumbnail" href="../examples/navmenu-reveal/">
<img src="../examples/screenshots/navmenu-reveal.jpg" alt="">
</a>
<h4>Off Canvas Reveal Menu</h4>
<p>A template demonstrating a reveal effect by placing the navmenu under the content.</p>
</div>
<div class="col-xs-6 col-md-4">
<a class="thumbnail" href="../examples/navbar-offcanvas/">
<img src="../examples/screenshots/navbar-offcanvas.jpg" alt="">
</a>
<h4>Off canvas navbar</h4>
<p>A template using offcanvas for mobile view of the navbar.</p>
</div>
</div>
</div>
<!-- Migration
================================================== -->
<div class="bs-docs-section">
<div class="page-header">
<h1 id="migration">Migrating from 2.x to 3.0</h1>
</div>
<p class="lead">Folks looking to upgrade to v3 should use this section as a general upgrade guide. We've outlined some of the major changes and provided tables that highlight key changes.</p>
<h2 id="migration-classes">Major class changes</h2>
<p>This table shows the style changes between v2.x and v3.0.</p>
<div class="table-responsive">
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>Bootstrap 2.x</th>
<th>Bootstrap 3.0</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>.container-semifluid</code></td>
<td><code>.container-smooth</code></td>
</tr>
<tr>
<td><code>.fileupload</code> <code>.fileupload-*</code></td>
<td><code>.fileinput</code> <code>.fileinput-*</code></td>
</tr>
</tbody>
</table>
</div><!-- /.table-responsive -->
<h2 id="migration-new">What's new</h2>
<p>We've added new elements and changed some existing ones. Here are the new or updated styles.</p>
<div class="table-responsive">
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>Element</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>Navmenu</td>
<td><code>.navmenu .navmenu-default</code> <code>.navmenu .navmenu-inverse</code> <code>.navmenu-fixed-left</code> <code>.navmenu-fixed-right</code> <code>.navmenu-brand</code> <code>.navmenu-nav</code></td>
</tr>
<tr>
<td>Fixed alerts</td>
<td><code>.alert-fixed-top</code> <code>.alert-fixed-bottom</code></td>
</tr>
<tr>
<td>Off canvas</td>
<td><code>.offcanvas</code> <code>.offcanvas-*</code></td>
</tr>
</tbody>
</table>
</div><!-- /.table-responsive -->
<h2 id="migration-dropped">What's removed</h2>
<p>The following elements have been dropped or changed in v3.0.</p>
<div class="table-responsive">
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>Element</th>
<th>Removed from 2.x</th>
<th>3.0 Equivalent</th>
</tr>
</thead>
<tbody>
<tr>
<td>Header actions</td>
<td><code>.header-actions</code></td>
<td class="text-muted">N/A</td>
</tr>
<tr>
<td>Table actions</td>
<td><code>.table-actions</code></td>
<td class="text-muted">N/A</td>
</tr>
<tr>
<td>Desktop rows</td>
<td><code>.row-desktop</code></td>
<td><code>.row > .col-md-*</code></td>
</tr>
<tr>
<td>Action links</td>
<td><code>.act-*</code></td>
<td class="text-muted">N/A</td>
</tr>
<tr>
<td>Page alerts</td>
<td><code>.pagealert</code></td>
<td><code>.alert-fixed-top</code></td>
</tr>
<tr>
<td>Iconic icons</td>
<td><code>.iconic-*</code></td>
<td class="text-muted">N/A</td>
</tr>
<tr>
<td>Editor textarea</td>
<td><code>.editor</code></td>
<td class="text-muted">N/A</td>
</tr>
</tbody>
</table>
</div><!-- /.table-responsive -->
<h2 id="migration-notes">Additional notes</h2>
<p>Other changes in v3.0 are not immediately apparent. Base classes, key styles, and behaviors have been adjusted for flexibility and our <em>mobile first</em> approach. Here's a partial list:</p>
<ul>
<li>The fileupload plugin has been renamed to fileinput. File upload was poorly chosen, since the plugin allows the creation of a styled file input element. It has nothing to do with how the file is uploaded.</li>
<li class="bs-jasny-only">Tab alignments are still supported in this fork (while dropped in Twitter Bootstrap).</li>
<li>Typeahead has been dropped, in favor of using <a href="http://brianreavis.github.io/selectize.js/">Selectize.js</a>.</li>
<li>Iconic icons are still available from <a href="http://www.somerandomdude.com/work/open-iconic/">P.J. Onori</a>.</li>
</ul>
<p>For more information on upgrading to v3.0, and code snippets from the community, see <a href="http://bootply.com/">Bootply</a>.</p>
</div>