use new size classes in preview pages, fixes #129
[bootswatch] / tests / components.html
index 5663c45..2d1f2f8 100644 (file)
 
 
         <h2 id="forms-control-sizes">Control sizing</h2>
-        <p>Set heights using classes like <code>.input-large</code>, and set widths using grid column classes like <code>.col-lg-*</code>.</p>
+        <p>Set heights using classes like <code>.input-lg</code>, and set widths using grid column classes like <code>.col-lg-*</code>.</p>
 
         <h3>Height sizing</h3>
         <p>Create larger or smaller form controls that match button sizes.</p>
         <form class="bs-example bs-example-control-sizing">
           <div class="controls docs-input-sizes">
-            <input class="form-control input-large" type="text" placeholder=".input-large">
+            <input class="form-control input-lg" type="text" placeholder=".input-lg">
             <input type="text" class="form-control" placeholder="Default input">
-            <input class="form-control input-small" type="text" placeholder=".input-small">
+            <input class="form-control input-sm" type="text" placeholder=".input-sm">
 
-            <select class="form-control input-large">
-              <option value="">.input-large</option>
+            <select class="form-control input-lg">
+              <option value="">.input-lg</option>
             </select>
             <select class="form-control">
               <option value="">Default select</option>
             </select>
-            <select class="form-control input-small">
-              <option value="">.input-small</option>
+            <select class="form-control input-sm">
+              <option value="">.input-sm</option>
             </select>
           </div>
         </form>
         <div class="bs-example">
           <div class="btn-toolbar" style="margin: 0;">
             <div class="btn-group">
-              <button class="btn btn-default btn-large dropdown-toggle" type="button" data-toggle="dropdown">
+              <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown">
                 Large button <span class="caret"></span>
               </button>
               <ul class="dropdown-menu">
         <p>Add the relative form sizing classes to the <code>.input-group-addon</code>.</p>
         <form class="bs-example bs-example-form">
           <div class="input-group">
-            <span class="input-group-addon input-large">@</span>
-            <input type="text" class="form-control input-large" placeholder="Username">
+            <span class="input-group-addon input-lg">@</span>
+            <input type="text" class="form-control input-lg" placeholder="Username">
           </div>
           <br>
           <div class="input-group">
           </div>
           <br>
           <div class="input-group">
-            <span class="input-group-addon input-small">@</span>
-            <input type="text" class="form-control input-small" placeholder="Username">
+            <span class="input-group-addon input-sm">@</span>
+            <input type="text" class="form-control input-sm" placeholder="Username">
           </div>
         </form>
 
 
 
         <h3>Sizes</h3>
-        <p>Fancy larger or smaller pagination? Add <code>.pagination-large</code> or <code>.pagination-small</code>  for additional sizes.</p>
+        <p>Fancy larger or smaller pagination? Add <code>.pagination-lg</code> or <code>.pagination-sm</code>  for additional sizes.</p>
         <div class="bs-example">
           <div>
-            <ul class="pagination pagination-large">
+            <ul class="pagination pagination-lg">
               <li><a href="#">«</a></li>
               <li><a href="#">1</a></li>
               <li><a href="#">2</a></li>
             </ul>
           </div>
           <div>
-            <ul class="pagination pagination-small">
+            <ul class="pagination pagination-sm">
               <li><a href="#">«</a></li>
               <li><a href="#">1</a></li>
               <li><a href="#">2</a></li>
         <h3>Optional classes</h3>
         <p>Control padding and rounded corners with two optional modifier classes.</p>
         <div class="bs-example">
-          <div class="well well-large">
+          <div class="well well-lg">
             Look, I'm in a well!
           </div>
         </div>
 
         <div class="bs-example">
-          <div class="well well-small">
+          <div class="well well-sm">
             Look, I'm in a well!
           </div>
         </div>