diff options
Visual style update
1 files changed, 74 insertions, 46 deletions
| -rw-r--r-- | docs/elements.html | 120 |
diff --git a/docs/elements.html b/docs/elements.html index c672613..95bd776 100644 --- a/docs/elements.html +++ b/docs/elements.html @@ -89,10 +89,10 @@ <section class="notes"> <h1>H1 Title <small class="label">5rem</small></h1> <h2>H2 Title <small class="label">4rem</small></h2> - <h3>H3 Title <span class="label">3rem</span></h3> - <h4>H4 Title <span class="label">2.4rem</span></h4> - <h5>H5 Title <span class="label">2rem</span></h5> - <h6>H6 Title <span class="label">1.6rem</span></h6> + <h3>H3 Title <small class="label">3rem</small></h3> + <h4>H4 Title <small class="label">2.4rem</small></h4> + <h5>H5 Title <small class="label">2rem</small></h5> + <h6>H6 Title <small class="label">1.6rem</small></h6> </section> <!-- headings example --> @@ -355,87 +355,77 @@ </section> <div class="columns"> <div class="column col-xs-12"> - <button class="btn">default button</button> + <button class="btn">default normal</button> </div> <div class="column col-xs-12"> - <button class="btn btn-primary">primary button</button> + <button class="btn btn-primary">primary normal</button> </div> <div class="column col-xs-12"> - <button class="btn btn-link">link button</button> + <button class="btn btn-link">link normal</button> </div> </div> <div class="columns"> <div class="column col-xs-12"> - <button class="btn loading">default button</button> + <button class="btn active">default active</button> </div> <div class="column col-xs-12"> - <button class="btn btn-primary loading">primary button</button> + <button class="btn btn-primary active">primary active</button> </div> <div class="column col-xs-12"> - <button class="btn btn-link loading">link button</button> + <button class="btn btn-link active">link active</button> </div> </div> + <section class="notes"> - <p>Add the <code>btn</code> class to <a>, <input> or <button> elements for a default button. There are classes <code>btn-primary</code> and <code>btn-link</code> for predefined primary and link buttons. A button with the <code>loading</code> class can show loading indicator. </p> + <p>Add the <code>btn</code> class to <a>, <input> or <button> elements for a default button. There are classes <code>btn-primary</code> and <code>btn-link</code> for predefined primary and link buttons. </p> </section> -<!-- buttons example --> -<pre class="code" data-lang="HTML"><code><<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn"</span>>default button<<span class="tag">/button</span>> -<<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-primary"</span>>primary button<<span class="tag">/button</span>> -<<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-link"</span>>link button<<span class="tag">/button</span>> - -<span class="com"><!-- a button with loading state --></span> -<<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn loading"</span>>button<<span class="tag">/button</span>> -</code></pre> - <section class="notes"> <p>Add the <code>disabled</code> class or the <code>disabled</code> attribute for a disabled button.</p> </section> + <div class="columns"> <div class="column col-xs-12"> - <button class="btn disabled" tabindex="-1">default button</button> + <button class="btn disabled" tabindex="-1">default disabled</button> </div> <div class="column col-xs-12"> - <button class="btn btn-primary" disabled tabindex="-1">primary button</button> + <button class="btn btn-primary" disabled tabindex="-1">primary disabled</button> </div> <div class="column col-xs-12"> - <button class="btn btn-link" disabled tabindex="-1">link button</button> + <button class="btn btn-link" disabled tabindex="-1">link disabled</button> </div> </div> - <header class="text-center"><h4>Button sizes</h4></header> + <section class="notes"> + <p>A button with the <code>loading</code> class can show loading indicator.</p> + </section> + <div class="columns"> - <div class="column col-6 col-xs-12"> - <button class="btn btn-primary btn-lg">large button</button> - <button class="btn btn-primary">normal</button> - <button class="btn btn-primary btn-sm">small</button> + <div class="column col-xs-12"> + <button class="btn loading">default button</button> </div> - <div class="column col-3 col-xs-12"> - <button class="btn btn-action btn-primary btn-lg"><i class="icon icon-menu"></i></button> - <button class="btn btn-action btn-primary"><i class="icon icon-menu"></i></button> - <button class="btn btn-action btn-primary btn-sm"><i class="icon icon-menu"></i></button> + <div class="column col-xs-12"> + <button class="btn btn-primary loading">primary button</button> </div> - <div class="column col-3 col-xs-12"> - <button class="btn btn-action btn-primary btn-lg circle"><i class="icon icon-arrow-up"></i></button> - <button class="btn btn-action btn-primary circle"><i class="icon icon-arrow-up"></i></button> - <button class="btn btn-action btn-primary btn-sm circle"><i class="icon icon-arrow-up"></i></button> + <div class="column col-xs-12"> + <button class="btn btn-link loading">link button</button> </div> </div> - <section class="notes"> - <p>Add the <code>btn-sm</code> or <code>btn-lg</code> class for small or large button size. Also, you can add the <code>btn-block</code> class for a full-width button. </p> - <p>Please note that you could use the <code>btn-action</code> class for a square button, or add another <code>circle</code> class for a round button, which is often used as a Float Action Button (FAB).</p> - </section> <!-- buttons example --> -<pre class="code" data-lang="HTML"><code><<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-lg"</span>>large button<<span class="tag">/button</span>> -<<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-sm"</span>>small button<<span class="tag">/button</span>> +<pre class="code" data-lang="HTML"><code><<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn"</span>>default button<<span class="tag">/button</span>> +<<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-primary"</span>>primary button<<span class="tag">/button</span>> +<<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-link"</span>>link button<<span class="tag">/button</span>> -<<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-block"</span>>block button<<span class="tag">/button</span>> +<span class="com"><!-- buttons with disabled state --></span> +<<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn disabled"</span> <span class="atn">tabindex</span>=<span class="atv">"-1"</span>>disabled button<<span class="tag">/button</span>> +<<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn"</span> <span class="atn">disabled</span> <span class="atn">tabindex</span>=<span class="atv">"-1"</span>>disabled button<<span class="tag">/button</span>> -<<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-action"</span>><<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"icon icon-arrow-left"</span>><<span class="tag">/i</span>><<span class="tag">/button</span>> -<<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-action circle"</span>><<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"icon icon-arrow-left"</span>><<span class="tag">/i</span>><<span class="tag">/button</span>> +<span class="com"><!-- a button with loading state --></span> +<<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn loading"</span>>button<<span class="tag">/button</span>> </code></pre> + <header class="text-center"><h4>Button sizes</h4></header> <div class="columns"> <div class="column"> <button class="btn btn-primary btn-lg"><i class="icon icon-arrow-left"></i> large</button> @@ -446,13 +436,43 @@ <button class="btn btn-primary btn-sm">small</button> </div> </div> + <section class="notes"> + <p>Add the <code>btn-sm</code> or <code>btn-lg</code> class for small or large button size. Also, you can add the <code>btn-block</code> class for a full-width button. </p> + </section> <!-- buttons example --> -<pre class="code" data-lang="HTML"><code><<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-primary btn-lg"</span>><<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"icon icon-arrow-left"</span>><<span class="tag">/i</span>> large<<span class="tag">/button</span>> +<pre class="code" data-lang="HTML"><code><<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-lg"</span>>large button<<span class="tag">/button</span>> +<<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-sm"</span>>small button<<span class="tag">/button</span>> + +<<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-block"</span>>block button<<span class="tag">/button</span>> + +<<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-primary btn-lg"</span>><<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"icon icon-arrow-left"</span>><<span class="tag">/i</span>> large<<span class="tag">/button</span>> <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-primary"</span>><<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"icon icon-arrow-left"</span>><<span class="tag">/i</span>> normal<<span class="tag">/button</span>> <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-primary btn-sm"</span>><<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"icon icon-arrow-left"</span>><<span class="tag">/i</span>> small<<span class="tag">/button</span>> </code></pre> + <section class="notes"> + <p>Please note that you could use the <code>btn-action</code> class for a square button, or add another <code>circle</code> class for a round button, which is often used as a Float Action Button (FAB).</p> + </section> + + <div class="columns"> + <div class="column col-xs-12"> + <button class="btn btn-action btn-primary btn-lg"><i class="icon icon-menu"></i></button> + <button class="btn btn-action btn-primary"><i class="icon icon-menu"></i></button> + <button class="btn btn-action btn-primary btn-sm"><i class="icon icon-menu"></i></button> + </div> + <div class="column col-xs-12"> + <button class="btn btn-action btn-primary btn-lg circle"><i class="icon icon-arrow-up"></i></button> + <button class="btn btn-action btn-primary circle"><i class="icon icon-arrow-up"></i></button> + <button class="btn btn-action btn-primary btn-sm circle"><i class="icon icon-arrow-up"></i></button> + </div> + </div> + +<!-- buttons example --> +<pre class="code" data-lang="HTML"><code><<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-action"</span>><<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"icon icon-arrow-left"</span>><<span class="tag">/i</span>><<span class="tag">/button</span>> +<<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-action circle"</span>><<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"icon icon-arrow-left"</span>><<span class="tag">/i</span>><<span class="tag">/button</span>> +</code></pre> + <header class="text-center"><h4>Button groups</h4></header> <div class="columns"> <div class="column col-xs-12"> @@ -611,6 +631,10 @@ <section class="notes"> <p>You can use <code>:indeterminate</code> pseudo class for indeterminate state of checkboxes.</p> + </section> + + <header class="text-center"><h4>Horizontal forms</h4></header> + <section class="notes"> <p>If you want to have a horizontal form, add the <code>form-horizontal</code> class to the <form> container. And add the <code>col-[1-12]</code> class to the child elements for form row layout. </p> </section> <div class="columns"> @@ -1415,6 +1439,9 @@ <header class="text-center"><h3><a href="#media" class="anchor" aria-hidden="true">#</a>Media</h3></header> <section class="notes"> <p><strong>Media</strong> includes responsive images, figures and video classes. </p> + </section> + <header class="text-center"><h4>Images</h4></header> + <section class="notes"> <p>Add the <code>img-responsive</code> class to <img> elements. The images will scale with the parent sizes.</p> </section> <div class="columns"> @@ -1464,6 +1491,7 @@ <<span class="tag">/figure</span>> </code></pre> + <header class="text-center"><h4>Video</h4></header> <section class="notes"> <p>For responsive video, add a container with the <code>video-responsive</code> class. Insert any YouTube, Youku or other iframe/embed video inside the container. The ratio is 16:9 by default. You may add <code>video-responsive-4-3</code> for 4:3 ratio video container or <code>video-responsive-1-1</code> for 1:1 ratio.</p> </section> |