mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-22 21:22:52 +02:00
Code Issues Releases Wiki Activity

merged in my pending changes from 1.2-wip branch, resolve diffs as best as i could, update docs and alerts to use original classes, updated docs to include smaller section for layouts

Browse Source
This commit is contained in:
Mark Otto
2011-08-25 22:41:45 -07:00
parent 04b8e667d0
commit ce615d016a
6 changed files with 108 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
docs/assets/css/docs.css
View File

@@ -171,7 +171,7 @@ div.mini-layout div {
div.mini-layout div.mini-layout-body {
background-color: #dceaf4;
margin: 0 auto;
width: 450px;
width: 340px;
height: 340px;
}
div.mini-layout.fluid div.mini-layout-sidebar,
@@ -185,7 +185,7 @@ div.mini-layout.fluid div.mini-layout-sidebar {
height: 340px;
}
div.mini-layout.fluid div.mini-layout-body {
width: 400px;
width: 300px;
margin-left: 10px;
}
/* Topbar special styles

131
docs/index.html
View File

@@ -94,7 +94,7 @@
<p>Download, fork, pull, file issues, and more with the official Bootstrap repo on Github.</p>
<p><a target="_blank" href="https://github.com/twitter/bootstrap" class="btn primary">Bootstrap on GitHub &raquo;</a></p>
</div>
</div> <!-- /row -->
</div><!-- /row -->
</div>
</div>
@@ -137,7 +137,7 @@
<li>Example page template (more to come soon)</li>
</ul>
</div>
</div> <!-- /row -->
</div><!-- /row -->
</section>
@@ -167,7 +167,7 @@
&lt;/div&gt;
</pre>
</div>
</div> <!-- /row -->
</div><!-- /row -->
<div class="row show-grid" title="16 column layout">
<div class="span1 column">1</div>
<div class="span1 column">1</div>
@@ -185,7 +185,7 @@
<div class="span1 column">1</div>
<div class="span1 column">1</div>
<div class="span1 column">1</div>
</div> <!-- /row -->
</div><!-- /row -->
<div class="row show-grid" title="8 column layout">
<div class="span2 columns">2</div>
<div class="span2 columns">2</div>
@@ -195,7 +195,7 @@
<div class="span2 columns">2</div>
<div class="span2 columns">2</div>
<div class="span2 columns">2</div>
</div> <!-- /row -->
</div><!-- /row -->
<div class="row show-grid" title="Example uncommon layout">
<div class="span3 columns">3</div>
<div class="span3 columns">3</div>
@@ -203,45 +203,45 @@
<div class="span3 columns">3</div>
<div class="span3 columns">3</div>
<div class="span1 column">1</div>
</div> <!-- /row -->
</div><!-- /row -->
<div class="row show-grid" title="Four column layout">
<div class="span4 columns">4</div>
<div class="span4 columns">4</div>
<div class="span4 columns">4</div>
<div class="span4 columns">4</div>
</div> <!-- /row -->
</div><!-- /row -->
<div class="row show-grid" title="Irregular three column layout">
<div class="span4 columns">4</div>
<div class="span6 columns">6</div>
<div class="span6 columns">6</div>
</div> <!-- /row -->
</div><!-- /row -->
<div class="row show-grid" title="Half and half">
<div class="span8 columns">8</div>
<div class="span8 columns">8</div>
</div> <!-- /row -->
</div><!-- /row -->
<div class="row show-grid" title="Example uncommon two-column layout">
<div class="span5 columns">5</div>
<div class="span11 columns">11</div>
</div> <!-- /row -->
</div><!-- /row -->
<div class="row show-grid" title="Unnecessary single column layout">
<div class="span16 columns">16</div>
</div> <!-- /row -->
</div><!-- /row -->
<h4>Offsetting columns</h4>
<div class="row show-grid">
<div class="span4 columns">4</div>
<div class="span8 columns offset4">8 offset 4</div>
</div> <!-- /row -->
</div><!-- /row -->
<div class="row show-grid">
<div class="span4 columns offset4">4 offset 4</div>
<div class="span4 columns offset4">4 offset 4</div>
</div> <!-- /row -->
</div><!-- /row -->
<div class="row show-grid">
<div class="span5 columns offset3">5 offset 3</div>
<div class="span5 columns offset3">5 offset 3</div>
</div> <!-- /row -->
</div><!-- /row -->
<div class="row show-grid">
<div class="span10 columns offset6">10 offset 6</div>
</div> <!-- /row -->
</div><!-- /row -->
</section>
@@ -253,13 +253,10 @@
<h1>Layouts <small>Basic templates to create webpages</small></h1>
</div>
<!-- Fixed layout -->
<div class="row">
<div class="span4 columns">
<div class="span8 columns">
<h2>Fixed layout</h2>
<p>A basic 940px wide, centered container layout for just about any site or page.</p>
</div>
<div class="span12 columns">
<p>The default and simple 940px-wide, centered layout for just about any website or page provided by a single <code>&lt;div.container&gt;</code>.</p>
<div class="mini-layout">
<div class="mini-layout-body"></div>
</div>
@@ -270,16 +267,10 @@
&lt;/div&gt;
&lt;/body&gt;
</pre>
</div>
</div> <!-- /row -->
<!-- Fluid layout -->
<div class="row">
<div class="span4 columns">
</div><!-- /col -->
<div class="span8 columns">
<h2>Fluid layout</h2>
<p>A flexible fluid or liquid page structure with min- and max-widths and a left-hand sidebar. Great for apps.</p>
</div>
<div class="span12 columns">
<p>An alternative, flexible fluid page structure with min- and max-widths and a left-hand sidebar. Great for apps and docs.</p>
<div class="mini-layout fluid">
<div class="mini-layout-sidebar"></div>
<div class="mini-layout-body"></div>
@@ -296,8 +287,8 @@
&lt;/div&gt;
&lt;/body&gt;
</pre>
</div>
</div> <!-- /row -->
</div><!-- /col -->
</div><!-- /row -->
</section>
@@ -360,7 +351,7 @@
<h3>Abbreviations</h3>
<p>For abbreviations and acronyms, use the <code>&lt;abbr&gt;</code> tag (<code>&lt;acronym&gt;</code> is deprecated in <abbr title="HyperText Markup Langugage 5">HTML5</abbr>). Put the shorthand form within the tag and set a title for the complete name.</p>
</div>
</div> <!-- /row -->
</div><!-- /row -->
<!-- Blockquotes -->
<div class="row">
@@ -380,7 +371,7 @@
<small>Dr. Julius Hibbert</small>
</blockquote>
</div>
</div> <!-- /row -->
</div><!-- /row -->
<h2>Lists</h2>
<div class="row">
@@ -449,7 +440,7 @@
<dd>Etiam porta sem malesuada magna mollis euismod.</dd>
</dl>
</div>
</div> <!-- /row -->
</div><!-- /row -->
</section>
@@ -595,7 +586,7 @@
...
&lt;/table&gt;</pre>
</div>
</div> <!-- /row -->
</div><!-- /row -->
</section>
@@ -616,15 +607,15 @@
<fieldset>
<legend>Example form legend</legend>
<div class="clearfix">
<label for="">X-Large Input</label>
<label for="xlInput">X-Large Input</label>
<div class="input">
<input class="xlarge" id="xlInput" name="xlInput" size="30" type="text" />
</div>
</div> <!-- /clearfix -->
<div class="clearfix">
<label for="">Select</label>
<label for="normalSelect">Select</label>
<div class="input">
<select>
<select name="normalSelect" id="normalSelect">
<option>1</option>
<option>2</option>
<option>3</option>
@@ -634,9 +625,9 @@
</div>
</div> <!-- /clearfix -->
<div class="clearfix">
<label for="">Select</label>
<label for="mediumSelect">Select</label>
<div class="input">
<select class="medium">
<select class="medium" name="mediumSelect" id="mediumSelect">
<option>1</option>
<option>2</option>
<option>3</option>
@@ -784,7 +775,7 @@
</fieldset>
</form>
</div>
</div> <!-- /row -->
</div><!-- /row -->
<br />
@@ -798,15 +789,15 @@
<fieldset>
<legend>Example form legend</legend>
<div class="clearfix">
<label for="">X-Large Input</label>
<label for="xlInput">X-Large Input</label>
<div class="input">
<input class="xlarge" id="xlInput" name="xlInput" size="30" type="text" />
</div>
</div> <!-- /clearfix -->
<div class="clearfix">
<label for="">Select</label>
<label for="stackedSelect">Select</label>
<div class="input">
<select>
<select name="stackedSelect" id="stackedSelect">
<option>1</option>
<option>2</option>
<option>3</option>
@@ -853,7 +844,7 @@
</div>
</form>
</div>
</div> <!-- /row -->
</div><!-- /row -->
<div class="row">
<div class="span4 columns">
@@ -893,7 +884,7 @@
<button class="btn large primary disabled" disabled>Primary action</button>&nbsp;<button class="btn large" disabled>Action</button>
</div>
</div>
</div> <!-- /row -->
</div><!-- /row -->
</section>
@@ -993,7 +984,7 @@
&lt;/ul&gt;
</pre>
</div>
</div> <!-- /row -->
</div><!-- /row -->
<!-- Pagination -->
<div class="row">
@@ -1057,7 +1048,7 @@
&lt;/div&gt;
</pre>
</div>
</div> <!-- /row -->
</div><!-- /row -->
</section>
@@ -1077,24 +1068,24 @@
<p>One-line messages for highlighting the failure, possible failure, or success of an action. Particularly useful for forms.</p>
</div>
<div class="span12 columns">
<div class="alert">
<a class="close" href="#">&times;</a>
<p><strong>Oh snap!</strong> Change this and that and try again.</p>
</div>
<div class="alert error">
<div class="alert-message warning">
<a class="close" href="#">&times;</a>
<p><strong>Holy gaucamole!</strong> Best check yo self, you’re not looking too good.</p>
</div>
<div class="alert success">
<div class="alert-message error">
<a class="close" href="#">&times;</a>
<p><strong>Oh snap!</strong> Change this and that and try again.</p>
</div>
<div class="alert-message success">
<a class="close" href="#">&times;</a>
<p><strong>Well done!</strong> You successfully read this alert message.</p>
</div>
<div class="alert info">
<div class="alert-message info">
<a class="close" href="#">&times;</a>
<p><strong>Heads up!</strong> This is an alert that needs your attention, but it’s not a huge priority just yet.</p>
</div>
</div>
</div> <!-- /row -->
</div><!-- /row -->
<!-- Block messages -->
<div class="row">
<div class="span4 columns">
@@ -1103,28 +1094,28 @@
<p>For messages that require a bit of explanation, we have paragraph style alerts. These are perfect for bubbling up longer error messages, warning a user of a pending action, or just presenting information for more emphasis on the page.</p>
</div>
<div class="span12 columns">
<div class="alert alert-block">
<a class="close" href="#">&times;</a>
<p><strong>Oh snap! You got an error!</strong> Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.</p>
<div class="alert-actions">
<a class="btn small" href="#">Take this action</a> <a class="btn small" href="#">Or do this</a>
</div>
</div>
<div class="alert alert-block error">
<div class="alert-message block-message warning">
<a class="close" href="#">&times;</a>
<p><strong>Holy gaucamole! This is a warning!</strong> 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>
<div class="alert-actions">
<a class="btn small" href="#">Take this action</a> <a class="btn small" href="#">Or do this</a>
</div>
</div>
<div class="alert alert-block success">
<div class="alert-message block-message error">
<a class="close" href="#">&times;</a>
<p><strong>Oh snap! You got an error!</strong> Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.</p>
<div class="alert-actions">
<a class="btn small" href="#">Take this action</a> <a class="btn small" href="#">Or do this</a>
</div>
</div>
<div class="alert-message block-message success">
<a class="close" href="#">&times;</a>
<p><strong>Well done!</strong> You successfully read this alert message. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas faucibus mollis interdum.</p>
<div class="alert-actions">
<a class="btn small" href="#">Take this action</a> <a class="btn small" href="#">Or do this</a>
</div>
</div>
<div class="alert alert-block info">
<div class="alert-message block-message info">
<a class="close" href="#">&times;</a>
<p><strong>Heads up!</strong> This is an alert that needs your attention, but it’s not a huge priority just yet.</p>
<div class="alert-actions">
@@ -1132,7 +1123,7 @@
</div>
</div>
</div>
</div> <!-- /row -->
</div><!-- /row -->
</section>
@@ -1165,7 +1156,7 @@
</div>
</div>
</div>
</div> <!-- /row -->
</div><!-- /row -->
<!-- Tooltips -->
<div class="row">
@@ -1198,7 +1189,7 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita
</div>
</div>
</div>
</div> <!-- /row -->
</div><!-- /row -->
<!-- Popovers -->
<div class="row">
@@ -1222,7 +1213,7 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita
</div>
</div>
</div>
</div> <!-- /row -->
</div><!-- /row -->
</section>