From 18fd550796ae46117d72b242543371bcb2f7a98b Mon Sep 17 00:00:00 2001 From: Yan Zhu Date: Tue, 28 Feb 2017 16:13:41 +0800 Subject: ADD: Experimentals doc page --- docs/elements.html | 113 ++++++++++++----------------------------------------- 1 file changed, 25 insertions(+), 88 deletions(-) (limited to 'docs/elements.html') diff --git a/docs/elements.html b/docs/elements.html index f2104a7..e8d3adf 100644 --- a/docs/elements.html +++ b/docs/elements.html @@ -53,10 +53,10 @@ Labels
  • - Progress + Media
  • - Media + Experimentals
    • @@ -79,15 +79,15 @@

    Typography sets default styles for headings, paragraphs, semantic text, blockquote, lists and code elements.

    -

    Headings

    -

    H1 Title 5rem

    -

    H2 Title 4rem

    -

    H3 Title 3rem

    -

    H4 Title 2.4rem

    -
    H5 Title 2rem
    -
    H6 Title 1.6rem
    - +
    +

    H1 Title 5rem

    +

    H2 Title 4rem

    +

    H3 Title 3rem

    +

    H4 Title 2.4rem

    +
    H5 Title 2rem
    +
    H6 Title 1.6rem
    + 
     <h1>H1 Title</h1>
@@ -95,9 +95,10 @@

    Paragraphs

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.

    -

    Climb leg rub face on everything give attitude nap all day for under the bed. Chase mice attack feet but rub face on everything hopped up on goofballs.

    - +
    +

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.

    +

    Climb leg rub face on everything give attitude nap all day for under the bed. Chase mice attack feet but rub face on everything hopped up on goofballs.

    + 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, <a href="#">dictum in vehicula sit amet</a>, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.</p>
@@ -181,22 +182,21 @@
               <var>
             
           
-
           
    Optimized for east asian fonts
    
-          
    你好, こんにちは, 안녕하세요
    
-          
    Chinese (Simplified)
    
-          
    革命不是请客吃饭，不是做文章，不是绘画绣花，不能那样雅致，那样从容不迫，“文质彬彬”，那样“温良恭俭让”。革命就是暴动，是一个阶级推翻一个阶级的暴烈的行动。
    
-          
    Chinese (Tranditional)
    
-          
    山不在高，有仙則名；水不在深，有龍則靈。斯是陋室，惟吾德馨。苔痕上階綠，草色入簾青；談笑有鴻儒，往來無白丁。可以調素琴，閱金經。無絲竹之亂耳，無案牘之勞形。南陽諸葛廬，西蜀子雲亭。孔子云：「何陋之有？」
    
-          
    Japanese
    
-          
    祇園精舎の鐘の声、諸行無常の響きあり。沙羅双樹の花の色、盛者必衰の理をあらはす。おごれる人も久しからず。ただ春の夜の夢のごとし。たけき者も遂にはほろびぬ、ひとへ‌​に風の前の塵に同じ。
    
-          
    Korean
    
-          
    나라말이 중국과 달라, 한문・한자와 서로 통하지 아니하므로, 어리석은 백성들이 말하고자 하는 바가 있어도, 끝내 제 뜻을 펴지 못하는 사람이 많다. 내가 이를 불쌍히 여겨, 새로 스물 여덟 글자를 만드니, 사람마다 하여금 쉽게 익혀, 날마다 씀에 편하게 하고자 할 따름이다.
    
-
+          
    
+            
    你好, こんにちは, 안녕하세요
    
+            
    Chinese (Simplified)
    
+            
    革命不是请客吃饭，不是做文章，不是绘画绣花，不能那样雅致，那样从容不迫，“文质彬彬”，那样“温良恭俭让”。革命就是暴动，是一个阶级推翻一个阶级的暴烈的行动。
    
+            
    Chinese (Tranditional)
    
+            
    山不在高，有仙則名；水不在深，有龍則靈。斯是陋室，惟吾德馨。苔痕上階綠，草色入簾青；談笑有鴻儒，往來無白丁。可以調素琴，閱金經。無絲竹之亂耳，無案牘之勞形。南陽諸葛廬，西蜀子雲亭。孔子云：「何陋之有？」
    
+            
    Japanese
    
+            
    祇園精舎の鐘の声、諸行無常の響きあり。沙羅双樹の花の色、盛者必衰の理をあらはす。おごれる人も久しからず。ただ春の夜の夢のごとし。たけき者も遂にはほろびぬ、ひとへ‌​に風の前の塵に同じ。
    
+            
    Korean
    
+            
    나라말이 중국과 달라, 한문・한자와 서로 통하지 아니하므로, 어리석은 백성들이 말하고자 하는 바가 있어도, 끝내 제 뜻을 펴지 못하는 사람이 많다. 내가 이를 불쌍히 여겨, 새로 스물 여덟 글자를 만드니, 사람마다 하여금 쉽게 익혀, 날마다 씀에 편하게 하고자 할 따름이다.
    
+          
    
           
    
             
    Use the attribute lang or add the class cjk to the container element to have better Asian CJK (Chinese, Japanese and Korean) support.
    
           
    
-
 
 
     <p class="cjk">祇園精舎の鐘の声、諸行無常の響きあり。……</p>
@@ -208,7 +208,6 @@
             
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
    
             - Source
           
-
 
 
     <blockquote>
@@ -216,7 +215,6 @@
   <cite>- Source</cite>
 </blockquote>
 
    
-
           
    Lists
    
           
    
             
    
@@ -256,7 +254,6 @@
               
             
    
           
    
-
 
 
     <!-- unordered list -->
@@ -278,7 +275,6 @@
   <dd>description list description</dd>
 </dl>
 
    
