github/bootstrap
1
1
Fork 0
mirror of https://github.com/jasny/bootstrap.git synced 2026-04-24 03:00:49 -04:00
Code Issues Packages Projects Releases Wiki Activity

Build bootstrap + docs

Browse Source
This commit is contained in:
Arnold Daniels
2012-02-16 15:30:43 +01:00
parent 601bffc748
commit 61bc092e63
24 changed files with 2854 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
docs/components.html
View File

@@ -2,7 +2,7 @@
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap, from Twitter</title>
<title>Bootstrap CSS and Javascript library</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
@@ -597,7 +597,7 @@
<p>Howdy, I'm in Section 2.</p>
</div>
<div class="tab-pane" id="3">
<p>What up girl, this is Section 3.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque iaculis sapien lorem. Nullam justo leo, rhoncus et convallis id, tincidunt non lacus. Curabitur cursus dignissim ipsum, id ultricies est rhoncus sed. Proin vel dapibus lacus. Sed vulputate iaculis turpis vel egestas. Curabitur in accumsan nunc. In et urna ligula. Sed lorem neque, suscipit sed consequat at, laoreet vitae sapien. Curabitur congue dapibus dolor et eleifend. Curabitur vel lacinia eros. </p>
</div>
</div>
</div> <!-- /tabbable -->
@@ -642,7 +642,7 @@
<p>Howdy, I'm in Section B.</p>
</div>
<div class="tab-pane" id="C">
<p>What up girl, this is Section C.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque iaculis sapien lorem. Nullam justo leo, rhoncus et convallis id, tincidunt non lacus. Curabitur cursus dignissim ipsum, id ultricies est rhoncus sed. Proin vel dapibus lacus. Sed vulputate iaculis turpis vel egestas. Curabitur in accumsan nunc. In et urna ligula. Sed lorem neque, suscipit sed consequat at, laoreet vitae sapien. Curabitur congue dapibus dolor et eleifend. Curabitur vel lacinia eros. </p>
</div>
</div>
<ul class="nav nav-tabs">
@@ -679,7 +679,7 @@
<p>Howdy, I'm in Section B.</p>
</div>
<div class="tab-pane" id="lC">
<p>What up girl, this is Section C.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque iaculis sapien lorem. Nullam justo leo, rhoncus et convallis id, tincidunt non lacus. Curabitur cursus dignissim ipsum, id ultricies est rhoncus sed. Proin vel dapibus lacus. Sed vulputate iaculis turpis vel egestas. Curabitur in accumsan nunc. In et urna ligula. Sed lorem neque, suscipit sed consequat at, laoreet vitae sapien. Curabitur congue dapibus dolor et eleifend. Curabitur vel lacinia eros.</p>
</div>
</div>
</div> <!-- /tabbable -->
@@ -711,7 +711,7 @@
<p>Howdy, I'm in Section B.</p>
</div>
<div class="tab-pane" id="rC">
<p>What up girl, this is Section C.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque iaculis sapien lorem. Nullam justo leo, rhoncus et convallis id, tincidunt non lacus. Curabitur cursus dignissim ipsum, id ultricies est rhoncus sed. Proin vel dapibus lacus. Sed vulputate iaculis turpis vel egestas. Curabitur in accumsan nunc. In et urna ligula. Sed lorem neque, suscipit sed consequat at, laoreet vitae sapien. Curabitur congue dapibus dolor et eleifend. Curabitur vel lacinia eros.</p>
</div>
</div>
</div> <!-- /tabbable -->
@@ -728,6 +728,46 @@
</div>
</div>
<h3>Bordered tabbable</h3>
<div class="row">
<div class="span4">
<p>You can place a border around the tab content by adding <code>.tabbable-bordered</code> to the <code>.tabbable</code>.</p>
<div class="alert"><b>Warning!</b> A bordered tabbable with the tabs on the left or right side, will not look well if the height of <code>.tab-content</code> is less than the height of <code>.nav-tabs</code>.</div>
</div>
<div class="span4">
<div class="tabbable tabbable-bordered">
<ul class="nav nav-tabs">
<li class="active"><a href="#bA" data-toggle="tab">Section 1</a></li>
<li><a href="#bB" data-toggle="tab">Section 2</a></li>
<li><a href="#bC" data-toggle="tab">Section 3</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="bA">
<p>I'm in Section A.</p>
</div>
<div class="tab-pane" id="bB">
<p>Howdy, I'm in Section B.</p>
</div>
<div class="tab-pane" id="bC">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque iaculis sapien lorem. Nullam justo leo, rhoncus et convallis id, tincidunt non lacus. Curabitur cursus dignissim ipsum, id ultricies est rhoncus sed. Proin vel dapibus lacus. Sed vulputate iaculis turpis vel egestas. Curabitur in accumsan nunc. In et urna ligula. Sed lorem neque, suscipit sed consequat at, laoreet vitae sapien. Curabitur congue dapibus dolor et eleifend. Curabitur vel lacinia eros.</p>
</div>
</div>
</div> <!-- /tabbable -->
</div>
<div class="span4">
<pre class="prettyprint linenums">
&lt;div class="tabbable tabbable-bordered"&gt;
&lt;ul class="nav nav-tabs"&gt;
...
&lt;/ul&gt;
&lt;div class="tab-content"&gt;
...
&lt;/div&gt;
&lt;/div&gt;
</pre>
</div>
</div>
</section>
@@ -1359,6 +1399,33 @@
</div>
</div>
<h2>Page alerts <small>Show an alert on top of your page.</small></h2>
<div class="row">
<div class="span4">
<p>Know those nice little alerts after you save your profile? With <code>.page-alert</code> the alert will be shown on top op your page.</p>
<pre class="prettyprint linenums">
&lt;body&gt;
&lt;div class="navbar"&gt; ... &lt;/div&gt;
&lt;div class="page-alert"&gt;
&lt;div class="alert"&gt;
...
&lt;/div&gt;
&lt;/div&gt;
</pre>
</div>
<div class="span8">
<div id="page-alert-container">
<div class="page-alert">
<div class="alert alert-success">
<a class="close">×</a>
<strong>Success!</strong> Your profile information has been saved.
</div>
</div>
<h5>Ultricies vehicula</h5>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>
</div>
</div>
</section>
@@ -1486,6 +1553,7 @@
<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>
<p><a href="http://somerandomdude.com/work/iconic/">Iconic icon set</a>, licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
</footer>
</div><!-- /container -->
@@ -1510,6 +1578,8 @@
<script src="assets/js/bootstrap-collapse.js"></script>
<script src="assets/js/bootstrap-carousel.js"></script>
<script src="assets/js/bootstrap-typeahead.js"></script>
<script src="assets/js/bootstrap-inputmask.js"></script>
<script src="assets/js/bootstrap-placeholder.js"></script>
<script src="assets/js/application.js"></script>