Skip to content

B
bootstrap
Commit 499f71d2 authored by Chris Rebert's avatar Chris Rebert
Browse files
Options

Merge pull request #15498 from twbs/fix-15332 

Add examples of using feedback icons with .input-group
parents 149dac0a be6dc3a3
Hide whitespace changes
Inline Side-by-side
Showing with 81 additions and 0 deletions
docs/_includes/css/forms.html
View file @ 499f71d2
...@@ -701,6 +701,15 @@ ...@@ -701,6 +701,15 @@
<span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span> <span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
<span id="inputError2Status" class="sr-only">(error)</span> <span id="inputError2Status" class="sr-only">(error)</span>
</div> </div>
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputGroupSuccess1">Input group with success</label>
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status">
</div>
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputGroupSuccess1Status" class="sr-only">(success)</span>
</div>
</form> </form>
</div> </div>
{% highlight html %} {% highlight html %}
...@@ -722,6 +731,15 @@ ...@@ -722,6 +731,15 @@
<span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span> <span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
<span id="inputError2Status" class="sr-only">(error)</span> <span id="inputError2Status" class="sr-only">(error)</span>
</div> </div>
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputGroupSuccess1">Input group with success</label>
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status">
</div>
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputGroupSuccess1Status" class="sr-only">(success)</span>
</div>
{% endhighlight %} {% endhighlight %}
<h4>Optional icons in horizontal and inline forms</h4> <h4>Optional icons in horizontal and inline forms</h4>
...@@ -735,6 +753,17 @@ ...@@ -735,6 +753,17 @@
<span id="inputSuccess3Status" class="sr-only">(success)</span> <span id="inputSuccess3Status" class="sr-only">(success)</span>
</div> </div>
</div> </div>
<div class="form-group has-success has-feedback">
<label class="control-label col-sm-3" for="inputGroupSuccess2">Input group with success</label>
<div class="col-sm-9">
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" id="inputGroupSuccess2" aria-describedby="inputGroupSuccess2Status">
</div>
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputGroupSuccess2Status" class="sr-only">(success)</span>
</div>
</div>
</form> </form>
</div> </div>
{% highlight html %} {% highlight html %}
...@@ -747,6 +776,17 @@ ...@@ -747,6 +776,17 @@
<span id="inputSuccess3Status" class="sr-only">(success)</span> <span id="inputSuccess3Status" class="sr-only">(success)</span>
</div> </div>
</div> </div>
<div class="form-group has-success has-feedback">
<label class="control-label col-sm-3" for="inputGroupSuccess2">Input group with success</label>
<div class="col-sm-9">
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" id="inputGroupSuccess2" aria-describedby="inputGroupSuccess2Status">
</div>
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputGroupSuccess2Status" class="sr-only">(success)</span>
</div>
</div>
</form> </form>
{% endhighlight %} {% endhighlight %}
...@@ -759,6 +799,18 @@ ...@@ -759,6 +799,18 @@
<span id="inputSuccess4Status" class="sr-only">(success)</span> <span id="inputSuccess4Status" class="sr-only">(success)</span>
</div> </div>
</form> </form>
<br>
<form class="form-inline">
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputGroupSuccess3">Input group with success</label>
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" id="inputGroupSuccess3" aria-describedby="inputGroupSuccess3Status">
</div>
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputGroupSuccess3Status" class="sr-only">(success)</span>
</div>
</form>
</div> </div>
{% highlight html %} {% highlight html %}
<form class="form-inline"> <form class="form-inline">
...@@ -769,6 +821,17 @@ ...@@ -769,6 +821,17 @@
<span id="inputSuccess4Status" class="sr-only">(success)</span> <span id="inputSuccess4Status" class="sr-only">(success)</span>
</div> </div>
</form> </form>
<form class="form-inline">
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputGroupSuccess3">Input group with success</label>
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" id="inputGroupSuccess3" aria-describedby="inputGroupSuccess3Status">
</div>
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputGroupSuccess3Status" class="sr-only">(success)</span>
</div>
</form>
{% endhighlight %} {% endhighlight %}
<h4>Optional icons with hidden <code>.sr-only</code> labels</h4> <h4>Optional icons with hidden <code>.sr-only</code> labels</h4>
...@@ -780,6 +843,15 @@ ...@@ -780,6 +843,15 @@
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span> <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputSuccess5Status" class="sr-only">(success)</span> <span id="inputSuccess5Status" class="sr-only">(success)</span>
</div> </div>
<div class="form-group has-success has-feedback">
<label class="control-label sr-only" for="inputGroupSuccess4">Input group with success</label>
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" id="inputGroupSuccess4" aria-describedby="inputGroupSuccess4Status">
</div>
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputGroupSuccess4Status" class="sr-only">(success)</span>
</div>
</div> </div>
{% highlight html %} {% highlight html %}
<div class="form-group has-success has-feedback"> <div class="form-group has-success has-feedback">
...@@ -788,6 +860,15 @@ ...@@ -788,6 +860,15 @@
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span> <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputSuccess5Status" class="sr-only">(success)</span> <span id="inputSuccess5Status" class="sr-only">(success)</span>
</div> </div>
<div class="form-group has-success has-feedback">
<label class="control-label sr-only" for="inputGroupSuccess4">Input group with success</label>
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" id="inputGroupSuccess4" aria-describedby="inputGroupSuccess4Status">
</div>
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputGroupSuccess4Status" class="sr-only">(success)</span>
</div>
{% endhighlight %} {% endhighlight %}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment