From 41504e8032d35a68b7f224cf49cfe9b09b6f8e34 Mon Sep 17 00:00:00 2001
From: Yan Zhu <picturepan2@hotmail.com>
Date: Wed, 6 Apr 2016 15:28:46 +0800
Subject: update more doc contents.

---
 demo/index.html | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

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">
-- 
cgit v1.3.1-26-gb76a