mirrors/bootstrap
2
0
Fork 0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-05-21 13:24:08 +03:00
Code Activity

.bs-docs-example to .bs-example

Browse Source
This commit is contained in:
Mark Otto
2013-05-08 22:56:29 -07:00
parent ac28ad81d0
commit 09c3a4b3bc
5 changed files with 206 additions and 206 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/css.html
+59 -59
View File
@@ -282,7 +282,7 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
<h2 id="type-headings">Headings</h2>
<p>All HTML headings, <code>&lt;h1&gt;</code> through <code>&lt;h6&gt;</code> are available.</p>
<div class="bs-docs-example bs-docs-example-type">
<div class="bs-example bs-example-type">
<table class="table">
<tbody>
<tr>
@@ -324,7 +324,7 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
<!-- Body copy -->
<h2 id="type-body-copy">Body copy</h2>
<p>Bootstrap's global default <code>font-size</code> is <strong>14px</strong>, with a <code>line-height</code> of <strong>20px</strong>. This is applied to the <code>&lt;body&gt;</code> and all paragraphs. In addition, <code>&lt;p&gt;</code> (paragraphs) receive a bottom margin of half their line-height (10px by default).</p>
<div class="bs-docs-example">
<div class="bs-example">
<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.</p>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
@@ -336,7 +336,7 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
<!-- Body copy .lead -->
<h3>Lead body copy</h3>
<p>Make a paragraph stand out by adding <code>.lead</code>.</p>
<div class="bs-docs-example">
<div class="bs-example">
<p class="lead">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>
</div>
{% highlight html %}
@@ -354,7 +354,7 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
<h3>Small text</h3>
<p>For de-emphasizing inline or blocks of text, use the <code>&lt;small&gt;</code> tag to set text at 85% the size of the parent. Heading elements receive their own <code>font-size</code> for nested <code>&lt;small&gt;</code> elements.</p>
<div class="bs-docs-example">
<div class="bs-example">
<p><small>This line of text is meant to be treated as fine print.</small></p>
</div>
{% highlight html %}
@@ -364,7 +364,7 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
<h3>Bold</h3>
<p>For emphasizing a snippet of text with a heavier font-weight.</p>
<div class="bs-docs-example">
<div class="bs-example">
<p>The following snippet of text is <strong>rendered as bold text</strong>.</p>
</div>
{% highlight html %}
@@ -373,7 +373,7 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
<h3>Italics</h3>
<p>For emphasizing a snippet of text with italics.</p>
<div class="bs-docs-example">
<div class="bs-example">
<p>The following snippet of text is <em>rendered as italicized text</em>.</p>
</div>
{% highlight html %}
@@ -384,7 +384,7 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
<h3>Alignment classes</h3>
<p>Easily realign text to components with text alignment classes.</p>
<div class="bs-docs-example">
<div class="bs-example">
<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
@@ -397,7 +397,7 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
<h3>Emphasis classes</h3>
<p>Convey meaning through color with a handful of emphasis utility classes.</p>
<div class="bs-docs-example">
<div class="bs-example">
<p class="text-muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
<p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
<p class="text-danger">Donec ullamcorper nulla non metus auctor fringilla.</p>
@@ -417,7 +417,7 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
<h3>Basic abbreviation</h3>
<p>For expanded text on long hover of an abbreviation, include the <code>title</code> attribute with the <code>&lt;abbr&gt;</code> element.</p>
<div class="bs-docs-example">
<div class="bs-example">
<p>An abbreviation of the word attribute is <abbr title="attribute">attr</abbr>.</p>
</div>
{% highlight html %}
@@ -426,7 +426,7 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
<h3>Initialism</h3>
<p>Add <code>.initialism</code> to an abbreviation for a slightly smaller font-size.</p>
<div class="bs-docs-example">
<div class="bs-example">
<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr> is the best thing since sliced bread.</p>
</div>
{% highlight html %}
@@ -437,7 +437,7 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
<!-- Addresses -->
<h2 id="type-addresses">Addresses</h2>
<p>Present contact information for the nearest ancestor or the entire body of work. Preserve formatting by ending all lines with <code>&lt;br&gt;</code>.</p>
<div class="bs-docs-example">
<div class="bs-example">
<address>
<strong>Twitter, Inc.</strong><br>
795 Folsom Ave, Suite 600<br>
@@ -470,7 +470,7 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
<h3>Default blockquote</h3>
<p>Wrap <code>&lt;blockquote&gt;</code> around any <abbr title="HyperText Markup Language">HTML</abbr> as the quote. For straight quotes we recommend a <code>&lt;p&gt;</code>.</p>
<div class="bs-docs-example">
<div class="bs-example">
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>
@@ -486,7 +486,7 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
<h4>Naming a source</h4>
<p>Add <code>&lt;small&gt;</code> tag for identifying the source. Wrap the name of the source work in <code>&lt;cite&gt;</code>.</p>
<div class="bs-docs-example">
<div class="bs-example">
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<small>Someone famous in <cite title="Source Title">Source Title</cite></small>
@@ -501,7 +501,7 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
<h4>Alternate displays</h4>
<p>Use <code>.pull-right</code> for a floated, right-aligned blockquote.</p>
<div class="bs-docs-example" style="overflow: hidden;">
<div class="bs-example" style="overflow: hidden;">
<blockquote class="pull-right">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<small>Someone famous in <cite title="Source Title">Source Title</cite></small>
@@ -519,7 +519,7 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
<h3>Unordered</h3>
<p>A list of items in which the order does <em>not</em> explicitly matter.</p>
<div class="bs-docs-example">
<div class="bs-example">
<ul>
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
@@ -546,7 +546,7 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
<h3>Ordered</h3>
<p>A list of items in which the order <em>does</em> explicitly matter.</p>
<div class="bs-docs-example">
<div class="bs-example">
<ol>
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
@@ -566,7 +566,7 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
<h3>Unstyled</h3>
<p>Remove the default <code>list-style</code> and left margin on list items (immediate children only). <strong>This only applies to immediate children list items</strong>, meaning you will need to add the class for any nested lists as well.</p>
<div class="bs-docs-example">
<div class="bs-example">
<ul class="list-unstyled">
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
@@ -593,7 +593,7 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
<h3>Inline</h3>
<p>Place all list items on a single line with <code>inline-block</code> and some light padding.</p>
<div class="bs-docs-example">
<div class="bs-example">
<ul class="list-inline">
<li>Lorem ipsum</li>
<li>Phasellus iaculis</li>
@@ -608,7 +608,7 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
<h3>Description</h3>
<p>A list of terms with their associated descriptions.</p>
<div class="bs-docs-example">
<div class="bs-example">
<dl>
<dt>Description lists</dt>
<dd>A description list is perfect for defining terms.</dd>
@@ -628,7 +628,7 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
<h4>Horizontal description</h4>
<p>Make terms and descriptions in <code>&lt;dl&gt;</code> line up side-by-side.</p>
<div class="bs-docs-example">
<div class="bs-example">
<dl class="dl-horizontal">
<dt>Description lists</dt>
<dd>A description list is perfect for defining terms.</dd>
@@ -664,7 +664,7 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
<h2>Inline</h2>
<p>Wrap inline snippets of code with <code>&lt;code&gt;</code>.</p>
<div class="bs-docs-example">
<div class="bs-example">
For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</div>
{% highlight html %}
@@ -673,7 +673,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h2>Basic block</h2>
<p>Use <code>&lt;pre&gt;</code> for multiple lines of code. Be sure to escape any angle brackets in the code for proper rendering.</p>
<div class="bs-docs-example">
<div class="bs-example">
<pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre>
</div>
{% highlight html %}
@@ -694,7 +694,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h2 id="tables-example">Basic example</h2>
<p>For basic styling&mdash;light padding and only horizontal dividers&mdash;add the base class <code>.table</code> to any <code>&lt;table&gt;</code>. It may seem super redundant, but given the widespread use of tables for other plugins like calendars and date pickers, we've opted to isolate our custom table styles.</p>
<div class="bs-docs-example">
<div class="bs-example">
<table class="table">
<thead>
<tr>
@@ -742,7 +742,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h4>Cross-browser compatibility</h4>
<p>Striped tables are styled via the <code>:nth-child</code> CSS selector, which is not available in IE8.</p>
</div>
<div class="bs-docs-example">
<div class="bs-example">
<table class="table table-striped">
<thead>
<tr>
@@ -782,7 +782,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h3 id="tables-bordered">Bordered</h3>
<p>Add <code>.table-bordered</code> for borders and rounded corners.</p>
<div class="bs-docs-example">
<div class="bs-example">
<table class="table table-bordered">
<thead>
<tr>
@@ -826,7 +826,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h3 id="tables-hover-rows">Hover rows</h3>
<p>Add <code>.table-hover</code> to enable a hover state on table rows within a <code>&lt;tbody&gt;</code>.</p>
<div class="bs-docs-example">
<div class="bs-example">
<table class="table table-hover">
<thead>
<tr>
@@ -866,7 +866,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h3 id="tables-condensed">Condensed</h3>
<p>Add <code>.table-condensed</code> to make tables more compact by cutting cell padding in half.</p>
<div class="bs-docs-example">
<div class="bs-example">
<table class="table table-condensed">
<thead>
<tr>
@@ -945,7 +945,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</tr>
</tbody>
</table>
<div class="bs-docs-example">
<div class="bs-example">
<table class="table">
<thead>
<tr>
@@ -1001,7 +1001,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h2 id="forms-example">Basic example</h2>
<p>Individual form controls automatically receive some global styling. By default, inputs are set to <code>width: 100%;</code>.</p>
<form class="bs-docs-example">
<form class="bs-example">
<fieldset>
<legend>Legend</legend>
<label>Label name</label>
@@ -1042,7 +1042,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h4>Requires custom widths</h4>
<p>Inputs, selects, and textareas are 100% wide by default in Bootstrap. To use the inline form, you'll have to set a width on the form controls used within.</p>
</div>
<form class="bs-docs-example form-inline">
<form class="bs-example form-inline">
<input type="text" placeholder="Email" style="width: 180px;">
<input type="password" placeholder="Password" style="width: 180px;">
<div class="checkbox">
@@ -1073,7 +1073,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<li>Add <code>.control-label</code> to the label</li>
<li>Wrap any associated controls in <code>.controls</code> for proper alignment</li>
</ul>
<form class="bs-docs-example form-horizontal">
<form class="bs-example form-horizontal">
<div class="control-group">
<label class="control-label" for="inputEmail">Email</label>
<div class="controls">
@@ -1134,7 +1134,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h4>Type declaration required</h4>
<p>Inputs will only be fully styled if their <code>type</code> is properly declared.</p>
</div>
<form class="bs-docs-example form-inline">
<form class="bs-example form-inline">
<input type="text" placeholder="Text input">
</form>
{% highlight html %}
@@ -1143,7 +1143,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h3>Textarea</h3>
<p>Form control which supports multiple lines of text. Change <code>rows</code> attribute as necessary.</p>
<form class="bs-docs-example form-inline">
<form class="bs-example form-inline">
<textarea rows="3"></textarea>
</form>
{% highlight html %}
@@ -1153,7 +1153,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h3>Checkboxes and radios</h3>
<p>Checkboxes are for selecting one or several options in a list while radios are for selecting one option from many.</p>
<h4>Default (stacked)</h4>
<form class="bs-docs-example">
<form class="bs-example">
<div class="checkbox">
<label>
<input type="checkbox" value="">
@@ -1192,7 +1192,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h4>Inline checkboxes</h4>
<p>Use <code>.checkbox-inline</code> or <code>.radio-inline</code> class to a series of checkboxes or radios for controls appear on the same line.</p>
<form class="bs-docs-example">
<form class="bs-example">
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
@@ -1217,7 +1217,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h3>Selects</h3>
<p>Use the default option or specify a <code>multiple="multiple"</code> to show multiple options at once.</p>
<form class="bs-docs-example">
<form class="bs-example">
<select>
<option>1</option>
<option>2</option>
@@ -1259,7 +1259,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h3 id="forms-input-focus">Input focus</h3>
<p>We remove the default <code>outline</code> styles on some form controls and apply a <code>box-shadow</code> in its place for <code>:focus</code>.</p>
<form class="bs-docs-example form-inline">
<form class="bs-example form-inline">
<input class="focused" id="focusedInput" type="text" value="This is focused...">
</form>
{% highlight html %}
@@ -1274,7 +1274,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<p>Invalid inputs are styled via the <code>:invalid</code> CSS selector, which is not supported by Internet Explorer 9 and below.</p>
</div>
<form class="bs-docs-example form-inline">
<form class="bs-example form-inline">
<input class="col col-lg-3" type="email" placeholder="test@example.com" required>
</form>
{% highlight html %}
@@ -1283,7 +1283,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h3 id="forms-disabled-inputs">Disabled inputs</h3>
<p>Add the <code>disabled</code> attribute on an input to prevent user input and trigger a slightly different look.</p>
<form class="bs-docs-example form-inline">
<form class="bs-example form-inline">
<input class="input-xlarge" id="disabledInput" type="text" placeholder="Disabled input here…" disabled>
</form>
{% highlight html %}
@@ -1303,7 +1303,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<p>While Bootstrap will apply these styles in all browsers, IE and Safari don't actually support the <code>&lt;disabled&gt;</code> attribute on a <code>&lt;fieldset&gt;</code>. Use custom JavaScript to disable the fieldset in these browsers.</p>
</div>
<form class="bs-docs-example form-inline">
<form class="bs-example form-inline">
<fieldset disabled>
<div>
<input type="text" class="col col-lg-4" placeholder="Disabled input">
@@ -1350,7 +1350,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</ul>
<p>Validation styles are applied on a per-input basis. With horizontal forms, the <code>&lt;label class="control-label"&gt;</code> will always be styled.</p>
<form class="bs-docs-example form-horizontal">
<form class="bs-example form-horizontal">
<div class="control-group has-warning">
<label class="control-label" for="inputWarning">Input with warning</label>
<div class="controls">
@@ -1404,7 +1404,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<p>Avoid using <code>&lt;select&gt;</code> elements here as they cannot be fully styled in WebKit browsers.</p>
</div>
<form class="bs-docs-example">
<form class="bs-example">
<div class="input-group col col-lg-9">
<span class="input-group-addon">@</span>
<input type="text" placeholder="Username">
@@ -1441,7 +1441,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h4>Optional sizes</h4>
<p>Add the relative form sizing classes to the `.input-group-addon`.</p>
<form class="bs-docs-example">
<form class="bs-example">
<div class="input-group col col-lg-9">
<span class="input-group-addon input-large">@</span>
<input type="text" class="input-large" placeholder="Username">
@@ -1476,7 +1476,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h4>Buttons instead of text</h4>
<p>Buttons in input groups are a bit different and require one extra level of nesting. Instead of <code>.input-group-addon</code>, you'll need to use <code>.input-group-btn</code> to wrap the buttons. This is required due to default browser styles that cannot be overridden.</p>
<form class="bs-docs-example">
<form class="bs-example">
<div class="input-group col col-lg-7">
<span class="input-group-btn">
<button class="btn" type="button">Go!</button>
@@ -1509,7 +1509,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h4>Button dropdowns</h4>
<p></p>
<form class="bs-docs-example">
<form class="bs-example">
<div class="input-group col col-lg-7">
<div class="input-group-btn">
<button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
@@ -1569,7 +1569,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
{% endhighlight %}
<h4>Segmented dropdown groups</h4>
<form class="bs-docs-example">
<form class="bs-example">
<div class="input-group col col-lg-7">
<div class="input-group-btn">
<button class="btn" tabindex="-1">Action</button>
@@ -1627,7 +1627,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h4>Relative sizing</h4>
<p>Create larger or smaller form controls that match button sizes.</p>
<form class="bs-docs-example" style="padding-bottom: 15px;">
<form class="bs-example" style="padding-bottom: 15px;">
<div class="controls docs-input-sizes">
<input class="input-large" type="text" placeholder=".input-large">
<input type="text" placeholder="Default input">
@@ -1642,7 +1642,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h4>Column sizing</h4>
<p>Wrap inputs in grid columns, or any custom parent element, to easily enforce desired widths.</p>
<form class="bs-docs-example" style="padding-bottom: 15px;">
<form class="bs-example" style="padding-bottom: 15px;">
<div class="row">
<div class="col col-lg-2">
<input type="text" placeholder="col col-large-2">
@@ -1671,7 +1671,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h3 id="forms-actions">Form actions</h3>
<p>End a form with a group of actions (buttons). When placed within a <code>.form-horizontal</code>, the buttons will automatically indent to line up with the form controls.</p>
<form class="bs-docs-example">
<form class="bs-example">
<div class="form-actions">
<button type="submit" class="btn btn-primary">Save changes</button>
<button type="button" class="btn">Cancel</button>
@@ -1687,7 +1687,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h3 id="forms-help-text">Help text</h3>
<p>Inline and block level support for help text that appears around form controls.</p>
<h4>Inline help</h4>
<form class="bs-docs-example form-inline">
<form class="bs-example form-inline">
<input type="text"> <span class="help-inline">Inline help text</span>
</form>
{% highlight html %}
@@ -1696,7 +1696,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
{% endhighlight %}
<h4>Block help</h4>
<form class="bs-docs-example form-inline">
<form class="bs-example form-inline">
<input type="text">
<span class="help-block">A longer block of help text that breaks onto a new line and may extend beyond one line.</span>
</form>
@@ -1718,7 +1718,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h2 id="buttons-options">Button options</h2>
<p>Use any of the available button classes to quickly create a styled button.</p>
<div class="bs-docs-example">
<div class="bs-example">
<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
@@ -1752,7 +1752,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h2 id="buttons-sizes">Button sizes</h2>
<p>Fancy larger or smaller buttons? Add <code>.btn-large</code>, <code>.btn-small</code>, or <code>.btn-mini</code> for additional sizes.</p>
<div class="bs-docs-example">
<div class="bs-example">
<p>
<button type="button" class="btn btn-primary btn-large">Large button</button>
<button type="button" class="btn btn-default btn-large">Large button</button>
@@ -1790,7 +1790,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
{% endhighlight %}
<p>Create block level buttons&mdash;those that span the full width of a parent&mdash; by adding <code>.btn-block</code>.</p>
<div class="bs-docs-example">
<div class="bs-example">
<div class="well" style="max-width: 400px; margin: 0 auto 10px;">
<button type="button" class="btn btn-primary btn-large btn-block">Block level button</button>
<button type="button" class="btn btn-default btn-large btn-block">Block level button</button>
@@ -1807,7 +1807,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h3>Button element</h3>
<p>Add the <code>disabled</code> attribute to <code>&lt;button&gt;</code> buttons.</p>
<p class="bs-docs-example">
<p class="bs-example">
<button type="button" class="btn btn-primary btn-large" disabled="disabled">Primary button</button>
<button type="button" class="btn btn-default btn-large" disabled="disabled">Button</button>
</p>
@@ -1823,7 +1823,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h3>Anchor element</h3>
<p>Add the <code>.disabled</code> class to <code>&lt;a&gt;</code> buttons.</p>
<p class="bs-docs-example">
<p class="bs-example">
<a href="#" class="btn btn-primary btn-large disabled">Primary link</a>
<a href="#" class="btn btn-default btn-large disabled">Link</a>
</p>
@@ -1842,7 +1842,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h2 id="buttons-tags">Using multiple tags</h2>
<p>Use the button classes on an <code>&lt;a&gt;</code>, <code>&lt;button&gt;</code>, or <code>&lt;input&gt;</code> element.</p>
<form class="bs-docs-example">
<form class="bs-example">
<a class="btn btn-default" href="#">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
@@ -1876,7 +1876,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h4>Cross-browser compatibility</h4>
<p>Keep in mind that Internet Explorer 8 lacks support for rounded corners.</p>
</div>
<div class="bs-docs-example bs-docs-example-images">
<div class="bs-example bs-example-images">
<img data-src="holder.js/140x140" class="img-rounded">
<img data-src="holder.js/140x140" class="img-circle">
<img data-src="holder.js/140x140" class="img-thumbnail">
@@ -1899,7 +1899,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h3>Close icon</h3>
<p>Use the generic close icon for dismissing content like modals and alerts.</p>
<div class="bs-docs-example">
<div class="bs-example">
<p><button class="close" style="float: none;">&times;</button></p>
</div>
{% highlight html %}