From a2f1864da01e76c59d682b897398b100eb3bc25a Mon Sep 17 00:00:00 2001 From: Yan Zhu Date: Thu, 3 Aug 2017 19:08:54 +0800 Subject: Update the Docs HTML structure --- docs/elements.html | 206 ++++++++++++++++++++++++++--------------------------- 1 file changed, 103 insertions(+), 103 deletions(-) (limited to 'docs/elements.html') diff --git a/docs/elements.html b/docs/elements.html index 9ee3cef..41b612e 100644 --- a/docs/elements.html +++ b/docs/elements.html @@ -12,22 +12,22 @@ -
-
+
+
+
GitHub -
+ -
- + + -
-
+
+
+

Use the lang attribute to the container element to have better Asian CJK (Chinese, Japanese and Korean) font support.

-
+ 
<p lang="zh-Hans">革命不是请客吃饭，不是做文章……</p>
@@ -384,13 +384,13 @@
 <p lang="ko">나라말이 중국과 달라, 한문・한자와 서로 통하지 아니하므로……</p>
-
+

And you can use the cjk class or the lang attribute to add spacing between underlines and strike-through text for better Chinese and Japanese readability.

-
-
+ +

祇園精舎の鐘の声、諸行無常の響きあり。

祇園精舎の鐘の声、諸行無常の響きあり。

-
+ 
<p class="cjk"><u>祇園</u><u>精舎</u>の鐘の声、諸行無常の響きあり。……</p>
@@ -471,13 +471,13 @@
 </dl>
-
+ -
+

Tables

-
+

Tables include default styles for tables and data sets.

-
+
@@ -509,10 +509,10 @@
-
+

Add the table class to any <table> element. The class will add padding, border and emphasized table header. Use the table-striped class to <table> to add zebra striped style. For hoverable table rows, you can add the table-hover class to enable hover style.

Use the active class to make <tr> element highlighted.

-
+ 
<table class="table table-striped table-hover">
@@ -533,13 +533,13 @@
 </table>
-
+ -
+

Buttons

-
+

Buttons include simple button styles for actions in different types and sizes.

-
+
@@ -552,13 +552,13 @@
-
+

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.

-
+ -
+

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

-
+
@@ -572,9 +572,9 @@
-
+

A button with the loading class can show loading indicator.

-
+
@@ -612,9 +612,9 @@
-
+

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-lg">large button</button>
@@ -627,9 +627,9 @@
 <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).

-
+
@@ -682,9 +682,9 @@
-
+

If you want to use buttons as a group, add the btn-group class to the container. You can add the btn-group-block class for a full-width button group.

-
+ 
<div class="btn-group btn-group-block">
@@ -694,13 +694,13 @@
 </div>
-
+ -
+

Forms

-
+

Forms provide the most common control styles used in forms, including input, textarea, select, checkbox, radio and switch.

-
+
@@ -805,14 +805,14 @@ </form> -
+

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.

-
+
@@ -909,9 +909,9 @@

Form sizes

-
+

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

-
+
@@ -946,9 +946,9 @@

Form icons

-
+

Add a wrapper with the has-icon-left/has-icon-right class to <input> element. And add the icon with form-icon class next to the <input>.

-
+
@@ -998,9 +998,9 @@ </div> -
+

You can use the loading class for loading or posting state.

-
+
@@ -1168,9 +1168,9 @@
-
+

If you want to attach text and button along with an input, add the input-group class to the input container. And add the input-group-addon class to the text element and input-group-btn to the button element.

-
+ 
<!-- normal input group -->
@@ -1194,9 +1194,9 @@

Form validation styles

-
+

To use form validation styles, add is-success or is-error class to the controls or add has-success or has-error class to parent elements. You can use the form-input-hint class to provide form validation success and error messages.

-
+
@@ -1293,9 +1293,9 @@

Form disabled styles

-
+

Add the disabled attribute to the element or <fieldset> for a disabled form components style.

-
+
@@ -1343,13 +1343,13 @@
-
+ -
+

Icons experimental

-
+

Icons are single-element, responsive and pure CSS icons. You can include spectre-icons.css located in the dist folder to your web <head> to have these CSS icons.

-
+

Navigation

@@ -1592,13 +1592,13 @@ 
<i class="icon icon-menu"></i>
-
+ -
+

Labels

-
+

Labels are formatted text tags for highlighted, informative information.

-
+
default label @@ -1608,23 +1608,23 @@ error label
-
+

Add the label class to <span> or <small> elements. You can add another class label-primary, label-success, label-warning and label-error for a primary colored label.

-
+ 
<span class="label">default label</span>
 <span class="label label-primary">primary label</span>
-
+ -
+

Codes

-
+

Codes are inline and multiline code snippets.

For inline code, you can use the element <code>. For multiline code snippet blocks, you can use <pre> with the code class as a container, and add <code> inside it. The data-lang attribute is rendered as the language name in the top right.

-
+ 
<!-- code snippets -->
 <button class="btn">
@@ -1634,32 +1634,32 @@
 
 
 
<pre class="code" data-lang="HTML"><code><span class="com">&lt;!-- code snippets --&gt;</span>
-&lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn&quot;</span>&gt;
+&lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn&quot;</span>&gt;
   Submit
 &lt;<span class="tag">/button</span>&gt;
 </code></pre>
 

 
-
+ -
+

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.

-
+
macOS El Capitan Wallpaper
-
-

Add the img-fit-contain or img-fit-cover class to <img> or <video> elements. The media will crop itself to fit inside the element (and you don't need another container). This feature can replace the background image trick. Microsoft Edge support is in development.

-
+
+

Add the img-fit-contain or img-fit-cover class to <img> or <video> elements. The media will crop itself to fit inside the element (and you don't need another container). This feature can replace the background image trick. Microsoft Edge support is in preview.

+
@@ -1680,9 +1680,9 @@ <img src="img/osx-el-capitan.jpg" class="img-fit-cover ..." alt="..." /> -
+

You can use the element <figure> for an image with a caption. Add the figure class to <figure> element. The images with the img-responsive class 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.

-
+
@@ -1699,9 +1699,9 @@

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.

-
+
@@ -1716,9 +1716,9 @@ </div> -
+ -
+
  • @@ -1734,18 +1734,18 @@
-
+ - - + +