From fb064a959d20e9b40c05d112014ea02cce5caef4 Mon Sep 17 00:00:00 2001 From: Yan Zhu Date: Wed, 1 Mar 2017 09:50:27 +0800 Subject: CHG: Split Codes and improve docs codes --- docs/elements.html | 170 +++++++++++++++++++++++++++++++---------------------- 1 file changed, 100 insertions(+), 70 deletions(-) (limited to 'docs/elements.html') diff --git a/docs/elements.html b/docs/elements.html index 973ecd2..c102e90 100644 --- a/docs/elements.html +++ b/docs/elements.html @@ -52,6 +52,9 @@
  • Labels
    • +
  • + Codes +
  • Media
    • @@ -88,21 +91,21 @@
    H5 Title 2rem
    H6 Title 1.6rem
    + -
    -<h1>H1 Title</h1>
-<h2>H2 Title <small class="label">4rem</small></h2>
-
    +
    <h1>H1 Title</h1>
+<h2>H2 Title <small class="label">4rem</small></h2>
+

    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.

    + -
    -<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>
-
    +
    <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>
+

    Semantic text elements

    @@ -182,6 +185,7 @@ <var>
    +

    Optimized for east asian fonts

    你好, こんにちは, 안녕하세요

    @@ -197,24 +201,25 @@

    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>
-<p lang="ja">祇園精舎の鐘の声、諸行無常の響きあり。……</p>
-
    +
    <p class="cjk">祇園精舎の鐘の声、諸行無常の響きあり。……</p>
+<p lang="ja">祇園精舎の鐘の声、諸行無常の響きあり。……</p>
+

    Blockquote

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

    - Source
    + -
    -<blockquote>
+
    <blockquote>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
   <cite>- Source</cite>
-</blockquote>
-
    
+</blockquote>
+
    +

    Lists

    @@ -254,9 +259,9 @@
    + -
    -<!-- unordered list -->
+
    <!-- unordered list -->
 <ul>
   <li>list item 1</li>
   <li>list item 2
@@ -273,8 +278,9 @@
 <dl>
   <dt>description list term</dt>
   <dd>description list description</dd>
-</dl>
-
    
+</dl>
+
    +
    @@ -317,9 +323,9 @@

    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">
+
    <table class="table table-striped table-hover">
   <thead>
     <tr>
       <th>name</th>
@@ -334,8 +340,9 @@
       <td>14 October 1994</td>
     </tr>
   </tbody>
-</table>
-
    
+</table>
+
    +
    @@ -368,15 +375,16 @@

    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>
+
    <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>
-
    
+<button class="btn loading">button</button>
+
    +

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

    @@ -414,16 +422,17 @@

    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>
+
    <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-action"><i class="icon icon-markunread"></i></button>
-<button class="btn btn-action circle"><i class="icon icon-markunread"></i></button>
-
    
+<button class="btn btn-action circle"><i class="icon icon-markunread"></i></button>
+
    +
    @@ -434,12 +443,13 @@

    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 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 class="btn btn-primary btn-sm"><i class="icon icon-markunread"></i> small</button>
+
    +

    Button groups

    @@ -476,14 +486,15 @@

    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">
+
    <div class="btn-group btn-group-block">
   <button class="btn">first button</button>
   <button class="btn">second button</button>
   <button class="btn">third button</button>
-</div>
-
    
+</div>
+
    +
    @@ -544,9 +555,9 @@
    + -
    -<form>
+
    <form>
   <!-- form input control -->
   <div class="form-group">
     <label class="form-label" for="input-example-1">Name</label>
@@ -592,8 +603,9 @@
       <i class="form-icon"></i> Remember me
     </label>
   </div>
-</form>
-
    
+</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.

    @@ -678,9 +690,9 @@
    + -
    -<form class="form-horizontal">
+
    <form class="form-horizontal">
   <div class="form-group">
     <div class="col-3">
       <label class="form-label" for="input-example-1">Name</label>
@@ -690,8 +702,9 @@
     </div>
   </div>
   <!-- form structure -->
-</form>
-
    
+</form>
+
    +
    @@ -809,9 +822,9 @@
    + -
    -<form>
+
    <form>
   <!-- form validation class: has-success -->
   <div class="form-group has-success">
     <label class="form-label" for="input-example-1">Name</label>
@@ -825,8 +838,9 @@
     <input class="form-input is-success" type="text" id="input-example-1" placeholder="Name" />
     <p class="form-input-hint">The name is invaild.</p>
   </div>
-</form>
-
    
+</form>
+
    +

    For smaller or larger input and select controls, you could add input-sm/input-lg and select-sm/select-lg to the elements.

    @@ -905,9 +919,9 @@

    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 -->
+
    <!-- normal input group -->
 <div class="input-group">
   <span class="input-group-addon">slack.com/</span>
   <input type="text" class="form-input" placeholder="site name" />
@@ -924,8 +938,9 @@
   <span class="input-group-addon">slack.com/</span>
   <input type="text" class="form-input" placeholder="site name" />
   <button class="btn btn-primary input-group-btn">Submit</button>
-</div>
-
    
+</div>
+
    +
    @@ -944,11 +959,25 @@

    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>
-<span class="label label-primary">primary label</span>
-
    +
    <span class="label">default label</span>
+<span class="label label-primary">primary label</span>
+
    + +
    + +
    +

    Codes

    +
    +

    Codes are inline and multiline code snippets blocks.

    +
    + + +
    <pre class="code" data-lang="HTML"><code><!-- code snippets -->
+</code></pre>
+
    +
    @@ -962,9 +991,10 @@ macOS El Capitan Wallpaper -
    -<img src="img/osx-el-capitan.jpg" class="img-responsive rounded" alt="macOS El Capitan Wallpaper" />
-
    + +
    <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.

    @@ -976,12 +1006,12 @@ -
    -<figure class="figure">
+
+
    <figure class="figure">
   <img src="img/osx-yosemite-2.jpg" class="img-responsive rounded" alt="macOS Yosemite Wallpaper" />
   <figcaption class="figure-caption text-center">macOS Yosemite wallpaper</figcaption>
-</figure>
-
    
+</figure>
+

    For responsive video, add a container with the class video-responsive. 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.

    @@ -995,11 +1025,11 @@ -
    -<div class="video-responsive">
+
    <div class="video-responsive">
   <iframe src="https://www.youtube.com/embed/BzMLA8YIgG0" width="560" height="315" frameborder="0" allowfullscreen></iframe>
-</div>
-
    
+</div>
+
    +
    -- cgit v1.3.1-23-gd82d