mirror of
https://github.com/twbs/bootstrap.git
synced 2025-08-12 00:24:03 +02:00
Merge branch '1.1.1-wip'
This commit is contained in:
Jacob Thornton
213
docs/index.html
213
docs/index.html
@@ -12,7 +12,7 @@
|
||||
<![endif]-->
|
||||
|
||||
<!-- Le styles -->
|
||||
<link href="../bootstrap-1.1.0.css" rel="stylesheet">
|
||||
<link href="../bootstrap-1.1.1.css" rel="stylesheet">
|
||||
<link href="assets/css/docs.css" rel="stylesheet">
|
||||
<link href="assets/js/google-code-prettify/prettify.css" rel="stylesheet">
|
||||
|
||||
@@ -65,7 +65,7 @@
|
||||
It includes base CSS and HTML for typography, forms, buttons, tables, grids, navigation, and more.<br />
|
||||
</p>
|
||||
<p><strong>Nerd alert:</strong> Bootstrap is <a href="#less" title="Read about using Bootstrap with Less">built with Less</a> and was designed to work out of the gate with modern browsers in mind.</p>
|
||||
</div> <!-- /container -->
|
||||
</div><!-- /container -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -78,7 +78,7 @@
|
||||
<h6>Hotlink the CSS</h6>
|
||||
<p>For the quickest and easiest start, just copy this snippet into your webpage.</p>
|
||||
<form>
|
||||
<textarea class="copy-code" rows="1"><link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap-1.1.0.min.css"></textarea>
|
||||
<textarea class="copy-code" rows="1"><link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap-1.1.1.min.css"></textarea>
|
||||
</form>
|
||||
</div>
|
||||
<div class="span5 columns">
|
||||
@@ -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 »</a></p>
|
||||
</div>
|
||||
</div> <!-- /row -->
|
||||
</div><!-- /row -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -118,12 +118,13 @@
|
||||
<div class="span5 columns">
|
||||
<h3>Browser support</h3>
|
||||
<p>Bootstrap is tested and supported in major modern browsers like Chrome, Safari, Internet Explorer, and Firefox.</p>
|
||||
<img src="assets/img/browsers.png" width="220px" height="48px" alt="Tested and supported in Chrome, Safari, Internet Explorer, and Firefox">
|
||||
<img src="assets/img/browsers.png" width="258px" height="48px" alt="Tested and supported in Chrome, Safari, Internet Explorer, and Firefox">
|
||||
<ul>
|
||||
<li>Latest Safari</li>
|
||||
<li>Latest Google Chrome</li>
|
||||
<li>Firefox 4+</li>
|
||||
<li>Internet Explorer 7+</li>
|
||||
<li>Opera 11</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="span5 columns">
|
||||
@@ -136,7 +137,7 @@
|
||||
<li>Example page template (more to come soon)</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div> <!-- /row -->
|
||||
</div><!-- /row -->
|
||||
</section>
|
||||
|
||||
|
||||
@@ -166,7 +167,7 @@
|
||||
</div>
|
||||
</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>
|
||||
@@ -184,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>
|
||||
@@ -194,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>
|
||||
@@ -202,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>
|
||||
|
||||
|
||||
@@ -252,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><div.container></code>.</p>
|
||||
<div class="mini-layout">
|
||||
<div class="mini-layout-body"></div>
|
||||
</div>
|
||||
@@ -269,16 +267,10 @@
|
||||
</div>
|
||||
</body>
|
||||
</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>
|
||||
@@ -295,8 +287,8 @@
|
||||
</div>
|
||||
</body>
|
||||
</pre>
|
||||
</div>
|
||||
</div> <!-- /row -->
|
||||
</div><!-- /col -->
|
||||
</div><!-- /row -->
|
||||
</section>
|
||||
|
||||
|
||||
@@ -311,8 +303,10 @@
|
||||
<!-- Headings & Paragraph Copy -->
|
||||
<div class="row">
|
||||
<div class="span4 columns">
|
||||
<h2>Headings and copy</h2>
|
||||
<h2>Headings & copy</h2>
|
||||
<p>A standard typographic hierarchy for structuring your webpages.</p>
|
||||
<p>The entire typographic grid is based on two Less variables in our preboot.less file: <code>@basefont</code> and <code>@baseline</code>. The first is the base font-size used throughout and the second is the base line-height.</p>
|
||||
<p>We use those variables, and some math, to create the margins, paddings, and line-heights of all our type and more.</p>
|
||||
</div>
|
||||
<div class="span4 columns">
|
||||
<h1>h1. Heading 1</h1>
|
||||
@@ -346,7 +340,7 @@
|
||||
<p>Emphasis tags (<code><strong></code> and <code><em></code>) should be used to indicate additional importance or emphasis of a word or phrase relative to its surrounding copy. Use <code><strong></code> for importance and <code><em></code> for <em>stress</em> emphasis.</p>
|
||||
<h3>Emphasis in a paragraph</h3>
|
||||
<p><a href="#">Fusce dapibus</a>, <strong>tellus ac cursus commodo</strong>, <em>tortor mauris condimentum nibh</em>, ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
<p><strong>Note:</strong> It's still okay to use <code><b></code> and <code><i></code> tags in HTML5, but they don't come with inherent styles anymore. <code><b></code> is meant to highlight words or phrases without conveying additional importance, while <code><i></code> is mostly for voice, technical terms, etc.</p>
|
||||
<p><strong>Note:</strong> It's still okay to use <code><b></code> and <code><i></code> tags in HTML5 and they don't have to be styled bold and italic, respectively (although if there is a more semantic element, use it). <code><b></code> is meant to highlight words or phrases without conveying additional importance, while <code><i></code> is mostly for voice, technical terms, etc.</p>
|
||||
<h3>Addresses</h3>
|
||||
<p>The <code><address></code> element is used for contact information for its nearest ancestor, or the entire body of work. Here’s how it looks:</p>
|
||||
<address>
|
||||
@@ -359,7 +353,7 @@
|
||||
<h3>Abbreviations</h3>
|
||||
<p>For abbreviations and acronyms, use the <code><abbr></code> tag (<code><acronym></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">
|
||||
@@ -379,7 +373,7 @@
|
||||
<small>Dr. Julius Hibbert</small>
|
||||
</blockquote>
|
||||
</div>
|
||||
</div> <!-- /row -->
|
||||
</div><!-- /row -->
|
||||
|
||||
<h2>Lists</h2>
|
||||
<div class="row">
|
||||
@@ -448,7 +442,7 @@
|
||||
<dd>Etiam porta sem malesuada magna mollis euismod.</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</div> <!-- /row -->
|
||||
</div><!-- /row -->
|
||||
</section>
|
||||
|
||||
|
||||
@@ -511,7 +505,7 @@
|
||||
</tbody>
|
||||
</table>
|
||||
<pre class="prettyprint linenums">
|
||||
<table class="common-table">
|
||||
<table>
|
||||
...
|
||||
</table></pre>
|
||||
<h3>Example: Zebra-striped</h3>
|
||||
@@ -548,7 +542,7 @@
|
||||
</table>
|
||||
<p><strong>Note:</strong> Zebra-striping is a progressive enhancement not available for older browsers like IE8 and below.</p>
|
||||
<pre class="prettyprint linenums">
|
||||
<table class="common-table zebra-striped">
|
||||
<table class="zebra-striped">
|
||||
...
|
||||
</table></pre>
|
||||
<h3>Example: Zebra-striped w/ TableSorter.js</h3>
|
||||
@@ -590,11 +584,11 @@
|
||||
$("table#sortTableExample").tablesorter({ sortList: [[1,0]] });
|
||||
});
|
||||
</script>
|
||||
<table class="common-table zebra-striped">
|
||||
<table class="zebra-striped">
|
||||
...
|
||||
</table></pre>
|
||||
</div>
|
||||
</div> <!-- /row -->
|
||||
</div><!-- /row -->
|
||||
</section>
|
||||
|
||||
|
||||
@@ -619,7 +613,7 @@
|
||||
<div class="input">
|
||||
<input class="xlarge" id="xlInput" name="xlInput" size="30" type="text" />
|
||||
</div>
|
||||
</div> <!-- /clearfix -->
|
||||
</div><!-- /clearfix -->
|
||||
<div class="clearfix">
|
||||
<label for="normalSelect">Select</label>
|
||||
<div class="input">
|
||||
@@ -631,7 +625,7 @@
|
||||
<option>5</option>
|
||||
</select>
|
||||
</div>
|
||||
</div> <!-- /clearfix -->
|
||||
</div><!-- /clearfix -->
|
||||
<div class="clearfix">
|
||||
<label for="mediumSelect">Select</label>
|
||||
<div class="input">
|
||||
@@ -643,26 +637,26 @@
|
||||
<option>5</option>
|
||||
</select>
|
||||
</div>
|
||||
</div> <!-- /clearfix -->
|
||||
</div><!-- /clearfix -->
|
||||
<div class="clearfix">
|
||||
<label>Uneditable Input</label>
|
||||
<div class="input">
|
||||
<span class="uneditable-input">Some Value Here</span>
|
||||
</div>
|
||||
</div> <!-- /clearfix -->
|
||||
</div><!-- /clearfix -->
|
||||
<div class="clearfix">
|
||||
<label for="disabledInput">Disabled Input</label>
|
||||
<div class="input">
|
||||
<input class="xlarge disabled" id="disabledInput" name="disabledInput" size="30" type="text" placeholder="Disabled input here… carry on." disabled />
|
||||
</div>
|
||||
</div> <!-- /clearfix -->
|
||||
</div><!-- /clearfix -->
|
||||
<div class="clearfix error">
|
||||
<label for="xlInput">X-Large Input</label>
|
||||
<div class="input">
|
||||
<input class="xlarge error" id="xlInput" name="xlInput" size="30" type="text" />
|
||||
<span class="help-inline">Small snippet of help text</span>
|
||||
</div>
|
||||
</div> <!-- /clearfix -->
|
||||
</div><!-- /clearfix -->
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<legend>Example form legend</legend>
|
||||
@@ -674,7 +668,7 @@
|
||||
<input class="medium" id="prependedInput" name="prependedInput" size="16" type="text" />
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- /clearfix -->
|
||||
</div><!-- /clearfix -->
|
||||
<div class="clearfix">
|
||||
<label for="prependedInput2">Prepended Checkbox</label>
|
||||
<div class="input">
|
||||
@@ -683,7 +677,7 @@
|
||||
<input class="mini" id="prependedInput2" name="prependedInput2" size="16" type="text" />
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- /clearfix -->
|
||||
</div><!-- /clearfix -->
|
||||
<div class="clearfix">
|
||||
<label for="appendedInput">Appended Checkbox</label>
|
||||
<div class="input">
|
||||
@@ -692,13 +686,13 @@
|
||||
<label class="add-on active"><input type="checkbox" name="" id="" value="" checked="checked" /></label>
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- /clearfix -->
|
||||
</div><!-- /clearfix -->
|
||||
<div class="clearfix">
|
||||
<label for="xlInput">File Input</label>
|
||||
<div class="input">
|
||||
<input class="input-file" id="fileInput" name="fileInput" type="file" />
|
||||
</div>
|
||||
</div> <!-- /clearfix -->
|
||||
</div><!-- /clearfix -->
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<legend>Example form legend</legend>
|
||||
@@ -735,7 +729,7 @@
|
||||
<strong>Note:</strong> Labels surround all the options for much larger click areas and a more usable form.
|
||||
</span>
|
||||
</div>
|
||||
</div> <!-- /clearfix -->
|
||||
</div><!-- /clearfix -->
|
||||
<div class="clearfix">
|
||||
<label>Date Range</label>
|
||||
<div class="input">
|
||||
@@ -748,7 +742,7 @@
|
||||
<span class="help-inline">All times are shown as Pacific Standard Time (GMT -08:00).</span>
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- /clearfix -->
|
||||
</div><!-- /clearfix -->
|
||||
<div class="clearfix">
|
||||
<label for="textarea">Textarea</label>
|
||||
<div class="input">
|
||||
@@ -757,7 +751,7 @@
|
||||
Block of help text to describe the field above if need be.
|
||||
</span>
|
||||
</div>
|
||||
</div> <!-- /clearfix -->
|
||||
</div><!-- /clearfix -->
|
||||
<div class="clearfix">
|
||||
<label id="optionsRadio">List of Options</label>
|
||||
<div class="input">
|
||||
@@ -776,14 +770,14 @@
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div> <!-- /clearfix -->
|
||||
</div><!-- /clearfix -->
|
||||
<div class="actions">
|
||||
<button type="submit" class="btn primary">Save Changes</button> <button type="reset" class="btn">Cancel</button>
|
||||
</div>
|
||||
</fieldset>
|
||||
</form>
|
||||
</div>
|
||||
</div> <!-- /row -->
|
||||
</div><!-- /row -->
|
||||
|
||||
<br />
|
||||
|
||||
@@ -801,7 +795,7 @@
|
||||
<div class="input">
|
||||
<input class="xlarge" id="xlInput" name="xlInput" size="30" type="text" />
|
||||
</div>
|
||||
</div> <!-- /clearfix -->
|
||||
</div><!-- /clearfix -->
|
||||
<div class="clearfix">
|
||||
<label for="stackedSelect">Select</label>
|
||||
<div class="input">
|
||||
@@ -813,7 +807,7 @@
|
||||
<option>5</option>
|
||||
</select>
|
||||
</div>
|
||||
</div> <!-- /clearfix -->
|
||||
</div><!-- /clearfix -->
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<legend>Example form legend</legend>
|
||||
@@ -823,7 +817,7 @@
|
||||
<input class="xlarge error" id="xlInput" name="xlInput" size="30" type="text" />
|
||||
<span class="help-inline">Small snippet of help text</span>
|
||||
</div>
|
||||
</div> <!-- /clearfix -->
|
||||
</div><!-- /clearfix -->
|
||||
<div class="clearfix">
|
||||
<label id="optionsCheckboxes">List of Options</label>
|
||||
<div class="input">
|
||||
@@ -845,26 +839,30 @@
|
||||
<strong>Note:</strong> Labels surround all the options for much larger click areas and a more usable form.
|
||||
</span>
|
||||
</div>
|
||||
</div> <!-- /clearfix -->
|
||||
</div><!-- /clearfix -->
|
||||
</fieldset>
|
||||
<div class="actions">
|
||||
<button type="submit" class="btn primary">Save Changes</button> <button type="reset" class="btn">Cancel</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div> <!-- /row -->
|
||||
</div><!-- /row -->
|
||||
|
||||
<div class="row">
|
||||
<div class="span4 columns">
|
||||
<h2>Buttons</h2>
|
||||
<p>As a convention, buttons are used for actions while links are used for objects. For instance, "Download" could be a button and "recent activity" could be a link.</p>
|
||||
<p>All buttons default to a light gray style, but a blue <code>.primary</code> class and a red <code>.danger</code> class is available. Plus, rolling your own styles is easy peasy.</p>
|
||||
<p>All buttons default to a light gray style, but a number of functional classes can be applied for different color styles. These classes include a blue <code>.primary</code> class, a light-blue <code>.info</code> class, a green <code>.success</code> class, and a red <code>.danger</code> class. Plus, rolling your own styles is easy peasy.</p>
|
||||
</div>
|
||||
<div class="span12 columns">
|
||||
<h3>Example buttons</h3>
|
||||
<p>Button styles can be applied to anything with the <code>.btn</code> applied. Typically you’ll want to apply these to only <code><a></code>, <code><button></code>, and select <code><input></code> elements. Here’s how it looks:</p>
|
||||
<div class="well" style="padding: 14px 19px;">
|
||||
<button type="submit" class="btn primary">Submit</button> <button type="submit" class="btn">Cancel</button> <button class="btn danger">Delete</button>
|
||||
<button class="btn primary">Primary</button>
|
||||
<button class="btn">Default</button>
|
||||
<button class="btn info">Info</button>
|
||||
<button class="btn success">Success</button>
|
||||
<button class="btn danger">Danger</button>
|
||||
</div>
|
||||
<h3>Alternate sizes</h3>
|
||||
<p>Fancy larger or smaller buttons? Have at it!</p>
|
||||
@@ -888,7 +886,7 @@
|
||||
<button class="btn large primary disabled" disabled>Primary action</button> <button class="btn large" disabled>Action</button>
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- /row -->
|
||||
</div><!-- /row -->
|
||||
</section>
|
||||
|
||||
|
||||
@@ -927,9 +925,9 @@
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div> <!-- /fill -->
|
||||
</div> <!-- /topbar -->
|
||||
</div> <!-- topbar-wrapper -->
|
||||
</div><!-- /fill -->
|
||||
</div><!-- /topbar -->
|
||||
</div><!-- /topbar-wrapper -->
|
||||
|
||||
<div class="row">
|
||||
<div class="span5 columns">
|
||||
@@ -945,6 +943,7 @@
|
||||
<p>As part of the main navigation, we’ve included the ability for you to add dropdowns to your nav. Check out the secondary nav above (right aligned) to see how it’s done.</p>
|
||||
</div>
|
||||
</div>
|
||||
<p><strong>Note:</strong> When using the topbar on any page, be sure to account for the overlap it causes by adding <code>padding-top: 40px;</code> to your <code>body</code>.</p>
|
||||
|
||||
<br />
|
||||
|
||||
@@ -988,7 +987,7 @@
|
||||
</ul>
|
||||
</pre>
|
||||
</div>
|
||||
</div> <!-- /row -->
|
||||
</div><!-- /row -->
|
||||
|
||||
<!-- Pagination -->
|
||||
<div class="row">
|
||||
@@ -1052,7 +1051,7 @@
|
||||
</div>
|
||||
</pre>
|
||||
</div>
|
||||
</div> <!-- /row -->
|
||||
</div><!-- /row -->
|
||||
|
||||
</section>
|
||||
|
||||
@@ -1068,17 +1067,18 @@
|
||||
<div class="row">
|
||||
<div class="span4 columns">
|
||||
<h2>Basic alerts</h2>
|
||||
<p><code>div.alert-message</code></p>
|
||||
<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-message error">
|
||||
<a class="close" href="#">×</a>
|
||||
<p><strong>Oh snap!</strong> Change this and that and try again.</p>
|
||||
</div>
|
||||
<div class="alert-message warning">
|
||||
<a class="close" href="#">×</a>
|
||||
<p><strong>Holy gaucamole!</strong> Best check yo self, you’re not looking too good.</p>
|
||||
</div>
|
||||
<div class="alert-message error">
|
||||
<a class="close" href="#">×</a>
|
||||
<p><strong>Oh snap!</strong> Change this and that and try again.</p>
|
||||
</div>
|
||||
<div class="alert-message success">
|
||||
<a class="close" href="#">×</a>
|
||||
<p><strong>Well done!</strong> You successfully read this alert message.</p>
|
||||
@@ -1088,36 +1088,45 @@
|
||||
<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">
|
||||
<h2>Block messages</h2>
|
||||
<p><code>div.alert-message.block-message</code></p>
|
||||
<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-message block-message error">
|
||||
<a class="close" href="#">×</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>
|
||||
<p><a class="btn small" href="#">Take this action</a> <a class="btn small" href="#">Or do this</a></p>
|
||||
</div>
|
||||
<div class="alert-message block-message warning">
|
||||
<a class="close" href="#">×</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>
|
||||
<p><a class="btn small" href="#">Take this action</a> <a class="btn small" href="#">Or do this</a></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 error">
|
||||
<a class="close" href="#">×</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="#">×</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>
|
||||
<p><a class="btn small" href="#">Take this action</a> <a class="btn small" href="#">Or do this</a></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 info">
|
||||
<a class="close" href="#">×</a>
|
||||
<p><strong>Heads up!</strong> This is an alert that needs your attention, but it’s not a huge priority just yet.</p>
|
||||
<p><a class="btn small" href="#">Take this action</a> <a class="btn small" href="#">Or do this</a></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>
|
||||
</div> <!-- /row -->
|
||||
</div><!-- /row -->
|
||||
</section>
|
||||
|
||||
|
||||
@@ -1150,7 +1159,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- /row -->
|
||||
</div><!-- /row -->
|
||||
|
||||
<!-- Tooltips -->
|
||||
<div class="row">
|
||||
@@ -1183,7 +1192,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">
|
||||
@@ -1207,7 +1216,7 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- /row -->
|
||||
</div><!-- /row -->
|
||||
</section>
|
||||
|
||||
|
||||
@@ -1228,12 +1237,12 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita
|
||||
<p>Use this option to make full use of Bootstrap’s Less variables, mixins, and nesting in CSS via javascript in your browser.</p>
|
||||
<pre class="prettyprint linenums">
|
||||
<link rel="stylesheet/less" href="less/bootstrap.less" media="all" />
|
||||
<script src="js/less-1.0.41.min.js"></script></pre>
|
||||
<script src="js/less-1.1.3.min.js"></script></pre>
|
||||
<p>Not feeling the .js solution? <a href="http://incident57.com/less" target="_blank">Try the Less Mac app</a> or <a href="http://lesscss.org/#-client-side-usage" target="_blank">use Node.js</a> to compile when you deploy your code.</p>
|
||||
|
||||
<h2>What’s included</h2>
|
||||
<p>Here are some of the highlights of what’s included in Twitter Bootstrap as part of Bootstrap. Head over to the Bootstrap website or Github project page to download and learn more.</p>
|
||||
<h3>Color variables</h3>
|
||||
<h3>Variables</h3>
|
||||
<p>Variables in Less are perfect for maintaining and updating your CSS headache free. When you want to change a color value or a frequently used value, update it in one spot and you’re set.</p>
|
||||
<pre class="prettyprint linenums">
|
||||
// Links
|
||||
@@ -1257,8 +1266,9 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita
|
||||
@pink: #c3325f;
|
||||
@purple: #7a43b6;
|
||||
|
||||
// Baseline
|
||||
@baseline: 20px;
|
||||
// Baseline grid
|
||||
@basefont: 13px;
|
||||
@baseline: 18px;
|
||||
</pre>
|
||||
|
||||
<h3>Commenting</h3>
|
||||
@@ -1310,8 +1320,6 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita
|
||||
background-image: -webkit-gradient(linear, left top, right top, color-stop(0%, @startColor), color-stop(100%, @endColor)); // Safari 4+, Chrome 2+
|
||||
background-image: -webkit-linear-gradient(left, @startColor, @endColor); // Safari 5.1+, Chrome 10+
|
||||
background-image: -o-linear-gradient(left, @startColor, @endColor); // Opera 11.10
|
||||
-ms-filter: %("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",@startColor,@endColor); // IE8+
|
||||
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",@startColor,@endColor)); // IE6 & IE7
|
||||
background-image: linear-gradient(left, @startColor, @endColor); // Le standard
|
||||
}
|
||||
.vertical (@startColor: #555, @endColor: #333) {
|
||||
@@ -1323,14 +1331,12 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, @startColor), color-stop(100%, @endColor)); // Safari 4+, Chrome 2+
|
||||
background-image: -webkit-linear-gradient(@startColor, @endColor); // Safari 5.1+, Chrome 10+
|
||||
background-image: -o-linear-gradient(@startColor, @endColor); // Opera 11.10
|
||||
-ms-filter: %("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor); // IE8+
|
||||
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor)); // IE6 & IE7
|
||||
background-image: linear-gradient(@startColor, @endColor); // The standard
|
||||
}
|
||||
.directional (@startColor: #555, @endColor: #333, @deg: 45deg) {
|
||||
...
|
||||
}
|
||||
.vertical-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 0.5, @endColor: #c3325f) {
|
||||
.vertical-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) {
|
||||
...
|
||||
}
|
||||
}
|
||||
@@ -1343,6 +1349,7 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita
|
||||
@gridColumns: 16;
|
||||
@gridColumnWidth: 40px;
|
||||
@gridGutterWidth: 20px;
|
||||
@siteWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
|
||||
|
||||
// Grid System
|
||||
.container {
|
||||
@@ -1351,16 +1358,10 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita
|
||||
.clearfix();
|
||||
}
|
||||
.columns(@columnSpan: 1) {
|
||||
display: inline;
|
||||
float: left;
|
||||
width: (@gridColumnWidth * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1));
|
||||
margin-left: @gridGutterWidth;
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
.offset(@columnOffset: 1) {
|
||||
margin-left: (@gridColumnWidth * @columnOffset) + (@gridGutterWidth * (@columnOffset - 1)) !important;
|
||||
margin-left: (@gridColumnWidth * @columnOffset) + (@gridGutterWidth * (@columnOffset - 1)) + @extraSpace;
|
||||
}
|
||||
</pre>
|
||||
</div>
|
||||
@@ -1368,7 +1369,7 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita
|
||||
|
||||
</section>
|
||||
|
||||
</div> <!-- /container -->
|
||||
</div><!-- /container -->
|
||||
|
||||
<div id="footer">
|
||||
<div class="inner">
|
||||
|
||||
Reference in New Issue
Block a user