bootstrap-bookingsync-sass 0.0.17 → 0.0.18
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/CHANGELOG.md +8 -0
- data/assets/javascripts/bookingsync/stackable.js +49 -0
- data/assets/javascripts/bootstrap-bookingsync-sprockets.js +1 -0
- data/assets/stylesheets/_bootstrap-bookingsync.scss +1 -0
- data/assets/stylesheets/bookingsync/_colors.scss +1 -0
- data/assets/stylesheets/bookingsync/_dropdown.scss +8 -0
- data/assets/stylesheets/bookingsync/_sheet.scss +58 -1
- data/assets/stylesheets/bookingsync/_variables.scss +30 -12
- data/docs/content/assets/stylesheets/_base.scss +6 -5
- data/docs/content/assets/stylesheets/_callout.scss +10 -1
- data/docs/content/components.html +7 -7
- data/docs/content/components/chosen.md +28 -22
- data/docs/content/components/dropdown.md +45 -0
- data/docs/content/components/menu.md +186 -103
- data/docs/content/components/sheet.md +256 -4
- data/docs/content/components/switch.md +15 -7
- data/docs/content/css.html +44 -18
- data/docs/content/css/forms.md +732 -590
- data/docs/content/css/helpers.md +37 -27
- data/lib/bootstrap/bookingsync/version.rb +1 -1
- metadata +5 -2
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
|
|
1
|
+
# Switch
|
|
2
2
|
|
|
3
3
|
Turns checkboxes and radio buttons in toggle switches
|
|
4
4
|
|
|
@@ -20,8 +20,13 @@ Turns checkboxes and radio buttons in toggle switches
|
|
|
20
20
|
</div>
|
|
21
21
|
|
|
22
22
|
<div class="example">
|
|
23
|
-
<div class="
|
|
24
|
-
<
|
|
23
|
+
<div class="sheet-header">
|
|
24
|
+
<h3 id="switch-example">Basic example</h3>
|
|
25
|
+
</div>
|
|
26
|
+
<div class="bs-example bs-sheet" data-example-id="switch-example">
|
|
27
|
+
<div class="make-switch switch-small">
|
|
28
|
+
<input type="checkbox" checked>
|
|
29
|
+
</div>
|
|
25
30
|
</div>
|
|
26
31
|
</div>
|
|
27
32
|
~~~ HTML
|
|
@@ -30,11 +35,14 @@ Turns checkboxes and radio buttons in toggle switches
|
|
|
30
35
|
</div>
|
|
31
36
|
~~~
|
|
32
37
|
|
|
33
|
-
### Disabled state
|
|
34
|
-
|
|
35
38
|
<div class="example">
|
|
36
|
-
<div class="
|
|
37
|
-
<
|
|
39
|
+
<div class="sheet-header">
|
|
40
|
+
<h3 id="switch-example-disabled">Disabled state</h3>
|
|
41
|
+
</div>
|
|
42
|
+
<div class="bs-example bs-sheet" data-example-id="switch-example-disabled">
|
|
43
|
+
<div class="make-switch switch-small">
|
|
44
|
+
<input type="checkbox" checked disabled>
|
|
45
|
+
</div>
|
|
38
46
|
</div>
|
|
39
47
|
</div>
|
|
40
48
|
~~~ HTML
|
data/docs/content/css.html
CHANGED
|
@@ -7,18 +7,43 @@
|
|
|
7
7
|
</h3>
|
|
8
8
|
</div>
|
|
9
9
|
<div class="list-group">
|
|
10
|
-
<%= link_to("Basic
|
|
11
|
-
<%= link_to("Inline form", "#inline
|
|
12
|
-
<%= link_to("
|
|
13
|
-
|
|
14
|
-
<%= link_to("
|
|
15
|
-
|
|
16
|
-
<%= link_to("
|
|
17
|
-
<%= link_to("
|
|
18
|
-
<%= link_to("
|
|
19
|
-
<%= link_to("
|
|
20
|
-
|
|
21
|
-
<%= link_to("
|
|
10
|
+
<%= link_to("Basic form", "#forms-example", class: "list-group-item") %>
|
|
11
|
+
<%= link_to("Inline form", "#forms-example-inline", class: "list-group-item") %>
|
|
12
|
+
<%= link_to("Inline form with checkboxes", "#forms-example-inline-checkboxes",
|
|
13
|
+
class: "list-group-item") %>
|
|
14
|
+
<%= link_to("Inline form with input group", "#forms-example-inline-input-group",
|
|
15
|
+
class: "list-group-item") %>
|
|
16
|
+
<%= link_to("Horizontal form", "#forms-example-horizontal", class: "list-group-item") %>
|
|
17
|
+
<%= link_to("Inputs", "#forms-example-inputs", class: "list-group-item") %>
|
|
18
|
+
<%= link_to("Textarea", "#forms-example-textarea", class: "list-group-item") %>
|
|
19
|
+
<%= link_to("Checkboxes and radios (stacked)", "#forms-example-checkboxes-radios",
|
|
20
|
+
class: "list-group-item") %>
|
|
21
|
+
<%= link_to("Inline checkboxes and radios", "#forms-example-inline-checkboxes-radios",
|
|
22
|
+
class: "list-group-item") %>
|
|
23
|
+
<%= link_to("Checkboxes and radios without label text",
|
|
24
|
+
"#forms-example-checkboxes-radios-without-label",
|
|
25
|
+
class: "list-group-item") %>
|
|
26
|
+
<%= link_to("Select", "#forms-example-select", class: "list-group-item") %>
|
|
27
|
+
<%= link_to("Multiple Select", "#forms-example-multiple-select",
|
|
28
|
+
class: "list-group-item") %>
|
|
29
|
+
<%= link_to("Static control", "#forms-example-static", class: "list-group-item") %>
|
|
30
|
+
<%= link_to("Focus state", "#forms-example-focus", class: "list-group-item") %>
|
|
31
|
+
<%= link_to("Filled state", "#forms-example-filled", class: "list-group-item") %>
|
|
32
|
+
<%= link_to("Disabled state", "#forms-example-disabled", class: "list-group-item") %>
|
|
33
|
+
<%= link_to("Disabled fieldsets", "#forms-example-disabled-fieldsets",
|
|
34
|
+
class: "list-group-item") %>
|
|
35
|
+
<%= link_to("Readonly state", "#forms-example-readonly", class: "list-group-item") %>
|
|
36
|
+
<%= link_to("Help text", "#forms-example-help-text", class: "list-group-item") %>
|
|
37
|
+
<%= link_to("Validation states", "#forms-example-validation", class: "list-group-item") %>
|
|
38
|
+
<%= link_to("Validation with optional icons", "#forms-example-validation-with-icons",
|
|
39
|
+
class: "list-group-item") %>
|
|
40
|
+
<%= link_to("Validation with optional icons in horizontal and inline forms",
|
|
41
|
+
"#forms-example-validation-with-icons-horizontal-inline",
|
|
42
|
+
class: "list-group-item") %>
|
|
43
|
+
<%= link_to("Height sizing", "#forms-example-height-sizing", class: "list-group-item") %>
|
|
44
|
+
<%= link_to("Horizontal form group sizes", "#forms-example-horizontal-group-sizes",
|
|
45
|
+
class: "list-group-item") %>
|
|
46
|
+
<%= link_to("Column sizing", "#forms-example-column-sizing", class: "list-group-item") %>
|
|
22
47
|
</div>
|
|
23
48
|
<div class="panel-heading">
|
|
24
49
|
<h3 class="panel-title">
|
|
@@ -26,17 +51,18 @@
|
|
|
26
51
|
</h3>
|
|
27
52
|
</div>
|
|
28
53
|
<div class="list-group">
|
|
29
|
-
<%= link_to("
|
|
54
|
+
<%= link_to("Vertical alignment", "#helper-example-vertical-alignment",
|
|
55
|
+
class: "list-group-item") %>
|
|
56
|
+
<%= link_to("Vertical table alignment", "#forms-example-vertical-table-alignment",
|
|
57
|
+
class: "list-group-item") %>
|
|
30
58
|
</div>
|
|
31
59
|
</div>
|
|
32
60
|
</div>
|
|
33
61
|
|
|
34
62
|
<div class="col-md-9 col-md-pull-3">
|
|
35
|
-
<div class="
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
<%= items['/css/helpers/'].compiled_content %>
|
|
39
|
-
</div>
|
|
63
|
+
<div class="reference-body">
|
|
64
|
+
<%= items['/css/forms/'].compiled_content %>
|
|
65
|
+
<%= items['/css/helpers/'].compiled_content %>
|
|
40
66
|
</div>
|
|
41
67
|
</div>
|
|
42
68
|
</div>
|
data/docs/content/css/forms.md
CHANGED
|
@@ -1,35 +1,50 @@
|
|
|
1
1
|
# Forms
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
<div class="example">
|
|
4
|
+
<div class="sheet-header">
|
|
5
|
+
<h3 id="forms-example">Basic form</h3>
|
|
6
|
+
</div>
|
|
4
7
|
|
|
5
|
-
|
|
8
|
+
<p>
|
|
9
|
+
Individual form controls automatically receive some global styling. All textual
|
|
10
|
+
<code><input></code>, <code><textarea></code>, and <code><select></code>
|
|
11
|
+
elements with <code>.form-control</code> are set to <code>width: 100%;</code> by default.
|
|
12
|
+
Wrap labels and controls in <code>.form-group</code> for optimum spacing.
|
|
13
|
+
</p>
|
|
14
|
+
|
|
15
|
+
<div class="bs-callout bs-callout-warning">
|
|
16
|
+
<h4>Don't mix form groups with input groups</h4>
|
|
17
|
+
<p>Do not mix form groups directly with <a href="/css/#input-groups">input groups</a>.
|
|
18
|
+
Instead, nest the input group inside of the form group.</p>
|
|
19
|
+
</div>
|
|
6
20
|
|
|
7
|
-
<div class="example">
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
21
|
+
<div class="bs-example bs-sheet" data-example-id="forms-example">
|
|
22
|
+
<form>
|
|
23
|
+
<div class="form-group">
|
|
24
|
+
<label for="exampleInputEmail1">Email address</label>
|
|
25
|
+
<input type="email" class="form-control" id="exampleInputEmail1">
|
|
26
|
+
</div>
|
|
27
|
+
<div class="form-group">
|
|
28
|
+
<label for="exampleInputPassword1">Password</label>
|
|
29
|
+
<input type="password" class="form-control" id="exampleInputPassword1">
|
|
30
|
+
</div>
|
|
31
|
+
<div class="form-group">
|
|
32
|
+
<label for="exampleTextarea1">Comment</label>
|
|
33
|
+
<textarea class="form-control" id="exampleTextarea1" rows="5"></textarea>
|
|
34
|
+
</div>
|
|
35
|
+
<div class="form-group">
|
|
36
|
+
<label for="exampleInputFile">File input</label>
|
|
37
|
+
<input type="file" id="exampleInputFile">
|
|
38
|
+
<p class="help-block">Example block-level help text here.</p>
|
|
39
|
+
</div>
|
|
40
|
+
<div class="checkbox">
|
|
41
|
+
<label>
|
|
42
|
+
<input type="checkbox"> Check me out
|
|
43
|
+
</label>
|
|
44
|
+
</div>
|
|
45
|
+
<button type="submit" class="btn btn-primary">Submit</button>
|
|
46
|
+
</form>
|
|
47
|
+
</div>
|
|
33
48
|
</div>
|
|
34
49
|
|
|
35
50
|
~~~ html
|
|
@@ -52,40 +67,42 @@ Individual form controls automatically receive some global styling. All textual
|
|
|
52
67
|
<input type="checkbox"> Check me out
|
|
53
68
|
</label>
|
|
54
69
|
</div>
|
|
55
|
-
<button type="submit" class="btn btn-
|
|
70
|
+
<button type="submit" class="btn btn-primary">Submit</button>
|
|
56
71
|
</form>
|
|
57
72
|
~~~
|
|
58
73
|
|
|
59
|
-
<div class="
|
|
60
|
-
<
|
|
61
|
-
|
|
62
|
-
</div>
|
|
74
|
+
<div class="example">
|
|
75
|
+
<div class="sheet-header">
|
|
76
|
+
<h3 id="forms-example-inline">Inline form</h3>
|
|
77
|
+
</div>
|
|
63
78
|
|
|
64
|
-
|
|
79
|
+
<p>Add <code>.form-inline</code> to your form (which doesn't have to be a
|
|
80
|
+
<code><form></code>) for left-aligned and inline-block controls.<br>
|
|
81
|
+
<strong>This only applies to forms within viewports that are at least 768px wide.</strong></p>
|
|
65
82
|
|
|
66
|
-
|
|
83
|
+
<div class="bs-callout bs-callout-danger">
|
|
84
|
+
<h4>May require custom widths</h4>
|
|
85
|
+
<p>Inputs and selects have `width: 100%;` applied by default in Bootstrap. Within inline forms, we reset that to `width: auto;` so multiple controls can reside on the same line. Depending on your layout, additional custom widths may be required.</p>
|
|
86
|
+
</div>
|
|
67
87
|
|
|
68
|
-
<div class="bs-callout bs-callout-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
</div>
|
|
72
|
-
<div class="bs-callout bs-callout-warning">
|
|
73
|
-
<h4>Always add labels</h4>
|
|
74
|
-
<p>Screen readers will have trouble with your forms if you don't include a label for every input. For these inline forms, you can hide the labels using the `.sr-only` class. There are further alternative methods of providing a label for assistive technologies, such as the `aria-label`, `aria-labelledby` or `title` attribute. If none of these is present, screen readers may resort to using the `placeholder` attribute, if present, but note that use of `placeholder` as a replacement for other labelling methods is not advised.</p>
|
|
75
|
-
</div>
|
|
88
|
+
<div class="bs-callout bs-callout-warning">
|
|
89
|
+
<h4>Always add labels</h4>
|
|
90
|
+
<p>Screen readers will have trouble with your forms if you don't include a label for every input. For these inline forms, you can hide the labels using the `.sr-only` class. There are further alternative methods of providing a label for assistive technologies, such as the `aria-label`, `aria- labelledby` or `title` attribute. If none of these is present, screen readers may resort to using the `placeholder` attribute, if present, but note that use of `placeholder` as a replacement for other labelling methods is not advised.</p>
|
|
91
|
+
</div>
|
|
76
92
|
|
|
77
|
-
<div class="example">
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
93
|
+
<div class="bs-example bs-sheet" data-example-id="forms-example-inline">
|
|
94
|
+
<form class="form-inline">
|
|
95
|
+
<div class="form-group">
|
|
96
|
+
<label for="exampleInputName2">Name</label>
|
|
97
|
+
<input type="text" class="form-control" id="exampleInputName2">
|
|
98
|
+
</div>
|
|
99
|
+
<div class="form-group">
|
|
100
|
+
<label for="exampleInputEmail2">Email</label>
|
|
101
|
+
<input type="email" class="form-control" id="exampleInputEmail2">
|
|
102
|
+
</div>
|
|
103
|
+
<button type="submit" class="btn btn-primary">Send invitation</button>
|
|
104
|
+
</form>
|
|
105
|
+
</div>
|
|
89
106
|
</div>
|
|
90
107
|
|
|
91
108
|
~~~ html
|
|
@@ -98,27 +115,32 @@ Add `.form-inline` to your form (which doesn't have to be a `<form>`) for left-a
|
|
|
98
115
|
<label for="exampleInputEmail2">Email</label>
|
|
99
116
|
<input type="email" class="form-control" id="exampleInputEmail2">
|
|
100
117
|
</div>
|
|
101
|
-
<button type="submit" class="btn btn-
|
|
118
|
+
<button type="submit" class="btn btn-primary">Send invitation</button>
|
|
102
119
|
</form>
|
|
103
120
|
~~~
|
|
104
121
|
|
|
105
122
|
<div class="example">
|
|
106
|
-
<
|
|
107
|
-
<
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
<input type="
|
|
118
|
-
</
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
123
|
+
<div class="sheet-header">
|
|
124
|
+
<h3 id="forms-example-inline-checkboxes">Inline form with checkboxes</h3>
|
|
125
|
+
</div>
|
|
126
|
+
<div class="bs-example bs-sheet" data-example-id="forms-example-inline-checkboxes">
|
|
127
|
+
<form class="form-inline">
|
|
128
|
+
<div class="form-group">
|
|
129
|
+
<label for="exampleInputEmail3">Email address</label>
|
|
130
|
+
<input type="email" class="form-control" id="exampleInputEmail3">
|
|
131
|
+
</div>
|
|
132
|
+
<div class="form-group">
|
|
133
|
+
<label for="exampleInputPassword3">Password</label>
|
|
134
|
+
<input type="password" class="form-control" id="exampleInputPassword3">
|
|
135
|
+
</div>
|
|
136
|
+
<div class="checkbox">
|
|
137
|
+
<label>
|
|
138
|
+
<input type="checkbox"> Remember me
|
|
139
|
+
</label>
|
|
140
|
+
</div>
|
|
141
|
+
<button type="submit" class="btn btn-primary">Sign in</button>
|
|
142
|
+
</form>
|
|
143
|
+
</div>
|
|
122
144
|
</div>
|
|
123
145
|
|
|
124
146
|
~~~ html
|
|
@@ -136,31 +158,36 @@ Add `.form-inline` to your form (which doesn't have to be a `<form>`) for left-a
|
|
|
136
158
|
<input type="checkbox"> Remember me
|
|
137
159
|
</label>
|
|
138
160
|
</div>
|
|
139
|
-
<button type="submit" class="btn btn-
|
|
161
|
+
<button type="submit" class="btn btn-primary">Sign in</button>
|
|
140
162
|
</form>
|
|
141
163
|
~~~
|
|
142
164
|
|
|
143
165
|
<div class="example">
|
|
144
|
-
<
|
|
145
|
-
<
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
<
|
|
166
|
+
<div class="sheet-header">
|
|
167
|
+
<h3 id="forms-example-inline-input-group">Inline form with input group</h3>
|
|
168
|
+
</div>
|
|
169
|
+
<div class="bs-example bs-sheet" data-example-id="forms-example-inline-input-group">
|
|
170
|
+
<form class="form-inline">
|
|
171
|
+
<div class="form-group">
|
|
172
|
+
<label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
|
|
173
|
+
<div class="input-group">
|
|
174
|
+
<div class="input-group-addon">$</div>
|
|
175
|
+
<input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
|
|
176
|
+
<div class="input-group-addon">.00</div>
|
|
177
|
+
</div>
|
|
151
178
|
</div>
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
179
|
+
<div class="form-group">
|
|
180
|
+
<div class="input-group">
|
|
181
|
+
<div class="input-group-addon">$</div>
|
|
182
|
+
<label for="exampleInputAmountWithLabel">Amount (in dollars)
|
|
183
|
+
</label>
|
|
184
|
+
<input type="text" class="form-control" id="exampleInputAmountWithLabel">
|
|
185
|
+
<div class="input-group-addon">.00</div>
|
|
186
|
+
</div>
|
|
160
187
|
</div>
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
</
|
|
188
|
+
<button type="submit" class="btn btn-primary">Transfer cash</button>
|
|
189
|
+
</form>
|
|
190
|
+
</div>
|
|
164
191
|
</div>
|
|
165
192
|
|
|
166
193
|
~~~ html
|
|
@@ -186,99 +213,122 @@ Add `.form-inline` to your form (which doesn't have to be a `<form>`) for left-a
|
|
|
186
213
|
</form>
|
|
187
214
|
~~~
|
|
188
215
|
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
<
|
|
192
|
-
|
|
193
|
-
<
|
|
216
|
+
<div class="example">
|
|
217
|
+
<div class="sheet-header">
|
|
218
|
+
<h3 id="forms-example-horizontal">Horizontal form</h3>
|
|
219
|
+
</div>
|
|
220
|
+
<div class="bs-callout bs-callout-info">
|
|
221
|
+
<h4>Not Recommended</h4>
|
|
222
|
+
<p>BookingSync UI Kit does not recommend using horizontal forms.</p>
|
|
223
|
+
</div>
|
|
194
224
|
</div>
|
|
195
225
|
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
226
|
+
<div class="example">
|
|
227
|
+
<div class="sheet-header">
|
|
228
|
+
<h3 id="forms-example-inputs">Inputs</h3>
|
|
229
|
+
</div>
|
|
230
|
+
<p>
|
|
231
|
+
Most common form control, text-based input fields. Includes support for all HTML5 types:
|
|
232
|
+
<code>text</code>, <code>password</code>, <code>datetime</code>, <code>datetime-local</code>,
|
|
233
|
+
<code>date</code>, <code>month</code>, <code>time</code>, <code>week</code>,
|
|
234
|
+
<code>number</code>, <code>email</code>, <code>url</code>, <code>search</code>,
|
|
235
|
+
<code>tel</code>, and <code>color</code>.
|
|
236
|
+
</p>
|
|
237
|
+
|
|
238
|
+
<div class="bs-callout bs-callout-danger">
|
|
239
|
+
<h4>Type declaration required</h4>
|
|
240
|
+
<p>Inputs will only be fully styled if their `type` is properly declared.</p>
|
|
241
|
+
</div>
|
|
203
242
|
|
|
204
|
-
<div class="bs-callout bs-callout-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
243
|
+
<div class="bs-callout bs-callout-info">
|
|
244
|
+
<h4>Input groups</h4>
|
|
245
|
+
<p>To add integrated text or buttons before and/or after any text-based
|
|
246
|
+
<code><input></code>, <a href="../css/#input-groups">check out the input group
|
|
247
|
+
component</a>.</p>
|
|
248
|
+
</div>
|
|
208
249
|
|
|
209
|
-
<div class="example">
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
250
|
+
<div class="bs-example bs-sheet" data-example-id="forms-example-inputs">
|
|
251
|
+
<form>
|
|
252
|
+
<input type="text" class="form-control" placeholder="Text input">
|
|
253
|
+
</form>
|
|
254
|
+
</div>
|
|
213
255
|
</div>
|
|
214
256
|
|
|
215
257
|
~~~ html
|
|
216
258
|
<input type="text" class="form-control" placeholder="Text input">
|
|
217
259
|
~~~
|
|
218
260
|
|
|
219
|
-
<div class="
|
|
220
|
-
<
|
|
221
|
-
|
|
222
|
-
</div>
|
|
223
|
-
|
|
224
|
-
### Textarea
|
|
261
|
+
<div class="example">
|
|
262
|
+
<div class="sheet-header">
|
|
263
|
+
<h3 id="forms-example-textarea">Textarea</h3>
|
|
264
|
+
</div>
|
|
225
265
|
|
|
226
|
-
Form control which supports multiple lines of text.
|
|
266
|
+
<p>Form control which supports multiple lines of text.
|
|
267
|
+
Change <code>rows</code> attribute as necessary.</p>
|
|
227
268
|
|
|
228
|
-
<div class="example">
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
269
|
+
<div class="bs-example bs-sheet" data-example-id="forms-example-inputs">
|
|
270
|
+
<form>
|
|
271
|
+
<div class="form-group">
|
|
272
|
+
<textarea class="form-control" rows="3" placeholder="Textarea"></textarea>
|
|
273
|
+
</div>
|
|
274
|
+
</form>
|
|
275
|
+
</div>
|
|
234
276
|
</div>
|
|
235
277
|
|
|
236
278
|
~~~ html
|
|
237
279
|
<textarea class="form-control" rows="3"></textarea>
|
|
238
280
|
~~~
|
|
239
281
|
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
Checkboxes
|
|
282
|
+
<div class="example">
|
|
283
|
+
<div class="sheet-header">
|
|
284
|
+
<h3 id="forms-example-checkboxes-radios">Checkboxes and radios (stacked)</h3>
|
|
285
|
+
</div>
|
|
243
286
|
|
|
244
|
-
|
|
287
|
+
<p>Checkboxes are for selecting one or several options in a list, while radios are for
|
|
288
|
+
selecting one option from many.</p>
|
|
245
289
|
|
|
246
|
-
|
|
290
|
+
<div class="bs-callout bs-callout-info">
|
|
291
|
+
<h4>Disabled checkboxes and radios</h4>
|
|
292
|
+
<p>To provide a "not-allowed" cursor on hover of the parent <code><label></code>,
|
|
293
|
+
you'll need to add the <code>.disabled</code> class to the parent <code>.radio</code>,
|
|
294
|
+
<code>.radio-inline</code>, <code>.checkbox</code>, or <code>.checkbox-inline</code>.</p>
|
|
295
|
+
</div>
|
|
247
296
|
|
|
248
|
-
<div class="example">
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
297
|
+
<div class="bs-example bs-sheet" data-example-id="forms-example-checkboxes-radios">
|
|
298
|
+
<form>
|
|
299
|
+
<div class="checkbox">
|
|
300
|
+
<label>
|
|
301
|
+
<input type="checkbox" value="">
|
|
302
|
+
Option one is this and that—be sure to include why it's great
|
|
303
|
+
</label>
|
|
304
|
+
</div>
|
|
305
|
+
<div class="checkbox">
|
|
306
|
+
<label>
|
|
307
|
+
<input type="checkbox" value="" disabled>
|
|
308
|
+
Option two is disabled
|
|
309
|
+
</label>
|
|
310
|
+
</div>
|
|
311
|
+
<br>
|
|
312
|
+
<div class="radio">
|
|
313
|
+
<label>
|
|
314
|
+
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
|
|
315
|
+
Option one is this and that—be sure to include why it's great
|
|
316
|
+
</label>
|
|
317
|
+
</div>
|
|
318
|
+
<div class="radio">
|
|
319
|
+
<label>
|
|
320
|
+
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
|
|
321
|
+
Option two can be something else and selecting it will deselect option one
|
|
322
|
+
</label>
|
|
323
|
+
</div>
|
|
324
|
+
<div class="radio">
|
|
325
|
+
<label>
|
|
326
|
+
<input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
|
|
327
|
+
Option three is disabled
|
|
328
|
+
</label>
|
|
329
|
+
</div>
|
|
330
|
+
</form>
|
|
331
|
+
</div>
|
|
282
332
|
</div>
|
|
283
333
|
|
|
284
334
|
~~~ html
|
|
@@ -315,34 +365,39 @@ Disabled checkboxes and radios are supported, but to provide a "not-allowed" cur
|
|
|
315
365
|
</div>
|
|
316
366
|
~~~
|
|
317
367
|
|
|
318
|
-
|
|
368
|
+
<div class="example">
|
|
369
|
+
<div class="sheet-header">
|
|
370
|
+
<h3 id="forms-example-inline-checkboxes-radios">Inline checkboxes and radios</h3>
|
|
371
|
+
</div>
|
|
319
372
|
|
|
320
|
-
Use the
|
|
373
|
+
<p>Use the <code>.checkbox-inline</code> or <code>.radio-inline</code> classes on a series of
|
|
374
|
+
checkboxes or radios for controls that appear on the same line.</p>
|
|
321
375
|
|
|
322
|
-
<div class="example">
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
376
|
+
<div class="bs-example bs-sheet" data-example-id="forms-example-inline-checkboxes-radios">
|
|
377
|
+
<form>
|
|
378
|
+
<label class="checkbox-inline">
|
|
379
|
+
<input type="checkbox" id="inlineCheckbox1" value="option1"> 1
|
|
380
|
+
</label>
|
|
381
|
+
<label class="checkbox-inline">
|
|
382
|
+
<input type="checkbox" id="inlineCheckbox2" value="option2"> 2
|
|
383
|
+
</label>
|
|
384
|
+
<label class="checkbox-inline">
|
|
385
|
+
<input type="checkbox" id="inlineCheckbox3" value="option3"> 3
|
|
386
|
+
</label>
|
|
387
|
+
</form>
|
|
388
|
+
<br>
|
|
389
|
+
<form>
|
|
390
|
+
<label class="radio-inline">
|
|
391
|
+
<input type="radio" name="inlineRadioOptions" id="inlineRadio1" value=" option1"> 1
|
|
392
|
+
</label>
|
|
393
|
+
<label class="radio-inline">
|
|
394
|
+
<input type="radio" name="inlineRadioOptions" id="inlineRadio2" value=" option2"> 2
|
|
395
|
+
</label>
|
|
396
|
+
<label class="radio-inline">
|
|
397
|
+
<input type="radio" name="inlineRadioOptions" id="inlineRadio3" value=" option3"> 3
|
|
398
|
+
</label>
|
|
399
|
+
</form>
|
|
400
|
+
</div>
|
|
346
401
|
</div>
|
|
347
402
|
|
|
348
403
|
~~~ html
|
|
@@ -367,23 +422,36 @@ Use the `.checkbox-inline` or `.radio-inline` classes on a series of checkboxes
|
|
|
367
422
|
</label>
|
|
368
423
|
~~~
|
|
369
424
|
|
|
370
|
-
|
|
425
|
+
<div class="example">
|
|
426
|
+
<div class="sheet-header">
|
|
427
|
+
<h3 id="forms-example-checkboxes-radios-without-label">
|
|
428
|
+
Checkboxes and radios without label text
|
|
429
|
+
</h3>
|
|
430
|
+
</div>
|
|
371
431
|
|
|
372
|
-
Should you have no text within the
|
|
432
|
+
<p>Should you have no text within the <code><label></code>, the input is positioned as
|
|
433
|
+
you'd expect. Remember to still provide some form of label for assistive technologies
|
|
434
|
+
(for instance, using <code>aria-label</code>).</p>
|
|
373
435
|
|
|
374
|
-
<div class="
|
|
375
|
-
|
|
376
|
-
<
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
436
|
+
<div class="bs-callout bs-callout-info">
|
|
437
|
+
<h4>Limitation</h4>
|
|
438
|
+
<p>Currently only works on non-inline checkboxes and radios.</p>
|
|
439
|
+
</div>
|
|
440
|
+
|
|
441
|
+
<div class="bs-example bs-sheet" data-example-id="forms-example-checkboxes-radios-without-label">
|
|
442
|
+
<form>
|
|
443
|
+
<div class="checkbox">
|
|
444
|
+
<label>
|
|
445
|
+
<input type="checkbox" id="blankCheckbox" value="option1" aria-label=" Checkbox without label text">
|
|
446
|
+
</label>
|
|
447
|
+
</div>
|
|
448
|
+
<div class="radio">
|
|
449
|
+
<label>
|
|
450
|
+
<input type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="Radio button without label text">
|
|
451
|
+
</label>
|
|
452
|
+
</div>
|
|
453
|
+
</form>
|
|
454
|
+
</div>
|
|
387
455
|
</div>
|
|
388
456
|
|
|
389
457
|
~~~ html
|
|
@@ -399,20 +467,31 @@ Should you have no text within the `<label>`, the input is positioned as you'd e
|
|
|
399
467
|
</div>
|
|
400
468
|
~~~
|
|
401
469
|
|
|
402
|
-
|
|
470
|
+
<div class="example">
|
|
471
|
+
<div class="sheet-header">
|
|
472
|
+
<h3 id="forms-example-select">Select</h3>
|
|
473
|
+
</div>
|
|
403
474
|
|
|
404
|
-
Note that many native select menus—namely in Safari and Chrome—have rounded corners that
|
|
475
|
+
<p>Note that many native select menus—namely in Safari and Chrome—have rounded corners that
|
|
476
|
+
cannot be modified via <code>border-radius</code> properties.</p>
|
|
405
477
|
|
|
406
|
-
<div class="
|
|
407
|
-
|
|
408
|
-
<
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
478
|
+
<div class="bs-callout bs-callout-info">
|
|
479
|
+
<h4>Chosen</h4>
|
|
480
|
+
<p>Using Chosen is recommended for a better design and improved experience. More details in
|
|
481
|
+
the <a href="/components/#chosen">Chosen component</a>.</p>
|
|
482
|
+
</div>
|
|
483
|
+
|
|
484
|
+
<div class="bs-example bs-sheet" data-example-id="forms-example-select">
|
|
485
|
+
<form>
|
|
486
|
+
<select class="form-control">
|
|
487
|
+
<option>1</option>
|
|
488
|
+
<option>2</option>
|
|
489
|
+
<option>3</option>
|
|
490
|
+
<option>4</option>
|
|
491
|
+
<option>5</option>
|
|
492
|
+
</select>
|
|
493
|
+
</form>
|
|
494
|
+
</div>
|
|
416
495
|
</div>
|
|
417
496
|
|
|
418
497
|
~~~ html
|
|
@@ -425,18 +504,31 @@ Note that many native select menus—namely in Safari and Chrome—have rounded
|
|
|
425
504
|
</select>
|
|
426
505
|
~~~
|
|
427
506
|
|
|
428
|
-
For `<select>` controls with the `multiple` attribute, multiple options are shown by default.
|
|
429
|
-
|
|
430
507
|
<div class="example">
|
|
431
|
-
<
|
|
432
|
-
<
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
508
|
+
<div class="sheet-header">
|
|
509
|
+
<h3 id="forms-example-multiple-select">Multiple Select</h3>
|
|
510
|
+
</div>
|
|
511
|
+
|
|
512
|
+
<p>For <code><select></code> controls with the <code>multiple</code> attribute,
|
|
513
|
+
multiple options are shown by default.</p>
|
|
514
|
+
|
|
515
|
+
<div class="bs-callout bs-callout-info">
|
|
516
|
+
<h4>Chosen</h4>
|
|
517
|
+
<p>Using Chosen is recommended for a better design and improved experience. More details in
|
|
518
|
+
the <a href="/components/#chosen">Chosen component</a>.</p>
|
|
519
|
+
</div>
|
|
520
|
+
|
|
521
|
+
<div class="bs-example bs-sheet" data-example-id="forms-example-multiple-select">
|
|
522
|
+
<form>
|
|
523
|
+
<select multiple class="form-control">
|
|
524
|
+
<option>1</option>
|
|
525
|
+
<option>2</option>
|
|
526
|
+
<option>3</option>
|
|
527
|
+
<option>4</option>
|
|
528
|
+
<option>5</option>
|
|
529
|
+
</select>
|
|
530
|
+
</form>
|
|
531
|
+
</div>
|
|
440
532
|
</div>
|
|
441
533
|
|
|
442
534
|
~~~ html
|
|
@@ -449,22 +541,27 @@ For `<select>` controls with the `multiple` attribute, multiple options are show
|
|
|
449
541
|
</select>
|
|
450
542
|
~~~
|
|
451
543
|
|
|
452
|
-
|
|
544
|
+
<div class="example">
|
|
545
|
+
<div class="sheet-header">
|
|
546
|
+
<h3 id="forms-example-static">Static control</h3>
|
|
547
|
+
</div>
|
|
453
548
|
|
|
454
|
-
When you need to place plain text next to a form label within a form, use the
|
|
549
|
+
<p>When you need to place plain text next to a form label within a form, use the
|
|
550
|
+
<code>.form-control-static</code> class on a <code><p>.</code></p>
|
|
455
551
|
|
|
456
|
-
<div class="example">
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
|
|
552
|
+
<div class="bs-example bs-sheet" data-example-id="forms-example-static">
|
|
553
|
+
<form class="form-inline">
|
|
554
|
+
<div class="form-group">
|
|
555
|
+
<label class="sr-only">Email</label>
|
|
556
|
+
<p class="form-control-static">email@example.com</p>
|
|
557
|
+
</div>
|
|
558
|
+
<div class="form-group">
|
|
559
|
+
<label for="inputPassword2" class="sr-only">Password</label>
|
|
560
|
+
<input type="password" class="form-control" id="inputPassword2" placeholder="Password">
|
|
561
|
+
</div>
|
|
562
|
+
<button type="submit" class="btn btn-default">Confirm identity</button>
|
|
563
|
+
</form>
|
|
564
|
+
</div>
|
|
468
565
|
</div>
|
|
469
566
|
|
|
470
567
|
~~~ html
|
|
@@ -481,24 +578,36 @@ When you need to place plain text next to a form label within a form, use the `.
|
|
|
481
578
|
</form>
|
|
482
579
|
~~~
|
|
483
580
|
|
|
484
|
-
|
|
581
|
+
<div class="example">
|
|
582
|
+
<div class="sheet-header">
|
|
583
|
+
<h3 id="forms-example-focus">Focus state</h3>
|
|
584
|
+
</div>
|
|
485
585
|
|
|
486
|
-
We remove the default
|
|
586
|
+
<p>We remove the default <code>outline</code> styles on some form controls and adjust labels
|
|
587
|
+
and border-bottom placement and color for <code>:focus</code>.</p>
|
|
487
588
|
|
|
488
|
-
<div class="
|
|
489
|
-
|
|
490
|
-
<
|
|
491
|
-
|
|
492
|
-
|
|
493
|
-
|
|
494
|
-
|
|
495
|
-
|
|
496
|
-
|
|
497
|
-
<
|
|
589
|
+
<div class="bs-callout bs-callout-info">
|
|
590
|
+
<h4>Demo <code>:focus</code> state</h4>
|
|
591
|
+
<p>The above example forces the <code>focused</code> class normally set by javascript on the
|
|
592
|
+
<code>.form-group</code> parent to demonstrate the <code>:focus</code> state on a
|
|
593
|
+
<code>.form-group .form-control</code>.</p>
|
|
594
|
+
</div>
|
|
595
|
+
|
|
596
|
+
<div class="bs-example bs-sheet" data-example-id="forms-example-focus">
|
|
597
|
+
<form>
|
|
598
|
+
<div class="form-group focused">
|
|
599
|
+
<label for="focusedInput2">Focus state</label>
|
|
600
|
+
<input class="form-control" id="focusedInput2" type="text"
|
|
601
|
+
value="Demonstrative focus state">
|
|
602
|
+
</div>
|
|
603
|
+
<div class="form-group focused">
|
|
604
|
+
<label for="focusedTextarea">Comment</label>
|
|
605
|
+
<textarea class="form-control" id="focusedTextarea" rows="5">
|
|
498
606
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas a blandit quam, at aliquam eros. Ut faucibus odio justo, maximus facilisis ante tempus et. Suspendisse quis mauris id metus fermentum lacinia at id magna. Phasellus ullamcorper risus nunc, et efficitur enim efficitur varius. Sed auctor cursus arcu, vel ullamcorper purus bibendum non. Integer elementum, lacus sed ullamcorper vehicula, urna ipsum tristique nulla, eu vulputate libero risus eget lorem. Fusce sollicitudin justo arcu, sit amet pulvinar mauris faucibus vel. Fusce lectus enim, auctor ac ex ut, egestas tempor ipsum. Donec ligula tellus, tempor sit amet tellus quis, euismod elementum risus. Nullam tincidunt lectus non augue iaculis pellentesque. Vivamus eu sem et arcu varius aliquam. Nulla non ante sit amet magna blandit sagittis. Cras eleifend ex eget volutpat tristique.
|
|
499
|
-
|
|
500
|
-
|
|
501
|
-
|
|
607
|
+
</textarea>
|
|
608
|
+
</div>
|
|
609
|
+
</form>
|
|
610
|
+
</div>
|
|
502
611
|
</div>
|
|
503
612
|
|
|
504
613
|
~~~ html
|
|
@@ -515,27 +624,33 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas a blandit quam
|
|
|
515
624
|
</div>
|
|
516
625
|
~~~
|
|
517
626
|
|
|
518
|
-
<div class="
|
|
519
|
-
<
|
|
520
|
-
|
|
521
|
-
</div>
|
|
627
|
+
<div class="example">
|
|
628
|
+
<div class="sheet-header">
|
|
629
|
+
<h3 id="forms-example-filled">Filled state</h3>
|
|
630
|
+
</div>
|
|
522
631
|
|
|
523
|
-
|
|
632
|
+
<div class="bs-callout bs-callout-info">
|
|
633
|
+
<h4>Demo filled state</h4>
|
|
634
|
+
<p>The above example forces the <code>filled</code> class normally set by javascript on the
|
|
635
|
+
<code>.form-froup</code> parent to demonstrate the filled state on a
|
|
636
|
+
<code>.form-group .form-control</code>.</p>
|
|
637
|
+
</div>
|
|
524
638
|
|
|
525
|
-
<div class="example">
|
|
526
|
-
|
|
527
|
-
|
|
528
|
-
|
|
529
|
-
|
|
530
|
-
|
|
531
|
-
|
|
532
|
-
|
|
533
|
-
|
|
534
|
-
|
|
639
|
+
<div class="bs-example bs-sheet" data-example-id="forms-example-filled">
|
|
640
|
+
<form>
|
|
641
|
+
<div class="form-group filled">
|
|
642
|
+
<label for="filledInput">Filled state</label>
|
|
643
|
+
<input class="form-control" id="filledInput" type="text"
|
|
644
|
+
value="Demonstrative filled state">
|
|
645
|
+
</div>
|
|
646
|
+
<div class="form-group filled">
|
|
647
|
+
<label for="filledTextarea">Comment</label>
|
|
648
|
+
<textarea class="form-control" id="filledTextarea" rows="5">
|
|
535
649
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas a blandit quam, at aliquam eros. Ut faucibus odio justo, maximus facilisis ante tempus et. Suspendisse quis mauris id metus fermentum lacinia at id magna. Phasellus ullamcorper risus nunc, et efficitur enim efficitur varius. Sed auctor cursus arcu, vel ullamcorper purus bibendum non. Integer elementum, lacus sed ullamcorper vehicula, urna ipsum tristique nulla, eu vulputate libero risus eget lorem. Fusce sollicitudin justo arcu, sit amet pulvinar mauris faucibus vel. Fusce lectus enim, auctor ac ex ut, egestas tempor ipsum. Donec ligula tellus, tempor sit amet tellus quis, euismod elementum risus. Nullam tincidunt lectus non augue iaculis pellentesque. Vivamus eu sem et arcu varius aliquam. Nulla non ante sit amet magna blandit sagittis. Cras eleifend ex eget volutpat tristique.
|
|
536
|
-
|
|
537
|
-
|
|
538
|
-
|
|
650
|
+
</textarea>
|
|
651
|
+
</div>
|
|
652
|
+
</form>
|
|
653
|
+
</div>
|
|
539
654
|
</div>
|
|
540
655
|
|
|
541
656
|
~~~ html
|
|
@@ -552,48 +667,48 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas a blandit quam
|
|
|
552
667
|
</div>
|
|
553
668
|
~~~
|
|
554
669
|
|
|
555
|
-
<div class="
|
|
556
|
-
<
|
|
557
|
-
|
|
558
|
-
</div>
|
|
559
|
-
|
|
560
|
-
## Disabled state
|
|
670
|
+
<div class="example">
|
|
671
|
+
<div class="sheet-header">
|
|
672
|
+
<h3 id="forms-example-disabled">Disabled state</h3>
|
|
673
|
+
</div>
|
|
561
674
|
|
|
562
|
-
Add the
|
|
675
|
+
<p>Add the <code>disabled</code> boolean attribute on an input to prevent user interactions.
|
|
676
|
+
Disabled inputs appear lighter and add a <code>not-allowed</code> cursor.</p>
|
|
563
677
|
|
|
564
|
-
<div class="example">
|
|
565
|
-
|
|
566
|
-
|
|
567
|
-
|
|
568
|
-
|
|
569
|
-
|
|
570
|
-
|
|
571
|
-
|
|
572
|
-
|
|
573
|
-
|
|
574
|
-
|
|
575
|
-
|
|
576
|
-
|
|
577
|
-
|
|
678
|
+
<div class="bs-example bs-sheet" data-example-id="forms-example-disabled">
|
|
679
|
+
<form>
|
|
680
|
+
<div class="form-group">
|
|
681
|
+
<label for="disabledInput">Disabled state</label>
|
|
682
|
+
<input class="form-control" id="disabledInput" type="text"
|
|
683
|
+
value="Disabled input here…" disabled>
|
|
684
|
+
</div>
|
|
685
|
+
<div class="form-group">
|
|
686
|
+
<label for="disabledEmptyInput">Disabled state on empty input</label>
|
|
687
|
+
<input class="form-control" id="disabledEmptyInput" type="text" disabled>
|
|
688
|
+
</div>
|
|
689
|
+
<div class="form-group">
|
|
690
|
+
<label for="disabledTextarea">Disabled comment</label>
|
|
691
|
+
<textarea class="form-control" id="disabledTextarea" rows="5" disabled>
|
|
578
692
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas a blandit quam, at aliquam eros. Ut faucibus odio justo, maximus facilisis ante tempus et. Suspendisse quis mauris id metus fermentum lacinia at id magna. Phasellus ullamcorper risus nunc, et efficitur enim efficitur varius. Sed auctor cursus arcu, vel ullamcorper purus bibendum non. Integer elementum, lacus sed ullamcorper vehicula, urna ipsum tristique nulla, eu vulputate libero risus eget lorem. Fusce sollicitudin justo arcu, sit amet pulvinar mauris faucibus vel. Fusce lectus enim, auctor ac ex ut, egestas tempor ipsum. Donec ligula tellus, tempor sit amet tellus quis, euismod elementum risus. Nullam tincidunt lectus non augue iaculis pellentesque. Vivamus eu sem et arcu varius aliquam. Nulla non ante sit amet magna blandit sagittis. Cras eleifend ex eget volutpat tristique.
|
|
579
|
-
|
|
580
|
-
|
|
581
|
-
|
|
582
|
-
|
|
583
|
-
|
|
584
|
-
|
|
585
|
-
|
|
586
|
-
|
|
587
|
-
|
|
588
|
-
|
|
589
|
-
|
|
590
|
-
|
|
591
|
-
|
|
592
|
-
|
|
593
|
-
|
|
594
|
-
|
|
595
|
-
|
|
596
|
-
|
|
693
|
+
</textarea>
|
|
694
|
+
</div>
|
|
695
|
+
<div class="form-group">
|
|
696
|
+
<label for="disabledEmptyTextarea">Disabled comment on empty textarea</label>
|
|
697
|
+
<textarea class="form-control" id="disabledEmptyTextarea" rows="5" disabled ></textarea>
|
|
698
|
+
</div>
|
|
699
|
+
<div class="form-group">
|
|
700
|
+
<label for="disabledSelect">Disabled select menu</label>
|
|
701
|
+
<select id="disabledSelect" class="form-control" disabled>
|
|
702
|
+
<option>Disabled select</option>
|
|
703
|
+
</select>
|
|
704
|
+
</div>
|
|
705
|
+
<div class="checkbox">
|
|
706
|
+
<label>
|
|
707
|
+
<input type="checkbox" disabled> Can't check this
|
|
708
|
+
</label>
|
|
709
|
+
</div>
|
|
710
|
+
</form>
|
|
711
|
+
</div>
|
|
597
712
|
</div>
|
|
598
713
|
|
|
599
714
|
~~~ html
|
|
@@ -629,56 +744,74 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas a blandit quam
|
|
|
629
744
|
</div>
|
|
630
745
|
~~~
|
|
631
746
|
|
|
632
|
-
|
|
633
|
-
|
|
634
|
-
|
|
747
|
+
<div class="example">
|
|
748
|
+
<div class="sheet-header">
|
|
749
|
+
<h3 id="forms-example-disabled-fieldsets">Disabled fieldsets</h3>
|
|
750
|
+
</div>
|
|
635
751
|
|
|
636
|
-
<
|
|
637
|
-
|
|
638
|
-
|
|
639
|
-
|
|
752
|
+
<p>Add the <code>disabled</code> attribute to a <code><fieldset></code> to disable all
|
|
753
|
+
the controls within the <code><fieldset></code> at once.</p>
|
|
754
|
+
|
|
755
|
+
<div class="bs-callout bs-callout-warning">
|
|
756
|
+
<h4>Caveat about link functionality of <code><a></code></h4>
|
|
757
|
+
<p>By default, browsers will treat all native form controls (<code><input></code>,
|
|
758
|
+
<code><select></code> and `<code><button></code>` elements) inside a
|
|
759
|
+
<code><fieldset disabled></code> as disabled, preventing both keyboard and mouse
|
|
760
|
+
interactions on them. However, if your form also includes
|
|
761
|
+
<code><a ... class="btn btn-*"></code> elements, these will only be given a style
|
|
762
|
+
of <code>pointer-events: none</code>. As noted in the section about
|
|
763
|
+
<a href="#buttons-disabled">disabled state for buttons</a> (and specifically in the
|
|
764
|
+
sub-section for anchor elements), this CSS property is not yet standardized and isn't
|
|
765
|
+
fully supported in Opera 18 and below, or in Internet Explorer 11, and won't prevent
|
|
766
|
+
keyboard users from being able to focus or activate these links. So to be safe, use
|
|
767
|
+
custom JavaScript to disable such links.</p>
|
|
768
|
+
</div>
|
|
640
769
|
|
|
641
|
-
<div class="bs-callout bs-callout-danger">
|
|
642
|
-
|
|
643
|
-
|
|
644
|
-
</
|
|
770
|
+
<div class="bs-callout bs-callout-danger">
|
|
771
|
+
<h4>Cross-browser compatibility</h4>
|
|
772
|
+
<p>While Bootstrap will apply these styles in all browsers, Internet Explorer 11 and below
|
|
773
|
+
don't fully support the <code>disabled</code> attribute on a <code><fieldset></code>.
|
|
774
|
+
Use custom JavaScript to disable the fieldset in these browsers.</p>
|
|
775
|
+
</div>
|
|
645
776
|
|
|
646
|
-
<div class="example">
|
|
647
|
-
|
|
648
|
-
|
|
649
|
-
|
|
650
|
-
|
|
651
|
-
|
|
652
|
-
|
|
653
|
-
|
|
654
|
-
<
|
|
655
|
-
|
|
656
|
-
|
|
657
|
-
|
|
658
|
-
<
|
|
659
|
-
|
|
777
|
+
<div class="bs-example bs-sheet" data-example-id="forms-example-disabled-fieldsets">
|
|
778
|
+
<form>
|
|
779
|
+
<fieldset disabled>
|
|
780
|
+
<div class="form-group">
|
|
781
|
+
<label for="disabledInputFromFieldset">Disabled state</label>
|
|
782
|
+
<input class="form-control" id="disabledInputFromFieldset" type="text"
|
|
783
|
+
value="Disabled input here…">
|
|
784
|
+
</div>
|
|
785
|
+
<div class="form-group">
|
|
786
|
+
<label for="disabledEmptyInputFromFieldset">Disabled state on empty input</label>
|
|
787
|
+
<input class="form-control" id="disabledEmptyInputFromFieldset" type="text">
|
|
788
|
+
</div>
|
|
789
|
+
<div class="form-group">
|
|
790
|
+
<label for="disabledTextareaFromFieldset">Disabled comment</label>
|
|
791
|
+
<textarea class="form-control" id="disabledTextareaFromFieldset" rows="5">
|
|
660
792
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas a blandit quam, at aliquam eros. Ut faucibus odio justo, maximus facilisis ante tempus et. Suspendisse quis mauris id metus fermentum lacinia at id magna. Phasellus ullamcorper risus nunc, et efficitur enim efficitur varius. Sed auctor cursus arcu, vel ullamcorper purus bibendum non. Integer elementum, lacus sed ullamcorper vehicula, urna ipsum tristique nulla, eu vulputate libero risus eget lorem. Fusce sollicitudin justo arcu, sit amet pulvinar mauris faucibus vel. Fusce lectus enim, auctor ac ex ut, egestas tempor ipsum. Donec ligula tellus, tempor sit amet tellus quis, euismod elementum risus. Nullam tincidunt lectus non augue iaculis pellentesque. Vivamus eu sem et arcu varius aliquam. Nulla non ante sit amet magna blandit sagittis. Cras eleifend ex eget volutpat tristique.
|
|
661
|
-
|
|
662
|
-
|
|
663
|
-
|
|
664
|
-
|
|
665
|
-
|
|
666
|
-
|
|
667
|
-
|
|
668
|
-
|
|
669
|
-
|
|
670
|
-
|
|
671
|
-
|
|
672
|
-
|
|
673
|
-
|
|
674
|
-
|
|
675
|
-
|
|
676
|
-
|
|
677
|
-
|
|
678
|
-
|
|
679
|
-
|
|
680
|
-
|
|
681
|
-
|
|
793
|
+
</textarea>
|
|
794
|
+
</div>
|
|
795
|
+
<div class="form-group">
|
|
796
|
+
<label for="disabledEmptyTextareaFromFieldset">Disabled comment on empty textarea</label>
|
|
797
|
+
<textarea class="form-control" id="disabledEmptyTextareaFromFieldset"
|
|
798
|
+
rows="5" disabled></textarea>
|
|
799
|
+
</div>
|
|
800
|
+
<div class="form-group">
|
|
801
|
+
<label for="disabledSelectFromFieldset">Disabled select menu</label>
|
|
802
|
+
<select id="disabledSelectFromFieldset" class="form-control">
|
|
803
|
+
<option>Disabled select</option>
|
|
804
|
+
</select>
|
|
805
|
+
</div>
|
|
806
|
+
<div class="checkbox">
|
|
807
|
+
<label>
|
|
808
|
+
<input type="checkbox"> Can't check this
|
|
809
|
+
</label>
|
|
810
|
+
</div>
|
|
811
|
+
<button type="submit" class="btn btn-primary">Submit</button>
|
|
812
|
+
</fieldset>
|
|
813
|
+
</form>
|
|
814
|
+
</div>
|
|
682
815
|
</div>
|
|
683
816
|
|
|
684
817
|
~~~ html
|
|
@@ -719,32 +852,38 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas a blandit quam
|
|
|
719
852
|
</form>
|
|
720
853
|
~~~
|
|
721
854
|
|
|
722
|
-
|
|
855
|
+
<div class="example">
|
|
856
|
+
<div class="sheet-header">
|
|
857
|
+
<h3 id="forms-example-readonly">Readonly state</h3>
|
|
858
|
+
</div>
|
|
723
859
|
|
|
724
|
-
Add the
|
|
860
|
+
<p>Add the <code>readonly</code> boolean attribute on an input to prevent modification of
|
|
861
|
+
the input's value. Read-only inputs appear lighter (just like disabled inputs), but retain
|
|
862
|
+
the standard cursor.</p>
|
|
725
863
|
|
|
726
|
-
<div class="example">
|
|
727
|
-
|
|
728
|
-
|
|
729
|
-
|
|
730
|
-
|
|
731
|
-
|
|
732
|
-
|
|
733
|
-
|
|
734
|
-
|
|
735
|
-
|
|
736
|
-
|
|
737
|
-
|
|
738
|
-
|
|
739
|
-
|
|
864
|
+
<div class="bs-example bs-sheet" data-example-id="forms-example-readonly">
|
|
865
|
+
<form>
|
|
866
|
+
<div class="form-group">
|
|
867
|
+
<label for="readonlyInput">Readonly state</label>
|
|
868
|
+
<input class="form-control" id="readonlyInput" type="text"
|
|
869
|
+
value="Readonly input here…" readonly>
|
|
870
|
+
</div>
|
|
871
|
+
<div class="form-group">
|
|
872
|
+
<label for="readonlyEmptyInput">Readonly state on empty input</label>
|
|
873
|
+
<input class="form-control" id="readonlyEmptyInput" type="text" readonly>
|
|
874
|
+
</div>
|
|
875
|
+
<div class="form-group">
|
|
876
|
+
<label for="readonlyTextarea">Readonly comment</label>
|
|
877
|
+
<textarea class="form-control" id="readonlyTextarea" rows="5" readonly>
|
|
740
878
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas a blandit quam, at aliquam eros. Ut faucibus odio justo, maximus facilisis ante tempus et. Suspendisse quis mauris id metus fermentum lacinia at id magna. Phasellus ullamcorper risus nunc, et efficitur enim efficitur varius. Sed auctor cursus arcu, vel ullamcorper purus bibendum non. Integer elementum, lacus sed ullamcorper vehicula, urna ipsum tristique nulla, eu vulputate libero risus eget lorem. Fusce sollicitudin justo arcu, sit amet pulvinar mauris faucibus vel. Fusce lectus enim, auctor ac ex ut, egestas tempor ipsum. Donec ligula tellus, tempor sit amet tellus quis, euismod elementum risus. Nullam tincidunt lectus non augue iaculis pellentesque. Vivamus eu sem et arcu varius aliquam. Nulla non ante sit amet magna blandit sagittis. Cras eleifend ex eget volutpat tristique.
|
|
741
|
-
|
|
742
|
-
|
|
743
|
-
|
|
744
|
-
|
|
745
|
-
|
|
746
|
-
|
|
747
|
-
|
|
879
|
+
</textarea>
|
|
880
|
+
</div>
|
|
881
|
+
<div class="form-group">
|
|
882
|
+
<label for="readonlyEmptyTextarea">Readonly comment on empty textarea</label>
|
|
883
|
+
<textarea class="form-control" id="readonlyEmptyTextarea" rows="5" readonly></textarea>
|
|
884
|
+
</div>
|
|
885
|
+
</form>
|
|
886
|
+
</div>
|
|
748
887
|
</div>
|
|
749
888
|
|
|
750
889
|
~~~ html
|
|
@@ -769,24 +908,31 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas a blandit quam
|
|
|
769
908
|
</div>
|
|
770
909
|
~~~
|
|
771
910
|
|
|
911
|
+
<div class="example">
|
|
912
|
+
<div class="sheet-header">
|
|
913
|
+
<h3 id="forms-example-help-text">Help text</h3>
|
|
914
|
+
</div>
|
|
772
915
|
|
|
773
|
-
|
|
774
|
-
|
|
775
|
-
Block level help text for form controls.
|
|
916
|
+
<p>Block level help text for form controls.</p>
|
|
776
917
|
|
|
777
|
-
<div class="bs-callout bs-callout-info">
|
|
778
|
-
|
|
779
|
-
|
|
780
|
-
</
|
|
918
|
+
<div class="bs-callout bs-callout-info">
|
|
919
|
+
<h4>Associating help text with form controls</h4>
|
|
920
|
+
<p>Help text should be explicitly associated with the form control it relates to using the
|
|
921
|
+
<code>aria-describedby</code> attribute. This will ensure that assistive technologies – such
|
|
922
|
+
as screen readers – will announce this help text when the user focuses or enters the
|
|
923
|
+
control.</p>
|
|
924
|
+
</div>
|
|
781
925
|
|
|
782
|
-
<div class="example">
|
|
783
|
-
|
|
784
|
-
|
|
785
|
-
|
|
786
|
-
|
|
787
|
-
|
|
788
|
-
|
|
789
|
-
|
|
926
|
+
<div class="bs-example bs-sheet" data-example-id="forms-example-help-text">
|
|
927
|
+
<form>
|
|
928
|
+
<div class="form-group">
|
|
929
|
+
<label for="inputHelpBlock">Input with help text</label>
|
|
930
|
+
<input type="text" id="inputHelpBlock" class="form-control" aria-describedby="helpBlock">
|
|
931
|
+
</div>
|
|
932
|
+
<span id="helpBlock" class="help-block">A block of help text that breaks onto a new line
|
|
933
|
+
and may extend beyond one line.</span>
|
|
934
|
+
</form>
|
|
935
|
+
</div>
|
|
790
936
|
</div>
|
|
791
937
|
|
|
792
938
|
~~~ html
|
|
@@ -796,56 +942,58 @@ Block level help text for form controls.
|
|
|
796
942
|
<span id="helpBlock" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
|
|
797
943
|
~~~
|
|
798
944
|
|
|
799
|
-
## Validation states
|
|
800
|
-
|
|
801
|
-
Bootstrap includes validation styles for error, warning, and success states on form controls. To use, add `.has-warning`, `.has-error`, or `.has-success` to the parent element. Any `.control-label`, `.form-control`, and `.help-block` within that element will receive the validation styles.
|
|
802
|
-
|
|
803
|
-
<div class="bs-callout bs-callout-warning">
|
|
804
|
-
<h4>Conveying validation state to assistive technologies and colorblind users</h4>
|
|
805
|
-
<p>Using these validation styles to denote the state of a form control only provides a visual, color-based indication, which will not be conveyed to users of assistive technologies - such as screen readers - or to colorblind users.</p>
|
|
806
|
-
<p>Ensure that an alternative indication of state is also provided. For instance, you can include a hint about state in the form control's <code><label></code> text itself (as is the case in the following code example), include a <a href="../components/#glyphicons">Glyphicon</a> (with appropriate alternative text using the <code>.sr-only</code> class - see the <a href="../components/#glyphicons-examples">Glyphicon examples</a>), or by providing an additional <a href="#forms-help-text">help text</a> block. Specifically for assistive technologies, invalid form controls can also be assigned an <code>aria-invalid="true"</code> attribute.</p>
|
|
807
|
-
</div>
|
|
808
|
-
|
|
809
945
|
<div class="example">
|
|
810
|
-
<
|
|
811
|
-
<
|
|
812
|
-
|
|
813
|
-
|
|
814
|
-
|
|
815
|
-
|
|
816
|
-
|
|
817
|
-
|
|
818
|
-
|
|
819
|
-
|
|
820
|
-
<
|
|
821
|
-
<
|
|
822
|
-
|
|
823
|
-
|
|
824
|
-
|
|
825
|
-
|
|
826
|
-
<label>
|
|
827
|
-
<input type="checkbox" id="checkboxSuccess" value="option1">
|
|
828
|
-
Checkbox with success
|
|
829
|
-
</label>
|
|
946
|
+
<div class="sheet-header">
|
|
947
|
+
<h3 id="forms-example-validation">Validation states</h3>
|
|
948
|
+
</div>
|
|
949
|
+
|
|
950
|
+
<p>Bootstrap includes validation styles for error, warning, and success states on form controls.
|
|
951
|
+
To use, add <code>.has-warning</code>, <code>.has-error</code>, or <code>.has-success</code>
|
|
952
|
+
to the parent element. Any <code>.control-label</code>, <code>.form-control</code>, and
|
|
953
|
+
<code>.help-block</code> within that element will receive the validation styles.</p>
|
|
954
|
+
|
|
955
|
+
<div class="bs-example bs-sheet" data-example-id="forms-example-validation">
|
|
956
|
+
<form>
|
|
957
|
+
<div class="form-group has-success">
|
|
958
|
+
<label class="control-label" for="inputSuccess1">Input with success</label>
|
|
959
|
+
<input type="text" class="form-control" id="inputSuccess1" aria-describedby ="helpBlock2">
|
|
960
|
+
<span id="helpBlock2" class="help-block">A block of help text that breaks onto a new
|
|
961
|
+
line and may extend beyond one line.</span>
|
|
830
962
|
</div>
|
|
831
|
-
|
|
832
|
-
|
|
833
|
-
|
|
834
|
-
<label>
|
|
835
|
-
<input type="checkbox" id="checkboxWarning" value="option1">
|
|
836
|
-
Checkbox with warning
|
|
837
|
-
</label>
|
|
963
|
+
<div class="form-group has-warning">
|
|
964
|
+
<label class="control-label" for="inputWarning1">Input with warning</label>
|
|
965
|
+
<input type="text" class="form-control" id="inputWarning1">
|
|
838
966
|
</div>
|
|
839
|
-
|
|
840
|
-
|
|
841
|
-
|
|
842
|
-
<label>
|
|
843
|
-
<input type="checkbox" id="checkboxError" value="option1">
|
|
844
|
-
Checkbox with error
|
|
845
|
-
</label>
|
|
967
|
+
<div class="form-group has-error">
|
|
968
|
+
<label class="control-label" for="inputError1">Input with error</label>
|
|
969
|
+
<input type="text" class="form-control" id="inputError1">
|
|
846
970
|
</div>
|
|
847
|
-
|
|
848
|
-
|
|
971
|
+
<div class="has-success">
|
|
972
|
+
<div class="checkbox">
|
|
973
|
+
<label>
|
|
974
|
+
<input type="checkbox" id="checkboxSuccess" value="option1">
|
|
975
|
+
Checkbox with success
|
|
976
|
+
</label>
|
|
977
|
+
</div>
|
|
978
|
+
</div>
|
|
979
|
+
<div class="has-warning">
|
|
980
|
+
<div class="checkbox">
|
|
981
|
+
<label>
|
|
982
|
+
<input type="checkbox" id="checkboxWarning" value="option1">
|
|
983
|
+
Checkbox with warning
|
|
984
|
+
</label>
|
|
985
|
+
</div>
|
|
986
|
+
</div>
|
|
987
|
+
<div class="has-error">
|
|
988
|
+
<div class="checkbox">
|
|
989
|
+
<label>
|
|
990
|
+
<input type="checkbox" id="checkboxError" value="option1">
|
|
991
|
+
Checkbox with error
|
|
992
|
+
</label>
|
|
993
|
+
</div>
|
|
994
|
+
</div>
|
|
995
|
+
</form>
|
|
996
|
+
</div>
|
|
849
997
|
</div>
|
|
850
998
|
|
|
851
999
|
~~~ html
|
|
@@ -888,52 +1036,67 @@ Bootstrap includes validation styles for error, warning, and success states on f
|
|
|
888
1036
|
</div>
|
|
889
1037
|
~~~
|
|
890
1038
|
|
|
891
|
-
|
|
1039
|
+
<div class="example">
|
|
1040
|
+
<div class="sheet-header">
|
|
1041
|
+
<h3 id="forms-example-validation-with-icons">Validation with optional icons</h3>
|
|
1042
|
+
</div>
|
|
892
1043
|
|
|
893
|
-
You can also add optional feedback icons with the addition of
|
|
1044
|
+
<p>You can also add optional feedback icons with the addition of <code>.has-feedback</code>
|
|
1045
|
+
and the right icon.</p>
|
|
894
1046
|
|
|
895
|
-
<
|
|
1047
|
+
<div class="bs-callout bs-callout-danger">
|
|
1048
|
+
<h4>Requirements</h4>
|
|
1049
|
+
<p>Feedback icons only work with textual <code><input class="form-control"></code>
|
|
1050
|
+
elements.</p>
|
|
1051
|
+
</div>
|
|
896
1052
|
|
|
897
|
-
<div class="bs-callout bs-callout-warning">
|
|
898
|
-
|
|
899
|
-
|
|
900
|
-
</
|
|
901
|
-
|
|
902
|
-
|
|
903
|
-
|
|
904
|
-
|
|
905
|
-
|
|
1053
|
+
<div class="bs-callout bs-callout-warning">
|
|
1054
|
+
<h4>Icons, labels, and input groups</h4>
|
|
1055
|
+
<p>Manual positioning of feedback icons is required for inputs without a label and for
|
|
1056
|
+
<a href="/css#input-groups">input groups</a> with an add-on on the right. You are strongly
|
|
1057
|
+
encouraged to provide labels for all inputs for accessibility reasons. If you wish to prevent
|
|
1058
|
+
labels from being displayed, hide them with the <code>.sr-only</code> class. If you must do
|
|
1059
|
+
without labels, adjust the <code>top</code> value of the feedback icon. For input groups,
|
|
1060
|
+
adjust the <code>right</code> value to an appropriate pixel value depending on the width of
|
|
1061
|
+
your addon.</p>
|
|
1062
|
+
</div>
|
|
906
1063
|
|
|
907
|
-
<div class="example">
|
|
908
|
-
|
|
909
|
-
|
|
910
|
-
|
|
911
|
-
|
|
912
|
-
|
|
913
|
-
|
|
914
|
-
|
|
915
|
-
<div class="form-group has-warning has-feedback">
|
|
916
|
-
<label class="control-label" for="inputWarning2">Input with warning</label>
|
|
917
|
-
<input type="text" class="form-control" id="inputWarning2" aria-describedby="inputWarning2Status">
|
|
918
|
-
<span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
|
|
919
|
-
<span id="inputWarning2Status" class="sr-only">(warning)</span>
|
|
920
|
-
</div>
|
|
921
|
-
<div class="form-group has-error has-feedback">
|
|
922
|
-
<label class="control-label" for="inputError2">Input with error</label>
|
|
923
|
-
<input type="text" class="form-control" id="inputError2" aria-describedby="inputError2Status">
|
|
924
|
-
<span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
|
|
925
|
-
<span id="inputError2Status" class="sr-only">(error)</span>
|
|
926
|
-
</div>
|
|
927
|
-
<div class="form-group has-success has-feedback">
|
|
928
|
-
<div class="input-group">
|
|
929
|
-
<span class="input-group-addon">@</span>
|
|
930
|
-
<label class="control-label" for="inputGroupSuccess1">Input group with success</label>
|
|
931
|
-
<input type="text" class="form-control" id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status">
|
|
1064
|
+
<div class="bs-example bs-sheet" data-example-id="forms-example-validation-with-icons">
|
|
1065
|
+
<form>
|
|
1066
|
+
<div class="form-group has-success has-feedback">
|
|
1067
|
+
<label class="control-label" for="inputSuccess2">Input with success</label>
|
|
1068
|
+
<input type="text" class="form-control" id="inputSuccess2"
|
|
1069
|
+
aria-describedby="inputSuccess2Status">
|
|
1070
|
+
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
|
|
1071
|
+
<span id="inputSuccess2Status" class="sr-only">(success)</span>
|
|
932
1072
|
</div>
|
|
933
|
-
<
|
|
934
|
-
|
|
935
|
-
|
|
936
|
-
|
|
1073
|
+
<div class="form-group has-warning has-feedback">
|
|
1074
|
+
<label class="control-label" for="inputWarning2">Input with warning</label>
|
|
1075
|
+
<input type="text" class="form-control" id="inputWarning2"
|
|
1076
|
+
aria-describedby="inputWarning2Status">
|
|
1077
|
+
<span class="glyphicon glyphicon-warning-sign form-control-feedback"
|
|
1078
|
+
aria-hidden="true"></span>
|
|
1079
|
+
<span id="inputWarning2Status" class="sr-only">(warning)</span>
|
|
1080
|
+
</div>
|
|
1081
|
+
<div class="form-group has-error has-feedback">
|
|
1082
|
+
<label class="control-label" for="inputError2">Input with error</label>
|
|
1083
|
+
<input type="text" class="form-control" id="inputError2"
|
|
1084
|
+
aria-describedby="inputError2Status">
|
|
1085
|
+
<span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
|
|
1086
|
+
<span id="inputError2Status" class="sr-only">(error)</span>
|
|
1087
|
+
</div>
|
|
1088
|
+
<div class="form-group has-success has-feedback">
|
|
1089
|
+
<div class="input-group">
|
|
1090
|
+
<span class="input-group-addon">@</span>
|
|
1091
|
+
<label class="control-label" for="inputGroupSuccess1">Input group with success</label>
|
|
1092
|
+
<input type="text" class="form-control" id="inputGroupSuccess1"
|
|
1093
|
+
aria-describedby="inputGroupSuccess1Status">
|
|
1094
|
+
</div>
|
|
1095
|
+
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
|
|
1096
|
+
<span id="inputGroupSuccess1Status" class="sr-only">(success)</span>
|
|
1097
|
+
</div>
|
|
1098
|
+
</form>
|
|
1099
|
+
</div>
|
|
937
1100
|
</div>
|
|
938
1101
|
|
|
939
1102
|
~~~ html
|
|
@@ -966,34 +1129,43 @@ You can also add optional feedback icons with the addition of `.has-feedback` an
|
|
|
966
1129
|
</div>
|
|
967
1130
|
~~~
|
|
968
1131
|
|
|
969
|
-
|
|
1132
|
+
<div class="example">
|
|
1133
|
+
<div class="sheet-header">
|
|
1134
|
+
<h3 id="forms-example-validation-with-icons-horizontal-inline">
|
|
1135
|
+
Validation with optional icons in horizontal and inline forms
|
|
1136
|
+
</h3>
|
|
1137
|
+
</div>
|
|
970
1138
|
|
|
971
|
-
<div class="bs-callout bs-callout-info">
|
|
972
|
-
|
|
973
|
-
|
|
974
|
-
</div>
|
|
1139
|
+
<div class="bs-callout bs-callout-info">
|
|
1140
|
+
<h4>Not Recommended</h4>
|
|
1141
|
+
<p>BookingSync UI Kit does not recommend using horizontal forms.</p>
|
|
1142
|
+
</div>
|
|
975
1143
|
|
|
976
|
-
<div class="example"
|
|
977
|
-
|
|
978
|
-
<
|
|
979
|
-
<
|
|
980
|
-
|
|
981
|
-
|
|
982
|
-
|
|
983
|
-
|
|
984
|
-
|
|
985
|
-
<br>
|
|
986
|
-
<form class="form-inline">
|
|
987
|
-
<div class="form-group has-success has-feedback">
|
|
988
|
-
<div class="input-group">
|
|
989
|
-
<span class="input-group-addon">@</span>
|
|
990
|
-
<label class="control-label" for="inputGroupSuccess3">Input group with success</label>
|
|
991
|
-
<input type="text" class="form-control" id="inputGroupSuccess3" aria-describedby="inputGroupSuccess3Status">
|
|
1144
|
+
<div class="bs-example bs-sheet"
|
|
1145
|
+
data-example-id="forms-example-validation-with-icons-horizontal-inline">
|
|
1146
|
+
<form class="form-inline">
|
|
1147
|
+
<div class="form-group has-success has-feedback">
|
|
1148
|
+
<label class="control-label" for="inputSuccess4">Input with success</label>
|
|
1149
|
+
<input type="text" class="form-control" id="inputSuccess4"
|
|
1150
|
+
aria-describedby="inputSuccess4Status">
|
|
1151
|
+
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden=" true"></span>
|
|
1152
|
+
<span id="inputSuccess4Status" class="sr-only">(success)</span>
|
|
992
1153
|
</div>
|
|
993
|
-
|
|
994
|
-
|
|
995
|
-
|
|
996
|
-
|
|
1154
|
+
</form>
|
|
1155
|
+
<br>
|
|
1156
|
+
<form class="form-inline">
|
|
1157
|
+
<div class="form-group has-success has-feedback">
|
|
1158
|
+
<div class="input-group">
|
|
1159
|
+
<span class="input-group-addon">@</span>
|
|
1160
|
+
<label class="control-label" for="inputGroupSuccess3">Input group with success</label>
|
|
1161
|
+
<input type="text" class="form-control" id="inputGroupSuccess3"
|
|
1162
|
+
aria-describedby="inputGroupSuccess3Status">
|
|
1163
|
+
</div>
|
|
1164
|
+
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
|
|
1165
|
+
<span id="inputGroupSuccess3Status" class="sr-only">(success)</span>
|
|
1166
|
+
</div>
|
|
1167
|
+
</form>
|
|
1168
|
+
</div>
|
|
997
1169
|
</div>
|
|
998
1170
|
|
|
999
1171
|
~~~ html
|
|
@@ -1018,72 +1190,33 @@ You can also add optional feedback icons with the addition of `.has-feedback` an
|
|
|
1018
1190
|
</form>
|
|
1019
1191
|
~~~
|
|
1020
1192
|
|
|
1021
|
-
#### Optional icons with hidden `.sr-only` labels
|
|
1022
|
-
|
|
1023
|
-
If you use the `.sr-only` class to hide a form control's `<label>` (rather than using other labelling options, such as the `aria-label` attribute), Bootstrap will automatically adjust the position of the icon once it's been added.
|
|
1024
|
-
|
|
1025
1193
|
<div class="example">
|
|
1026
|
-
<div class="
|
|
1027
|
-
<
|
|
1028
|
-
<input type="text" class="form-control" id="inputSuccess5" aria-describedby=" inputSuccess5Status" placeholder="Placeholder">
|
|
1029
|
-
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true" ></span>
|
|
1030
|
-
<span id="inputSuccess5Status" class="sr-only">(success)</span>
|
|
1194
|
+
<div class="sheet-header">
|
|
1195
|
+
<h3 id="forms-example-height-sizing">Height sizing</h3>
|
|
1031
1196
|
</div>
|
|
1032
|
-
<div class="form-group has-success has-feedback">
|
|
1033
|
-
<label class="control-label sr-only" for="inputGroupSuccess4">Input group with success</label>
|
|
1034
|
-
<div class="input-group">
|
|
1035
|
-
<span class="input-group-addon">@</span>
|
|
1036
|
-
<input type="text" class="form-control" id="inputGroupSuccess4" aria-describedby="inputGroupSuccess4Status" placeholder="Placeholder">
|
|
1037
|
-
</div>
|
|
1038
|
-
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
|
|
1039
|
-
<span id="inputGroupSuccess4Status" class="sr-only">(success)</span>
|
|
1040
|
-
</div>
|
|
1041
|
-
</div>
|
|
1042
1197
|
|
|
1043
|
-
|
|
1044
|
-
|
|
1045
|
-
<label class="control-label sr-only" for="inputSuccess5">Hidden label</label>
|
|
1046
|
-
<input type="text" class="form-control" id="inputSuccess5" aria-describedby="inputSuccess5Status">
|
|
1047
|
-
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
|
|
1048
|
-
<span id="inputSuccess5Status" class="sr-only">(success)</span>
|
|
1049
|
-
</div>
|
|
1050
|
-
<div class="form-group has-success has-feedback">
|
|
1051
|
-
<label class="control-label sr-only" for="inputGroupSuccess4">Input group with success</label>
|
|
1052
|
-
<div class="input-group">
|
|
1053
|
-
<span class="input-group-addon">@</span>
|
|
1054
|
-
<input type="text" class="form-control" id="inputGroupSuccess4" aria-describedby="inputGroupSuccess4Status">
|
|
1055
|
-
</div>
|
|
1056
|
-
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
|
|
1057
|
-
<span id="inputGroupSuccess4Status" class="sr-only">(success)</span>
|
|
1058
|
-
</div>
|
|
1059
|
-
~~~
|
|
1060
|
-
|
|
1061
|
-
## Control sizing
|
|
1062
|
-
|
|
1063
|
-
Set heights using classes like `.input-lg`, and set widths using grid column classes like `.col-lg-*`.
|
|
1064
|
-
|
|
1065
|
-
### Height sizing
|
|
1198
|
+
<p>Set heights using classes like <code>.input-lg</code>. Create taller or shorter form
|
|
1199
|
+
controls that match button sizes.</p>
|
|
1066
1200
|
|
|
1067
|
-
|
|
1201
|
+
<div class="bs-example bs-sheet" data-example-id="forms-example-height-sizing">
|
|
1202
|
+
<form>
|
|
1203
|
+
<div class="controls">
|
|
1204
|
+
<input class="form-control input-lg" type="text" placeholder=".input-lg">
|
|
1205
|
+
<input type="text" class="form-control" placeholder="Default input">
|
|
1206
|
+
<input class="form-control input-sm" type="text" placeholder=".input-sm">
|
|
1068
1207
|
|
|
1069
|
-
<
|
|
1070
|
-
|
|
1071
|
-
|
|
1072
|
-
|
|
1073
|
-
|
|
1074
|
-
|
|
1075
|
-
|
|
1076
|
-
|
|
1077
|
-
|
|
1078
|
-
</
|
|
1079
|
-
|
|
1080
|
-
|
|
1081
|
-
</select>
|
|
1082
|
-
<select class="form-control input-sm">
|
|
1083
|
-
<option value="">.input-sm</option>
|
|
1084
|
-
</select>
|
|
1085
|
-
</div>
|
|
1086
|
-
</form>
|
|
1208
|
+
<select class="form-control input-lg">
|
|
1209
|
+
<option value="">.input-lg</option>
|
|
1210
|
+
</select>
|
|
1211
|
+
<select class="form-control">
|
|
1212
|
+
<option value="">Default select</option>
|
|
1213
|
+
</select>
|
|
1214
|
+
<select class="form-control input-sm">
|
|
1215
|
+
<option value="">.input-sm</option>
|
|
1216
|
+
</select>
|
|
1217
|
+
</div>
|
|
1218
|
+
</form>
|
|
1219
|
+
</div>
|
|
1087
1220
|
</div>
|
|
1088
1221
|
|
|
1089
1222
|
~~~ html
|
|
@@ -1096,31 +1229,40 @@ Create taller or shorter form controls that match button sizes.
|
|
|
1096
1229
|
<select class="form-control input-sm">...</select>
|
|
1097
1230
|
~~~
|
|
1098
1231
|
|
|
1099
|
-
|
|
1232
|
+
<div class="example">
|
|
1233
|
+
<div class="sheet-header">
|
|
1234
|
+
<h3 id="forms-example-horizontal-group-sizes">Horizontal form group sizes</h3>
|
|
1235
|
+
</div>
|
|
1100
1236
|
|
|
1101
|
-
<div class="bs-callout bs-callout-info">
|
|
1102
|
-
|
|
1103
|
-
|
|
1237
|
+
<div class="bs-callout bs-callout-info">
|
|
1238
|
+
<h4>Not Recommended</h4>
|
|
1239
|
+
<p>BookingSync UI Kit does not recommend using horizontal forms.</p>
|
|
1240
|
+
</div>
|
|
1104
1241
|
</div>
|
|
1105
1242
|
|
|
1106
|
-
### Column sizing
|
|
1107
|
-
|
|
1108
|
-
Wrap inputs in grid columns, or any custom parent element, to easily enforce desired widths.
|
|
1109
|
-
|
|
1110
1243
|
<div class="example">
|
|
1111
|
-
<
|
|
1112
|
-
<
|
|
1113
|
-
|
|
1114
|
-
|
|
1115
|
-
|
|
1116
|
-
|
|
1117
|
-
|
|
1118
|
-
|
|
1119
|
-
|
|
1120
|
-
|
|
1244
|
+
<div class="sheet-header">
|
|
1245
|
+
<h3 id="forms-example-column-sizing">Column sizing</h3>
|
|
1246
|
+
</div>
|
|
1247
|
+
|
|
1248
|
+
<p>Set widths using grid column classes like <code>.col-lg-*</code>. Wrap inputs in grid columns,
|
|
1249
|
+
or any custom parent element, to easily enforce desired widths.</p>
|
|
1250
|
+
|
|
1251
|
+
<div class="bs-example bs-sheet" data-example-id="forms-example-column-sizing">
|
|
1252
|
+
<form>
|
|
1253
|
+
<div class="row">
|
|
1254
|
+
<div class="col-xs-2">
|
|
1255
|
+
<input type="text" class="form-control" placeholder=".col-xs-2">
|
|
1256
|
+
</div>
|
|
1257
|
+
<div class="col-xs-3">
|
|
1258
|
+
<input type="text" class="form-control" placeholder=".col-xs-3">
|
|
1259
|
+
</div>
|
|
1260
|
+
<div class="col-xs-4">
|
|
1261
|
+
<input type="text" class="form-control" placeholder=".col-xs-4">
|
|
1262
|
+
</div>
|
|
1121
1263
|
</div>
|
|
1122
|
-
</
|
|
1123
|
-
</
|
|
1264
|
+
</form>
|
|
1265
|
+
</div>
|
|
1124
1266
|
</div>
|
|
1125
1267
|
|
|
1126
1268
|
~~~ html
|