From bade3426145be54a0d2c235a66aad57d5242ca3a Mon Sep 17 00:00:00 2001 From: Yan Zhu Date: Thu, 8 Jun 2017 16:23:55 +0800 Subject: Visual style update --- docs/elements.html | 120 +++++++++++++++++++++++++++++++++-------------------- 1 file changed, 74 insertions(+), 46 deletions(-) (limited to 'docs/elements.html') 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 @@

H1 Title 5rem

H2 Title 4rem

-

H3 Title 3rem

-

H4 Title 2.4rem

-
H5 Title 2rem
-
H6 Title 1.6rem
+

H3 Title 3rem

+

H4 Title 2.4rem

+
H5 Title 2rem
+
H6 Title 1.6rem
@@ -355,87 +355,77 @@
- +
- +
- +
- +
- +
- +
+
-

Add the btn class to <a>, <input> or <button> elements for a default button. There are classes btn-primary and btn-link for predefined primary and link buttons. A button with the loading class can show loading indicator.

+

Add the btn class to <a>, <input> or <button> elements for a default button. There are classes btn-primary and btn-link for predefined primary and link buttons.

- -
<button class="btn">default button</button>
-<button class="btn btn-primary">primary button</button>
-<button class="btn btn-link">link button</button>
-
-<!-- a button with loading state -->
-<button class="btn loading">button</button>
-
-

Add the disabled class or the disabled attribute for a disabled button.

+
- +
- +
- +
-

Button sizes

+
+

A button with the loading class can show loading indicator.

+
+
-
- - - +
+
-
- - - +
+
-
- - - +
+
-
-

Add the btn-sm or btn-lg class for small or large button size. Also, you can add the btn-block class for a full-width button.

-

Please note that you could use the btn-action class for a square button, or add another circle class for a round button, which is often used as a Float Action Button (FAB).

-
-
<button class="btn btn-lg">large button</button>
-<button class="btn btn-sm">small button</button>
+
<button class="btn">default button</button>
+<button class="btn btn-primary">primary button</button>
+<button class="btn btn-link">link button</button>
 
-<button class="btn btn-block">block button</button>
+<!-- buttons with disabled state -->
+<button class="btn disabled" tabindex="-1">disabled button</button>
+<button class="btn" disabled tabindex="-1">disabled button</button>
 
-<button class="btn btn-action"><i class="icon icon-arrow-left"></i></button>
-<button class="btn btn-action circle"><i class="icon icon-arrow-left"></i></button>
+<!-- a button with loading state -->
+<button class="btn loading">button</button>
 

 
+          
Button sizes

           

             

               
@@ -446,11 +436,41 @@
               
             

           

+          

+            
Add the btn-sm or btn-lg class for small or large button size. Also, you can add the btn-block class for a full-width button. 

+          

 
 
-
<button class="btn btn-primary btn-lg"><i class="icon icon-arrow-left"></i> large</button>
+
<button class="btn btn-lg">large button</button>
+<button class="btn btn-sm">small button</button>
+
+<button class="btn btn-block">block button</button>
+
+<button class="btn btn-primary btn-lg"><i class="icon icon-arrow-left"></i> large</button>
 <button class="btn btn-primary"><i class="icon icon-arrow-left"></i> normal</button>
 <button class="btn btn-primary btn-sm"><i class="icon icon-arrow-left"></i> small</button>
+

+
+          

+            
Please note that you could use the btn-action class for a square button, or add another circle class for a round button, which is often used as a Float Action Button (FAB).

+          

+
+          

+            

+              
+              
+              
+            

+            

+              
+              
+              
+            

+          

+
+
+
<button class="btn btn-action"><i class="icon icon-arrow-left"></i></button>
+<button class="btn btn-action circle"><i class="icon icon-arrow-left"></i></button>
 

 
           
Button groups

@@ -611,6 +631,10 @@
 
           

             
You can use :indeterminate pseudo class for indeterminate state of checkboxes.

+          

+
+          
Horizontal forms

+          

             
If you want to have a horizontal form, add the form-horizontal class to the <form> container. And add the col-[1-12] class to the child elements for form row layout. 

           

           

@@ -1415,6 +1439,9 @@
           
Media

           

             
Media includes responsive images, figures and video classes. 

+          

+          
Images

+          

             
Add the img-responsive class to <img> elements. The images will scale with the parent sizes.

           

           

@@ -1464,6 +1491,7 @@
 </figure>
 

 
+          
Video

           

             
For responsive video, add a container with the video-responsive class. Insert any YouTube, Youku or other iframe/embed video inside the container. The ratio is 16:9 by default. You may add video-responsive-4-3 for 4:3 ratio video container or video-responsive-1-1 for 1:1 ratio.

           

-- 
cgit v1.3.1-23-gd82d