From 0c2eedf551cb7d3c2ad6c3a5e7f35ef6a1ac655c Mon Sep 17 00:00:00 2001 From: Yan Zhu Date: Sun, 10 Jun 2018 08:13:26 +0800 Subject: Update Docs and add Calendar code --- docs/components.html | 39 ++++++++++++++++++++------------------- 1 file changed, 20 insertions(+), 19 deletions(-) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index b15b040..04b1e04 100644 --- a/docs/components.html +++ b/docs/components.html @@ -275,6 +275,18 @@ Add the avatar class and avatar size class to <div> element. The data-initial attribute is the name appear inside the avatar.

+ 
<!-- Basic avatar examples -->
+<figure class="avatar avatar-xl">
+  <img src="img/avatar-1.png" alt="...">
+</figure>
+
+<figure class="avatar avatar-xl" data-initial="YZ" style="background-color: #5755d9;"></figure>
+
+<!-- Show initals when avatar image is unavailable or not fully loaded -->
+<figure class="avatar avatar-xl" data-initial="YZ" style="background-color: #5755d9;">
+  <img src="img/avatar-1.png" alt="...">
+</figure>
+
AvatarAvatar
@@ -284,22 +296,10 @@
AvatarAvatar
- 
<!-- Basic avatar examples -->
-<figure class="avatar avatar-xl">
-  <img src="img/avatar-1.png" alt="...">
-</figure>
-
-<figure class="avatar avatar-xl">
+            
<figure class="avatar avatar-xl">
   <img src="img/avatar-1.png" alt="...">
   <img src="img/avatar-5.png" class="avatar-icon" alt="...">
 </figure>
-
-<figure class="avatar avatar-xl" data-initial="YZ" style="background-color: #5755d9;"></figure>
-
-<!-- Show initals when avatar image is unavailable or not fully loaded -->
-<figure class="avatar avatar-xl" data-initial="YZ" style="background-color: #5755d9;">
-  <img src="img/avatar-1.png" alt="...">
-</figure>
   

             

               

@@ -399,7 +399,8 @@
             
There is the bar-sm class for thinner Bars.
               Also, you could use Tooltips for any bar-item.
             

-            
<div class="bar bar-sm">
+            
<!-- normal bars -->
+<div class="bar bar-sm">
   <div class="bar-item" role="progressbar" style="width:25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
 </div>
 
@@ -434,7 +435,7 @@
               You need to set the bar-item width manually to have the slider point.
             

             
If there are two bar-item divs in one bar-slider, you will have a range slider.

-            
<!-- slider -->
+            
<!-- normal slider -->
 <div class="bar bar-slider">
   <div class="bar-item" role="progressbar" style="width:25%;">
     <button class="bar-slider-btn btn" role="slider"></button>
@@ -575,14 +576,14 @@
     <img src="img/osx-el-capitan.jpg" class="img-responsive">
   </div>
   <div class="card-header">
-    <div class="card-title h5">Microsoft</div>
-    <div class="card-subtitle text-gray">Software and hardware</div>
+    <div class="card-title h5">...</div>
+    <div class="card-subtitle text-gray">...</div>
   </div>
   <div class="card-body">
-    Empower every person and every organization on the planet to achieve more.
+    ...
   </div>
   <div class="card-footer">
-    <button class="btn btn-primary">Do</button>
+    <button class="btn btn-primary">...</button>
   </div>
 </div>

           

-- 
cgit v1.3.1-23-gd82d