From c8c8ec045ad7337e6cb6f7d6c07f6a0900e2cd54 Mon Sep 17 00:00:00 2001 From: Yan Zhu Date: Sun, 3 Jun 2018 18:44:10 +0800 Subject: Update Flexbox grid to new Pug template --- docs/layout.html | 1237 ++++++------------------------------------------------ 1 file changed, 129 insertions(+), 1108 deletions(-) (limited to 'docs/layout.html') diff --git a/docs/layout.html b/docs/layout.html index b20594a..7878690 100644 --- a/docs/layout.html +++ b/docs/layout.html @@ -1,7 +1,7 @@ - Elements - Spectre.css CSS Framework + Layout - Spectre.css CSS Framework @@ -36,7 +36,7 @@
- +
    @@ -52,7 +52,7 @@
- +
    @@ -129,1186 +129,207 @@
-
-

Typography

-

Typography sets default styles for headings, paragraphs, semantic text, blockquote and lists elements.

-

Headings

+
+

Flexbox grid

+

Layout includes flexbox based responsive grid system with 12 columns.

-
-

H1 Heading 40px

+
+
-
-

H2 Heading 32px

+
+
-
-

H3 Heading 28px

+
+
-
-

H4 Heading 24px

+
+
-
-
H5 Heading 20px
+
+
-
-
H6 Heading 16px
+
+
-
- 
<h1>H1 Heading</h1>
-<h1>H1 Heading <small class="label">40px</small></h1>
-<span class="h1">H1 Heading</span>
-
-

Paragraphs

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. - Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat. -

-

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>Lorem ipsum dolor sit amet, ...</p>
-<p>...</p>
-
-

Semantic text elements

-
-
I18Nabbr
-
Boldstrongb
-
- Citationcite -
-
Hello World!code
-
- Deleteddel -
-
Emphasisem
-
Italici
-
Insertedins
-
Ctrl + Skbd
-
- Highlightedmark +
+
-
- 漢 - kan字 - ji - ruby +
+
-
- Strikethroughs +
+
-
Samplesamp
-
Text Subscriptedsub
-
Text Superscriptedsup
-
- time -
-
- Underlineu -
-
- x = - y + 2var -
-
-

Optimized for East Asian fonts

-

你好, こんにちは,안녕하세요

-

Chinese (Simplified)

-

革命不是请客吃饭，不是做文章，不是绘画绣花，不能那样雅致，那样从容不迫，“文质彬彬”，那样“温良恭俭让”。革命就是暴动，是一个阶级推翻一个阶级的暴烈的行动。

-

Chinese (Tranditional)

-

山不在高，有仙則名；水不在深，有龍則靈。斯是陋室，惟吾德馨。苔痕上階綠，草色入簾青；談笑有鴻儒，往來無白丁。可以調素琴，閱金經。無絲竹之亂耳，無案牘之勞形。南陽諸葛廬，西蜀子雲亭。孔子云：「何陋之有？」

-

Japanese

-

祇園精舎の鐘の声、諸行無常の響きあり。沙羅双樹の花の色、盛者必衰の理をあらはす。おごれる人も久しからず。ただ春の夜の夢のごとし。たけき者も遂にはほろびぬ、ひとへ‌​に風の前の塵に同じ。

-

Korean

-

나라말이 중국과 달라, 한문・한자와 서로 통하지 아니하므로, 어리석은 백성들이 말하고자 하는 바가 있어도, 끝내 제 뜻을 펴지 못하는 사람이 많다. 내가 이를 불쌍히 여겨, 새로 스물 여덟 글자를 만드니, 사람마다 하여금 쉽게 익혀, 날마다 씀에 편하게 하고자 할 따름이다.

-

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

- 
<p lang="zh-Hans">革命不是请客吃饭，不是做文章……</p>
-<p lang="ja">祇園精舎の鐘の声、諸行無常の響きあり……</p>
-<p lang="ko">나라말이 중국과 달라, 한문・한자와 서로 통하지 아니하므로……</p>
-
-

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

-

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

-

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

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

Fonts

-

Spectre sets the most common and best font-family for each OS with fallback support in old systems. - There are also fonts targeted East Asian typography. -

