From 85669b236fdcaacaa2af0436bae1f1ef21a0fd6c Mon Sep 17 00:00:00 2001 From: Yan Zhu Date: Tue, 3 May 2016 15:37:43 +0800 Subject: update doc and add dl, dt and dd --- index.html | 60 ++++++++++++++++++++++++++++++++++++++++++++++++++++++------ 1 file changed, 54 insertions(+), 6 deletions(-) (limited to 'index.html') diff --git a/index.html b/index.html index cc5e13f..b9ac5aa 100644 --- a/index.html +++ b/index.html @@ -211,7 +211,7 @@
lists
-
+
  • list item 1
  • list item 2 @@ -224,7 +224,7 @@
  • list item 3
-
+
  1. list item 1
  2. list item 2 @@ -237,11 +237,22 @@
  3. list item 3
+
+
+
description list term 1
+
description list description 1
+
description list term 2
+
description list description 2
+
description list term 3
+
description list description 3
+
+ 
-<ul class="list">
+<!-- unordered list -->
+<ul>
     <li>list item 1</li>
     <li>list item 2
         <ul>
@@ -252,6 +263,12 @@
     </li>
     <li>list item 3</li>
 </ul>
+
+<!-- description list -->
+<dl>
+    <dt>description list term</dt>
+    <dd>description list description</dd>
+</dl>
@@ -394,6 +411,17 @@ </div> +
+

For hiding elements on specific viewport sizes, there are classes .hide-xs, .hide-sm, .hide-md, .hide-lg and .hide-xl available.

+
    +
  • hide-xs hides elements when the viewport is smaller than or equal to 480px.
    • +
  • hide-sm hides elements when the viewport is smaller than or equal to 600px.
    • +
  • hide-md hides elements when the viewport is smaller than or equal to 840px.
    • +
  • hide-lg hides elements when the viewport is smaller than or equal to 960px.
    • +
  • hide-xl hides elements when the viewport is smaller than or equal to 1280px.
    • +
+
+
@@ -439,7 +467,8 @@
-

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. Then use the class selected to make <tr> element highlighted.

+

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 selected to make <tr> element highlighted.

@@ -771,6 +800,7 @@
+

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

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. Please note form-horizontal only works in viewports that are at least 840px wide.

@@ -2129,13 +2159,31 @@
+
+
+

A Divider is used for separating elements.

+
+
+
+
+
+
+ + +
+<!-- divider element -->
+<div class="divider"></div>
+
+ +
+

Loading indicator is used for loading or updating. Also, you can add the class loading to buttons for loading status.

-
Loading
+
@@ -2149,7 +2197,7 @@