From eed8f9ab7a2005374b3a7be2c95eac8dbda613d1 Mon Sep 17 00:00:00 2001 From: Yan Zhu Date: Sun, 8 May 2016 14:17:25 +0800 Subject: add more input and select sizes --- index.html | 57 +++++++++++++++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 55 insertions(+), 2 deletions(-) (limited to 'index.html') diff --git a/index.html b/index.html index 8f5ef1d..f786932 100644 --- a/index.html +++ b/index.html @@ -663,7 +663,6 @@
-

For smaller input and select controls, you could add input-sm and select-sm to the elements.

If you want to have a horizontal form, add the class form-horizontal to the <form> container. And add the class col-[1-12] to the child elements for form row layout. Please note form-horizontal only works in viewports that are at least 840px wide.

@@ -697,6 +696,34 @@ </form> +
+

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

+
+ +
+
+ +
+
+ +
+
+ + + +
+
+
input groups
@@ -719,17 +746,42 @@
+
+
+
+ slack.com/ + +
+
+
+
+ + @slack.com +
+
+
+ +
+

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

+<!-- normal input group -->
 <div class="input-group">
     <span class="input-group-addon">slack.com/</span>
     <input type="text" class="form-input" placeholder="site name" />
 </div>
 
+<!-- large input group -->
+<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" />
+</div>
+
+<!-- normal input group with button -->
 <div class="input-group">
     <span class="input-group-addon">slack.com/</span>
     <input type="text" class="form-input" placeholder="site name" />
@@ -931,7 +983,7 @@
             
 
             

-                
Spectre also provides a neat responsive layout grid system. There are .col-xs-[1-12], .col-sm-[1-12] and .col-md-[1-12] available for flexible grid across mobile, tablet and desktop viewport usage.

+                
Spectre provides a neat responsive layout grid system. There are .col-xs-[1-12], .col-sm-[1-12] and .col-md-[1-12] available for flexible grid across mobile, tablet and desktop viewport usage.

                 
    
                     
  • For window width less than 480px, all columns will show as a single row.
    • 
                     
  • col-xs-[1-12] apply to window width greater than or equal to 481px. 
    • 
@@ -960,6 +1012,7 @@
                     
  • hide-lg hides elements when the viewport is smaller than or equal to 960px. 
    • 
                     
  • hide-xl hides elements when the viewport is smaller than or equal to 1280px. 
    • 
                 

+                
Spectre also has a responsive web test tool Responsive Resizer. You can use it locally in the directory /tools/resizer or online.

             

         
 
-- 
cgit v1.3.1-23-gd82d