- 
/* Western typography targeted */
-font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
-/* Monospace typography targeted */
-font-family: "SF Mono", "Segoe UI Mono", "Roboto Mono", Menlo, Courier, monospace;
-
-/* Chinese (lang="zh-Hans" and lang="zh-Hant") targeted */
-font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", sans-serif;
-/* Japanese (lang="ja") targeted */
-font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Hiragino Sans", "Hiragino Kaku Gothic Pro", "Yu Gothic", YuGothic, Meiryo, "Helvetica Neue", sans-serif;
-/* Korean (lang="ko") targeted */
-font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Malgun Gothic", "Helvetica Neue", sans-serif;
-
-

Blockquote

-
-

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.

- - Bill Gates -
- 
<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>
-</blockquote>
-
-

Lists

-
-
-
    -
  • list item 1
    • -
  • list item 2 -
      -
    • list item 2.1
      • -
    • list item 2.2
      • -
    • list item 2.3
      • -
    -
    • -
  • list item 3
    • -
-
-
-
    -
  1. list item 1
    2. -
  2. list item 2 -
      -
    1. list item 2.1
      2. -
    2. list item 2.2
      3. -
    3. list item 2.3
      4. -
    -
    3. -
  3. list item 3
    4. -
-
-
-
-
description list term 1
-
description list description 1
-
description list term 2
-
description list description 2
-
description list term 3
-
description list description 3
-
-
-
- 
<!-- unordered list -->
-<ul>
-  <li>list item 1</li>
-  <li>list item 2
-    <ul>
-      <li>list item 2.1</li>
-      <li>list item 2.2</li>
-      <li>list item 2.3</li>
-    </ul>
-  </li>
-  <li>list item 3</li>
-</ul>
-
-<!-- description list -->
-<dl>
-  <dt>description list term</dt>
-  <dd>description list description</dd>
-</dl>
-
-
-

Tables

-

Tables include default styles for tables and data sets.

-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameGenreRelease date
The Shawshank RedemptionCrime, Drama14 October 1994
The GodfatherCrime, Drama24 March 1972
Schindler's ListBiography, Drama, History4 February 1994
Se7enCrime, Drama, Mystery22 September 1995
+
+
-
-

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

-

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

- 
<table class="table table-striped table-hover">
-  <thead>
-    <tr>
-      <th>name</th>
-      <th>genre</th>
-      <th>release date</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr class="active">
-      <td>The Shawshank Redemption</td>
-      <td>Crime, Drama</td>
-      <td>14 October 1994</td>
-    </tr>
-  </tbody>
-</table>
-
-
-

Buttons

-

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

-
-
- - - +
+
-
-

Add the btn class to <a>, <input> or <button> elements for a default button. - There are classes btn-primary and btn-link for predefined primary and link buttons. -

- 
<button class="btn">default button</button>
-<button class="btn btn-primary">primary button</button>
-<button class="btn btn-link">link button</button>
-
-

Button colors

-
-
- - +
+
-

Add the btn-success or btn-error class for success (green) or error (red) button color. - If you need more button colors, please use button mixins to create your own button color variants. -

- 
<button class="btn btn-success">success button</button>
-<button class="btn btn-error">error button</button>
-
-

Button sizes

- - -
-
- - -
-
- - +
col-12 (100%)
-

Add the btn-sm or btn-lg class for small or large button size. - Also, you can add the btn-block class for a full-width button. -

- 
<button class="btn btn-lg">large button</button>
-<button class="btn btn-sm">small button</button>
-
-<button class="btn btn-block">block button</button>
-
-<button class="btn btn-primary btn-lg"><i class="icon icon-arrow-left"></i> large</button>
-<button class="btn btn-primary"><i class="icon icon-arrow-left"></i> normal</button>
-<button class="btn btn-primary btn-sm"><i class="icon icon-arrow-left"></i> small</button>
-
-

Please note that you could use the btn-action class for a square button, or add another circle class for a round button, which is often used as a Float Action Button (FAB).

-
-
- - - -
-
- - - -
-
- 
<button class="btn btn-action"><i class="icon icon-arrow-left"></i></button>
-<button class="btn btn-action circle"><i class="icon icon-arrow-left"></i></button>
-
-

Button states

-

Add the active class for active button state style.

-
- - - +
+
col-9 (75%)
-

Add the disabled class or the disabled attribute for disabled button state style.

-
- - - +
+
col-6 (50%)
- 
<!-- buttons with disabled state -->
-<button class="btn disabled" tabindex="-1">disabled button</button>
-<button class="btn" disabled tabindex="-1">disabled button</button>
-
-

A button with the loading class can show loading indicator.

-
- - - +
+
col-3 (25%)
- 
<!-- buttons with loading state -->
-<button class="btn loading">button</button>
-<button class="btn btn-primary loading">primary button</button>
-
-

Button groups

-
-
-
- - - -
-
-
-
- - - -
-
-
-
-
-
- - - -
-
-
-
- - - -
-
-
-

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

- 
<div class="btn-group btn-group-block">
-  <button class="btn">first button</button>
-  <button class="btn">second button</button>
-  <button class="btn">third button</button>
-</div>
-
-
-

Forms

-

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

-
-
-
- - -
-
- - -
-
-
- 
<!-- form input control -->
-<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">
+            
<!-- flexbox grid example -->
+<div class="container">
+  <div class="columns">
+    <div class="column col-6">col-6</div>
+    <div class="column col-3">col-3</div>
+    <div class="column col-2">col-2</div>
+    <div class="column col-1">col-1</div>
+  </div>
 </div>
 

-            

-              

-                

-                  
-                  
-                

+            
Add the columns class to a container with the container class. 
+              And add any element you want with the column class inside the container. These columns will take up the space equally.
+              You can specific the width of each column by adding class col-<1-12>.
+            

+            
And you can add the col-gapless class to the columns to have gapless columns.

+            

+              

+                
col-6 (gapless)

               

-            

-            
<!-- form textarea control -->
-<div class="form-group">
-  <label class="form-label" for="input-example-3">Message</label>
-  <textarea class="form-input" id="input-example-3" placeholder="Textarea" rows="3"></textarea>
-</div>
-

-            

-              

-                

-                  
-                

-                

-                  
-                

+              

+                
col-6 (gapless)

               

             

-            
<!-- form select control -->
-<div class="form-group">
-  <select class="form-select">
-    <option>Choose an option</option>
-    <option>Slack</option>
-    <option>Skype</option>
-    <option>Hipchat</option>
-  </select>
+            
<!-- gapless columns -->
+<div class="columns col-gapless">
+  <div class="column col-6">col-6</div>
+  <div class="column col-6">col-6</div>
 </div>
 

-            

-              

-                

-                  

-                    
-                    
-                    
-                  

-                

+            
By default, Spectre grid has multi-line flexbox enabled. You can add the col-oneline class to columns to make all its child columns positioned in the same single row.

+            

+              

+                
col-8

               

-            

-            
<!-- form radio control -->
-<div class="form-group">
-  <label class="form-label">Gender</label>
-  <label class="form-radio">
-    <input type="radio" name="gender" checked>
-    <i class="form-icon"></i> Male
-  </label>
-  <label class="form-radio">
-    <input type="radio" name="gender">
-    <i class="form-icon"></i> Female
-  </label>
-</div>
-

-            

-              

-                

-                  
-                

-                

-                  
-                

+              

+                
col-8

               

             

-            
<!-- form switch control -->
-<div class="form-group">
-  <label class="form-switch">
-    <input type="checkbox">
-    <i class="form-icon"></i> Send me emails with news and tips
-  </label>
+            
<!-- one line columns -->
+<div class="columns col-oneline">
+  <div class="column col-8">col-8</div>
+  <div class="column col-8">col-8</div>
 </div>
 

-            

-              

-                

-                  
-                

-                

-                  
-                

-              

-            

-            
<!-- form checkbox control -->
-<div class="form-group">
-  <label class="form-checkbox">
-    <input type="checkbox">
-    <i class="form-icon"></i> Remember me
-  </label>
-</div>
-

-            
You can use :indeterminate pseudo class for indeterminate state of checkboxes.

-            
Horizontal forms

-            
If you want to have a horizontal form, add the form-horizontal class to the <form> container.
-              And add the col-<1-12> and col-xs/sm/lg/xl-<1-12> class to the child elements for responsive form row layout.
+            
Grid offset

+            

+              The Flexbox grid provides margin auto utilities to set offset. 
+              There are col-mx-auto, col-ml-auto and col-mr-auto to set margins between columns without using empty columns.
             

             

-              

-                

-                  

-                    

-                      
-                    

-                    

-                      
-                    

-                  

-                  

-                    

-                      
-                    

-                    

-                      
-                    

-                  

-                  

-                    

