2
0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-06-05 16:42:29 +03:00

custom forms: checkbox and radio stacked option

This commit is contained in:
Mark Otto
2014-12-24 15:45:37 -08:00
parent e500a9a354
commit cd60cf3386
8 changed files with 116 additions and 224 deletions
+27
View File
@@ -3,6 +3,12 @@ layout: page
title: Custom forms
---
In the interest of customization and cross browser consistency, Bootstrap include a handful of customized form elements. They're solid replacements for default form controls as they're built on top of semantic and accessible markup.
## Checkboxes and radios
### Checkboxes
{% example html %}
<label class="c-input c-checkbox">
<input type="checkbox">
@@ -11,6 +17,8 @@ title: Custom forms
</label>
{% endexample %}
### Radios
{% example html %}
<label class="c-input c-radio">
<input id="radio1" name="radio" type="radio">
@@ -23,3 +31,22 @@ title: Custom forms
Or toggle this other custom radio
</label>
{% endexample %}
### Stacked
Custom checkboxes and radios are inline to start. Add a parent with class `.c-inputs-stacked` to ensure each form control is on separate lines.
{% example html %}
<div class="c-inputs-stacked">
<label class="c-input c-radio">
<input id="radioStacked1" name="radio-stacked" type="radio">
<span class="c-indicator"></span>
Toggle this custom radio
</label>
<label class="c-input c-radio">
<input id="radioStacked2" name="radio-stacked" type="radio">
<span class="c-indicator"></span>
Or toggle this other custom radio
</label>
</div>
{% endexample %}