diff options
Update Docs anchor
1 files changed, 33 insertions, 33 deletions
| -rw-r--r-- | docs/elements.html | 66 |
diff --git a/docs/elements.html b/docs/elements.html index 922d391..6a7f1b1 100644 --- a/docs/elements.html +++ b/docs/elements.html @@ -130,7 +130,7 @@ <div class="off-canvas-content"> <div class="docs-content" id="content"> <div class="container" id="typography"> - <h3 class="s-title"><a class="anchor" href="#typography" aria-hidden="true">#</a>Typography</h3> + <h3 class="s-title">Typography<a class="anchor" href="#typography" aria-hidden="true">#</a></h3> <div class="docs-ad"> <div class="hide-md text-center"> <script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> @@ -143,7 +143,7 @@ </div> </div> <p>Typography sets default styles for headings, paragraphs, semantic text, blockquote and lists elements.</p> - <h4 class="s-subtitle" id="typography-headings"><a class="anchor" href="#typography-headings" aria-hidden="true">#</a>Headings</h4> + <h4 class="s-subtitle" id="typography-headings">Headings<a class="anchor" href="#typography-headings" aria-hidden="true">#</a></h4> <div class="docs-demo columns"> <div class="column col-12"> <h1>H1 Heading <small class="label">40px</small></h1> @@ -168,7 +168,7 @@ <span class="hljs-tag"><<span class="hljs-name">h1</span>></span>H1 Heading <span class="hljs-tag"><<span class="hljs-name">small</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"label"</span>></span>40px<span class="hljs-tag"></<span class="hljs-name">small</span>></span><span class="hljs-tag"></<span class="hljs-name">h1</span>></span> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"h1"</span>></span>H1 Heading<span class="hljs-tag"></<span class="hljs-name">span</span>></span> </code></pre> - <h4 class="s-subtitle" id="typography-paragraphs"><a class="anchor" href="#typography-paragraphs" aria-hidden="true">#</a>Paragraphs</h4> + <h4 class="s-subtitle" id="typography-paragraphs">Paragraphs<a class="anchor" href="#typography-paragraphs" aria-hidden="true">#</a></h4> <p>Lorem ipsum dolor sit amet, consectetur <a href="#typography">adipiscing elit</a>. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat. </p> @@ -176,7 +176,7 @@ <pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<span class="hljs-name">p</span>></span>Lorem ipsum dolor sit amet, ...<span class="hljs-tag"></<span class="hljs-name">p</span>></span> <span class="hljs-tag"><<span class="hljs-name">p</span>></span>...<span class="hljs-tag"></<span class="hljs-name">p</span>></span> </code></pre> - <h4 class="s-subtitle" id="typography-semantic-text"><a class="anchor" href="#typography-semantic-text" aria-hidden="true">#</a>Semantic text elements</h4> + <h4 class="s-subtitle" id="typography-semantic-text">Semantic text elements<a class="anchor" href="#typography-semantic-text" aria-hidden="true">#</a></h4> <div class="docs-demo columns"> <div class="column col-6 col-xs-12"><abbr title="Internationalization">I18N</abbr><code class="ml-2">abbr</code></div> <div class="column col-6 col-xs-12"><strong>Bold</strong><code class="ml-2">strong</code><code class="ml-2">b</code></div> @@ -217,7 +217,7 @@ <var>y</var> + 2<code class="ml-2">var</code> </div> </div> - <h4 class="s-subtitle" id="typography-east-asian"><a class="anchor" href="#typography-east-asian" aria-hidden="true">#</a>Optimized for East Asian fonts</h4> + <h4 class="s-subtitle" id="typography-east-asian">Optimized for East Asian fonts<a class="anchor" href="#typography-east-asian" aria-hidden="true">#</a></h4> <div class="docs-demo columns"> <div class="column"> <p class="h5"><small lang="zh-Hans">你好</small>, <small lang="ja">こんにちは</small>, <small lang="ko">안녕하세요</small></p> @@ -249,7 +249,7 @@ <pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"cjk"</span>></span><span class="hljs-tag"><<span class="hljs-name">u</span>></span>祇園<span class="hljs-tag"></<span class="hljs-name">u</span>></span><span class="hljs-tag"><<span class="hljs-name">u</span>></span>精舎<span class="hljs-tag"></<span class="hljs-name">u</span>></span>の鐘の声、諸行無常の響きあり。……<span class="hljs-tag"></<span class="hljs-name">p</span>></span> <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">"ja"</span>></span><span class="hljs-tag"><<span class="hljs-name">del</span>></span>祇園<span class="hljs-tag"></<span class="hljs-name">del</span>></span><span class="hljs-tag"><<span class="hljs-name">del</span>></span>精舎<span class="hljs-tag"></<span class="hljs-name">del</span>></span>の鐘の声、諸行無常の響きあり。……<span class="hljs-tag"></<span class="hljs-name">p</span>></span> </code></pre> - <h4 class="s-subtitle" id="typography-fonts"><a class="anchor" href="#typography-fonts" aria-hidden="true">#</a>Fonts</h4> + <h4 class="s-subtitle" id="typography-fonts">Fonts<a class="anchor" href="#typography-fonts" aria-hidden="true">#</a></h4> <p>Spectre sets the most common and best <code>font-family</code> for each OS with fallback support in old systems. There are also fonts targeted East Asian typography. </p> @@ -267,7 +267,7 @@ <span class="hljs-comment">/* Korean (lang="ko") targeted */</span> <span class="hljs-attribute">font-family</span>: -apple-system, system-ui, BlinkMacSystemFont, <span class="hljs-string">"Segoe UI"</span>, Roboto, <span class="hljs-string">"Malgun Gothic"</span>, <span class="hljs-string">"Helvetica Neue"</span>, sans-serif; </code></pre> - <h4 class="s-subtitle" id="typography-blockquote"><a class="anchor" href="#typography-blockquote" aria-hidden="true">#</a>Blockquote</h4> + <h4 class="s-subtitle" id="typography-blockquote">Blockquote<a class="anchor" href="#typography-blockquote" aria-hidden="true">#</a></h4> <blockquote> <p>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.</p> <cite>- Bill Gates</cite> @@ -277,7 +277,7 @@ <span class="hljs-tag"><<span class="hljs-name">cite</span>></span>- Bill Gates<span class="hljs-tag"></<span class="hljs-name">cite</span>></span> <span class="hljs-tag"></<span class="hljs-name">blockquote</span>></span> </code></pre> - <h4 class="s-subtitle" id="typography-lists"><a class="anchor" href="#typography-lists" aria-hidden="true">#</a>Lists</h4> + <h4 class="s-subtitle" id="typography-lists">Lists<a class="anchor" href="#typography-lists" aria-hidden="true">#</a></h4> <div class="docs-demo columns"> <div class="column col-4 col-xs-12"> <ul class="list"> @@ -336,7 +336,7 @@ <span class="hljs-tag"></<span class="hljs-name">dl</span>></span></code></pre> </div> <div class="container" id="tables"> - <h3 class="s-title"><a class="anchor" href="#tables" aria-hidden="true">#</a>Tables</h3> + <h3 class="s-title">Tables<a class="anchor" href="#tables" aria-hidden="true">#</a></h3> <p>Tables include default styles for tables and data sets.</p> <div class="docs-demo columns"> <div class="column col-12"> @@ -397,7 +397,7 @@ <span class="hljs-tag"></<span class="hljs-name">table</span>></span></code></pre> </div> <div class="container" id="buttons"> - <h3 class="s-title"><a class="anchor" href="#buttons" aria-hidden="true">#</a>Buttons</h3> + <h3 class="s-title">Buttons<a class="anchor" href="#buttons" aria-hidden="true">#</a></h3> <div class="docs-ad docs-ad-sidebar text-center"> <script id="_carbonads_js" async="" type="text/javascript" src="//cdn.carbonads.com/carbon.js?serve=CK7DTKQW&placement=picturepan2githubio"></script> </div> @@ -416,7 +416,7 @@ <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-primary"</span>></span>primary button<span class="hljs-tag"></<span class="hljs-name">button</span>></span> <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-link"</span>></span>link button<span class="hljs-tag"></<span class="hljs-name">button</span>></span> </code></pre> - <h4 class="s-subtitle" id="buttons-colors"><a class="anchor" href="#buttons-colors" aria-hidden="true">#</a>Button colors</h4> + <h4 class="s-subtitle" id="buttons-colors">Button colors<a class="anchor" href="#buttons-colors" aria-hidden="true">#</a></h4> <div class="docs-demo columns"> <div class="column col-12"> <button class="btn btn-success">success button</button> @@ -429,7 +429,7 @@ <pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-success"</span>></span>success button<span class="hljs-tag"></<span class="hljs-name">button</span>></span> <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-error"</span>></span>error button<span class="hljs-tag"></<span class="hljs-name">button</span>></span> </code></pre> - <h4 class="s-subtitle" id="buttons-sizes"><a class="anchor" href="#buttons-sizes" aria-hidden="true">#</a>Button sizes</h4> + <h4 class="s-subtitle" id="buttons-sizes">Button sizes<a class="anchor" href="#buttons-sizes" aria-hidden="true">#</a></h4> <div class="docs-demo columns"> <div class="column col-12"> <button class="btn btn-primary btn-lg">large <i class="icon icon-arrow-down"></i></button> @@ -472,7 +472,7 @@ <pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-action"</span>></span><span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"icon icon-arrow-left"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span><span class="hljs-tag"></<span class="hljs-name">button</span>></span> <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-action circle"</span>></span><span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"icon icon-arrow-left"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span><span class="hljs-tag"></<span class="hljs-name">button</span>></span> </code></pre> - <h4 class="s-subtitle" id="buttons-states"><a class="anchor" href="#buttons-states" aria-hidden="true">#</a>Button states</h4> + <h4 class="s-subtitle" id="buttons-states">Button states<a class="anchor" href="#buttons-states" aria-hidden="true">#</a></h4> <p>Add the <code>active</code> class for active button state style.</p> <div class="docs-demo columns"> <div class="column col-12"> @@ -505,7 +505,7 @@ <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn loading"</span>></span>button<span class="hljs-tag"></<span class="hljs-name">button</span>></span> <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-primary loading"</span>></span>primary button<span class="hljs-tag"></<span class="hljs-name">button</span>></span> </code></pre> - <h4 class="s-subtitle" id="buttons-groups"><a class="anchor" href="#buttons-groups" aria-hidden="true">#</a>Button groups</h4> + <h4 class="s-subtitle" id="buttons-groups">Button groups<a class="anchor" href="#buttons-groups" aria-hidden="true">#</a></h4> <div class="docs-demo columns"> <div class="column col-6 col-md-12"> <div class="btn-group"> @@ -546,7 +546,7 @@ <span class="hljs-tag"></<span class="hljs-name">div</span>></span> </code></pre> </div> <div class="container" id="forms"> - <h3 class="s-title"><a class="anchor" href="#forms" aria-hidden="true">#</a>Forms</h3> + <h3 class="s-title">Forms<a class="anchor" href="#forms" aria-hidden="true">#</a></h3> <p>Forms provide the most common control styles used in forms, including input, textarea, select, checkbox, radio and switch.</p> <div class="docs-demo columns"> <div class="column col-6 col-xs-12"> @@ -683,7 +683,7 @@ <span class="hljs-tag"></<span class="hljs-name">div</span>></span> </code></pre> <p>You can use <code>:indeterminate</code> pseudo class for indeterminate state of checkboxes.</p> - <h4 class="s-subtitle" id="forms-horizontal"><a class="anchor" href="#forms-horizontal" aria-hidden="true">#</a>Horizontal forms</h4> + <h4 class="s-subtitle" id="forms-horizontal">Horizontal forms<a class="anchor" href="#forms-horizontal" aria-hidden="true">#</a></h4> <p>If you want to have a horizontal form, add the <code>form-horizontal</code> class to the <form> container. And add the <code>col-<1-12></code> and <code>col-xs/sm/lg/xl-<1-12></code> class to the child elements for responsive form row layout. </p> @@ -768,7 +768,7 @@ <span class="hljs-comment"><!-- form structure --></span> <span class="hljs-tag"></<span class="hljs-name">form</span>></span> </code></pre> - <h4 class="s-subtitle" id="forms-sizes"><a class="anchor" href="#forms-sizes" aria-hidden="true">#</a>Form sizes</h4> + <h4 class="s-subtitle" id="forms-sizes">Form sizes<a class="anchor" href="#forms-sizes" aria-hidden="true">#</a></h4> <p>For smaller or larger input and select controls, you could add the <code>input-sm</code>/<code>input-lg</code>, <code>select-sm</code>/<code>select-lg</code> and <code>label-sm</code>/<code>label-lg</code> classes to the elements.</p> <div class="docs-demo columns"> <div class="column col-4 col-xs-12"> @@ -801,7 +801,7 @@ </div> </div> <p>You can add the <code>input-sm</code>/<code>input-lg</code> classes to the input-checkbox, input-radio and input-switch to have different sizes.</p> - <h4 class="s-subtitle" id="forms-icons"><a class="anchor" href="#forms-icons" aria-hidden="true">#</a>Form icons</h4> + <h4 class="s-subtitle" id="forms-icons">Form icons<a class="anchor" href="#forms-icons" aria-hidden="true">#</a></h4> <p>Spectre Form components has <a href="#icons">Spectre Icons</a> support.</p> <p>Add a wrapper with the <code>has-icon-left</code>/<code>has-icon-right</code> class to <input> element. And add the icon with <code>form-icon</code> class next to the <input>. @@ -868,7 +868,7 @@ <span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-icon loading"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> </code></pre> - <h4 class="s-subtitle" id="forms-input"><a class="anchor" href="#forms-input" aria-hidden="true">#</a>Input types</h4> + <h4 class="s-subtitle" id="forms-input">Input types<a class="anchor" href="#forms-input" aria-hidden="true">#</a></h4> <div class="docs-demo columns"> <div class="column col-9 col-sm-12"> <form class="form-horizontal" action="#forms"> @@ -947,7 +947,7 @@ </form> </div> </div> - <h4 class="s-subtitle" id="forms-input-groups"><a class="anchor" href="#forms-input-groups" aria-hidden="true">#</a>Input groups</h4> + <h4 class="s-subtitle" id="forms-input-groups">Input groups<a class="anchor" href="#forms-input-groups" aria-hidden="true">#</a></h4> <div class="docs-demo columns"> <div class="column col-6 col-xs-12"> <div class="input-group"> @@ -1036,7 +1036,7 @@ <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-primary input-group-btn"</span>></span>Submit<span class="hljs-tag"></<span class="hljs-name">button</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> </code></pre> - <h4 class="s-subtitle" id="forms-validation"><a class="anchor" href="#forms-validation" aria-hidden="true">#</a>Form validation styles</h4> + <h4 class="s-subtitle" id="forms-validation">Form validation styles<a class="anchor" href="#forms-validation" aria-hidden="true">#</a></h4> <p>To use form validation styles, you can either add <code>is-success</code> or <code>is-error</code> class to the controls or add <code>has-success</code> or <code>has-error</code> class to parent elements. Use the <code>form-input-hint</code> class to provide form validation success and error messages. </p> @@ -1128,7 +1128,7 @@ <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"></<span class="hljs-name">form</span>></span> </code></pre> - <h4 class="s-subtitle" id="forms-disabled"><a class="anchor" href="#forms-disabled" aria-hidden="true">#</a>Form disabled styles</h4> + <h4 class="s-subtitle" id="forms-disabled">Form disabled styles<a class="anchor" href="#forms-disabled" aria-hidden="true">#</a></h4> <p> Add the <code>disabled</code> attribute to the element or <fieldset> for a disabled form components style.</p> <div class="docs-demo columns"> @@ -1218,12 +1218,12 @@ <span class="hljs-tag"></<span class="hljs-name">fieldset</span>></span></code></pre> </div> <div class="container" id="icons"> - <h3 class="s-title"><a class="anchor" href="#icons" aria-hidden="true">#</a>Icons</h3> + <h3 class="s-title">Icons<a class="anchor" href="#icons" aria-hidden="true">#</a></h3> <p> Icons are single-element, responsive and pure CSS icons. You can include <code>spectre-icons.css</code> located in the <code>dist</code> folder to your web <head> to have these CSS icons. </p> - <h4 class="s-subtitle" id="icons-navigation"><a class="anchor" href="#icons-navigation" aria-hidden="true">#</a>Navigation icons</h4> + <h4 class="s-subtitle" id="icons-navigation">Navigation icons<a class="anchor" href="#icons-navigation" aria-hidden="true">#</a></h4> <div class="columns"> <div class="column col-3 col-md-6"> <button class="btn btn-primary btn-action btn-lg"><i class="icon icon-arrow-up"></i></button> @@ -1278,7 +1278,7 @@ <p>icon-more-vert</p> </div> </div> - <h4 class="s-subtitle" id="icons-action"><a class="anchor" href="#icons-action" aria-hidden="true">#</a>Action icons</h4> + <h4 class="s-subtitle" id="icons-action">Action icons<a class="anchor" href="#icons-action" aria-hidden="true">#</a></h4> <div class="columns"> <div class="column col-3 col-md-6"> <button class="btn btn-primary btn-action btn-lg"><i class="icon icon-resize-horiz"></i></button> @@ -1349,7 +1349,7 @@ <p>icon-upload</p> </div> </div> - <h4 class="s-subtitle" id="icons-object"><a class="anchor" href="#icons-object" aria-hidden="true">#</a>Object icons</h4> + <h4 class="s-subtitle" id="icons-object">Object icons<a class="anchor" href="#icons-object" aria-hidden="true">#</a></h4> <div class="columns"> <div class="column col-3 col-md-6"> <button class="btn btn-primary btn-action btn-lg"><i class="icon icon-mail"></i></button> @@ -1386,7 +1386,7 @@ </div> <pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"icon icon-menu"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span> </code></pre> - <h4 class="s-subtitle" id="icons-sizes"><a class="anchor" href="#icons-sizes" aria-hidden="true">#</a>Icon sizes</h4> + <h4 class="s-subtitle" id="icons-sizes">Icon sizes<a class="anchor" href="#icons-sizes" aria-hidden="true">#</a></h4> <p>Use <code>icon-2x</code>, <code>icon-3x</code> and <code>icon-4x</code> classes to increase icon sizes. You can set <code>font-size</code> to have different icon sizes. </p> @@ -1407,7 +1407,7 @@ <pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"icon icon-2x icon-mail"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span></code></pre> </div> <div class="container" id="labels"> - <h3 class="s-title"><a class="anchor" href="#labels" aria-hidden="true">#</a>Labels</h3> + <h3 class="s-title">Labels<a class="anchor" href="#labels" aria-hidden="true">#</a></h3> <p>Labels are formatted text tags for highlighted, informative information.</p> <div class="docs-demo columns"> <div class="column"><span class="label mr-1">default label</span><span class="label label-primary mr-1">primary label</span><span class="label label-secondary mr-1">secondary label</span><span class="label label-success mr-1">success label</span><span class="label label-warning mr-1">warning label</span><span class="label label-error">error label</span></div> @@ -1427,7 +1427,7 @@ <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"label label-rounded label-primary"</span>></span>primary label<span class="hljs-tag"></<span class="hljs-name">span</span>></span></code></pre> </div> <div class="container" id="code"> - <h3 class="s-title"><a class="anchor" href="#code" aria-hidden="true">#</a>Code</h3> + <h3 class="s-title">Code<a class="anchor" href="#code" aria-hidden="true">#</a></h3> <p>Code is used for styling inline and multiline code snippets.</p> <p>For inline code, you can use the <code> element. For multiline code snippet blocks, you can use <pre> with the <code>code</code> class as a container, and add <code> inside it. @@ -1445,9 +1445,9 @@ <span class="hljs-tag"></<span class="hljs-name">code</span>></span><span class="hljs-tag"></<span class="hljs-name">pre</span>></span></code></pre> </div> <div class="container" id="media"> - <h3 class="s-title"><a class="anchor" href="#media" aria-hidden="true">#</a>Media</h3> + <h3 class="s-title">Media<a class="anchor" href="#media" aria-hidden="true">#</a></h3> <p>Media includes responsive images, figures and video classes.</p> - <h4 class="s-subtitle" id="media-images"><a class="anchor" href="#media-images" aria-hidden="true">#</a>Images</h4> + <h4 class="s-subtitle" id="media-images">Images<a class="anchor" href="#media-images" aria-hidden="true">#</a></h4> <p>Add the <code>img-responsive</code> class to <img> elements. The images will scale with the parent sizes.</p> <div class="columns"> <div class="column col-12"><img class="img-responsive rounded" src="img/osx-el-capitan.jpg" alt="macOS El Capitan Wallpaper"></div> @@ -1471,7 +1471,7 @@ <span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"img/osx-el-capitan.jpg"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"img-fit-contain ..."</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"..."</span>></span> <span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"img/osx-el-capitan.jpg"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"img-fit-cover ..."</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"..."</span>></span> </code></pre> - <h4 class="s-subtitle" id="media-figure"><a class="anchor" href="#media-figure" aria-hidden="true">#</a>Figure</h4> + <h4 class="s-subtitle" id="media-figure">Figure<a class="anchor" href="#media-figure" aria-hidden="true">#</a></h4> <p>You can use the element <figure> for an image with a caption. Add the <code>figure</code> class to <figure> element. The images with the <code>img-responsive</code> class will be responsive. @@ -1485,7 +1485,7 @@ </figure> </div> </div> - <h4 class="s-subtitle" id="media-video"><a class="anchor" href="#media-video" aria-hidden="true">#</a>Video</h4> + <h4 class="s-subtitle" id="media-video">Video<a class="anchor" href="#media-video" aria-hidden="true">#</a></h4> <p>For responsive video, add a container with the <code>video-responsive</code> class. Insert any YouTube, Youku or other iframe/embed video inside the container. The ratio is 16:9 by default. |