Skip to content

B
bootstrap
Commit bacb0560 authored by Mark Otto's avatar Mark Otto
Browse files
Options

redo the form examples to enable better responsive layout

parent 4a6d9106
Hide whitespace changes
Inline Side-by-side
Showing with 49 additions and 34 deletions
docs/assets/css/docs.css
View file @ bacb0560
...@@ -146,8 +146,6 @@ section { ...@@ -146,8 +146,6 @@ section {
-moz-border-radius: 4px; -moz-border-radius: 4px;
border-radius: 4px; border-radius: 4px;
} }
.subhead .nav {
}
.subhead .nav a { .subhead .nav a {
margin: 0; margin: 0;
padding-top: 11px; padding-top: 11px;
...@@ -477,7 +475,7 @@ h2 + .row { ...@@ -477,7 +475,7 @@ h2 + .row {
/* Remove bottom margin on example forms in wells */ /* Remove bottom margin on example forms in wells */
form.well { form.well {
margin-bottom: 0; padding: 14px;
} }
/* Tighten up spacing */ /* Tighten up spacing */
...@@ -558,6 +556,14 @@ form.well { ...@@ -558,6 +556,14 @@ form.well {
margin-top: 18px; margin-top: 18px;
} }
/* Subnav */
.subnav {
background: none;
}
.subnav .nav > li {
float: none;
}
/* Adjust the jumbotron */ /* Adjust the jumbotron */
.jumbotron h1, .jumbotron h1,
.jumbotron p { .jumbotron p {
...@@ -580,25 +586,6 @@ form.well { ...@@ -580,25 +586,6 @@ form.well {
margin: 0 auto 10px; margin: 0 auto 10px;
} }
/* Subnav */
.subhead .nav {
padding: 0;
background: none;
}
.subhead .nav > li {
float: none;
}
.subhead .nav li + li a {
border-top: 1px solid #eee;
}
.subhead .subnav-fixed {
position: static;
top: auto;
z-index: auto;
width: auto;
}
/* Don't space out quick links so much */ /* Don't space out quick links so much */
.quick-links { .quick-links {
margin: 40px 0 0; margin: 40px 0 0;
...@@ -632,6 +619,14 @@ form.well { ...@@ -632,6 +619,14 @@ form.well {
@media (max-width: 768px) { @media (max-width: 768px) {
/* Subnav */
.subnav-fixed {
position: static;
top: auto;
z-index: auto;
width: auto;
}
/* Adjust the jumbotron */ /* Adjust the jumbotron */
.jumbotron .benefits { .jumbotron .benefits {
position: relative; position: relative;
......
docs/base-css.html
View file @ bacb0560
...@@ -887,10 +887,12 @@ ...@@ -887,10 +887,12 @@
<h2>Example forms <small>using just form controls, no extra markup</small></h2> <h2>Example forms <small>using just form controls, no extra markup</small></h2>
<h3>Basic form</h3>
<div class="row"> <div class="row">
<div class="span4"> <div class="span3">
<h3>Basic form</h3>
<p>With v2.0, we have lighter and smarter defaults for form styles. No extra markup, just form controls.</p> <p>With v2.0, we have lighter and smarter defaults for form styles. No extra markup, just form controls.</p>
</div>
<div class="span9">
<form class="well"> <form class="well">
<label>Label name</label> <label>Label name</label>
<input type="text" class="span3" placeholder="Type something…"> <input type="text" class="span3" placeholder="Type something…">
...@@ -900,17 +902,25 @@ ...@@ -900,17 +902,25 @@
<button type="submit" class="btn">Submit</button> <button type="submit" class="btn">Submit</button>
</form> </form>
</div> </div>
<div class="span4"> </div> <!-- /row -->
<h3>Search form</h3> <h3>Search form</h3>
<div class="row">
<div class="span3">
<p>Reflecting default WebKit styles, just add <code>.form-search</code> for extra rounded search fields.</p> <p>Reflecting default WebKit styles, just add <code>.form-search</code> for extra rounded search fields.</p>
</div>
<div class="span9">
<form class="well form-search"> <form class="well form-search">
<input type="text" class="input-medium search-query"> <input type="text" class="input-medium search-query">
<button type="submit" class="btn">Search</button> <button type="submit" class="btn">Search</button>
</form> </form>
</div> </div>
<div class="span4"> </div> <!-- /row -->
<h3>Inline form</h3> <h3>Inline form</h3>
<div class="row">
<div class="span3">
<p>Inputs are block level to start. For <code>.form-inline</code> and <code>.form-horizontal</code>, we use inline-block.</p> <p>Inputs are block level to start. For <code>.form-inline</code> and <code>.form-horizontal</code>, we use inline-block.</p>
</div>
<div class="span9">
<form class="well form-search"> <form class="well form-search">
<input type="text" class="input-small" placeholder="Email"> <input type="text" class="input-small" placeholder="Email">
<input type="password" class="input-small" placeholder="Password"> <input type="password" class="input-small" placeholder="Password">
......
docs/templates/pages/base-css.mustache
View file @ bacb0560
...@@ -827,10 +827,12 @@ ...@@ -827,10 +827,12 @@
<h2>{{_i}}Example forms <small>using just form controls, no extra markup</small>{{/i}}</h2> <h2>{{_i}}Example forms <small>using just form controls, no extra markup</small>{{/i}}</h2>
<h3>{{_i}}Basic form{{/i}}</h3>
<div class="row"> <div class="row">
<div class="span4"> <div class="span3">
<h3>{{_i}}Basic form{{/i}}</h3>
<p>{{_i}}With v2.0, we have lighter and smarter defaults for form styles. No extra markup, just form controls.{{/i}}</p> <p>{{_i}}With v2.0, we have lighter and smarter defaults for form styles. No extra markup, just form controls.{{/i}}</p>
</div>
<div class="span9">
<form class="well"> <form class="well">
<label>{{_i}}Label name{{/i}}</label> <label>{{_i}}Label name{{/i}}</label>
<input type="text" class="span3" placeholder="{{_i}}Type something…{{/i}}"> <input type="text" class="span3" placeholder="{{_i}}Type something…{{/i}}">
...@@ -840,17 +842,25 @@ ...@@ -840,17 +842,25 @@
<button type="submit" class="btn">{{_i}}Submit{{/i}}</button> <button type="submit" class="btn">{{_i}}Submit{{/i}}</button>
</form> </form>
</div> </div>
<div class="span4"> </div> <!-- /row -->
<h3>{{_i}}Search form{{/i}}</h3> <h3>{{_i}}Search form{{/i}}</h3>
<div class="row">
<div class="span3">
<p>{{_i}}Reflecting default WebKit styles, just add <code>.form-search</code> for extra rounded search fields.{{/i}}</p> <p>{{_i}}Reflecting default WebKit styles, just add <code>.form-search</code> for extra rounded search fields.{{/i}}</p>
</div>
<div class="span9">
<form class="well form-search"> <form class="well form-search">
<input type="text" class="input-medium search-query"> <input type="text" class="input-medium search-query">
<button type="submit" class="btn">{{_i}}Search{{/i}}</button> <button type="submit" class="btn">{{_i}}Search{{/i}}</button>
</form> </form>
</div> </div>
<div class="span4"> </div> <!-- /row -->
<h3>{{_i}}Inline form{{/i}}</h3> <h3>{{_i}}Inline form{{/i}}</h3>
<div class="row">
<div class="span3">
<p>{{_i}}Inputs are block level to start. For <code>.form-inline</code> and <code>.form-horizontal</code>, we use inline-block.{{/i}}</p> <p>{{_i}}Inputs are block level to start. For <code>.form-inline</code> and <code>.form-horizontal</code>, we use inline-block.{{/i}}</p>
</div>
<div class="span9">
<form class="well form-search"> <form class="well form-search">
<input type="text" class="input-small" placeholder="{{_i}}Email{{/i}}"> <input type="text" class="input-small" placeholder="{{_i}}Email{{/i}}">
<input type="password" class="input-small" placeholder="{{_i}}Password{{/i}}"> <input type="password" class="input-small" placeholder="{{_i}}Password{{/i}}">
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment