diff options
update more doc contents.
1 files changed, 13 insertions, 1 deletions
| -rw-r--r-- | demo/index.html | 14 |
diff --git a/demo/index.html b/demo/index.html index 767a41a..cfd8703 100644 --- a/demo/index.html +++ b/demo/index.html @@ -210,7 +210,7 @@ </div> <header class="text-center"><h5>button sizes</h5></header> <section class="notes"> - <p>Add the class <span class="label">btn-sm</span> or <span class="label">btn-lg</span> for small or large size. Also, you can add the class <span class="label">btn-block</span> for a full-width button.</p> + <p>Add the class <span class="label">btn-sm</span> or <span class="label">btn-lg</span> for small or large size. Icons with the class <span class="label">icon</span> can be correctly rendered in each button size. Also, you can add the class <span class="label">btn-block</span> for a full-width button. </p> </section> <div class="columns"> <div class="column"> @@ -571,6 +571,10 @@ <section id="toasts"> <header class="text-center"><h4>toasts</h4></header> + <section class="notes"> + <p><strong>toasts.less</strong> is used to show alert or information to users.</p> + <p>Add a container element with the class <span class="label">toast</span>. You can add any text within the container, and even icons. You may also add a close button with the class <span class="label">btn-clear</span> if you need. </p> + </section> <div class="columns"> <div class="column"> <div class="toast"> @@ -615,6 +619,10 @@ <section id="menus"> <header class="text-center"><h4>menus</h4></header> + <section class="notes"> + <p><strong>menus.less</strong> is a vertical list links or buttons for actions and navigations.</p> + <p>Add a container element with the class <span class="label">menu</span>. And add child elements with the class name <span class="label">menu-item</span>. That is a basic menu component.</p> + </section> <div class="columns"> <div class="column col-3"> <menu class="menu"> @@ -764,6 +772,10 @@ <section id="badges"> <header class="text-center"><h4>badges</h4></header> + <section class="notes"> + <p><strong>badges.less</strong> is often used as unread number indicator.</p> + <p>Add the class <span class="label">badge</span> to non self closing elements. And add the attribute <span class="label">data-badge</span> to define the content of a badge. The badge will appear in the top-right direction of the element.</p> + </section> <div class="columns"> <div class="column"> <span class="badge" data-badge="1"> |