source: spip-zone/_plugins_/bootstrap/demo/bootstrap.html @ 69018

Last change on this file since 69018 was 69018, checked in by cedric@…, 7 years ago

renommer les page de demo en bootstrap_xx car "exemple" est trop générique

File size: 32.6 KB
Line 
1<!DOCTYPE html>
2<html lang="en">
3  <head>
4          <!--[if lt IE 9]><!--Perf issue--><![endif]-->
5    <meta charset="utf-8">
6    <title>#NOM_SITE_SPIP</title>
7    <meta name="viewport" content="initial-scale=1.0">
8    <meta name="description" content="">
9    <meta name="author" content="">
10
11    <!-- Le styles -->
12          [<link rel="stylesheet" href="(#CSS{css/bootstrap.css})" type="text/css" />]
13          [<link rel="stylesheet" href="(#CSS{css/responsive.css})" type="text/css" />]
14          #INSERT_HEAD_CSS
15          [<link rel="stylesheet" href="(#CSS{css/exemple.css})" type="text/css" />]
16                <style type="text/css">body.preview {text-align: left;margin-top: 80px;}</style>
17
18    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
19    <!--[if lt IE 9]>
20      <script src="#CHEMIN{js/html5.js}"></script>
21    <![endif]-->
22          #INSERT_HEAD
23                <script src="#CHEMIN{js/bootstrap-affix.js}"></script>
24                <script src="#CHEMIN{js/bootstrap-alert.js}"></script>
25                <script src="#CHEMIN{js/bootstrap-button.js}"></script>
26                <script src="#CHEMIN{js/bootstrap-carousel.js}"></script>
27                <script src="#CHEMIN{js/bootstrap-collapse.js}"></script>
28                <script src="#CHEMIN{js/bootstrap-dropdown.js}"></script>
29                <script src="#CHEMIN{js/bootstrap-modal.js}"></script>
30                <script src="#CHEMIN{js/bootstrap-popover.js}"></script>
31                <script src="#CHEMIN{js/bootstrap-scrollspy.js}"></script>
32                <script src="#CHEMIN{js/bootstrap-tab.js}"></script>
33                <script src="#CHEMIN{js/bootstrap-tooltip.js}"></script>
34                <script src="#CHEMIN{js/bootstrap-transition.js}"></script>
35                <script src="#CHEMIN{js/bootstrap-typeahead.js}"></script>
36
37  </head>
38
39        <body class="preview" data-spy="scroll" data-target=".subnav" data-offset="80">
40
41
42          <!-- Navbar
43            ================================================== -->
44         <div class="navbar navbar-fixed-top">
45           <div class="navbar-inner">
46             <div class="container">
47               <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
48                 <span class="icon-bar"></span>
49                 <span class="icon-bar"></span>
50                 <span class="icon-bar"></span>
51               </a>
52               <a class="brand" href="../">Bootstrap</a>
53               <div class="nav-collapse" id="main-menu">
54                <ul class="nav" id="main-menu-left">
55                  <li><a href="#">News</a></li>
56                  <li><a id="swatch-link" href="/#gallery">Gallery</a></li>
57                  <li class="dropdown">
58                    <a class="dropdown-toggle" data-toggle="dropdown" href="#">Preview <b class="caret"></b></a>
59                    <ul class="dropdown-menu" id="swatch-menu">
60                      <li><a href="../default">Default</a></li>
61                      <li class="divider"></li>
62                      <li><a href="#">Amelia</a></li>
63                      <li><a href="#">Cerulean</a></li>
64                      <li><a href="#">Cosmo</a></li>
65                      <li><a href="#">Cyborg</a></li>
66                      <li><a href="#">Journal</a></li>
67                      <li><a href="#">Readable</a></li>
68                      <li><a href="#">Simplex</a></li>
69                      <li><a href="#">Slate</a></li>
70                      <li><a href="#">Spacelab</a></li>
71                      <li><a href="#">Spruce</a></li>
72                      <li><a href="#">Superhero</a></li>
73                      <li><a href="#">United</a></li>
74                    </ul>
75                  </li>
76                  <li class="dropdown" id="preview-menu">
77                    <a class="dropdown-toggle" data-toggle="dropdown" href="#">Download <b class="caret"></b></a>
78                    <ul class="dropdown-menu">
79                      <li><a target="_blank" href="#">bootstrap.min.css</a></li>
80                      <li><a target="_blank" href="#">bootstrap.css</a></li>
81                      <li class="divider"></li>
82                      <li><a target="_blank" href="#">variables.less</a></li>
83                      <li><a target="_blank" href="#">bootswatch.less</a></li>
84                    </ul>
85                  </li>
86                </ul>
87                <ul class="nav pull-right" id="main-menu-right">
88                  <li><a rel="tooltip" target="_blank" href="http://builtwithbootstrap.com/" title="Showcase of Bootstrap sites &amp; apps" onclick="_gaq.push(['_trackEvent', 'click', 'outbound', 'builtwithbootstrap']);">Built With Bootstrap <i class="icon-share-alt"></i></a></li>
89                  <li><a rel="tooltip" target="_blank" href="https://wrapbootstrap.com/?ref=bsw" title="Marketplace for premium Bootstrap templates" onclick="_gaq.push(['_trackEvent', 'click', 'outbound', 'wrapbootstrap']);">WrapBootstrap <i class="icon-share-alt"></i></a></li>
90                </ul>
91               </div>
92             </div>
93           </div>
94         </div>
95
96            <div class="container">
97
98
99        <!-- Masthead
100        ================================================== -->
101        <header class="jumbotron subhead" id="overview">
102          <div class="row">
103            <div class="span6">
104              <h1>Bootstrap pour SPIP</h1>
105              <p class="lead">Page de demonstration</p>
106            </div>
107            <div class="span6">
108            </div>
109          </div>
110          <div class="subnav">
111            <ul class="nav nav-pills">
112              <li><a href="#typography">Typography</a></li>
113              <li><a href="#navbar">Navbar</a></li>
114              <li><a href="#buttons">Buttons</a></li>
115              <li><a href="#forms">Forms</a></li>
116              <li><a href="#tables">Tables</a></li>
117              <li><a href="#miscellaneous">Miscellaneous</a></li>
118            </ul>
119          </div>
120        </header>
121
122
123
124
125        <!-- Typography
126        ================================================== -->
127        <section id="typography">
128          <div class="page-header">
129            <h1>Typography</h1>
130          </div>
131
132          <!-- Headings & Paragraph Copy -->
133          <div class="row">
134
135            <div class="span4">
136              <div class="well">
137                <h1>h1. Heading 1</h1>
138                <h2>h2. Heading 2</h2>
139                <h3>h3. Heading 3</h3>
140                <h4>h4. Heading 4</h4>
141                <h5>h5. Heading 5</h5>
142                <h6>h6. Heading 6</h6>
143              </div>
144            </div>
145
146            <div class="span4">
147              <h3>Example body text</h3>
148              <p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
149              <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui.</p>
150            </div>
151
152            <div class="span4">
153              <h3>Example addresses</h3>
154              <address>
155                <strong>Twitter, Inc.</strong><br>
156                795 Folsom Ave, Suite 600<br>
157                San Francisco, CA 94107<br>
158                <abbr title="Phone">P:</abbr> (123) 456-7890
159              </address>
160              <address>
161                <strong>Full Name</strong><br>
162                <a href="mailto:#">first.last@gmail.com</a>
163              </address>
164            </div>
165
166          </div>
167
168          <div class="row">
169            <div class="span6">
170              <blockquote>
171                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
172                <small>Someone famous in <cite title="Source Title">Source Title</cite></small>
173              </blockquote>
174            </div>
175            <div class="span6">
176              <blockquote class="pull-right">
177                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
178                <small>Someone famous in <cite title="Source Title">Source Title</cite></small>
179              </blockquote>
180            </div>
181          </div>
182
183        </section>
184
185
186        <!-- Navbar
187        ================================================== -->
188        <section id="navbar">
189          <div class="page-header">
190            <h1>Navbars</h1>
191          </div>
192          <div class="navbar">
193            <div class="navbar-inner">
194              <div class="container" style="width: auto;">
195                <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
196                  <span class="icon-bar"></span>
197                  <span class="icon-bar"></span>
198                  <span class="icon-bar"></span>
199                </a>
200                <a class="brand" href="#">Project name</a>
201                <div class="nav-collapse">
202                  <ul class="nav">
203                    <li class="active"><a href="#">Home</a></li>
204                    <li><a href="#">Link</a></li>
205                    <li><a href="#">Link</a></li>
206                    <li><a href="#">Link</a></li>
207                    <li class="dropdown">
208                      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
209                      <ul class="dropdown-menu">
210                        <li><a href="#">Action</a></li>
211                        <li><a href="#">Another action</a></li>
212                        <li><a href="#">Something else here</a></li>
213                        <li class="divider"></li>
214                        <li><a href="#">Separated link</a></li>
215                      </ul>
216                    </li>
217                  </ul>
218                  <form class="navbar-search pull-left" action="">
219                    <input type="text" class="search-query span2" placeholder="Search">
220                  </form>
221                  <ul class="nav pull-right">
222                    <li><a href="#">Link</a></li>
223                    <li class="divider-vertical"></li>
224                    <li class="dropdown">
225                      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
226                      <ul class="dropdown-menu">
227                        <li><a href="#">Action</a></li>
228                        <li><a href="#">Another action</a></li>
229                        <li><a href="#">Something else here</a></li>
230                        <li class="divider"></li>
231                        <li><a href="#">Separated link</a></li>
232                      </ul>
233                    </li>
234                  </ul>
235                </div><!-- /.nav-collapse -->
236              </div>
237            </div><!-- /navbar-inner -->
238          </div><!-- /navbar -->
239
240          <div class="navbar navbar-inverse">
241            <div class="navbar-inner">
242              <div class="container" style="width: auto;">
243                <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
244                  <span class="icon-bar"></span>
245                  <span class="icon-bar"></span>
246                  <span class="icon-bar"></span>
247                </a>
248                <a class="brand" href="#">Project name</a>
249                <div class="nav-collapse">
250                  <ul class="nav">
251                    <li class="active"><a href="#">Home</a></li>
252                    <li><a href="#">Link</a></li>
253                    <li><a href="#">Link</a></li>
254                    <li><a href="#">Link</a></li>
255                    <li class="dropdown">
256                      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
257                      <ul class="dropdown-menu">
258                        <li><a href="#">Action</a></li>
259                        <li><a href="#">Another action</a></li>
260                        <li><a href="#">Something else here</a></li>
261                        <li class="divider"></li>
262                        <li><a href="#">Separated link</a></li>
263                      </ul>
264                    </li>
265                  </ul>
266                  <form class="navbar-search pull-left" action="">
267                    <input type="text" class="search-query span2" placeholder="Search">
268                  </form>
269                  <ul class="nav pull-right">
270                    <li><a href="#">Link</a></li>
271                    <li class="divider-vertical"></li>
272                    <li class="dropdown">
273                      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
274                      <ul class="dropdown-menu">
275                        <li><a href="#">Action</a></li>
276                        <li><a href="#">Another action</a></li>
277                        <li><a href="#">Something else here</a></li>
278                        <li class="divider"></li>
279                        <li><a href="#">Separated link</a></li>
280                      </ul>
281                    </li>
282                  </ul>
283                </div><!-- /.nav-collapse -->
284              </div>
285            </div><!-- /navbar-inner -->
286          </div><!-- /navbar -->
287
288        </section>
289
290
291
292        <!-- Buttons
293        ================================================== -->
294        <section id="buttons">
295          <div class="page-header">
296            <h1>Buttons</h1>
297          </div>
298          <table class="table table-bordered table-striped">
299            <thead>
300              <tr>
301                <th>Button</th>
302                <th>Large Button</th>
303                <th>Small Button</th>
304                <th>Disabled Button</th>
305            <th>Button with Icon</th>
306            <th>Split Button</th>
307              </tr>
308            </thead>
309            <tbody>
310              <tr>
311                <td><a class="btn" href="#">Default</a></td>
312                <td><a class="btn btn-large" href="#">Default</a></td>
313                <td><a class="btn btn-small" href="#">Default</a></td>
314                <td><a class="btn disabled" href="#">Default</a></td>
315                <td><a class="btn" href="#"><i class="icon-cog"></i> Default</a></td>
316            <td>
317                  <div class="btn-group">
318                    <a class="btn" href="#">Default</a>
319                    <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
320                    <ul class="dropdown-menu">
321                      <li><a href="#">Action</a></li>
322                      <li><a href="#">Another action</a></li>
323                      <li><a href="#">Something else here</a></li>
324                      <li class="divider"></li>
325                      <li><a href="#">Separated link</a></li>
326                    </ul>
327                  </div><!-- /btn-group -->
328            </td>
329              </tr>
330              <tr>
331                <td><a class="btn btn-primary" href="#">Primary</a></td>
332                <td><a class="btn btn-primary btn-large" href="#">Primary</a></td>
333                <td><a class="btn btn-primary btn-small" href="#">Primary</a></td>
334                <td><a class="btn btn-primary disabled" href="#">Primary</a></td>
335                <td><a class="btn btn-primary" href="#"><i class="icon-shopping-cart icon-white"></i> Primary</a></td>
336            <td>
337                  <div class="btn-group">
338                    <a class="btn btn-primary" href="#">Primary</a>
339                    <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
340                    <ul class="dropdown-menu">
341                      <li><a href="#">Action</a></li>
342                      <li><a href="#">Another action</a></li>
343                      <li><a href="#">Something else here</a></li>
344                      <li class="divider"></li>
345                      <li><a href="#">Separated link</a></li>
346                    </ul>
347                  </div><!-- /btn-group -->
348            </td>
349              </tr>
350              <tr>
351                <td><a class="btn btn-info" href="#">Info</a></td>
352                <td><a class="btn btn-info btn-large" href="#">Info</a></td>
353                <td><a class="btn btn-info btn-small" href="#">Info</a></td>
354                <td><a class="btn btn-info disabled" href="#">Info</a></td>
355                <td><a class="btn btn-info" href="#"><i class="icon-exclamation-sign icon-white"></i> Info</a></td>
356            <td>
357                  <div class="btn-group">
358                    <a class="btn btn-info" href="#">Info</a>
359                    <a class="btn btn-info dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
360                    <ul class="dropdown-menu">
361                      <li><a href="#">Action</a></li>
362                      <li><a href="#">Another action</a></li>
363                      <li><a href="#">Something else here</a></li>
364                      <li class="divider"></li>
365                      <li><a href="#">Separated link</a></li>
366                    </ul>
367                  </div><!-- /btn-group -->
368            </td>
369              </tr>
370              <tr>
371                <td><a class="btn btn-success" href="#">Success</a></td>
372                <td><a class="btn btn-success btn-large" href="#">Success</a></td>
373                <td><a class="btn btn-success btn-small" href="#">Success</a></td>
374                <td><a class="btn btn-success disabled" href="#">Success</a></td>
375                <td><a class="btn btn-success" href="#"><i class="icon-ok icon-white"></i> Success</a></td>
376            <td>
377                  <div class="btn-group">
378                    <a class="btn btn-success" href="#">Success</a>
379                    <a class="btn btn-success dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
380                    <ul class="dropdown-menu">
381                      <li><a href="#">Action</a></li>
382                      <li><a href="#">Another action</a></li>
383                      <li><a href="#">Something else here</a></li>
384                      <li class="divider"></li>
385                      <li><a href="#">Separated link</a></li>
386                    </ul>
387                  </div><!-- /btn-group -->
388            </td>
389              </tr>
390              <tr>
391                <td><a class="btn btn-warning" href="#">Warning</a></td>
392                <td><a class="btn btn-warning btn-large" href="#">Warning</a></td>
393                <td><a class="btn btn-warning btn-small" href="#">Warning</a></td>
394                <td><a class="btn btn-warning disabled" href="#">Warning</a></td>
395                <td><a class="btn btn-warning" href="#"><i class="icon-warning-sign icon-white"></i> Warning</a></td>
396            <td>
397                  <div class="btn-group">
398                    <a class="btn btn-warning" href="#">Warning</a>
399                    <a class="btn btn-warning dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
400                    <ul class="dropdown-menu">
401                      <li><a href="#">Action</a></li>
402                      <li><a href="#">Another action</a></li>
403                      <li><a href="#">Something else here</a></li>
404                      <li class="divider"></li>
405                      <li><a href="#">Separated link</a></li>
406                    </ul>
407                  </div><!-- /btn-group -->
408            </td>
409              </tr>
410              <tr>
411                <td><a class="btn btn-danger" href="#">Danger</a></td>
412                <td><a class="btn btn-danger btn-large" href="#">Danger</a></td>
413                <td><a class="btn btn-danger btn-small" href="#">Danger</a></td>
414                <td><a class="btn btn-danger disabled" href="#">Danger</a></td>
415                <td><a class="btn btn-danger" href="#"><i class="icon-remove icon-white"></i> Danger</a></td>
416            <td>
417                  <div class="btn-group">
418                    <a class="btn btn-danger" href="#">Danger</a>
419                    <a class="btn btn-danger dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
420                    <ul class="dropdown-menu">
421                      <li><a href="#">Action</a></li>
422                      <li><a href="#">Another action</a></li>
423                      <li><a href="#">Something else here</a></li>
424                      <li class="divider"></li>
425                      <li><a href="#">Separated link</a></li>
426                    </ul>
427                  </div><!-- /btn-group -->
428            </td>
429              </tr>
430              <tr>
431                <td><a class="btn btn-inverse" href="#">Inverse</a></td>
432                <td><a class="btn btn-inverse btn-large" href="#">Inverse</a></td>
433                <td><a class="btn btn-inverse btn-small" href="#">Inverse</a></td>
434                <td><a class="btn btn-inverse disabled" href="#">Inverse</a></td>
435                <td><a class="btn btn-inverse" href="#"><i class="icon-random icon-white"></i> Inverse</a></td>
436            <td>
437                  <div class="btn-group">
438                    <a class="btn btn-inverse" href="#">Inverse</a>
439                    <a class="btn btn-inverse dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
440                    <ul class="dropdown-menu">
441                      <li><a href="#">Action</a></li>
442                      <li><a href="#">Another action</a></li>
443                      <li><a href="#">Something else here</a></li>
444                      <li class="divider"></li>
445                      <li><a href="#">Separated link</a></li>
446                    </ul>
447                  </div><!-- /btn-group -->
448            </td>
449              </tr>
450            </tbody>
451          </table>
452
453        </section>
454
455
456        <!-- Forms
457        ================================================== -->
458        <section id="forms">
459          <div class="page-header">
460            <h1>Forms</h1>
461          </div>
462
463          <div class="row">
464            <div class="span10 offset1">
465
466              <form class="well form-search">
467                <input type="text" class="input-medium search-query">
468                <button type="submit" class="btn">Search</button>
469              </form>
470
471                <form class="well form-search">
472                  <input type="text" class="input-small" placeholder="Email">
473                  <input type="password" class="input-small" placeholder="Password">
474                  <button type="submit" class="btn">Go</button>
475                </form>
476
477
478              <form class="form-horizontal well">
479                <fieldset>
480                  <legend>Controls Bootstrap supports</legend>
481                  <div class="control-group">
482                    <label class="control-label" for="input01">Text input</label>
483                    <div class="controls">
484                      <input type="text" class="input-xlarge" id="input01">
485                      <p class="help-block">In addition to freeform text, any HTML5 text-based input appears like so.</p>
486                    </div>
487                  </div>
488                  <div class="control-group">
489                    <label class="control-label" for="optionsCheckbox">Checkbox</label>
490                    <div class="controls">
491                      <label class="checkbox">
492                        <input type="checkbox" id="optionsCheckbox" value="option1">
493                        Option one is this and that&mdash;be sure to include why it's great
494                      </label>
495                    </div>
496                  </div>
497                  <div class="control-group">
498                    <label class="control-label" for="select01">Select list</label>
499                    <div class="controls">
500                      <select id="select01">
501                        <option>something</option>
502                        <option>2</option>
503                        <option>3</option>
504                        <option>4</option>
505                        <option>5</option>
506                      </select>
507                    </div>
508                  </div>
509                  <div class="control-group">
510                    <label class="control-label" for="multiSelect">Multicon-select</label>
511                    <div class="controls">
512                      <select multiple="multiple" id="multiSelect">
513                        <option>1</option>
514                        <option>2</option>
515                        <option>3</option>
516                        <option>4</option>
517                        <option>5</option>
518                      </select>
519                    </div>
520                  </div>
521                  <div class="control-group">
522                    <label class="control-label" for="fileInput">File input</label>
523                    <div class="controls">
524                      <input class="input-file" id="fileInput" type="file">
525                    </div>
526                  </div>
527                  <div class="control-group">
528                    <label class="control-label" for="textarea">Textarea</label>
529                    <div class="controls">
530                      <textarea class="input-xlarge" id="textarea" rows="3"></textarea>
531                    </div>
532                  </div>
533                  <div class="control-group">
534                    <label class="control-label" for="focusedInput">Focused input</label>
535                    <div class="controls">
536                      <input class="input-xlarge focused" id="focusedInput" type="text" value="This is focused…">
537                    </div>
538                  </div>
539                  <div class="control-group">
540                    <label class="control-label">Uneditable input</label>
541                    <div class="controls">
542                      <span class="input-xlarge uneditable-input">Some value here</span>
543                    </div>
544                  </div>
545                  <div class="control-group">
546                    <label class="control-label" for="disabledInput">Disabled input</label>
547                    <div class="controls">
548                      <input class="input-xlarge disabled" id="disabledInput" type="text" placeholder="Disabled input here…" disabled>
549                    </div>
550                  </div>
551                  <div class="control-group">
552                    <label class="control-label" for="optionsCheckbox2">Disabled checkbox</label>
553                    <div class="controls">
554                      <label class="checkbox">
555                        <input type="checkbox" id="optionsCheckbox2" value="option1" disabled>
556                        This is a disabled checkbox
557                      </label>
558                    </div>
559                  </div>
560                  <div class="control-group warning">
561                    <label class="control-label" for="inputWarning">Input with warning</label>
562                    <div class="controls">
563                      <input type="text" id="inputWarning">
564                      <span class="help-inline">Something may have gone wrong</span>
565                    </div>
566                  </div>
567                  <div class="control-group error">
568                    <label class="control-label" for="inputError">Input with error</label>
569                    <div class="controls">
570                      <input type="text" id="inputError">
571                      <span class="help-inline">Please correct the error</span>
572                    </div>
573                  </div>
574                  <div class="control-group success">
575                    <label class="control-label" for="inputSuccess">Input with success</label>
576                    <div class="controls">
577                      <input type="text" id="inputSuccess">
578                      <span class="help-inline">Woohoo!</span>
579                    </div>
580                  </div>
581                  <div class="control-group success">
582                    <label class="control-label" for="selectError">Select with success</label>
583                    <div class="controls">
584                      <select id="selectError">
585                        <option>1</option>
586                        <option>2</option>
587                        <option>3</option>
588                        <option>4</option>
589                        <option>5</option>
590                      </select>
591                      <span class="help-inline">Woohoo!</span>
592                    </div>
593                  </div>
594                  <div class="form-actions">
595                    <button type="submit" class="btn btn-primary">Save changes</button>
596                    <button type="reset" class="btn">Cancel</button>
597                  </div>
598                </fieldset>
599              </form>
600            </div>
601          </div>
602
603        </section>
604
605        <!-- Tables
606        ================================================== -->
607        <section id="tables">
608          <div class="page-header">
609            <h1>Tables</h1>
610          </div>
611
612          <table class="table table-bordered table-striped table-hover">
613            <thead>
614              <tr>
615                <th>#</th>
616                <th>First Name</th>
617                <th>Last Name</th>
618                <th>Username</th>
619              </tr>
620            </thead>
621            <tbody>
622              <tr>
623                <td>1</td>
624                <td>Mark</td>
625                <td>Otto</td>
626                <td>@mdo</td>
627              </tr>
628              <tr>
629                <td>2</td>
630                <td>Jacob</td>
631                <td>Thornton</td>
632                <td>@fat</td>
633              </tr>
634              <tr>
635                <td>3</td>
636                <td>Larry</td>
637                <td>the Bird</td>
638                <td>@twitter</td>
639              </tr>
640            </tbody>
641          </table>
642        </section>
643
644
645        <!-- Miscellaneous
646        ================================================== -->
647        <section id="miscellaneous">
648          <div class="page-header">
649            <h1>Miscellaneous</h1>
650          </div>
651
652          <div class="row">
653            <div class="span4">
654
655              <h3 id="breadcrumbs">Breadcrumbs</h3>
656              <ul class="breadcrumb">
657                <li class="active">Home</li>
658              </ul>
659              <ul class="breadcrumb">
660                <li><a href="#">Home</a> <span class="divider">/</span></li>
661                <li><a href="#">Library</a> <span class="divider">/</span></li>
662                <li class="active">Data</li>
663              </ul>
664            </div>
665            <div class="span4">
666              <h3 id="pagination">Pagination</h3>
667              <div class="pagination">
668                <ul>
669                  <li><a href="#">&larr;</a></li>
670                  <li class="active"><a href="#">10</a></li>
671                  <li class="disabled"><a href="#">...</a></li>
672                  <li><a href="#">20</a></li>
673                  <li><a href="#">&rarr;</a></li>
674                </ul>
675              </div>
676              <div class="pagination pagination-centered">
677                <ul>
678                  <li class="active"><a href="#">1</a></li>
679                  <li><a href="#">2</a></li>
680                  <li><a href="#">3</a></li>
681                  <li><a href="#">4</a></li>
682                  <li><a href="#">5</a></li>
683                </ul>
684              </div>
685            </div>
686
687            <div class="span4">
688              <h3 id="pager">Pagers</h3>
689
690                <ul class="pager">
691                  <li><a href="#">Previous</a></li>
692                  <li><a href="#">Next</a></li>
693                </ul>
694
695                <ul class="pager">
696                  <li class="previous disabled"><a href="#">&larr; Older</a></li>
697                  <li class="next"><a href="#">Newer &rarr;</a></li>
698                </ul>
699            </div>
700          </div>
701
702
703          <!-- Navs
704          ================================================== -->
705
706          <div class="row">
707            <div class="span4">
708
709              <h3 id="tabs">Tabs</h3>
710              <ul class="nav nav-tabs">
711                <li class="active"><a href="#A" data-toggle="tab">Section 1</a></li>
712                <li><a href="#B" data-toggle="tab">Section 2</a></li>
713                <li><a href="#C" data-toggle="tab">Section 3</a></li>
714              </ul>
715              <div class="tabbable">
716                <div class="tab-content">
717                  <div class="tab-pane active" id="A">
718                    <p>I'm in Section A.</p>
719                  </div>
720                  <div class="tab-pane" id="B">
721                    <p>Howdy, I'm in Section B.</p>
722                  </div>
723                  <div class="tab-pane" id="C">
724                    <p>What up girl, this is Section C.</p>
725                  </div>
726                </div>
727              </div> <!-- /tabbable -->
728
729            </div>
730            <div class="span4">
731              <h3 id="pills">Pills</h3>
732              <ul class="nav nav-pills">
733                <li class="active"><a href="#">Home</a></li>
734                <li><a href="#">Profile</a></li>
735                <li class="dropdown">
736                  <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown <b class="caret"></b></a>
737                  <ul class="dropdown-menu">
738                    <li><a href="#">Action</a></li>
739                    <li><a href="#">Another action</a></li>
740                    <li><a href="#">Something else here</a></li>
741                    <li class="divider"></li>
742                    <li><a href="#">Separated link</a></li>
743                  </ul>
744                </li>
745                <li class="disabled"><a href="#">Disabled link</a></li>
746              </ul>
747            </div>
748
749            <div class="span4">
750
751              <h3 id="list">Lists</h3>
752
753              <div class="well" style="padding: 8px 0;">
754                <ul class="nav nav-list">
755                  <li class="nav-header">List header</li>
756                  <li class="active"><a href="#">Home</a></li>
757                  <li><a href="#">Library</a></li>
758                  <li><a href="#">Applications</a></li>
759                  <li class="nav-header">Another list header</li>
760                  <li><a href="#">Profile</a></li>
761                  <li><a href="#">Settings</a></li>
762                  <li class="divider"></li>
763                  <li><a href="#">Help</a></li>
764                </ul>
765              </div>
766            </div>
767          </div>
768
769
770        <!-- Labels
771        ================================================== -->
772
773          <div class="row">
774            <div class="span6">
775              <h3 id="labels">Labels</h3>
776              <span class="label">Default</span>
777              <span class="label label-success">Success</span>
778              <span class="label label-warning">Warning</span>
779              <span class="label label-important">Important</span>
780              <span class="label label-info">Info</span>
781              <span class="label label-inverse">Inverse</span>
782            </div>
783            <div class="span6">
784              <h3 id="badges">Badges</h3>
785              <span class="badge">Default</span>
786              <span class="badge badge-success">Success</span>
787              <span class="badge badge-warning">Warning</span>
788              <span class="badge badge-important">Important</span>
789              <span class="badge badge-info">Info</span>
790              <span class="badge badge-inverse">Inverse</span>
791            </div>
792          </div>
793          <br />
794
795        <!-- Progress bars
796        ================================================== -->
797
798
799          <h3 id="progressbars">Progress bars</h3>
800
801          <div class="row">
802            <div class="span4">
803              <div class="progress">
804                <div class="bar" style="width: 60%;"></div>
805              </div>
806            </div>
807            <div class="span4">
808              <div class="progress progress-info progress-striped">
809                <div class="bar" style="width: 20%;"></div>
810              </div>
811            </div>
812            <div class="span4">
813              <div class="progress progress-danger progress-striped active">
814                <div class="bar" style="width: 45%"></div>
815              </div>
816            </div>
817          </div>
818          <br />
819
820
821        <!-- Alerts & Messages
822        ================================================== -->
823
824
825          <h3 id="alerts">Alerts</h3>
826
827          <div class="row">
828            <div class="span12">
829                <div class="alert alert-block">
830                  <a class="close">&times;</a>
831                  <h4 class="alert-heading">Alert block</h4>
832                  <p>Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
833                </div>
834            </div>
835          </div>
836          <div class="row">
837            <div class="span4">
838              <div class="alert alert-error">
839                <a class="close">&times;</a>
840                <strong>Error</strong> Change a few things up and try submitting again.
841              </div>
842            </div>
843            <div class="span4">
844              <div class="alert alert-success">
845                <a class="close">&times;</a>
846                <strong>Success</strong> You successfully read this important alert message.
847              </div>
848            </div>
849            <div class="span4">
850              <div class="alert alert-info">
851                <a class="close">&times;</a>
852                <strong>Information</strong> This alert needs your attention, but it's not super important.
853              </div>
854            </div>
855          </div>
856
857
858        </section>
859
860        <br><br><br><br>
861
862             <!-- Footer
863              ================================================== -->
864              <hr>
865
866              <footer id="footer" style="text-align: left">
867                <p class="pull-right"><a href="#">Back to top</a></p>
868                <div class="links">
869                                                <a href="http://zone.spip.org/trac/spip-zone/browser/_plugins_/bootstrap">SPIP-Zone</a>
870                  <a href="http://zone.spip.org/trac/spip-zone/log/_plugins_/bootstrap?format=rss&limit=100&mode=stop_on_copy">RSS</a>
871                                                <a href="http://spip.net">SPIP</a>
872                  <a href="https://twitter.com/spip">Twitter</a>
873                </div>
874                                        <p>
875                Code licensed under the <a href="http://www.gnu.org/licenses/gpl.html">GPL</a>.<br/>
876                Based on <a target="_blank" href="http://twitter.github.com/bootstrap/">Bootstrap</a>. Icons from <a target="_blank" href="http://glyphicons.com/">Glyphicons</a>.</p>
877              </footer>
878
879            </div><!-- /container -->
880          </body>
881</html>
Note: See TracBrowser for help on using the repository browser.