rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-11-29 11:24:18 +01:00
Code Issues Actions Packages Releases Activity

redo the form examples to enable better responsive layout

Browse Source
This commit is contained in:
Mark Otto 2012-01-24 19:43:52 -08:00
parent 4a6d9106b8
commit bacb05608f
3 changed files with 49 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
docs/assets/css/docs.css
View File

@ -146,8 +146,6 @@ section {
-moz-border-radius: 4px;
border-radius: 4px;
}
.subhead .nav {
}
.subhead .nav a {
margin: 0;
padding-top: 11px;
@ -477,7 +475,7 @@ h2 + .row {
/* Remove bottom margin on example forms in wells */
form.well {
margin-bottom: 0;
padding: 14px;
}
/* Tighten up spacing */
@ -558,6 +556,14 @@ form.well {
margin-top: 18px;
}
/* Subnav */
.subnav {
background: none;
}
.subnav .nav > li {
float: none;
}
/* Adjust the jumbotron */
.jumbotron h1,
.jumbotron p {
@ -580,25 +586,6 @@ form.well {
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 */
.quick-links {
margin: 40px 0 0;
@ -632,6 +619,14 @@ form.well {
@media (max-width: 768px) {
/* Subnav */
.subnav-fixed {
position: static;
top: auto;
z-index: auto;
width: auto;
}
/* Adjust the jumbotron */
.jumbotron .benefits {
position: relative;

22
docs/base-css.html
View File

@ -887,10 +887,12 @@
<h2>Example forms <small>using just form controls, no extra markup</small></h2>
<h3>Basic form</h3>
<div class="row">
<div class="span4">
<h3>Basic form</h3>
<div class="span3">
<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">
<label>Label name</label>
<input type="text" class="span3" placeholder="Type something…">
@ -900,17 +902,25 @@
<button type="submit" class="btn">Submit</button>
</form>
</div>
<div class="span4">
<h3>Search form</h3>
</div> <!-- /row -->
<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>
</div>
<div class="span9">
<form class="well form-search">
<input type="text" class="input-medium search-query">
<button type="submit" class="btn">Search</button>
</form>
</div>
<div class="span4">
<h3>Inline form</h3>
</div> <!-- /row -->
<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>
</div>
<div class="span9">
<form class="well form-search">
<input type="text" class="input-small" placeholder="Email">
<input type="password" class="input-small" placeholder="Password">

22
docs/templates/pages/base-css.mustache vendored
View File

@ -827,10 +827,12 @@
<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="span4">
<h3>{{_i}}Basic form{{/i}}</h3>
<div class="span3">
<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">
<label>{{_i}}Label name{{/i}}</label>
<input type="text" class="span3" placeholder="{{_i}}Type something…{{/i}}">
@ -840,17 +842,25 @@
<button type="submit" class="btn">{{_i}}Submit{{/i}}</button>
</form>
</div>
<div class="span4">
<h3>{{_i}}Search form{{/i}}</h3>
</div> <!-- /row -->
<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>
</div>
<div class="span9">
<form class="well form-search">
<input type="text" class="input-medium search-query">
<button type="submit" class="btn">{{_i}}Search{{/i}}</button>
</form>
</div>
<div class="span4">
<h3>{{_i}}Inline form{{/i}}</h3>
</div> <!-- /row -->
<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>
</div>
<div class="span9">
<form class="well form-search">
<input type="text" class="input-small" placeholder="{{_i}}Email{{/i}}">
<input type="password" class="input-small" placeholder="{{_i}}Password{{/i}}">