Sie sind auf Seite 1von 4

<div ng-app="myApp">

<div class="container" ng-controller="ctrlTags">


<div class="row" id="exSelects">
<div class="col-sm-6">
<h4>Select with Search Filter</h4>
<select class="form-control" id="mySel">
<option ng-model="item.tag" ng-selected="item.selected" ng-r
epeat="item in items">{{item.tag}}</option>
</select>
</div><!--/col-->
</div><!--/row-->
<hr>
<div class="row">
<div class="col-sm-6">
<h4>Tag Picker</h4>
<select class="form-control" id="mySel2" multiple="multiple">
<option ng-model="item.tag" ng-selected="item.selected" ng-r
epeat="item in items">{{item.tag}}</option>
</select>
</div><!--/col-->
</div><!--/row-->
<hr>
<div class="row" id="exDateTime">
<div class="col-sm-3">
<h4>Date &amp; Time Inputs</h4>
<div class="form-group">
<label class="control-label">Date picker</label>
<div class="input-group date" id="datepicker">
<input class="form-control" type="text">
<span class="input-group-addon"><span class="glyphicon g
lyphicon-calendar"></span></span>
</div>
</div>
</div><!--/col-->
<div class="col-sm-3">
<h4>&nbsp;</h4>
<div class="form-group">
<label class="control-label">Time picker</label>
<div class="input-group" id="timepicker">
<input class="form-control" type="text">
<span class="input-group-addon"><span class="glyphicon g
lyphicon-time"></span></span>
</div>
</div>
</div><!--/col-->
<div class="col-sm-6">
<h4>Date Range Selector</h4>
<div class="row">
<div class="col-sm-6">
<div class="input-daterange form-group has-feedback">
<label class="control-label">Start</label>
<input name="dateStart" class="form-control" type="t
ext" placeholder="from">
<span class="glyphicon glyphicon-calendar form-contr
ol-feedback"></span>
</div>
</div><!--/col-->
<div class="col-sm-6">
<div class="input-daterange form-group has-feedback">
<label class="control-label">End</label>
<input name="dateEnd" class="form-control" type="tex
t" placeholder="to">
<span class="glyphicon glyphicon-calendar form-contr
ol-feedback"></span>
</div>
</div><!--/col-->
</div><!--/row-->
</div><!--/col-->
</div><!--/row-->
<hr>
<div class="row" id="exInputMasking">
<div class="col-sm-6">
<h4>Input Masking</h4>
<h5>Phone Number</h5>
<input class="form-control" type="text" placeholder="(555) 111-2
222" data-mask="(999) 999-9999 x9999">
<h5>Credit Card</h5>
<input class="form-control" type="text" placeholder="0000-0000-0
000-0000" data-mask="9999-9999-9999-9999">
<h5>Tax Id</h5>
<input class="form-control" type="text" placeholder="XX-XXXXXXX"
data-mask="99-9999999">
<h5>Date</h5>
<div class="form-group">
<div class="input-group">
<input class="form-control" type="text" placeholder="MM/
DD/YYYY" data-mask="99/99/9999">
<span class="input-group-addon"><span class="glyphicon g
lyphicon-calendar"></span></span>
</div>
</div>
</div><!--/col-->
<div class="col-sm-6">
<h4>&nbsp;</h4>
<h5>Twitter</h5>
<input class="form-control" type="text" placeholder="@screename"
data-mask="@ww?wwwwwwwwwwwwwww">
<h5>Expiration Date</h5>
<input class="form-control" type="text" placeholder="MM/YYYY" da
ta-mask="99/9999">
<h5>Social Security #</h5>
<input class="form-control" type="text" placeholder="123-23-1234
" data-mask="999-99-9999">
<h5>Time</h5>
<div class="form-group">
<div class="input-group">
<input class="form-control" type="time" placeholder="12:
00 AM">
<span class="input-group-addon"><span class="glyphicon g
lyphicon-time"></span></span>
</div>
</div>
</div><!--/col-->
</div><!--/row-->
<hr>
<div class="row">
<form class="col-sm-6" id="exHtml5Validation">
<h4>HTML5 Validation</h4>
<div class="form-group has-feedback">
<label>Email</label>
<input class="form-control" required="" type="email" min="7"
placeholder="you@validemail.com" data-valid-pattern="^[a-z0-9._%+-]+@[a-z0-9.-]
+\.[a-z]{2,4}$">
<span class="glyphicon glyphicon-ok form-control-feedback fa
de"></span>
<h6 class="help-block">Enter a valid email address.</h6>
</div>
<div class="form-group has-feedback">
<label>Password</label>
<input title="One word. No spaces or special characters." cl
ass="form-control has-feedback" id="inputPassword" required="" type="password" m
in="6" placeholder="xxxxxx" pattern="^[a-z,A-Z,0-9,_]{6,15}$">
<span class="glyphicon glyphicon-ok form-control-feedback fa
de"></span>
<h6 class="help-block">Enter a password of at least 6 alpha
and numeric chars.</h6>
</div>
<div class="form-group has-feedback">
<label>Verify</label>
<input title="One word. No spaces or special characters." cl
ass="form-control has-feedback" required="" type="password" min="6" placeholder=
"xxxxxx" pattern="^[a-z,A-Z,0-9,_]{6,15}$" data-valid-match="inputPassword">
<span class="glyphicon glyphicon-ok form-control-feedback fa
de"></span>
<h6 class="help-block">Re-enter that same password for verif
ication.</h6>
</div>
<div class="form-group has-feedback">
<label>Username</label>
<input class="form-control" required="" type="text" min="6"
max="20" placeholder="username" pattern="^[a-z,A-Z,0-9,_]{6,20}$">
<span class="glyphicon glyphicon-ok form-control-feedback fa
de"></span>
<h6 class="help-block">Enter a username. No spaces or specia
l characters.</h6>
</div>
<div class="form-group has-feedback">
<label>Web URL</label>
<input class="form-control" type="url" placeholder="username
" pattern="https?://.+" data-valid-min="10">
<span class="glyphicon glyphicon-ok form-control-feedback fa
de"></span>
<h6 class="help-block">Enter a URL address. Include the http
:// or https:// portion.</h6>
</div>
<button class="btn btn-default" type="submit">Validate</button>
</form><!--/col-->
<!--end html5 validation-->
<!--file and image upload-->
<div class="col-sm-6" id="exFileImageUpload">
<h4>File &amp; Image Upload</h4>
<div class="form-group">
<label>File selector</label>
<div class="fileinput fileinput-new input-group" data-provid
es="fileinput">
<div class="form-control" data-trigger="fileinput"><i cl
ass="glyphicon glyphicon-file fileinput-exists"></i> <span class="fileinput-file
name"></span></div>
<span class="input-group-addon btn btn-default btn-file"
><span class="fileinput-new">Choose...</span><span class="fileinput-exists">Chan
ge</span><input name="..." type="file"></span>
<a class="input-group-addon btn btn-default fileinput-ex
ists" href="#" data-dismiss="fileinput">Remove</a>
</div>
</div>
<hr>
<div class="fileinput fileinput-new" data-provides="fileinput">
<label>Image uploader</label>
<div class="fileinput-new thumbnail">
<img class="img-responsive" src="/assets/example/bg_subu
rb.jpg" data-src="">
</div>
<div class="fileinput-preview fileinput-exists thumbnail"></
div>
<div>
<span class="btn btn-default btn-file"><span class="file
input-new">Select image...</span><span class="fileinput-exists">Change</span><in
put name="..." type="file"></span>
<a class="btn btn-default fileinput-exists" href="#" dat
a-dismiss="fileinput">Remove</a>
</div>
</div>
</div><!--/col-->
<!--end file and image upload-->
</div><!--/row-->
</div><!--/container-->
<hr>
</div><!--/app-->

Das könnte Ihnen auch gefallen