-                      
-                    

-                    

-                      
-                      
-                    

-                  

-                  

-                    

-                      
-                    

-                    

-                      
-                    

-                  

-                  

-                    

-                      
-                    

-                  

-                  

-                    

-                      
-                    

-                    

-                      
-                    

-                  

-                  

-                    

-                      
-                    

-                  

-                

+              

+                
col-2

+              

+              

+                
col-4 col-mx-auto

               

             

-            
<form class="form-horizontal">
-  <div class="form-group">
-    <div class="col-3 col-sm-12">
-      <label class="form-label" for="input-example-1">Name</label>
-    </div>
-    <div class="col-9 col-sm-12">
-      <input class="form-input" type="text" id="input-example-1" placeholder="Name">
-    </div>
-  </div>
-  <!-- form structure -->
-</form>
-

-            
Form sizes

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

             

-              

-                
-              

-              

-                
+              

+                
col-2

               

-              

-                
+              

+                
col-4 col-ml-auto

               

             

             

-              

-                
+              

+                
col-4 col-ml-auto

               

-              

-                
-              

-              

-                
+              

+                
col-2

               

             

-            
You can add the input-sm/input-lg classes to the input-checkbox, input-radio and input-switch to have different sizes.

-            
Form icons

-            
Spectre Form components has Spectre Icons support.

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

             

-              

-                

-                  
-                

+              

+                
col-4 col-mx-auto

               

-              

-                

-                  
-                

-              

-              

-                

-                  
-                

+              

+                
col-2

               

             

             

-              

-                

-                  
-                

+              

+                
col-4 col-mr-auto

               

-              

-                

-                  
-                

-              

-              

-                

-                  
-                

+              

+                
col-2

               

             

-            
<!-- form input with Spectre icon -->
-<div class="has-icon-left">
-  <input type="text" class="form-input" placeholder="...">
-  <i class="form-icon icon icon-check"></i>
-</div>
-

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

             

-              

-                

-                  
-                

-              

-              

-                

-                  
-                

-              

-              

-                

-                  
-                

+              

+                
col-4 col-mx-auto

               

             

-            
<!-- form input with loading icon -->
-<div class="has-icon-right">
-  <input type="text" class="form-input" placeholder="...">
-  <i class="form-icon loading"></i>
+            
<!-- grid offset example -->
+<div class="container">
+  <div class="columns">
+    <div class="column col-4 col-mr-auto">col-4 col-mr-auto</div>
+    <div class="column col-2">col-2</div>
+  </div>
 </div>
 

-            
Input types

+            
Grid nesting

+            
To nest grids, add the new columns and column structure within an existing column.

             

-              

-                

-                  

-                    

-                      
-                    

-                    

-                      
-                    

-                  

-                  

-                    

-                      
-                    

-                    

-                      
-                    

-                  

-                  

-                    

-                      
-                    

-                    

-                      
-                    

-                  

-                  

-                    

-                      
-                    

-                    

-                      
-                    

-                  

-                  

-                    

-                      
-                    

-                    

-                      
-                    

-                  

-                  

-                    

-                      
+              

+                

+                  
col-6

+                  

+                    

+                      
col-6

                     

-                    

-                      
+                    

+                      
col-6

                     

                   

-                  

-                    

-                      
-                    

-                    

-                      
-                    

-                  

-                  

-                    

-                      
-                    

-                    

-                      
-                    

-                  

-                  

-                    

-                      
-                    

-                    

-                      
-                    

-                  

-                
-              

-            

-            
Input groups

-            

-              

-                

-                  
-                  
-                

-              

-              

-                
slack.com/
-                  
-                  
-                

-              

-            

-            

-              

-                

-                  
-                  
-                

-              

-              

-                
slack.com/
-                  
-                  
-                

-              

-            

-            

-              

-                

-                  
-                  
-                

-              

-              

-                

-                  
-                  
-                

-              

-            

-            

-              

-                

-                  
-                  
-                

-              

-              

-                
slack.com/
-                  
-                  
                 

               

-            

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

-            
<!-- normal input group -->
-<div class="input-group">
-  <span class="input-group-addon">...</span>
-  <input type="text" class="form-input" placeholder="...">
-</div>
-
-<!-- large input group -->
-<div class="input-group">
-  <span class="input-group-addon addon-lg">...</span>
-  <input type="text" class="form-input input-lg" placeholder="...">
-</div>
-
-<!-- normal input group with button -->
-<div class="input-group">
-  <span class="input-group-addon">...</span>
-  <input type="text" class="form-input" placeholder="...">
-  <button class="btn btn-primary input-group-btn">Submit</button>
-</div>
-

