<h3>Multiple sizes</h3>
<p>Fancy larger or smaller buttons? Add <code>.btn-large</code> or <code>.btn-small</code> for two additional sizes.</p>
<p>
- <a href="#" class="btn btn-large btn-primary">Primary action</a>
- <a href="#" class="btn btn-large">Action</a>
+ <button class="btn btn-large btn-primary">Primary action</button>
+ <button class="btn btn-large">Action</button>
</p>
<p>
- <a href="#" class="btn btn-small btn-primary">Primary action</a>
- <a href="#" class="btn btn-small">Action</a>
+ <button class="btn btn-small btn-primary">Primary action</button>
+ <button class="btn btn-small">Action</button>
</p>
<br>
<h3>Disabled state</h3>
<p>For disabled buttons, use <code>.btn-disabled</code> for links and <code>:disabled</code> for <code><button></code> elements.</p>
<p>
- <a href="#" class="btn btn-large btn-primary disabled">Primary action</a>
- <a href="#" class="btn btn-large disabled">Action</a>
+ <a href="#" class="btn btn-large btn-primary disabled">Primary link</a>
+ <a href="#" class="btn btn-large disabled">Link</a>
</p>
<p>
- <button class="btn btn-large btn-primary disabled" disabled="disabled">Primary action</button>
- <button class="btn btn-large" disabled>Action</button>
+ <button class="btn btn-large btn-primary disabled" disabled="disabled">Primary button</button>
+ <button class="btn btn-large" disabled>Button</button>
</p>
</div>
<div class="span4">
<h3>{{_i}}Multiple sizes{{/i}}</h3>
<p>{{_i}}Fancy larger or smaller buttons? Add <code>.btn-large</code> or <code>.btn-small</code> for two additional sizes.{{/i}}</p>
<p>
- <a href="#" class="btn btn-large btn-primary">{{_i}}Primary action{{/i}}</a>
- <a href="#" class="btn btn-large">{{_i}}Action{{/i}}</a>
+ <button class="btn btn-large btn-primary">{{_i}}Primary action{{/i}}</button>
+ <button class="btn btn-large">{{_i}}Action{{/i}}</button>
</p>
<p>
- <a href="#" class="btn btn-small btn-primary">{{_i}}Primary action{{/i}}</a>
- <a href="#" class="btn btn-small">{{_i}}Action{{/i}}</a>
+ <button class="btn btn-small btn-primary">{{_i}}Primary action{{/i}}</button>
+ <button class="btn btn-small">{{_i}}Action{{/i}}</button>
</p>
<br>
<h3>{{_i}}Disabled state{{/i}}</h3>
<p>{{_i}}For disabled buttons, use <code>.btn-disabled</code> for links and <code>:disabled</code> for <code><button></code> elements.{{/i}}</p>
<p>
- <a href="#" class="btn btn-large btn-primary disabled">{{_i}}Primary action{{/i}}</a>
- <a href="#" class="btn btn-large disabled">{{_i}}Action{{/i}}</a>
+ <a href="#" class="btn btn-large btn-primary disabled">{{_i}}Primary link{{/i}}</a>
+ <a href="#" class="btn btn-large disabled">{{_i}}Link{{/i}}</a>
</p>
<p>
- <button class="btn btn-large btn-primary disabled" disabled="disabled">{{_i}}Primary action{{/i}}</button>
- <button class="btn btn-large" disabled>{{_i}}Action{{/i}}</button>
+ <button class="btn btn-large btn-primary disabled" disabled="disabled">{{_i}}Primary button{{/i}}</button>
+ <button class="btn btn-large" disabled>{{_i}}Button{{/i}}</button>
</p>
</div>
<div class="span4">
<li>{{_i}}The <code>animate</code> option was renamed to <code>animation</code>.{{/i}}</li>
<li>{{_i}}The <code>html</code> option was removed, as the tooltips default to allowing HTML now.{{/i}}</li>
</ul>
+ <h3>{{_i}}Tooltips{{/i}}</h3>
+ <ul>
+ <li>{{_i}}Values for <code>placement</code> option changed from <code>above</code> and <code>below</code> to <code>top</code> and <code>bottom</code>. (Affects popovers, too.){{/i}}</li>
+ </ul>
<h3>{{_i}}Popovers{{/i}}</h3>
<ul>
<li>{{_i}}Child elements now properly namespaced: <code>.title</code> to <code>.popover-title</code>, <code>.inner</code> to <code>.popover-inner</code>, and <code>.content</code> to <code>.popover-content</code>.{{/i}}</li>