mirror of
https://github.com/tabler/tabler.git
synced 2025-12-26 19:26:10 +04:00
86 lines
3.4 KiB
HTML
86 lines
3.4 KiB
HTML
<div class="form-group">
|
|
<label class="form-label">Static</label>
|
|
<div class="form-control-plaintext">Username</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">Text</label>
|
|
<input type="text" class="form-control" name="example-text-input" placeholder="Text..">
|
|
</div>
|
|
<div class="form-group">
|
|
<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">
|
|
<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">
|
|
<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>
|
|
|
|
{% include parts/input-image.html %}
|
|
|
|
{% include parts/input-color.html %}
|
|
|
|
<div class="form-group">
|
|
<label class="form-label">Input group</label>
|
|
<div class="input-group">
|
|
<input type="text" class="form-control" placeholder="Search for…">
|
|
<span class="input-group-append">
|
|
<button class="btn btn-primary" type="button">Go!</button>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">Input group buttons</label>
|
|
<div class="input-group">
|
|
<input type="text" class="form-control">
|
|
<div class="input-group-append">
|
|
<button type="button" class="btn btn-primary">Action</button>
|
|
<button data-toggle="dropdown" type="button"
|
|
class="btn btn-primary dropdown-toggle"></button>
|
|
<div class="dropdown-menu dropdown-menu-right">
|
|
<a class="dropdown-item" href="javascript:void(0)">
|
|
News
|
|
</a>
|
|
<a class="dropdown-item" href="javascript:void(0)">
|
|
Messages
|
|
</a>
|
|
<div class="dropdown-divider"></div>
|
|
<a class="dropdown-item" href="javascript:void(0)">
|
|
Edit Profile
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{% include parts/input-icon.html %}
|
|
|
|
<div class="form-group">
|
|
<label class="form-label">Separated inputs</label>
|
|
<div class="row row-xs">
|
|
<div class="col">
|
|
<input type="text" class="form-control" placeholder="Search for…">
|
|
</div>
|
|
<span class="col-auto">
|
|
<button class="btn btn-secondary" type="button">{% include ui/icon.html icon="search" %}</button>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">ZIP Code</label>
|
|
<div class="row row-sm">
|
|
<div class="col">
|
|
<input type="text" class="form-control" placeholder="Search for…">
|
|
</div>
|
|
<span class="col-auto align-self-center">
|
|
<span class="form-help" data-toggle="popover" data-placement="top"
|
|
data-content="<p>ZIP Code must be US or CDN format. You can use an extended ZIP+4 code to determine address more accurately.</p><p class='mb-0'><a href=''>USP ZIP codes lookup tools</a></p>">?</span>
|
|
</span>
|
|
</div>
|
|
</div>
|