Docs for action links

Added jasny/action-links.less to jasny/bootstrap.less
This commit is contained in:
Arnold Daniels
2012-07-17 00:04:58 +02:00
parent f0e0b3f765
commit 2d6986df2d
3 changed files with 88 additions and 0 deletions

View File

@@ -10,6 +10,7 @@
<li><a href="#tables">{{_i}}Tables{{/i}}</a></li>
<li><a href="#forms">{{_i}}Forms{{/i}}</a></li>
<li><a href="#buttons">{{_i}}Buttons{{/i}}</a></li>
<li><a href="#action-links">{{_i}}Action links{{/i}}</a></li>
<li><a href="#icons">{{_i}}Icons by Glyphicons{{/i}}</a></li>
</ul>
</div>
@@ -1470,6 +1471,84 @@ on multiple lines
</section>
<!-- Action links
================================================== -->
<section id="action-links">
<div class="page-header">
<h1>{{_i}}Action links{{/i}}</h1>
</div>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>{{_i}}Action link{{/i}}</th>
<th>{{_i}}Class{{/i}}</th>
<th>{{_i}}Description{{/i}}</th>
</tr>
</thead>
<tbody>
<tr>
<td><a class="act" href="#">{{_i}}Default{{/i}}</a></td>
<td><code>.act</code></td>
<td>{{_i}}Standard gray text{{/i}}</td>
</tr>
<tr>
<td><a class="act act-primary" href="#">{{_i}}Primary{{/i}}</a></td>
<td><code>.act-primary</code></td>
<td>{{_i}}Provides extra visual weight{{/i}}</td>
</tr>
<tr>
<td><a class="act act-info" href="#">{{_i}}Info{{/i}}</a></td>
<td><code>.act-info</code></td>
<td>{{_i}}Used as an alternate to the default styles{{/i}}</td>
</tr>
<tr>
<td><a class="act act-success" href="#">{{_i}}Success{{/i}}</a></td>
<td><code>.act-success</code></td>
<td>{{_i}}Indicates a successful or positive action{{/i}}</td>
</tr>
<tr>
<td><a class="act act-warning" href="#">{{_i}}Warning{{/i}}</a></td>
<td><code>.act-warning</code></td>
<td>{{_i}}Indicates caution should be taken with this action{{/i}}</td>
</tr>
<tr>
<td><a class="act act-danger" href="#">{{_i}}Danger{{/i}}</a></td>
<td><code>.act-danger</code></td>
<td>{{_i}}Indicates a dangerous or potentially negative action{{/i}}</td>
</tr>
</tbody>
</table>
<div class="row">
<div class="span4">
<h3>{{_i}}Alternative style for actions{{/i}}</h3>
<p>{{_i}}Sometimes a button will pull to much attention to an action. In those cases, you can use action links instead.{{/i}}</p>
<p>{{_i}}Action links can be used just like buttons, simply use <code>.act</code> instead.{{/i}}</p>
</div>
<div class="span8">
<div class="form-actions">
<button class="btn btn-primary" type="submit">Save changes</button>
<button class="btn" type="reset">Cancel</button>
<a href="#" class="act act-danger pull-right">Delete account</a>
</div>
</div>
</div>
<div class="row">
<div class="span4">
<h3>{{_i}}Disabled state{{/i}}</h3>
<p>{{_i}}For disabled action links, use <code>.disabled</code> for links and the <code>disabled</code> attribute for <code>&lt;button&gt;</code> elements.{{/i}}</p>
</div>
<div class="span8">
<div class="form-actions">
<button class="btn btn-primary" type="submit">Save changes</button>
<button class="btn" type="reset">Cancel</button>
<button class="act pull-right" disabled="disabled">Disabled action</a>
</div>
</div>
</div>
<br>
</section>
<!-- Icons
================================================== -->

View File

@@ -50,6 +50,13 @@
<div class="changes">
<h1>{{_i}}What's different?{{/i}}</h1>
<p class="marketing-byline">{{_i}}How can a fantastic library become any better? Check it out.{{/i}}</p>
<div class="row">
<div class="span3">
<h3><a href="./base-css.html#action-links">{{_i}}Action links{{/i}}</a></h3>
<p>{{_i}}Sometimes a button will pull to much attention to an action. In those cases, you can use action links instead.{{/i}}</p>
<p>{{_i}}Action links look distinctly different than normal links.{{/i}}</p>
</div>
</div>
<div class="row">
<div class="span3">
<h3><a href="./base-css.html#forms">{{_i}}Form elements{{/i}}</a></h3>

View File

@@ -17,6 +17,8 @@
@import "forms-uneditable.less";
@import "forms-editor.less";
// Components: Buttons & Alerts
@import "action-links.less";
// Components: Nav
@import "navs-tabbable.less";