diff options
CHG: Split Codes and improve docs codes
1 files changed, 100 insertions, 70 deletions
| -rw-r--r-- | docs/elements.html | 170 |
diff --git a/docs/elements.html b/docs/elements.html index 973ecd2..c102e90 100644 --- a/docs/elements.html +++ b/docs/elements.html @@ -53,6 +53,9 @@ <a href="elements.html#labels">Labels</a> </li> <li class="nav-item"> + <a href="elements.html#codes">Codes</a> + </li> + <li class="nav-item"> <a href="elements.html#media">Media</a> </li> <li class="nav-item"> @@ -88,21 +91,21 @@ <h5>H5 Title <span class="label">2rem</span></h5> <h6>H6 Title <span class="label">1.6rem</span></h6> </section> + <!-- headings example --> -<pre> -<code class="code lang-html" data-lang="HTML"><<span class="tag">h1</span>>H1 Title<<span class="tag">/h1</span>> -<<span class="tag">h2</span>>H2 Title <<span class="tag">small</span> <span class="atn">class</span>=<span class="atv">"label"</span>>4rem<<span class="tag">/small</span>><<span class="tag">/h2</span>></code> -</pre> +<pre class="code" data-lang="HTML"><code><<span class="tag">h1</span>>H1 Title<<span class="tag">/h1</span>> +<<span class="tag">h2</span>>H2 Title <<span class="tag">small</span> <span class="atn">class</span>=<span class="atv">"label"</span>>4rem<<span class="tag">/small</span>><<span class="tag">/h2</span>> +</code></pre> <header class="text-center"><h4>Paragraphs</h4></header> <section class="notes"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, <a href="#typography">dictum in vehicula sit amet</a>, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.</p> <p>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> </section> + <!-- paragraphs example --> -<pre> -<code class="code lang-html" data-lang="HTML"><<span class="tag">p</span>>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>>dictum in vehicula sit amet<<span class="tag">/a</span>>, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.<<span class="tag">/p</span>></code> -</pre> +<pre class="code" data-lang="HTML"><code><<span class="tag">p</span>>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>>dictum in vehicula sit amet<<span class="tag">/a</span>>, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.<<span class="tag">/p</span>> +</code></pre> <header class="text-center"><h4>Semantic text elements</h4></header> <div class="columns"> @@ -182,6 +185,7 @@ <code class="ml-10"><var></code> </div> </div> + <header class="text-center"><h4>Optimized for east asian fonts</h4></header> <section class="notes"> <p class="text-large text-center"><span lang="zh-Hans">你好</span>, <span lang="ja">こんにちは</span>, <span lang="ko">안녕하세요</span></p> @@ -197,24 +201,25 @@ <section class="notes"> <p>Use the attribute <code>lang</code> or add the class <code>cjk</code> to the container element to have better Asian CJK (Chinese, Japanese and Korean) support.</p> </section> + <!-- east asian example --> -<pre> -<code class="code lang-html" data-lang="HTML"><<span class="tag">p</span> <span class="atn">class</span>=<span class="atv">"cjk"</span>>祇園精舎の鐘の声、諸行無常の響きあり。……<<span class="tag">/p</span>> -<<span class="tag">p</span> <span class="atn">lang</span>=<span class="atv">"ja"</span>>祇園精舎の鐘の声、諸行無常の響きあり。……<<span class="tag">/p</span>></code> -</pre> +<pre class="code" data-lang="HTML"><code><<span class="tag">p</span> <span class="atn">class</span>=<span class="atv">"cjk"</span>>祇園精舎の鐘の声、諸行無常の響きあり。……<<span class="tag">/p</span>> +<<span class="tag">p</span> <span class="atn">lang</span>=<span class="atv">"ja"</span>>祇園精舎の鐘の声、諸行無常の響きあり。……<<span class="tag">/p</span>> +</code></pre> <header class="text-center"><h4>Blockquote</h4></header> <blockquote> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <cite>- Source</cite> </blockquote> + <!-- blockquote example --> -<pre> -<code class="code lang-html" data-lang="HTML"><<span class="tag">blockquote</span>> +<pre class="code" data-lang="HTML"><code><<span class="tag">blockquote</span>> <<span class="tag">p</span>>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.<<span class="tag">/p</span>> <<span class="tag">cite</span>>- Source<<span class="tag">/cite</span>> -<<span class="tag">/blockquote</span>></code> -</pre> +<<span class="tag">/blockquote</span>> +</code></pre> + <header class="text-center"><h4>Lists</h4></header> <div class="columns"> <div class="column col-4 col-xs-12"> @@ -254,9 +259,9 @@ </dl> </div> </div> + <!-- lists example --> -<pre> -<code class="code lang-html" data-lang="HTML"><span class="com"><!-- unordered list --></span> +<pre class="code" data-lang="HTML"><code><span class="com"><!-- unordered list --></span> <<span class="tag">ul</span>> <<span class="tag">li</span>>list item 1<<span class="tag">/li</span>> <<span class="tag">li</span>>list item 2 @@ -273,8 +278,9 @@ <<span class="tag">dl</span>> <<span class="tag">dt</span>>description list term<<span class="tag">/dt</span>> <<span class="tag">dd</span>>description list description<<span class="tag">/dd</span>> -<<span class="tag">/dl</span>></code> -</pre> +<<span class="tag">/dl</span>> +</code></pre> + </section> <section id="tables" class="container"> @@ -317,9 +323,9 @@ <p>Add the class <code>table</code> to any <table> element. The class will add padding, border and emphasized table header. Use <code>table-striped</code> to <table> to add zebra striped style. For hoverable table rows, you can add the class <code>table-hover</code> to enable hover style. </p> <p>Use the class <code>active</code> to make <tr> element highlighted. </p> </section> + <!-- tables example --> -<pre> -<code class="code lang-html" data-lang="HTML"><<span class="tag">table</span> <span class="atn">class</span>=<span class="atv">"table table-striped table-hover"</span>> +<pre class="code" data-lang="HTML"><code><<span class="tag">table</span> <span class="atn">class</span>=<span class="atv">"table table-striped table-hover"</span>> <<span class="tag">thead</span>> <<span class="tag">tr</span>> <<span class="tag">th</span>>name<<span class="tag">/th</span>> @@ -334,8 +340,9 @@ <<span class="tag">td</span>>14 October 1994<<span class="tag">/td</span>> <<span class="tag">/tr</span>> <<span class="tag">/tbody</span>> -<<span class="tag">/table</span>></code> -</pre> +<<span class="tag">/table</span>> +</code></pre> + </section> <section id="buttons" class="container"> @@ -368,15 +375,16 @@ <section class="notes"> <p>Add the class <code>btn</code> to <a>, <input> or <button> elements for a default button. There are classes <code>btn-primary</code> and <code>btn-link</code> for predefined primary and link buttons. A button with the class <code>loading</code> can show loading indicator. </p> </section> + <!-- buttons example --> -<pre> -<code class="code lang-html" data-lang="HTML"><<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn"</span>>default button<<span class="tag">/button</span>> +<pre class="code" data-lang="HTML"><code><<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn"</span>>default button<<span class="tag">/button</span>> <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-primary"</span>>primary button<<span class="tag">/button</span>> <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-link"</span>>link button<<span class="tag">/button</span>> <span class="com"><!-- a button with loading state --></span> -<<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn loading"</span>>button<<span class="tag">/button</span>></code> -</pre> +<<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn loading"</span>>button<<span class="tag">/button</span>> +</code></pre> + <section class="notes"> <p>Add the class <code>disabled</code> or the attribute <code>disabled</code> for a disabled button.</p> </section> @@ -414,16 +422,17 @@ <p>Add the class <code>btn-sm</code> or <code>btn-lg</code> for small or large button size. Also, you can add the class <code>btn-block</code> for a full-width button. </p> <p>Please note that you could use the class <code>btn-action</code> for a square button, or add another class <code>circle</code> for a round button, which is often used as a Float Action Button (FAB).</p> </section> + <!-- buttons example --> -<pre> -<code class="code lang-html" data-lang="HTML"><<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-lg"</span>>large button<<span class="tag">/button</span>> +<pre class="code" data-lang="HTML"><code><<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-lg"</span>>large button<<span class="tag">/button</span>> <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-sm"</span>>small button<<span class="tag">/button</span>> <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-block"</span>>block button<<span class="tag">/button</span>> <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-action"</span>><<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"icon icon-markunread"</span>><<span class="tag">/i</span>><<span class="tag">/button</span>> -<<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-action circle"</span>><<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"icon icon-markunread"</span>><<span class="tag">/i</span>><<span class="tag">/button</span>></code> -</pre> +<<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-action circle"</span>><<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"icon icon-markunread"</span>><<span class="tag">/i</span>><<span class="tag">/button</span>> +</code></pre> + <div class="columns"> <div class="column"> <button class="btn btn-primary btn-lg"><i class="icon icon-markunread"></i> large</button> @@ -434,12 +443,13 @@ <section class="notes"> <p>Icons with the class <code>icon</code> can be correctly rendered in each button size. </p> </section> + <!-- buttons example --> -<pre> -<code class="code lang-html" data-lang="HTML"><<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-primary btn-lg"</span>><<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"icon icon-markunread"</span>><<span class="tag">/i</span>> large<<span class="tag">/button</span>> +<pre class="code" data-lang="HTML"><code><<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-primary btn-lg"</span>><<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"icon icon-markunread"</span>><<span class="tag">/i</span>> large<<span class="tag">/button</span>> <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-primary"</span>><<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"icon icon-markunread"</span>><<span class="tag">/i</span>> normal<<span class="tag">/button</span>> -<<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-primary btn-sm"</span>><<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"icon icon-markunread"</span>><<span class="tag">/i</span>> small<<span class="tag">/button</span>></code> -</pre> +<<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-primary btn-sm"</span>><<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"icon icon-markunread"</span>><<span class="tag">/i</span>> small<<span class="tag">/button</span>> +</code></pre> + <header class="text-center"><h4>Button groups</h4></header> <div class="columns"> <div class="column col-xs-12"> @@ -476,14 +486,15 @@ <section class="notes"> <p>If you want to use buttons as a group, add the class <code>btn-group</code> to the container. You can add the class <code>btn-group-block</code> for a full-width button group.</p> </section> + <!-- button groups example --> -<pre> -<code class="code lang-html" data-lang="HTML"><<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"btn-group btn-group-block"</span>> +<pre class="code" data-lang="HTML"><code><<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"btn-group btn-group-block"</span>> <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn"</span>>first button<<span class="tag">/button</span>> <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn"</span>>second button<<span class="tag">/button</span>> <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn"</span>>third button<<span class="tag">/button</span>> -<<span class="tag">/div</span>></code> -</pre> +<<span class="tag">/div</span>> +</code></pre> + </section> <section id="forms" class="container"> @@ -544,9 +555,9 @@ </form> </div> </div> + <!-- forms example --> -<pre> -<code class="code lang-html" data-lang="HTML"><<span class="tag">form</span>> +<pre class="code" data-lang="HTML"><code><<span class="tag">form</span>> <span class="com"><!-- form input control --></span> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"form-group"</span>> <<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">"form-label"</span> <span class="atn">for</span>=<span class="atv">"input-example-1"</span>>Name<<span class="tag">/label</span>> @@ -592,8 +603,9 @@ <<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"form-icon"</span>><<span class="tag">/i</span>> Remember me <<span class="tag">/label</span>> <<span class="tag">/div</span>> -<<span class="tag">/form</span>></code> -</pre> +<<span class="tag">/form</span>> +</code></pre> + <section class="notes"> <p>You can use <code>:indeterminate</code> pseudo class for indeterminate state of checkboxes.</p> <p>If you want to have a horizontal form, add the class <code>form-horizontal</code> to the <form> container. And add the class <code>col-[1-12]</code> to the child elements for form row layout. </p> @@ -678,9 +690,9 @@ </form> </div> </div> + <!-- forms example --> -<pre> -<code class="code lang-html" data-lang="HTML"><<span class="tag">form</span> <span class="atn">class</span>=<span class="atv">"form-horizontal"</span>> +<pre class="code" data-lang="HTML"><code><<span class="tag">form</span> <span class="atn">class</span>=<span class="atv">"form-horizontal"</span>> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"form-group"</span>> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"col-3"</span>> <<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">"form-label"</span> <span class="atn">for</span>=<span class="atv">"input-example-1"</span>>Name<<span class="tag">/label</span>> @@ -690,8 +702,9 @@ <<span class="tag">/div</span>> <<span class="tag">/div</span>> <span class="com"><!-- form structure --></span> -<<span class="tag">/form</span>></code> -</pre> +<<span class="tag">/form</span>> +</code></pre> + <div class="columns"> <div class="column col-9 col-sm-12"> <form class="form-horizontal" action="#forms"> @@ -809,9 +822,9 @@ </div> </div> </div> + <!-- forms example --> -<pre> -<code class="code lang-html" data-lang="HTML"><<span class="tag">form</span>> +<pre class="code" data-lang="HTML"><code><<span class="tag">form</span>> <span class="com"><!-- form validation class: has-success --></span> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"form-group has-success"</span>> <<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">"form-label"</span> <span class="atn">for</span>=<span class="atv">"input-example-1"</span>>Name<<span class="tag">/label</span>> @@ -825,8 +838,9 @@ <<span class="tag">input</span> <span class="atn">class</span>=<span class="atv">"form-input is-success"</span> <span class="atn">type</span>=<span class="atv">"text"</span> <span class="atn">id</span>=<span class="atv">"input-example-1"</span> <span class="atn">placeholder</span>=<span class="atv">"Name"</span> /> <<span class="tag">p</span> <span class="atn">class</span>=<span class="atv">"form-input-hint"</span>>The name is invaild.<<span class="tag">/p</span>> <<span class="tag">/div</span>> -<<span class="tag">/form</span>></code> -</pre> +<<span class="tag">/form</span>> +</code></pre> + <section class="notes"> <p>For smaller or larger input and select controls, you could add <code>input-sm</code>/<code>input-lg</code> and <code>select-sm</code>/<code>select-lg</code> to the elements.</p> </section> @@ -905,9 +919,9 @@ <section class="notes"> <p>If you want to attach text and button along with an input, add the class <code>input-group</code> to the input container. And add the class <code>input-group-addon</code> to the text element and <code>input-group-btn</code> to the button element.</p> </section> + <!-- input groups example --> -<pre> -<code class="code lang-html" data-lang="HTML"><span class="com"><!-- normal input group --></span> +<pre class="code" data-lang="HTML"><code><span class="com"><!-- normal input group --></span> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"input-group"</span>> <<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"input-group-addon"</span>>slack.com/<<span class="tag">/span</span>> <<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">"text"</span> <span class="atn">class</span>=<span class="atv">"form-input"</span> <span class="atn">placeholder</span>=<span class="atv">"site name"</span> /> @@ -924,8 +938,9 @@ <<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"input-group-addon"</span>>slack.com/<<span class="tag">/span</span>> <<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">"text"</span> <span class="atn">class</span>=<span class="atv">"form-input"</span> <span class="atn">placeholder</span>=<span class="atv">"site name"</span> /> <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-primary input-group-btn"</span>>Submit<<span class="tag">/button</span>> -<<span class="tag">/div</span>></code> -</pre> +<<span class="tag">/div</span>> +</code></pre> + </section> <section id="labels" class="container"> @@ -944,11 +959,25 @@ <section class="notes"> <p>Add the class <code>label</code> to <span> or <small> elements. You can add another class <code>label-primary</code>, <code>label-success</code> and <code>label-danger</code> for a primary colored label.</p> </section> + <!-- labels example --> -<pre> -<code class="code lang-html" data-lang="HTML"><<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"label"</span>>default label<<span class="tag">/span</span>> -<<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"label label-primary"</span>>primary label<<span class="tag">/span</span>></code> -</pre> +<pre class="code" data-lang="HTML"><code><<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"label"</span>>default label<<span class="tag">/span</span>> +<<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"label label-primary"</span>>primary label<<span class="tag">/span</span>> +</code></pre> + + </section> + + <section id="codes" class="container"> + <header class="text-center"><h3>Codes</h3></header> + <section class="notes"> + <p><strong>Codes</strong> are inline and multiline code snippets blocks.</p> + </section> + +<!-- codes example --> +<pre class="code" data-lang="HTML"><code><<span class="tag">pre</span> <span class="atn">class</span>=<span class="atv">"code"</span> <span class="atn">data-lang</span>=<span class="atv">"HTML"</span>><<span class="tag">code</span>><span class="com"><!-- code snippets --></span> +<<span class="tag">/code</span>><<span class="tag">/pre</span>> +</code></pre> + </section> <section id="media" class="container"> @@ -962,9 +991,10 @@ <img src="img/osx-el-capitan.jpg" class="img-responsive rounded" alt="macOS El Capitan Wallpaper" /> </div> </div> -<pre> -<code class="code lang-html" data-lang="HTML"><<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">"img/osx-el-capitan.jpg"</span> <span class="atn">class</span>=<span class="atv">"img-responsive rounded"</span> <span class="atn">alt</span>=<span class="atv">"macOS El Capitan Wallpaper"</span> /></code> -</pre> + +<pre class="code" data-lang="HTML"><code><<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">"img/osx-el-capitan.jpg"</span> <span class="atn">class</span>=<span class="atv">"img-responsive rounded"</span> <span class="atn">alt</span>=<span class="atv">"macOS El Capitan Wallpaper"</span> /> +</code></pre> + <section class="notes"> <p>You can use the element <code><figure></code> for an image with a caption. Add the class <code>figure</code> to <figure> element. The images with the class <code>img-responsive</code> will be responsive. And the included class <code>figure-caption</code> will provide basic style for caption. Also, you can use <code>text-left</code>, <code>text-center</code> and <code>text-right</code> for caption alignment. </p> </section> @@ -976,12 +1006,12 @@ </figure> </div> </div> -<pre> -<code class="code lang-html" data-lang="HTML"><<span class="tag">figure</span> <span class="atn">class</span>=<span class="atv">"figure"</span>> + +<pre class="code" data-lang="HTML"><code><<span class="tag">figure</span> <span class="atn">class</span>=<span class="atv">"figure"</span>> <<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">"img/osx-yosemite-2.jpg"</span> <span class="atn">class</span>=<span class="atv">"img-responsive rounded"</span> <span class="atn">alt</span>=<span class="atv">"macOS Yosemite Wallpaper"</span> /> <<span class="tag">figcaption</span> <span class="atn">class</span>=<span class="atv">"figure-caption text-center"</span>>macOS Yosemite wallpaper<<span class="tag">/figcaption</span>> -<<span class="tag">/figure</span>></code> -</pre> +<<span class="tag">/figure</span>> +</code></pre> <section class="notes"> <p>For responsive video, add a container with the class <code>video-responsive</code>. Insert any YouTube, Youku or other iframe/embed video inside the container. The ratio is 16:9 by default. You may add <code>video-responsive-4-3</code> for 4:3 ratio video container or <code>video-responsive-1-1</code> for 1:1 ratio.</p> @@ -995,11 +1025,11 @@ </div> <!-- media example --> -<pre> -<code class="code lang-html" data-lang="HTML"><<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"video-responsive"</span>> +<pre class="code" data-lang="HTML"><code><<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"video-responsive"</span>> <<span class="tag">iframe</span> <span class="atn">src</span>=<span class="atv">"https://www.youtube.com/embed/BzMLA8YIgG0"</span> <span class="atn">width</span>=<span class="atv">"560"</span> <span class="atn">height</span>=<span class="atv">"315"</span> <span class="atn">frameborder</span>=<span class="atv">"0"</span> <span class="atn">allowfullscreen</span>><<span class="tag">/iframe</span>> -<<span class="tag">/div</span>></code> -</pre> +<<span class="tag">/div</span>> +</code></pre> + </section> <section class="container"> |