-            
Form validation styles

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

-            

-              

-                

-                  Input
-                  

-                    
-                    
-                    
The name is valid.

-                  

-                  

-                    
-                    
-                    
Passwords must have at least 8 characters.

-                  

-                  

-                    
-                    
-                    
The Email address is unavailable.

-                  

-                

-                

-                  Select
-                  

-                    
-                    
The option is invalid.

-                  

-                  

-                    
-                    
The option is available.

-                  

-                

-                

-                  Checkbox, Radio and Switch (Error state only)
-                  

-                    
-                  

-                  

-                    
-                    
-                  

-                  

-                    
-                  

-                

+              

+                
col-6

               

             

-            
<form>
-  <!-- form validation class: has-success -->
-  <div class="form-group has-success">
-    <label class="form-label" for="input-example-1">Name</label>
-    <input class="form-input" type="text" id="input-example-1" placeholder="...">
-    <p class="form-input-hint">The name is invalid.</p>
-  </div>
-
-  <!-- form validation class: is-success -->
-  <div class="form-group">
-    <label class="form-label" for="input-example-1">Name</label>
-    <input class="form-input is-success" type="text" id="input-example-1" placeholder="...">
-    <p class="form-input-hint">The name is invalid.</p>
-  </div>
-
-  <!-- form validation example for checkbox, radio and switch -->
-  <div class="form-group">
-    <label class="form-checkbox is-error">
-      <input type="checkbox">
-      <i class="form-icon"></i> Remember me
-    </label>
-  </div>
-</form>
-

-            
Form disabled styles

-            

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

-            

-              

-                

-                  

-                    

-                      
-                      
-                    

-                    

-                      
-                      
-                      
-                    

-                    

-                      
-                    

-                    

-                      
-                    

-                    

-                      
-                      
-                    

-                    

-                      
-                    

-                  

-                

-              

-            

-            
<form action="#forms">
-  <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">
-    </div>
-    <div class="form-group">
-      <label class="form-label">Gender</label>
-      <label class="form-radio">
-        <input type="radio" name="gender" disabled>
-        <i class="form-icon"></i> Male
-      </label>
-      <label class="form-radio">
-        <input type="radio" name="gender" disabled>
-        <i class="form-icon"></i> Female
-      </label>
-    </div>
-    <div class="form-group">
-      <select class="form-select" disabled>
-        <option>Choose an option</option>
-        <option>Slack</option>
-        <option>Skype</option>
-        <option>Hipchat</option>
-      </select>
-    </div>
-    <div class="form-group">
-      <label class="form-switch">
-        <input type="checkbox" disabled>
-        <i class="form-icon"></i> Send me emails with news and tips
-      </label>
+            
<!-- grid nesting example -->
+<div class="container">
+  <div class="columns">
+    <div class="column col-6">col-6
+      <div class="columns">
+        <div class="column col-6">col-6</div>
+        <div class="column col-6">col-6</div>
+      </div>
     </div>
-    <div class="form-group">
-      <label class="form-label" for="input-example-20">Message</label>
-      <textarea class="form-input" id="input-example-20" placeholder="Textarea" rows="3" disabled></textarea>
-    </div>
-    <div class="form-group">
-      <label class="form-checkbox">
-        <input type="checkbox" disabled>
-        <i class="form-icon"></i> Remember me
-      </label>
-    </div>
-  </fieldset>

-          

-          

-            
Icons

-          

-          

-            
Labels

-            
Labels are formatted text tags for highlighted, informative information.

-            

-              
default labelprimary labelsecondary labelsuccess labelwarning labelerror label

-            

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

-            

-              
default labelprimary label

-            

-            
Add the label-rounded class to have rounded labels.

-            
<!-- normal labels -->
-<span class="label">default label</span>
-<span class="label label-primary">primary label</span>
-
-<!-- rounded labels -->
-<span class="label label-rounded label-primary">primary label</span>

+    <div class="column col-6">col-6</div>
+  </div>
+</div>

           

-          

-            
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>

+          

+            
Responsive

           

-          

-            
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-23-gd82d