From c3d8d0d9a684fd010a7c33633b5bd459decbc956 Mon Sep 17 00:00:00 2001 From: Yan Zhu Date: Sun, 9 Apr 2017 20:26:36 +0800 Subject: Change naming `danger` to `error` --- docs/elements.html | 198 ++++++++++++++++++++++++++--------------------------- 1 file changed, 99 insertions(+), 99 deletions(-) (limited to 'docs/elements.html') diff --git a/docs/elements.html b/docs/elements.html index 2157e6c..85448a3 100644 --- a/docs/elements.html +++ b/docs/elements.html @@ -711,6 +711,43 @@ </form> +

Form sizes

+
+

For smaller or larger input and select controls, you could add the input-sm/input-lg, select-sm/select-lg and label-sm/label-lg classes to the elements.

+
+
+
+ +
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+ +
+
+

Input types

@@ -720,7 +757,7 @@
- +
@@ -791,102 +828,6 @@
-

Form validation styles

-
-

To use form validation styles, add is-success or is-danger class to the controls or add has-success or has-danger class to parent elements. You can use the form-input-hint class to provide form validation success and error messages.

-
-
-
-
- - -

The name is invalid.

-
-
- - -

The email is available.

-
-
-
-
-
-
- -

The option is invalid.

-
-
- -

The option is available.

-
-
-
- - -
<form>
-  <!-- form validation class: has-success -->
-  <div class="form-group has-success">
-    <label class="form-label" for="input-example-1">Name</label>
-    <input class="form-input" type="text" id="input-example-1" placeholder="..." />
-    <p class="form-input-hint">The name is invalid.</p>
-  </div>
-
-  <!-- form validation class: is-success -->
-  <div class="form-group">
-    <label class="form-label" for="input-example-1">Name</label>
-    <input class="form-input is-success" type="text" id="input-example-1" placeholder="..." />
-    <p class="form-input-hint">The name is invalid.</p>
-  </div>
-</form>
-
- -

Form sizes

-
-

For smaller or larger input and select controls, you could add the input-sm/input-lg, select-sm/select-lg and label-sm/label-lg classes to the elements.

-
-
-
- -
-
- -
-
- -
-
-
-
- -
-
- -
-
- -
-
-

Input groups

@@ -956,6 +897,65 @@ <input type="text" class="form-input" placeholder="..." /> <button class="btn btn-primary input-group-btn">Submit</button> </div> + + +

Form validation styles

+
+

To use form validation styles, add is-success or is-error class to the controls or add has-success or has-error class to parent elements. You can use the form-input-hint class to provide form validation success and error messages.

+
+
+
+
+ + +

The name is invalid.

+
+
+ + +

The email is available.

+
+
+
+
+
+
+ +

The option is invalid.

+
+
+ +

The option is available.

+
+
+
+ + +
<form>
+  <!-- form validation class: has-success -->
+  <div class="form-group has-success">
+    <label class="form-label" for="input-example-1">Name</label>
+    <input class="form-input" type="text" id="input-example-1" placeholder="..." />
+    <p class="form-input-hint">The name is invalid.</p>
+  </div>
+
+  <!-- form validation class: is-success -->
+  <div class="form-group">
+    <label class="form-label" for="input-example-1">Name</label>
+    <input class="form-input is-success" type="text" id="input-example-1" placeholder="..." />
+    <p class="form-input-hint">The name is invalid.</p>
+  </div>
+</form>

Form disabled styles

@@ -1271,11 +1271,11 @@ primary label success label warning label - danger label + error label
-

Add the label class to <span> or <small> elements. You can add another class label-primary, label-success, label-warning and label-danger for a primary colored label.

+

Add the label class to <span> or <small> elements. You can add another class label-primary, label-success, label-warning and label-error for a primary colored label.

-- cgit v1.3.1-23-gd82d