-
         
 
         
    
@@ -286,7 +282,6 @@
           
    
             
    Tables include default styles for tables and data sets.
    
           
    
-
           
@@ -322,7 +317,6 @@
             
    Add the class table to any <table> element. The class will add padding, border and emphasized table header. Use table-striped to <table> to add zebra striped style. For hoverable table rows, you can add the class table-hover to enable hover style. 
    Use the class active to make <tr> element highlighted. 
    
-
 
     <table class="table table-striped table-hover">
@@ -342,7 +336,6 @@
   </tbody>
 </table>
 
    
-
         
    
@@ -350,7 +343,6 @@
           
    
             
    Buttons include simple button styles for actions in different types and sizes. 
    
           
    
-
           
    
             
    
               
@@ -376,7 +368,6 @@
           
    
             
    Add the class btn 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 class loading can show loading indicator.  
    
           
    
-
 
 
     <button class="btn">default button</button>
@@ -386,11 +377,9 @@
 <!-- a button with loading state -->
 <button class="btn loading">button</button>
 
    
-
           
    
             
    Add the class disabled or the attribute disabled for a disabled button.
    
           
    
-
           
    
             
    
               
@@ -404,7 +393,6 @@
           
    
 
           
    Button sizes
    
-
           
    
             
    
               
@@ -426,7 +414,6 @@
             
    Add the class btn-sm or btn-lg for small or large button size. Also, you can add the class btn-block for a full-width button. 
    
             
    Please note that you could use the class btn-action for a square button, or add another class circle for a round button, which is often used as a Float Action Button (FAB).
    
           
    
-
 
     <button class="btn btn-lg">large button</button>
@@ -437,26 +424,22 @@
 <button class="btn btn-action"><i class="icon icon-markunread"></i></button>
 <button class="btn btn-action circle"><i class="icon icon-markunread"></i></button>
 
    
-
           
    
             
    
               
               
               
             
    
-
           
    
             
    Icons with the class icon can be correctly rendered in each button size. 
    
           
    
-
 
     <button class="btn btn-primary btn-lg"><i class="icon icon-markunread"></i> large</button>
 <button class="btn btn-primary"><i class="icon icon-markunread"></i> normal</button>
 <button class="btn btn-primary btn-sm"><i class="icon icon-markunread"></i> small</button>
 
    
-
           
    Button groups
    
             
    
@@ -493,7 +476,6 @@
           
    
             
    If you want to use buttons as a group, add the class btn-group to the container. You can add the class btn-group-block for a full-width button group.
    
           
    
-
 
 
     <div class="btn-group btn-group-block">
@@ -502,7 +484,6 @@
   <button class="btn">third button</button>
 </div>
 
    
-
         
 
         
    
@@ -563,7 +544,6 @@
               
             
    
           
    
-
 
     <form>
@@ -614,12 +594,10 @@
   </div>
 </form>
 
    
-
           
    
             
    You can use :indeterminate pseudo class for indeterminate state of checkboxes.
    
             
    If you want to have a horizontal form, add the class form-horizontal to the <form> container. And add the class col-[1-12] to the child elements for form row layout. 
    
           
    
-
           
    
             
    
               
    
@@ -700,7 +678,6 @@
               
             
    
           
    
-
 
     <form class="form-horizontal">
@@ -715,7 +692,6 @@
   <!-- form structure -->
 </form>
 
    
-
           
    
             
    
               
    
@@ -802,11 +778,9 @@
               
             
    
           
    
-
           
    
             
    To use form validation styles, add is-success and is-danger to the controls or add has-success and has-danger to parent elements. You can use the class form-input-hint to provide form validation success and error messages.
    
           
    
-
           
    
             
    
               
    
@@ -843,7 +817,6 @@
               
    
             
    
           
    
-
 
     <form>
@@ -862,11 +835,9 @@
   </div>
 </form>
 
    
-
           
    
             
    For smaller or larger input and select controls, you could add input-sm/input-lg and select-sm/select-lg to the elements.
    
           
    
-
           
    
             
    
               
@@ -893,7 +864,6 @@
               
             
    
           
    
-
           
    Input groups
    
             
    
@@ -943,7 +913,6 @@
           
    
             
    If you want to attach text and button along with an input, add the class input-group to the input container. And add the class input-group-addon to the text element and input-group-btn to the button element.
    
           
    
-
 
 
     <!-- normal input group -->
@@ -965,7 +934,6 @@
   <button class="btn btn-primary input-group-btn">Submit</button>
 </div>
 
    
-
         
 
         
    
@@ -984,7 +952,6 @@
           
    
             
    Add the class label to <span> or <small> elements. You can add another class label-primary, label-success and label-danger for a primary colored label.
    
           
    
-
 
 
     <span class="label">default label</span>
@@ -992,35 +959,6 @@
 
    
         
    
 
-        
    
-          
    Progress experimental
    
-          
    
-            
    The Progress indicates the progress completion of a task.
    
-          
    
-          
    
-            
    
-              
-            
    
-            
    
-              
-            
    
-            
    
-              
-            
    
-            
    
-              
-            
    
-          
    
-          
    
-            
    
-          
    
-
-
-
    -<progress class="progress" value="25" max="100"></progress>
-
    
-        
    
-
         
    
           
    Media
    
           
    
@@ -1035,7 +973,6 @@
 
     <img src="img/osx-el-capitan.jpg" class="img-responsive rounded" alt="macOS El Capitan Wallpaper" />
 
    
-
           
    
             
    You can use the element <figure> for an image with a caption. Add the class figure to <figure> element. The images with the class img-responsive will be responsive. And the included class figure-caption will provide basic style for caption. Also, you can use text-left, text-center and text-right for caption alignment.  
    
           
    
-- 
cgit v1.3.1-23-gd82d