From f7344f3e056a94640b6260ad7b7badfd33646c37 Mon Sep 17 00:00:00 2001 From: Yan Zhu Date: Sun, 3 Jun 2018 18:07:08 +0800 Subject: Update code and media docs to new Pug templates --- docs/elements.html | 75 +++++++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 74 insertions(+), 1 deletion(-) (limited to 'docs/elements.html') diff --git a/docs/elements.html b/docs/elements.html index ae803f4..e7b4e82 100644 --- a/docs/elements.html +++ b/docs/elements.html @@ -1232,10 +1232,83 @@ <span class="label label-rounded label-primary">primary label</span>
-

Codes

+

Code

+

Code is used for styling inline and multiline code snippets.

+

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

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

Media

+

Media includes responsive images, figures and video classes.

+

Images

+

Add the img-responsive class to <img> elements. The images will scale with the parent sizes.

+
+
macOS El Capitan Wallpaper
+
+

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

+
+
+
macOS Yosemite Wallpaper +
img-fit-contain
+
+
+
+
macOS Yosemite Wallpaper +
img-fit-cover
+
+
+
+ 
<img src="img/osx-el-capitan.jpg" class="img-responsive ..." alt="...">
+<img src="img/osx-el-capitan.jpg" class="img-fit-contain ..." alt="...">
+<img src="img/osx-el-capitan.jpg" class="img-fit-cover ..." alt="...">
+
+

Figure

+

You can use the element <figure> for an image with a caption. + Add the figure class to <figure> element. + The images with the img-responsive class will be responsive. + And the included class figure-caption will provide basic style for caption. + Also, you can use text-left, text-center and text-right for caption alignment. +

+
+
+
macOS Yosemite Wallpaper +
macOS Yosemite wallpaper
+
+
+
+

Video

+

For responsive video, add a container with the video-responsive class. + Insert any YouTube, Youku or other iframe/embed video inside the container. + The ratio is 16:9 by default. + You may add video-responsive-4-3 for 4:3 ratio video container or video-responsive-1-1 for 1:1 ratio. +

+
+
+
+ +
+
+
+

For responsive <video> elements, you can add the video-responsive class directly.

+ 
<div class="video-responsive video-responsive-4-3">
+  <iframe src="..." width="..." height="..." frameborder="0" allowfullscreen></iframe>
+</div>
+
+<video class="video-responsive" src="...">...</video>
-- cgit v1.3.1-26-gb76a