Skip to content
GitLab
Commit 4245e8eb authored by Mark Otto's avatar Mark Otto
Browse files

Fix checkbox and radios example

parent 6e9bbe62
Hide whitespace changes
Inline Side-by-side
Showing
with 74 additions and 48 deletions
+74 -48
docs/assets/css/bootstrap.css
+ 1
- 0
View file @ 4245e8eb
...@@ -903,6 +903,7 @@ textarea::-webkit-input-placeholder { ...@@ -903,6 +903,7 @@ textarea::-webkit-input-placeholder {
.radio label, .radio label,
.checkbox label { .checkbox label {
margin-bottom: 0;
font-weight: normal; font-weight: normal;
} }
......
docs/css.html
+ 36
- 24
View file @ 4245e8eb
...@@ -1185,34 +1185,46 @@ For example, <code><section></code> should be wrapped as inlin ...@@ -1185,34 +1185,46 @@ For example, <code><section></code> should be wrapped as inlin
<p>Checkboxes are for selecting one or several options in a list while radios are for selecting one option from many.</p> <p>Checkboxes are for selecting one or several options in a list while radios are for selecting one option from many.</p>
<h4>Default (stacked)</h4> <h4>Default (stacked)</h4>
<form class="bs-docs-example"> <form class="bs-docs-example">
<label class="checkbox"> <div class="checkbox">
<input type="checkbox" value=""> <label>
Option one is this and that&mdash;be sure to include why it's great <input type="checkbox" value="">
</label> Option one is this and that&mdash;be sure to include why it's great
</label>
</div>
<br> <br>
<label class="radio"> <div class="radio">
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked> <label>
Option one is this and that&mdash;be sure to include why it's great <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
</label> Option one is this and that&mdash;be sure to include why it's great
<label class="radio"> </label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2"> </div>
Option two can be something else and selecting it will deselect option one <div class="radio">
</label> <label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
Option two can be something else and selecting it will deselect option one
</label>
</div>
</form> </form>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;label class="checkbox"&gt; &lt;div class="checkbox"&gt;
&lt;input type="checkbox" value=""&gt; &lt;label&gt;
Option one is this and that&mdash;be sure to include why it's great &lt;input type="checkbox" value=""&gt;
&lt;/label&gt; Option one is this and that&mdash;be sure to include why it's great
&lt;/label&gt;
&lt;/div&gt;
&lt;label class="radio"&gt; &lt;div class="radio"&gt;
&lt;input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked&gt; &lt;label&gt;
Option one is this and that&mdash;be sure to include why it's great &lt;input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked&gt;
&lt;/label&gt; Option one is this and that&mdash;be sure to include why it's great
&lt;label class="radio"&gt; &lt;/label&gt;
&lt;input type="radio" name="optionsRadios" id="optionsRadios2" value="option2"&gt; &lt;/div&gt;
Option two can be something else and selecting it will deselect option one &lt;div class="radio"&gt;
&lt;/label&gt; &lt;label&gt;
&lt;input type="radio" name="optionsRadios" id="optionsRadios2" value="option2"&gt;
Option two can be something else and selecting it will deselect option one
&lt;/label&gt;
&lt;/div&gt;
</pre> </pre>
<h4>Inline checkboxes</h4> <h4>Inline checkboxes</h4>
......
docs/templates/pages/css.mustache
+ 36
- 24
View file @ 4245e8eb
...@@ -1125,34 +1125,46 @@ For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inlin ...@@ -1125,34 +1125,46 @@ For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inlin
<p>Checkboxes are for selecting one or several options in a list while radios are for selecting one option from many.</p> <p>Checkboxes are for selecting one or several options in a list while radios are for selecting one option from many.</p>
<h4>Default (stacked)</h4> <h4>Default (stacked)</h4>
<form class="bs-docs-example"> <form class="bs-docs-example">
<label class="checkbox"> <div class="checkbox">
<input type="checkbox" value=""> <label>
Option one is this and that&mdash;be sure to include why it's great <input type="checkbox" value="">
</label> Option one is this and that&mdash;be sure to include why it's great
</label>
</div>
<br> <br>
<label class="radio"> <div class="radio">
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked> <label>
Option one is this and that&mdash;be sure to include why it's great <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
</label> Option one is this and that&mdash;be sure to include why it's great
<label class="radio"> </label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2"> </div>
Option two can be something else and selecting it will deselect option one <div class="radio">
</label> <label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
Option two can be something else and selecting it will deselect option one
</label>
</div>
</form> </form>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;label class="checkbox"&gt; &lt;div class="checkbox"&gt;
&lt;input type="checkbox" value=""&gt; &lt;label&gt;
Option one is this and that&mdash;be sure to include why it's great &lt;input type="checkbox" value=""&gt;
&lt;/label&gt; Option one is this and that&mdash;be sure to include why it's great
&lt;/label&gt;
&lt;/div&gt;
&lt;label class="radio"&gt; &lt;div class="radio"&gt;
&lt;input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked&gt; &lt;label&gt;
Option one is this and that&mdash;be sure to include why it's great &lt;input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked&gt;
&lt;/label&gt; Option one is this and that&mdash;be sure to include why it's great
&lt;label class="radio"&gt; &lt;/label&gt;
&lt;input type="radio" name="optionsRadios" id="optionsRadios2" value="option2"&gt; &lt;/div&gt;
Option two can be something else and selecting it will deselect option one &lt;div class="radio"&gt;
&lt;/label&gt; &lt;label&gt;
&lt;input type="radio" name="optionsRadios" id="optionsRadios2" value="option2"&gt;
Option two can be something else and selecting it will deselect option one
&lt;/label&gt;
&lt;/div&gt;
</pre> </pre>
<h4>Inline checkboxes</h4> <h4>Inline checkboxes</h4>
......
less/forms.less
+ 1
- 0
View file @ 4245e8eb
...@@ -206,6 +206,7 @@ textarea { ...@@ -206,6 +206,7 @@ textarea {
} }
.radio label, .radio label,
.checkbox label { .checkbox label {
margin-bottom: 0;
font-weight: normal; font-weight: normal;
} }
.radio input[type="radio"], .radio input[type="radio"],
......
Supports Markdown
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