mdbootstrap/mdb-ui-kit
1
1
Fork 0
mirror of https://github.com/mdbootstrap/mdb-ui-kit.git synced 2025-02-02 21:04:13 +03:00
Code Issues Packages Projects Releases Wiki Activity

fixed floating label docs

Browse Source
This commit is contained in:
Kevin Ross 2015-12-15 18:34:53 -06:00
parent cd91af205e
commit d95eed487d
2 changed files with 48 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
docs/material-design/forms.md
View File

@ -16,17 +16,17 @@ Bootstrap provides several form control styles, layout options, and custom compo
Form controls flavored by Material Design for Bootstrap customizations such as `mdb-label-floating`. Form controls flavored by Material Design for Bootstrap customizations such as `mdb-label-floating`.
{% example html %} {% example html %}
<form> <form>
<fieldset class="form-group mdb-label-floating"> <fieldset class="form-group">
<label for="exampleInputEmail1">Email address</label> <label for="exampleInputEmail1" class="mdb-label-floating">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email"> <input type="email" class="form-control" id="exampleInputEmail1">
<span class="mdb-help">We'll never share your email with anyone else.</span> <span class="mdb-help">We'll never share your email with anyone else.</span>
</fieldset> </fieldset>
<fieldset class="form-group mdb-label-floating"> <fieldset class="form-group">
<label for="exampleInputPassword1">Password</label> <label for="exampleInputPassword1" class="mdb-label-floating">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"> <input type="password" class="form-control" id="exampleInputPassword1">
</fieldset> </fieldset>
<fieldset class="form-group mdb-label-floating"> <fieldset class="form-group">
<label for="exampleSelect1">Example select</label> <label for="exampleSelect1" class="mdb-label-floating">Example select</label>
<select class="form-control" id="exampleSelect1"> <select class="form-control" id="exampleSelect1">
<option>1</option> <option>1</option>
<option>2</option> <option>2</option>
@ -35,8 +35,8 @@ Form controls flavored by Material Design for Bootstrap customizations such as `
<option>5</option> <option>5</option>
</select> </select>
</fieldset> </fieldset>
<fieldset class="form-group mdb-label-floating"> <fieldset class="form-group">
<label for="exampleSelect2">Example multiple select</label> <label for="exampleSelect2" class="mdb-label-floating">Example multiple select</label>
<select multiple class="form-control" id="exampleSelect2"> <select multiple class="form-control" id="exampleSelect2">
<option>1</option> <option>1</option>
<option>2</option> <option>2</option>
@ -45,12 +45,12 @@ Form controls flavored by Material Design for Bootstrap customizations such as `
<option>5</option> <option>5</option>
</select> </select>
</fieldset> </fieldset>
<fieldset class="form-group mdb-label-floating"> <fieldset class="form-group">
<label for="exampleTextarea">Example textarea</label> <label for="exampleTextarea" class="mdb-label-floating">Example textarea</label>
<textarea class="form-control" id="exampleTextarea" rows="3"></textarea> <textarea class="form-control" id="exampleTextarea" rows="3"></textarea>
</fieldset> </fieldset>
<fieldset class="form-group mdb-label-floating"> <fieldset class="form-group">
<label for="exampleInputFile">File input</label> <label for="exampleInputFile" class="mdb-label-floating">File input</label>
<input type="file" class="form-control-file" id="exampleInputFile"> <input type="file" class="form-control-file" id="exampleInputFile">
<small class="text-muted">This is some placeholder block-level help text for the above input. It's a bit lighter and easily wraps to a new line.</small> <small class="text-muted">This is some placeholder block-level help text for the above input. It's a bit lighter and easily wraps to a new line.</small>
</fieldset> </fieldset>
@ -77,7 +77,8 @@ Form controls flavored by Material Design for Bootstrap customizations such as `
<input type="checkbox"> Check me out <input type="checkbox"> Check me out
</label> </label>
</div> </div>
<button type="submit" class="btn btn-primary">Submit</button> <button class="btn btn-default">Cancel</button>
<button type="submit" class="btn btn-primary btn-raised">Submit</button>
</form> </form>
{% endexample %} {% endexample %}
@ -155,13 +156,13 @@ you may need to wrap your markup in an `.mdb-form-group` to get appropriate focu
{% example html %} {% example html %}
<form> <form>
<fieldset class="form-group mdb-label-floating"> <!-- left unspecified, .mdb-form-group will be automatically added (inspect the code) --> <fieldset class="form-group"> <!-- left unspecified, .mdb-form-group will be automatically added (inspect the code) -->
<label for="formGroupExampleInput">Example label</label> <label for="formGroupExampleInput" class="mdb-label-floating">Example label</label>
<input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input"> <input type="text" class="form-control" id="formGroupExampleInput">
</fieldset> </fieldset>
<fieldset class="form-group mdb-form-group mdb-label-floating"> <!-- manually specified --> <fieldset class="form-group mdb-form-group"> <!-- manually specified -->
<label for="formGroupExampleInput2">Another label</label> <label for="formGroupExampleInput2" class="mdb-label-floating">Another label</label>
<input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input"> <input type="text" class="form-control" id="formGroupExampleInput2">
</fieldset> </fieldset>
</form> </form>
{% endexample %} {% endexample %}
@ -180,13 +181,13 @@ Because of this, you may need to manually address the width and alignment of ind
{% example html %} {% example html %}
<form class="form-inline"> <form class="form-inline">
<div class="form-group mdb-label-floating"> <div class="form-group">
<label for="exampleInputName2">Name</label> <label for="exampleInputName2" class="mdb-label-floating">Name</label>
<input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe"> <input type="text" class="form-control" id="exampleInputName2">
</div> </div>
<div class="form-group mdb-label-floating"> <div class="form-group">
<label for="exampleInputEmail2">Email</label> <label for="exampleInputEmail2" class="mdb-label-floating">Email</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com"> <input type="email" class="form-control" id="exampleInputEmail2">
</div> </div>
<button type="submit" class="btn btn-primary">Send invitation</button> <button type="submit" class="btn btn-primary">Send invitation</button>
</form> </form>

38
docs/material-design/test.md
View File

@ -6,23 +6,25 @@ group: material-design
{% example html %} {% example html %}
<form> <form>
<div class="switch"> <fieldset class="form-group">
<label> <label for="exampleSelect1" class="mdb-label-floating">Example select</label>
<input type="checkbox" checked> <select class="form-control" id="exampleSelect1">
Wi-Fi <option>1</option>
</label> <option>2</option>
</div> <option>3</option>
<div class="switch"> <option>4</option>
<label> <option>5</option>
<input type="checkbox"> </select>
Bluetooth </fieldset>
</label> <fieldset class="form-group">
</div> <label for="exampleSelect2" class="mdb-label-floating">Example multiple select</label>
<div class="switch"> <select multiple class="form-control" id="exampleSelect2">
<label> <option>1</option>
<input type="checkbox" disabled> <option>2</option>
This is disabled <option>3</option>
</label> <option>4</option>
</div> <option>5</option>
</select>
</fieldset>
</form> </form>
{% endexample %} {% endexample %}