aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorMark Otto <[email protected]>2013-05-14 23:28:09 -0700
committerMark Otto <[email protected]>2013-05-14 23:28:09 -0700
commit31dcb911893c1f7b6eebe097705a3e64568c8654 (patch)
treed07fc6a206ef5e9377a6b80ad1d62a01112868bd
parentfcb7c9da6f5082e1306fab096c16020b4227c967 (diff)
parent57856e6cfb21022035d8611607b15eb3a0cef76a (diff)
downloadbootstrap-31dcb911893c1f7b6eebe097705a3e64568c8654.tar.xz
bootstrap-31dcb911893c1f7b6eebe097705a3e64568c8654.zip
Merge branch '3.0.0-wip' of github.com:twitter/bootstrap into 3.0.0-wip
Conflicts: docs/assets/css/docs.css
-rw-r--r--docs/assets/css/docs.css5
-rw-r--r--docs/components.html28
-rw-r--r--docs/css.html34
3 files changed, 27 insertions, 40 deletions
diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index 7f2526f21..c2446d0fe 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -295,6 +295,11 @@ body {
}
/* Forms */
+.bs-example.form-inline select,
+.bs-example.form-inline input[type="text"],
+.bs-example.form-inline input[type="password"] {
+ width: 180px;
+}
.bs-example-control-sizing input[type="text"] + input[type="text"] {
margin-top: 10px;
}
diff --git a/docs/components.html b/docs/components.html
index d192156dc..66573758a 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -1176,18 +1176,18 @@ lead: "Dozens of reusable components built to provide iconography, dropdowns, na
<div class="bs-example">
<div class="navbar">
<a href="#" class="navbar-brand">Brand</a>
- <p class="pull-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>
+ <p class="navbar-text pull-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>
</div>
</div>
{% highlight html %}
<div class="navbar">
<a href="#" class="navbar-brand">Brand</a>
- <p class="pull-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>
+ <p class="navbar-text pull-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>
</div>
{% endhighlight %}
<h3 id="navbar-component-alignment">Component alignment</h3>
- <p>Align nav links, search form, or text, use the <code>.pull-left</code> or <code>.pull-right</code> utility classes. Both classes will add a CSS float in the specified direction.</p>
+ <p>Align nav links, forms, buttons, or text, using the <code>.pull-left</code> or <code>.pull-right</code> utility classes. Both classes will add a CSS float in the specified direction. To align nav links, put them in a separate <code>&lt;ul&gt;</code> with the respective utility class applied.</p>
<h2>Optional display variations</h2>
@@ -1215,16 +1215,9 @@ lead: "Dozens of reusable components built to provide iconography, dropdowns, na
<div class="bs-callout">
<h4>Body padding required</h4>
- <p>The fixed navbar will overlay your other content, unless you add <code>padding</code> to the top of the <code>&lt;body&gt;</code>. The navbar itself has a height of 54px by default. At 768px and above, its height shrinks to 50px. Try out your own values or use our snippet below:</p>
+ <p>The fixed navbar will overlay your other content, unless you add <code>padding</code> to the top of the <code>&lt;body&gt;</code>. Try out your own values or use our snippet below. Tip: By default, the navbar is 50px high.</p>
{% highlight css %}
-body {
- padding-top: 64px;
-}
-@media screen and (min-width: 768px) {
- body {
- padding-top: 60px;
- }
-}
+body { padding-top: 70px; }
{% endhighlight %}
<p>Make sure to include this <strong>after</strong> the core Bootstrap CSS.</p>
</div>
@@ -1251,16 +1244,9 @@ body {
<div class="bs-callout">
<h4>Body padding required</h4>
- <p>The fixed navbar will overlay your other content, unless you add <code>padding</code> to the bottom of the <code>&lt;body&gt;</code>. The navbar itself has a height of 54px by default. At 768px and above, its height shrinks to 50px. Try out your own values or use our snippet below:</p>
+ <p>The fixed navbar will overlay your other content, unless you add <code>padding</code> to the bottom of the <code>&lt;body&gt;</code>. Try out your own values or use our snippet below. Tip: By default, the navbar is 50px high.</p>
{% highlight css %}
-body {
- padding-bottom: 64px;
-}
-@media screen and (min-width: 768px) {
- body {
- padding-bottom: 60px;
- }
-}
+body { padding-bottom: 70px; }
{% endhighlight %}
<p>Make sure to include this <strong>after</strong> the core Bootstrap CSS.</p>
</div>
diff --git a/docs/css.html b/docs/css.html
index f0ac78118..8f86b48b8 100644
--- a/docs/css.html
+++ b/docs/css.html
@@ -1051,8 +1051,8 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<p>Inputs, selects, and textareas are 100% wide by default in Bootstrap. To use the inline form, you'll have to set a width on the form controls used within.</p>
</div>
<form class="bs-example form-inline">
- <input type="text" placeholder="Email" style="width: 180px;">
- <input type="password" placeholder="Password" style="width: 180px;">
+ <input type="text" placeholder="Email">
+ <input type="password" placeholder="Password">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
@@ -1062,8 +1062,8 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</form><!-- /example -->
{% highlight html %}
<form class="form-inline">
- <input type="text" placeholder="Email" style="width: 180px;">
- <input type="password" placeholder="Password" style="width: 180px;">
+ <input type="text" placeholder="Email">
+ <input type="password" placeholder="Password">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
@@ -1132,7 +1132,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h4>Type declaration required</h4>
<p>Inputs will only be fully styled if their <code>type</code> is properly declared.</p>
</div>
- <form class="bs-example form-inline">
+ <form class="bs-example">
<input type="text" placeholder="Text input">
</form>
{% highlight html %}
@@ -1141,7 +1141,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h3>Textarea</h3>
<p>Form control which supports multiple lines of text. Change <code>rows</code> attribute as necessary.</p>
- <form class="bs-example form-inline">
+ <form class="bs-example">
<textarea rows="3"></textarea>
</form>
{% highlight html %}
@@ -1257,7 +1257,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h3 id="forms-input-focus">Input focus</h3>
<p>We remove the default <code>outline</code> styles on some form controls and apply a <code>box-shadow</code> in its place for <code>:focus</code>.</p>
- <form class="bs-example form-inline">
+ <form class="bs-example">
<input class="focused" id="focusedInput" type="text" value="This is focused...">
</form>
{% highlight html %}
@@ -1272,7 +1272,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<p>Invalid inputs are styled via the <code>:invalid</code> CSS selector, which is not supported by Internet Explorer 9 and below.</p>
</div>
- <form class="bs-example form-inline">
+ <form class="bs-example">
<input type="email" placeholder="[email protected]" required>
</form>
{% highlight html %}
@@ -1281,7 +1281,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h3 id="forms-disabled-inputs">Disabled inputs</h3>
<p>Add the <code>disabled</code> attribute on an input to prevent user input and trigger a slightly different look.</p>
- <form class="bs-example form-inline">
+ <form class="bs-example">
<input class="input-xlarge" id="disabledInput" type="text" placeholder="Disabled input here…" disabled>
</form>
{% highlight html %}
@@ -1303,14 +1303,10 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<form class="bs-example form-inline">
<fieldset disabled>
- <div>
- <input type="text" class="col col-lg-4" placeholder="Disabled input">
- </div>
- <div>
- <select class="col col-lg-4">
- <option>Disabled select</option>
- </select>
- </div>
+ <input type="text" placeholder="Disabled input">
+ <select>
+ <option>Disabled select</option>
+ </select>
<div class="checkbox">
<label>
<input type="checkbox"> Can't check this
@@ -1323,10 +1319,10 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<form class="form-inline">
<fieldset disabled>
<div>
- <input type="text" class="col col-lg-4" placeholder="Disabled input">
+ <input type="text" placeholder="Disabled input">
</div>
<div>
- <select class="col col-lg-4">
+ <select>
<option>Disabled select</option>
</select>
</div>