提交 47ea9b24 编写于 作者: C codecalm

update form controls to newest bootstrap

上级 d926bd48
<div class="form-group">
<div class="mb-2">
<label class="form-label">Static</label>
<div class="form-control-plaintext">Username</div>
</div>
<div class="form-group">
<div class="mb-2">
<label class="form-label">Text</label>
<input type="text" class="form-control" name="example-text-input" placeholder="Text..">
</div>
<div class="form-group">
<div class="mb-2">
<label class="form-label">Disabled</label>
<input type="text" class="form-control" name="example-disabled-input" placeholder="Disabled.."
value="Well, she turned me into a newt." disabled>
</div>
<div class="form-group">
<div class="mb-2">
<label class="form-label">Readonly</label>
<input type="text" class="form-control" name="example-disabled-input" placeholder="Disabled.."
value="Well, how'd you become king, then?" readonly>
</div>
<div class="form-group">
<div class="mb-2">
<label class="form-label">Textarea <span class="float-right text-muted-light">56/100</span></label>
<textarea class="form-control" name="example-textarea-input" rows="6" placeholder="Content..">Oh! Come and see the violence inherent in the system! Help, help, I'm being repressed! We shall say 'Ni' again to you, if you do not appease us. I'm not a witch. I'm not a witch. Camelot!</textarea>
</div>
......@@ -25,7 +25,7 @@
{% include parts/input-color.html %}
<div class="form-group">
<div class="mb-2">
<label class="form-label">Input group</label>
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for&hellip;">
......@@ -34,7 +34,7 @@
</span>
</div>
</div>
<div class="form-group">
<div class="mb-2">
<label class="form-label">Input group buttons</label>
<div class="input-group">
<input type="text" class="form-control">
......@@ -60,7 +60,7 @@
{% include parts/input-icon.html %}
<div class="form-group">
<div class="mb-2">
<label class="form-label">Separated inputs</label>
<div class="row row-xs">
<div class="col">
......@@ -71,7 +71,7 @@
</span>
</div>
</div>
<div class="form-group">
<div class="mb-2">
<label class="form-label">ZIP Code</label>
<div class="row row-sm">
<div class="col">
......
<div class="form-group">
<div class="mb-2">
<label class="form-label">Password</label>
<input type="password" class="form-control" name="example-password-input" placeholder="Password..">
</div>
<div class="form-group">
<div class="mb-2">
<label class="form-label">Valid State</label>
<input type="text" class="form-control is-valid" name="example-text-input-valid"
placeholder="Valid State..">
......@@ -11,7 +11,7 @@
<input type="text" class="form-control mt-3 state-valid" value="Valid state">
</div>
<div class="form-group">
<div class="mb-2">
<label class="form-label">Invalid State</label>
<input type="text" class="form-control is-invalid" name="example-text-input-invalid"
placeholder="Invalid State..">
......@@ -20,42 +20,42 @@
<input type="text" class="form-control mt-3 state-invalid" value="Invalid state">
</div>
<div class="form-group">
<div class="mb-2">
<label class="form-label">Country</label>
<select class="form-control custom-select">
<option value="">Germany</option>
</select>
</div>
<div class="form-group">
<div class="mb-2">
<label class="form-label">Ratios</label>
<input type="range" class="custom-range" step="5" min="0" max="50">
</div>
<div class="form-group">
<div class="mb-2">
<label class="form-label">Size</label>
{% include ui/input-selectgroup.html values="S,M,L,XL,XXL" type="radio" name="size" %}
</div>
<div class="form-group">
<div class="mb-2">
<label class="form-label">Shipping methods</label>
{% include ui/input-selectgroup.html values="Unregistered,Priority Mail,Express Mail" class="selectgroup-vertical" type="radio" name="shipping-method" %}
</div>
<div class="form-group">
<div class="mb-2">
<label class="form-label">Icons input</label>
{% include ui/input-selectgroup.html values="i:smartphone,i:tablet,i:monitor,i:x" class="w-100" type="radio" name="device" %}
</div>
<div class="form-group">
<div class="mb-2">
<label class="form-label">Icon input</label>
{% include ui/input-selectgroup.html values="i:sun,i:moon,i:cloud-rain,i:cloud,Other" class="selectgroup-pills" %}
</div>
<div class="form-group">
<div class="mb-2">
<label class="form-label">Your skills</label>
{% include ui/input-selectgroup.html values="HTML,CSS,PHP,JavaScript" class="selectgroup-pills" %}
</div>
{% include parts/input-toggle.html %}
<div class="form-group">
<div class="mb-2">
<div class="form-label">Toggle switch single</div>
<label class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input">
......@@ -63,7 +63,7 @@
</label>
</div>
<div class="form-group">
<div class="mb-2">
<div class="form-label">Radios</div>
<div class="custom-controls-stacked">
<label class="custom-control custom-radio">
......
<div class="form-group">
<div class="mb-2">
<div class="form-label">Inline Radios</div>
<div class="custom-controls-stacked">
<label class="custom-control custom-radio custom-control-inline">
......@@ -18,7 +18,7 @@
</label>
</div>
</div>
<div class="form-group">
<div class="mb-2">
<div class="form-label">Checkboxes</div>
<div class="custom-controls-stacked">
<label class="custom-control custom-checkbox">
......@@ -43,7 +43,7 @@
</label>
</div>
</div>
<div class="form-group">
<div class="mb-2">
<div class="form-label">Inline Checkboxes</div>
<div>
<label class="custom-control custom-checkbox custom-control-inline">
......@@ -63,7 +63,7 @@
</label>
</div>
</div>
<div class="form-group">
<div class="mb-2">
<div class="form-label">Bootstrap's Custom File Input</div>
<div class="custom-file">
<input type="file" class="custom-file-input" name="example-file-input-custom">
......@@ -71,7 +71,7 @@
</div>
</div>
<div class="form-group">
<div class="mb-2">
<label class="form-label">Date of birth</label>
<div class="row row-xs">
<div class="col-5">
......@@ -109,27 +109,27 @@
</div>
<div class="form-group">
<div class="mb-2">
<label class="form-label">Username</label>
{% include ui/input-group.html prepend="@" placeholder="username" %}
</div>
<div class="form-group">
<div class="mb-2">
<label class="form-label">Subdomain</label>
{% include ui/input-group.html append=".tabler.io" placeholder="subdomain" %}
</div>
<div class="form-group">
<div class="mb-2">
<label class="form-label">Your vanity URL</label>
{% include ui/input-group.html prepend="https://example.com/users/" %}
</div>
<div class="form-group">
<div class="mb-2">
<label class="form-label">Price</label>
{% include ui/input-group.html prepend="$" append=".00" %}
</div>
<div class="form-group">
<div class="mb-2">
<label class="form-label">Button input</label>
<div class="input-group">
<div class="input-group-prepend">
......@@ -149,12 +149,12 @@
</div>
</div>
<div class="form-group">
<div class="mb-2">
<label class="form-label">Tags</label>
<input type="text" class="form-control" id="input-tags" value="aa,bb,cc,dd">
</div>
<div class="form-group">
<div class="mb-2">
<label class="form-label">Beast</label>
<select name="beast" id="select-beast" class="form-control custom-select">
<option value="1">Chuck Testa</option>
......@@ -163,7 +163,7 @@
</select>
</div>
<div class="form-group">
<div class="mb-2">
<label class="form-label">Users list</label>
<select name="user" id="select-users" class="form-control custom-select">
{% for user in site.data.people limit: 10 %}
......@@ -174,7 +174,7 @@
</select>
</div>
<div class="form-group">
<div class="mb-2">
<label class="form-label">Countries</label>
<select name="country" id="select-countries" class="form-control custom-select">
<option value="br" data-data='{"image": "{{ site.base }}/assets/images/flags/br.svg"}'>Brazil</option>
......
<div class="form-group">
<div class="mb-2">
<label class="form-label">Text mask</label>
{% include ui/input-mask.html mask="00/00/0000" placeholder="00/00/0000" visible=true %}
</div>
<div class="form-group">
<div class="mb-2">
<label class="form-label">Telephone mask</label>
{% include ui/input-mask.html mask="(00) 0000-0000" placeholder="(00) 0000-0000" visible=true %}
</div>
<div class="form-group">
<div class="mb-2">
<label class="form-label">Autosize textarea</label>
<textarea class="form-control" data-toggle="autosize" placeholder="Typing something&hellip;"></textarea>
</div>
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册