diff options
Merge pull request #282 from picturepan2/0.4.1 v0.4.1
0.4.1
1 files changed, 142 insertions, 136 deletions
| -rw-r--r-- | docs/elements.html | 278 |
diff --git a/docs/elements.html b/docs/elements.html index 283174f..97ec58e 100644 --- a/docs/elements.html +++ b/docs/elements.html @@ -1,15 +1,15 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="utf-8" /> - <meta name="robots" content="index, follow" /> - <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no" /> - <meta http-equiv="x-ua-compatible" content="ie=edge" /> - <meta name="author" content="https://github.com/picturepan2/" /> + <meta charset="utf-8"> + <meta name="robots" content="index, follow"> + <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no"> + <meta http-equiv="x-ua-compatible" content="ie=edge"> + <meta name="author" content="https://github.com/picturepan2/"> <title>Elements - Spectre.css CSS Framework</title> - <link rel="stylesheet" href="dist/spectre.css" /> - <link rel="stylesheet" href="dist/spectre-icons.css" /> - <link rel="stylesheet" href="css/docs.css" /> + <link rel="stylesheet" href="dist/spectre.css"> + <link rel="stylesheet" href="dist/spectre-icons.css"> + <link rel="stylesheet" href="css/docs.css"> </head> <body> <div class="s-container container"> @@ -17,14 +17,14 @@ <div id="sidebar" class="s-sidebar"> <div class="s-brand"> <a href="index.html" class="s-logo"> - <img src="img/spectre-logo.svg" alt="Spectre.css CSS Framework" /> + <img src="img/spectre-logo.svg" alt="Spectre.css CSS Framework"> <h2>Spectre.css</h2> </a> </div> <div class="s-nav"> - <div class="accordion"> - <div class="accordion-item"> - <input type="checkbox" id="docs-accordion-1" name="docs-accordion-checkbox" hidden /> + <div class="accordion-container"> + <div class="accordion"> + <input type="checkbox" id="docs-accordion-1" name="docs-accordion-checkbox" hidden> <label class="accordion-header c-hand" for="docs-accordion-1"> Getting started </label> @@ -48,8 +48,8 @@ </ul> </div> </div> - <div class="accordion-item"> - <input type="checkbox" id="docs-accordion-2" name="docs-accordion-checkbox" hidden checked /> + <div class="accordion"> + <input type="checkbox" id="docs-accordion-2" name="docs-accordion-checkbox" hidden checked> <label class="accordion-header c-hand" for="docs-accordion-2"> Elements </label> @@ -82,8 +82,8 @@ </ul> </div> </div> - <div class="accordion-item"> - <input type="checkbox" id="docs-accordion-3" name="docs-accordion-checkbox" hidden /> + <div class="accordion"> + <input type="checkbox" id="docs-accordion-3" name="docs-accordion-checkbox" hidden> <label class="accordion-header c-hand" for="docs-accordion-3"> Layout </label> @@ -101,8 +101,8 @@ </ul> </div> </div> - <div class="accordion-item"> - <input type="checkbox" id="docs-accordion-4" name="docs-accordion-checkbox" hidden /> + <div class="accordion"> + <input type="checkbox" id="docs-accordion-4" name="docs-accordion-checkbox" hidden> <label class="accordion-header c-hand" for="docs-accordion-4"> Components </label> @@ -171,8 +171,8 @@ </ul> </div> </div> - <div class="accordion-item"> - <input type="checkbox" id="docs-accordion-5" name="docs-accordion-checkbox" hidden /> + <div class="accordion"> + <input type="checkbox" id="docs-accordion-5" name="docs-accordion-checkbox" hidden> <label class="accordion-header c-hand" for="docs-accordion-5"> Utilities </label> @@ -205,8 +205,8 @@ </ul> </div> </div> - <div class="accordion-item"> - <input type="checkbox" id="docs-accordion-6" name="docs-accordion-checkbox" hidden /> + <div class="accordion"> + <input type="checkbox" id="docs-accordion-6" name="docs-accordion-checkbox" hidden> <label class="accordion-header c-hand" for="docs-accordion-6"> Experimentals </label> @@ -251,7 +251,7 @@ <a href="#sidebar" class="btn btn-link btn-action"><i class="icon icon-menu"></i></a> </div> <a href="index.html" class="s-logo"> - <img src="img/spectre-logo.svg" alt="Spectre.css CSS Framework" /> + <img src="img/spectre-logo.svg" alt="Spectre.css CSS Framework"> </a> <div class="float-btn"> <a href="https://github.com/picturepan2/spectre" target="_blank" class="btn btn-primary">GitHub</a> @@ -286,7 +286,7 @@ </div> </div> -<!-- headings example --> +<!-- headings --> <pre class="code" data-lang="HTML"><code><<span class="tag">h1</span>>H1 Heading<<span class="tag">/h1</span>> <<span class="tag">h1</span>>H1 Heading <<span class="tag">small</span> <span class="atn">class</span>=<span class="atv">"label"</span>>40px<<span class="tag">/small</span>><<span class="tag">/h1</span>> <<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"h1"</span>>H1 Heading<<span class="tag">/span</span>> @@ -298,7 +298,7 @@ <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> </div> -<!-- paragraphs example --> +<!-- paragraphs --> <pre class="code" data-lang="HTML"><code><<span class="tag">p</span>>Lorem ipsum dolor sit amet, ...<<span class="tag">/p</span>> <<span class="tag">p</span>>...<<span class="tag">/p</span>> </code></pre> @@ -307,78 +307,78 @@ <div class="columns"> <div class="column col-6 col-xs-12"> <abbr title="Internationalization">I18N</abbr> - <code class="ml-10"><abbr></code> + <code class="ml-2"><abbr></code> </div> <div class="column col-6 col-xs-12"> <strong>Bold</strong> - <code class="ml-10"><strong></code> <code><b></code> + <code class="ml-2"><strong></code> <code><b></code> </div> <div class="column col-6 col-xs-12"> <cite>Citation</cite> - <code class="ml-10"><cite></code> + <code class="ml-2"><cite></code> </div> <div class="column col-6 col-xs-12"> <code>Hello World!</code> - <code class="ml-10"><code></code> + <code class="ml-2"><code></code> </div> <div class="column col-6 col-xs-12"> <del>Deleted</del> - <code class="ml-10"><del></code> + <code class="ml-2"><del></code> </div> <div class="column col-6 col-xs-12"> <em>Emphasis</em> - <code class="ml-10"><em></code> + <code class="ml-2"><em></code> </div> <div class="column col-6 col-xs-12"> <i>Italic</i> - <code class="ml-10"><i></code> + <code class="ml-2"><i></code> </div> <div class="column col-6 col-xs-12"> <ins>Inserted</ins> - <code class="ml-10"><ins></code> + <code class="ml-2"><ins></code> </div> <div class="column col-6 col-xs-12"> <kbd>Ctrl + S</kbd> - <code class="ml-10"><kbd></code> + <code class="ml-2"><kbd></code> </div> <div class="column col-6 col-xs-12"> <mark>Highlighted</mark> - <code class="ml-10"><mark></code> + <code class="ml-2"><mark></code> </div> <div class="column col-6 col-xs-12"> <ruby> 漢 <rt>kan</rt> 字 <rt>ji</rt> </ruby> - <code class="ml-10"><ruby></code> + <code class="ml-2"><ruby></code> </div> <div class="column col-6 col-xs-12"> <s>Strikethrough</s> - <code class="ml-10"><s></code> + <code class="ml-2"><s></code> </div> <div class="column col-6 col-xs-12"> <samp>Sample</samp> - <code class="ml-10"><samp></code> + <code class="ml-2"><samp></code> </div> <div class="column col-6 col-xs-12"> Text <sub>Subscripted</sub> - <code class="ml-10"><sub></code> + <code class="ml-2"><sub></code> </div> <div class="column col-6 col-xs-12"> Text <sup>Superscripted</sup> - <code class="ml-10"><sup></code> + <code class="ml-2"><sup></code> </div> <div class="column col-6 col-xs-12"> <time>20:00</time> - <code class="ml-10"><time></code> + <code class="ml-2"><time></code> </div> <div class="column col-6 col-xs-12"> <u>Underline</u> - <code class="ml-10"><u></code> + <code class="ml-2"><u></code> </div> <div class="column col-6 col-xs-12"> <var>x</var> = <var>y</var> + 2 - <code class="ml-10"><var></code> + <code class="ml-2"><var></code> </div> </div> @@ -398,7 +398,7 @@ <p>Use the <code>lang</code> attribute to the container element to have better Asian CJK (Chinese, Japanese and Korean) font support. </p> </div> -<!-- east asian example --> +<!-- east asian --> <pre class="code" data-lang="HTML"><code><<span class="tag">p</span> <span class="atn">lang</span>=<span class="atv">"zh-Hans"</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>> <<span class="tag">p</span> <span class="atn">lang</span>=<span class="atv">"ko"</span>>나라말이 중국과 달라, 한문・한자와 서로 통하지 아니하므로……<<span class="tag">/p</span>> @@ -412,7 +412,7 @@ <p lang="ja"><del>祇園</del><del>精舎</del>の鐘の声、諸行無常の響きあり。</p> </div> -<!-- east asian example --> +<!-- east asian --> <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">u</span>>祇園<<span class="tag">/u</span>><<span class="tag">u</span>>精舎<<span class="tag">/u</span>>の鐘の声、諸行無常の響きあり。……<<span class="tag">/p</span>> <<span class="tag">p</span> <span class="atn">class</span>=<span class="atv">"cjk"</span>><<span class="tag">del</span>>祇園<<span class="tag">/del</span>><<span class="tag">del</span>>精舎<<span class="tag">/del</span>>の鐘の声、諸行無常の響きあり。……<<span class="tag">/p</span>> </code></pre> @@ -442,7 +442,7 @@ <cite>- Bill Gates</cite> </blockquote> -<!-- blockquote example --> +<!-- blockquote --> <pre class="code" data-lang="HTML"><code><<span class="tag">blockquote</span>> <<span class="tag">p</span>>The advance of technology is based on making it fit in so that you don't really even notice it, so it's part of everyday life. <<span class="tag">/p</span>> <<span class="tag">cite</span>>- Bill Gates<<span class="tag">/cite</span>> @@ -489,7 +489,7 @@ </div> </div> -<!-- lists example --> +<!-- lists --> <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>> @@ -553,7 +553,7 @@ <p>Use the <code>active</code> class to make <tr> element highlighted. </p> </div> -<!-- tables example --> +<!-- tables --> <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>> @@ -591,7 +591,7 @@ <p>Add the <code>btn</code> class 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. </p> </div> -<!-- buttons example --> +<!-- buttons --> <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>> @@ -616,7 +616,7 @@ <p>Add the <code>btn-sm</code> or <code>btn-lg</code> class for small or large button size. Also, you can add the <code>btn-block</code> class for a full-width button. </p> </div> -<!-- buttons example --> +<!-- buttons --> <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>> @@ -644,7 +644,7 @@ </div> </div> -<!-- buttons example --> +<!-- buttons --> <pre class="code" data-lang="HTML"><code><<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-arrow-left"</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-arrow-left"</span>><<span class="tag">/i</span>><<span class="tag">/button</span>> </code></pre> @@ -663,7 +663,7 @@ </div> </div> -<!-- buttons example --> +<!-- buttons --> <pre class="code" data-lang="HTML"><code> <span class="com"><!-- buttons with disabled state --></span> <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn disabled"</span> <span class="atn">tabindex</span>=<span class="atv">"-1"</span>>disabled button<<span class="tag">/button</span>> @@ -682,7 +682,7 @@ </div> </div> -<!-- buttons example --> +<!-- buttons --> <pre class="code" data-lang="HTML"><code> <span class="com"><!-- buttons with disabled state --></span> <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn disabled"</span> <span class="atn">tabindex</span>=<span class="atv">"-1"</span>>disabled button<<span class="tag">/button</span>> @@ -701,7 +701,7 @@ </div> </div> -<!-- buttons example --> +<!-- buttons --> <pre class="code" data-lang="HTML"><code><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> @@ -743,7 +743,7 @@ <p>If you want to use buttons as a group, add the <code>btn-group</code> class to the container. You can add the <code>btn-group-block</code> class for a full-width button group.</p> </div> -<!-- button groups example --> +<!-- button groups --> <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>> @@ -762,11 +762,11 @@ <div class="column col-6 col-xs-12"> <div class="form-group"> <label class="form-label" for="input-example-1">Name</label> - <input class="form-input" type="text" id="input-example-1" placeholder="Name" /> + <input class="form-input" type="text" id="input-example-1" placeholder="Name"> </div> <div class="form-group"> <label class="form-label" for="input-example-2">Email</label> - <input class="form-input" type="email" id="input-example-2" placeholder="Email" /> + <input class="form-input" type="email" id="input-example-2" placeholder="Email"> </div> </div> </div> @@ -774,7 +774,7 @@ <pre class="code" data-lang="HTML"><code><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>> - <<span class="tag">input</span> <span class="atn">class</span>=<span class="atv">"form-input"</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">input</span> <span class="atn">class</span>=<span class="atv">"form-input"</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">/div</span>> </code></pre> @@ -832,11 +832,11 @@ <div class="form-group"> <label class="form-label">Gender</label> <label class="form-radio"> - <input type="radio" name="gender" checked /> + <input type="radio" name="gender" checked> <i class="form-icon"></i> Male </label> <label class="form-radio"> - <input type="radio" name="gender" /> + <input type="radio" name="gender"> <i class="form-icon"></i> Female </label> </div> @@ -848,11 +848,11 @@ <<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>>Gender<<span class="tag">/label</span>> <<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">"form-radio"</span>> - <<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">"radio"</span> <span class="atn">name</span>=<span class="atv">"gender"</span> <span class="atn">checked</span> /> + <<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">"radio"</span> <span class="atn">name</span>=<span class="atv">"gender"</span> <span class="atn">checked</span>> <<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"form-icon"</span>><<span class="tag">/i</span>> Male <<span class="tag">/label</span>> <<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">"form-radio"</span>> - <<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">"radio"</span> <span class="atn">name</span>=<span class="atv">"gender"</span> /> + <<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">"radio"</span> <span class="atn">name</span>=<span class="atv">"gender"</span>> <<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"form-icon"</span>><<span class="tag">/i</span>> Female <<span class="tag">/label</span>> <<span class="tag">/div</span>> @@ -862,13 +862,13 @@ <div class="column col-6 col-xs-12"> <div class="form-group"> <label class="form-switch"> - <input type="checkbox" /> + <input type="checkbox"> <i class="form-icon"></i> Send me emails with news and tips </label> </div> <div class="form-group"> <label class="form-switch"> - <input type="checkbox" checked /> + <input type="checkbox" checked> <i class="form-icon"></i> Send me emails with news and tips </label> </div> @@ -878,7 +878,7 @@ <pre class="code" data-lang="HTML"><code><span class="com"><!-- form switch 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-switch"</span>> - <<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">"checkbox"</span> /> + <<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">"checkbox"</span>> <<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"form-icon"</span>><<span class="tag">/i</span>> Send me emails with news and tips <<span class="tag">/label</span>> <<span class="tag">/div</span>> @@ -888,13 +888,13 @@ <div class="column col-6 col-xs-12"> <div class="form-group"> <label class="form-checkbox"> - <input type="checkbox" /> + <input type="checkbox"> <i class="form-icon"></i> Remember me </label> </div> <div class="form-group"> <label class="form-checkbox"> - <input type="checkbox" checked /> + <input type="checkbox" checked> <i class="form-icon"></i> Remember me </label> </div> @@ -904,7 +904,7 @@ <pre class="code" data-lang="HTML"><code><span class="com"><!-- form checkbox 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-checkbox"</span>> - <<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">"checkbox"</span> /> + <<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">"checkbox"</span>> <<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>> @@ -926,7 +926,7 @@ <label class="form-label" for="input-example-4">Name</label> </div> <div class="col-9"> - <input class="form-input" type="text" id="input-example-4" placeholder="Name" /> + <input class="form-input" type="text" id="input-example-4" placeholder="Name"> </div> </div> <div class="form-group"> @@ -934,7 +934,7 @@ <label class="form-label" for="input-example-5">Email</label> </div> <div class="col-9"> - <input class="form-input" type="email" id="input-example-5" placeholder="Email" /> + <input class="form-input" type="email" id="input-example-5" placeholder="Email"> </div> </div> <div class="form-group"> @@ -943,11 +943,11 @@ </div> <div class="col-9"> <label class="form-radio"> - <input type="radio" name="gender" /> + <input type="radio" name="gender"> <i class="form-icon"></i> Male </label> <label class="form-radio"> - <input type="radio" name="gender" checked /> + <input type="radio" name="gender" checked> <i class="form-icon"></i> Female </label> </div> @@ -968,7 +968,7 @@ <div class="col-3"></div> <div class="col-9"> <label class="form-switch"> - <input type="checkbox" /> + <input type="checkbox"> <i class="form-icon"></i> Send me emails with news and tips </label> </div> @@ -985,7 +985,7 @@ <div class="col-3"></div> <div class="col-9"> <label class="form-checkbox"> - <input type="checkbox" /> + <input type="checkbox"> <i class="form-icon"></i> Remember me </label> </div> @@ -1001,14 +1001,14 @@ </div> </div> -<!-- forms example --> +<!-- forms --> <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>> <<span class="tag">/div</span>> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"col-9"</span>> - <<span class="tag">input</span> <span class="atn">class</span>=<span class="atv">"form-input"</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">input</span> <span class="atn">class</span>=<span class="atv">"form-input"</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">/div</span>> <<span class="tag">/div</span>> <span class="com"><!-- form structure --></span> @@ -1024,7 +1024,7 @@ <label class="form-label label-sm">Label</label> </div> <div class="column col-4 col-xs-12"> - <input class="form-input input-sm" type="text" placeholder="Name" /> + <input class="form-input input-sm" type="text" placeholder="Name"> </div> <div class="column col-4 col-xs-12"> <select class="form-select select-sm"> @@ -1040,7 +1040,7 @@ <label class="form-label label-lg">Label</label> </div> <div class="column col-4 col-xs-12"> - <input class="form-input input-lg" type="text" placeholder="Name" /> + <input class="form-input input-lg" type="text" placeholder="Name"> </div> <div class="column col-4 col-xs-12"> <select class="form-select select-lg"> @@ -1060,19 +1060,19 @@ <div class="columns"> <div class="column col-4 col-xs-12"> <div class="has-icon-left"> - <input class="form-input input-sm" type="text" placeholder="Name" /> + <input class="form-input input-sm" type="text" placeholder="Name"> <i class="form-icon icon icon-arrow-right"></i> </div> </div> <div class="column col-4 col-xs-12"> <div class="has-icon-left tooltip" data-tooltip="Lorem ipsum dolor sit amet"> - <input class="form-input" type="text" placeholder="Name" /> + <input class="form-input" type="text" placeholder="Name"> <i class="form-icon icon icon-arrow-right"></i> </div> </div> <div class="column col-4 col-xs-12"> <div class="has-icon-left"> - <input class="form-input input-lg" type="text" placeholder="Name" /> + <input class="form-input input-lg" type="text" placeholder="Name"> <i class="form-icon icon icon-arrow-right"></i> </div> </div> @@ -1080,28 +1080,28 @@ <div class="columns"> <div class="column col-4 col-xs-12"> <div class="has-icon-right"> - <input class="form-input input-sm" type="text" placeholder="Name" /> + <input class="form-input input-sm" type="text" placeholder="Name"> <i class="form-icon icon icon-check"></i> </div> </div> <div class="column col-4 col-xs-12"> <div class="has-icon-right"> - <input class="form-input" type="text" placeholder="Name" /> + <input class="form-input" type="text" placeholder="Name"> <i class="form-icon icon icon-check"></i> </div> </div> <div class="column col-4 col-xs-12"> <div class="has-icon-right"> - <input class="form-input input-lg" type="text" placeholder="Name" /> + <input class="form-input input-lg" type="text" placeholder="Name"> <i class="form-icon icon icon-check"></i> </div> </div> </div> -<!-- form icons example --> +<!-- form icons --> <pre class="code" data-lang="HTML"><code><span class="com"><!-- form input with Spectre icon --></span> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"has-icon-left"</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">"..."</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">"..."</span>> <<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"form-icon icon icon-check"</span>><<span class="tag">/i</span>> <<span class="tag">/div</span>> </code></pre> @@ -1113,19 +1113,19 @@ <div class="columns"> <div class="column col-4 col-xs-12"> <div class="has-icon-right"> - <input class="form-input input-sm" type="text" placeholder="Name" /> + <input class="form-input input-sm" type="text" placeholder="Name"> <i class="form-icon loading"></i> </div> </div> <div class="column col-4 col-xs-12"> <div class="has-icon-right"> - <input class="form-input" type="text" placeholder="Name" /> + <input class="form-input" type="text" placeholder="Name"> <i class="form-icon loading"></i> </div> </div> <div class="column col-4 col-xs-12"> <div class="has-icon-right"> - <input class="form-input input-lg" type="text" placeholder="Name" /> + <input class="form-input input-lg" type="text" placeholder="Name"> <i class="form-icon loading"></i> </div> </div> @@ -1133,7 +1133,7 @@ <pre class="code" data-lang="HTML"><code><span class="com"><!-- form input with loading icon --></span> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"has-icon-right"</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">"..."</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">"..."</span>> <<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"form-icon loading"</span>><<span class="tag">/i</span>> <<span class="tag">/div</span>> </code></pre> @@ -1147,7 +1147,7 @@ <label class="form-label" for="input-example-8">Email</label> </div> <div class="col-9"> - <input class="form-input" type="email" id="input-example-8" placeholder="Email" value="spectre@example.com" pattern="[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$" /> + <input class="form-input" type="email" id="input-example-8" placeholder="Email" value="spectre@example.com" pattern="[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$"> </div> </div> <div class="form-group"> @@ -1163,7 +1163,7 @@ <label class="form-label" for="input-example-10">Search</label> </div> <div class="col-9"> - <input class="form-input" type="search" id="input-example-10" placeholder="Search" /> + <input class="form-input" type="search" id="input-example-10" placeholder="Search"> </div> </div> <div class="form-group"> @@ -1171,7 +1171,7 @@ <label class="form-label" for="input-example-11">Tel</label> </div> <div class="col-9"> - <input class="form-input" type="tel" id="input-example-11" placeholder="Tel" value="1-(888)-888-8888" /> + <input class="form-input" type="tel" id="input-example-11" placeholder="Tel" value="1-(888)-888-8888"> </div> </div> <div class="form-group"> @@ -1179,7 +1179,7 @@ <label class="form-label" for="input-example-12">Password</label> </div> <div class="col-9"> - <input class="form-input" type="password" id="input-example-12" placeholder="Password" value="123456789" /> + <input class="form-input" type="password" id="input-example-12" placeholder="Password" value="123456789"> </div> </div> <div class="form-group"> @@ -1187,7 +1187,7 @@ <label class="form-label" for="input-example-13">Number</label> </div> <div class="col-9"> - <input class="form-input" type="number" id="input-example-13" placeholder="00" value="66" /> + <input class="form-input" type="number" id="input-example-13" placeholder="00" value="66"> </div> </div> <div class="form-group"> @@ -1195,7 +1195,7 @@ <label class="form-label" for="input-example-14">Date</label> </div> <div class="col-9"> - <input class="form-input" type="date" id="input-example-14" value="2016-12-31" /> + <input class="form-input" type="date" id="input-example-14" value="2016-12-31"> </div> </div> <div class="form-group"> @@ -1203,7 +1203,7 @@ <label class="form-label" for="input-example-15">Color</label> </div> <div class="col-9"> - <input class="form-input" type="color" id="input-example-15" value="#5764c6" /> + <input class="form-input" type="color" id="input-example-15" value="#5764c6"> </div> </div> <div class="form-group"> @@ -1211,7 +1211,7 @@ <label class="form-label" for="input-example-16">File</label> </div> <div class="col-9"> - <input class="form-input" type="file" id="input-example-16" /> + <input class="form-input" type="file" id="input-example-16"> </div> </div> </form> @@ -1222,7 +1222,7 @@ <div class="columns"> <div class="column col-xs-12"> <div class="input-group"> - <input type="text" class="form-input input-sm" placeholder="username" /> + <input type="text" class="form-input input-sm" placeholder="username"> <select class="form-select select-sm"> <option>Slack</option> <option>Skype</option> @@ -1233,7 +1233,7 @@ <div class="column col-xs-12"> <div class="input-group"> <span class="input-group-addon addon-sm">slack.com/</span> - <input type="text" class="form-input input-sm" placeholder="site name" /> + <input type="text" class="form-input input-sm" placeholder="site name"> <button class="btn btn-primary input-group-btn btn-sm">Submit</button> </div> </div> @@ -1241,7 +1241,7 @@ <div class="columns"> <div class="column col-xs-12"> <div class="input-group"> - <input type="text" class="form-input" placeholder="username" /> + <input type="text" class="form-input" placeholder="username"> <select class="form-select"> <option>Slack</option> <option>Skype</option> @@ -1252,7 +1252,7 @@ <div class="column col-xs-12"> <div class="input-group"> <span class="input-group-addon">slack.com/</span> - <input type="text" class="form-input" placeholder="site name" /> + <input type="text" class="form-input" placeholder="site name"> <button class="btn btn-primary input-group-btn">Submit</button> </div> </div> @@ -1260,7 +1260,7 @@ <div class="columns"> <div class="column col-xs-12"> <div class="input-group"> - <input type="text" class="form-input input-lg" placeholder="username" /> + <input type="text" class="form-input input-lg" placeholder="username"> <select class="form-select select-lg"> <option>Slack</option> <option>Skype</option> @@ -1271,7 +1271,7 @@ <div class="column col-xs-12"> <div class="input-group"> <span class="input-group-addon addon-lg">slack.com/</span> - <input type="text" class="form-input input-lg" placeholder="site name" /> + <input type="text" class="form-input input-lg" placeholder="site name"> <button class="btn btn-primary input-group-btn btn-lg">Submit</button> </div> </div> @@ -1280,23 +1280,23 @@ <p>If you want to attach text and button along with an input, add the <code>input-group</code> class to the input container. And add the <code>input-group-addon</code> class to the text element and <code>input-group-btn</code> to the button element.</p> </div> -<!-- input groups example --> +<!-- input groups --> <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>>...<<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">"..."</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">"..."</span>> <<span class="tag">/div</span>> <span class="com"><!-- large 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 addon-lg"</span>>...<<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 input-lg"</span> <span class="atn">placeholder</span>=<span class="atv">"..."</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 input-lg"</span> <span class="atn">placeholder</span>=<span class="atv">"..."</span>> <<span class="tag">/div</span>> <span class="com"><!-- normal input group with button --></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>>...<<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">"..."</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">"..."</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> @@ -1311,17 +1311,17 @@ <legend>form-input</legend> <div class="form-group"> <label class="form-label" for="input-example-17">Name</label> - <input class="form-input is-success" type="text" id="input-example-17" placeholder="Name" /> + <input class="form-input is-success" type="text" id="input-example-17" placeholder="Name"> <p class="form-input-hint">The name is valid.</p> </div> <div class="form-group has-error"> <label class="form-label" for="input-example-18">Password</label> - <input class="form-input" type="password" id="input-example-18" placeholder="Password" /> + <input class="form-input" type="password" id="input-example-18" placeholder="Password"> <p class="form-input-hint">Passwords must have at least 8 characters.</p> </div> <div class="form-group"> <label class="form-label" for="input-example-21">Email</label> - <input class="form-input" type="text" id="input-example-21" placeholder="Email" pattern="[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$" /> + <input class="form-input" type="text" id="input-example-21" placeholder="Email" pattern="[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$"> <p class="form-input-hint">The Email address is unavailable.</p> </div> </fieldset> @@ -1350,23 +1350,23 @@ <legend>form-checkbox, radio and switch (Error status only)</legend> <div class="form-group"> <label class="form-checkbox is-error"> - <input type="checkbox" checked /> + <input type="checkbox" checked> <i class="form-icon"></i> I'm not a robot. </label> </div> <div class="form-group has-error"> <label class="form-radio"> - <input type="radio" name="gender" checked /> + <input type="radio" name="gender" checked> <i class="form-icon"></i> Male </label> <label class="form-radio"> - <input type="radio" name="gender" /> + <input type="radio" name="gender"> <i class="form-icon"></i> Female </label> </div> <div class="form-group"> <label class="form-switch is-error"> - <input type="checkbox" /> + <input type="checkbox"> <i class="form-icon"></i> Send me emails with news and tips </label> </div> @@ -1374,26 +1374,26 @@ </div> </div> -<!-- forms example --> +<!-- forms --> <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>> - <<span class="tag">input</span> <span class="atn">class</span>=<span class="atv">"form-input"</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">"..."</span> /> + <<span class="tag">input</span> <span class="atn">class</span>=<span class="atv">"form-input"</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">"..."</span>> <<span class="tag">p</span> <span class="atn">class</span>=<span class="atv">"form-input-hint"</span>>The name is invalid.<<span class="tag">/p</span>> <<span class="tag">/div</span>> <span class="com"><!-- form validation class: is-success --></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>> - <<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">"..."</span> /> + <<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">"..."</span>> <<span class="tag">p</span> <span class="atn">class</span>=<span class="atv">"form-input-hint"</span>>The name is invalid.<<span class="tag">/p</span>> <<span class="tag">/div</span>> <span class="com"><!-- form validation example for checkbox, radio and switch --></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-checkbox is-error"</span>> - <<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">"checkbox"</span> /> + <<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">"checkbox"</span>> <<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>> @@ -1410,16 +1410,16 @@ <fieldset disabled> <div class="form-group"> <label class="form-label" for="input-example-19">Name</label> - <input class="form-input" type="text" id="input-example-19" placeholder="Name" /> + <input class="form-input" type="text" id="input-example-19" placeholder="Name"> </div> <div class="form-group"> <label class="form-label">Gender</label> <label class="form-radio"> - <input type="radio" name="gender" disabled /> + <input type="radio" name="gender" disabled> <i class="form-icon"></i> Male </label> <label class="form-radio"> - <input type="radio" name="gender" disabled /> + <input type="radio" name="gender" disabled> <i class="form-icon"></i> Female </label> </div> @@ -1433,7 +1433,7 @@ </div> <div class="form-group"> <label class="form-switch"> - <input type="checkbox" disabled /> + <input type="checkbox" disabled> <i class="form-icon"></i> Send me emails with news and tips </label> </div> @@ -1443,7 +1443,7 @@ </div> <div class="form-group"> <label class="form-checkbox"> - <input type="checkbox" disabled /> + <input type="checkbox" disabled> <i class="form-icon"></i> Remember me </label> </div> @@ -1696,7 +1696,7 @@ </div> </div> -<!-- icons example --> +<!-- icons --> <pre class="code" data-lang="HTML"><code><<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"icon icon-menu"</span>><<span class="tag">/i</span>> </code></pre> @@ -1734,7 +1734,7 @@ <p>Add the <code>label-rounded</code> class to have rounded labels.</p> </div> -<!-- labels example --> +<!-- labels --> <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> @@ -1754,7 +1754,7 @@ <<span class="tag">/button</span>> </code></pre> -<!-- codes example --> +<!-- codes --> <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="tag">span</span> <span class="atn">class</span>=<span class="atv">"com"</span>>&lt;!-- code snippets --&gt;<<span class="tag">/span</span>> &lt;<<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"tag"</span>>button<<span class="tag">/span</span>> <<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"atn"</span>>class<<span class="tag">/span</span>>=<<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"atv"</span>>&quot;btn&quot;<<span class="tag">/span</span>>&gt; Submit @@ -1775,7 +1775,7 @@ </div> <div class="columns"> <div class="column col-12"> - <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"> </div> </div> @@ -1785,21 +1785,21 @@ <div class="columns"> <div class="column col-6 col-xs-12"> <figure class="figure"> - <img src="img/osx-yosemite.jpg" class="img-fit-contain rounded" alt="macOS Yosemite Wallpaper" style="background: #f8f9fa; height: 10rem; width: 100%;"/> + <img src="img/osx-yosemite.jpg" class="img-fit-contain rounded" alt="macOS Yosemite Wallpaper" style="background: #f8f9fa; height: 10rem; width: 100%;"> <figcaption class="figure-caption text-center">img-fit-contain</figcaption> </figure> </div> <div class="column col-6 col-xs-12"> <figure class="figure"> - <img src="img/osx-yosemite-2.jpg" class="img-fit-cover rounded" alt="macOS Yosemite Wallpaper" style="background: #f8f9fa; height: 10rem; width: 100%;"/> + <img src="img/osx-yosemite-2.jpg" class="img-fit-cover rounded" alt="macOS Yosemite Wallpaper" style="background: #f8f9fa; height: 10rem; width: 100%;"> <figcaption class="figure-caption text-center">img-fit-cover</figcaption> </figure> </div> </div> -<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 ..."</span> <span class="atn">alt</span>=<span class="atv">"..."</span> /> -<<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-fit-contain ..."</span> <span class="atn">alt</span>=<span class="atv">"..."</span> /> -<<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-fit-cover ..."</span> <span class="atn">alt</span>=<span class="atv">"..."</span> /> +<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 ..."</span> <span class="atn">alt</span>=<span class="atv">"..."</span>> +<<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-fit-contain ..."</span> <span class="atn">alt</span>=<span class="atv">"..."</span>> +<<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-fit-cover ..."</span> <span class="atn">alt</span>=<span class="atv">"..."</span>> </code></pre> <div class="docs-note"> @@ -1808,14 +1808,14 @@ <div class="columns"> <div class="column col-12"> <figure class="figure"> - <img src="img/osx-yosemite-2.jpg" class="img-responsive rounded" alt="macOS Yosemite Wallpaper"/> + <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> </div> </div> <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 ..."</span> <span class="atn">alt</span>=<span class="atv">"..."</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 ..."</span> <span class="atn">alt</span>=<span class="atv">"..."</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> @@ -1832,10 +1832,16 @@ </div> </div> -<!-- media example --> + <div class="docs-note"> + <p>For responsive <code>video</code> elements, you can add the <code>video-responsive</code> class directly to the <code>video</code>.</p> + </div> + +<!-- media --> <pre class="code" data-lang="HTML"><code><<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"video-responsive video-responsive-4-3"</span>> <<span class="tag">iframe</span> <span class="atn">src</span>=<span class="atv">"..."</span> <span class="atn">width</span>=<span class="atv">"..."</span> <span class="atn">height</span>=<span class="atv">"..."</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>> + +<<span class="tag">video</span> <span class="atn">class</span>=<span class="atv">"video-responsive"</span> <span class="atn">src</span>=<span class="atv">"..."</span>>...<<span class="tag">/video</span>> </code></pre> </div> |