Bootstrap 3応答式アップロード画像、時間ピックアップとフォーム認証Fileinput、Date/time Pickr、Validator
11279 ワード
1.Bootstrap 3応答式アップロード画像bootstrap-fileinput
プロジェクトアドレス:https://github.com/kartik-v/bootstrap-fileinput
Step 1: Load the following assets in your header.
If you noticed, you need to load the
Step 2: Initialize the plugin on your page. For example,
The
Alternatively, you can directly call the plugin options by setting data attributes to your input field.
詳細はこちら:https://github.com/kartik-v/bootstrap-fileinput#plugin-options
公式サイト:http://plugins.krajee.com/file-input
2.Bootstrap 3応答式時間ピックアップDate/time Picker
a)カード一http://tarruda.github.io/bootstrap-datetimepicker/
b)カード二https://eonasdan.github.io/bootstrap-datetimepicker/
3.Bootstrap 3応答フォーム認証Bootstrap 3 Validator
公式サイト:http://1000hz.github.io/bootstrap-validator/
プロジェクトアドレス:https://github.com/1000hz/bootstrap-validator
添付ファイルをダウンロード:
bootstrap-validator-master
bootstrap-datetimepicker-master
bootstrap-datetimepicker-0.0.11
bootstrap-fileinput-master
justcode.ikeepstudying.com
プロジェクトアドレス:https://github.com/kartik-v/bootstrap-fileinput
Usage
Step 1: Load the following assets in your header.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<link href="path/to/css/fileinput.min.css" media="all" rel="stylesheet" type="text/css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="path/to/js/fileinput.min.js"></script>
<!-- bootstrap.js below is only needed if you wish to the feature of viewing details
of text file preview via modal dialog -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js" type="text/javascript"></script>
<!-- optionally if you need translation for your language then include
locale file as mentioned below -->
<script src="path/to/js/fileinput_locale_<lang>.js"></script>
If you noticed, you need to load the
jquery.min.js
and bootstrap.min.css
in addition to the fileinput.min.css
and fileinput.min.js
. The locale file fileinput_locale_<lang>.js
can be optionally included for translating for your language if needed. Step 2: Initialize the plugin on your page. For example,
// initialize with defaults
$("#input-id").fileinput();
// with plugin options
$("#input-id").fileinput({'showUpload':false, 'previewFileType':'any'});
The
#input-id
is the identifier for the input (e.g. type = file
) on your page, which is hidden automatically by the plugin. Alternatively, you can directly call the plugin options by setting data attributes to your input field.
<input id="input-id" type="file" class="file" data-preview-file-type="text" >
詳細はこちら:https://github.com/kartik-v/bootstrap-fileinput#plugin-options
公式サイト:http://plugins.krajee.com/file-input
2.Bootstrap 3応答式時間ピックアップDate/time Picker
a)カード一http://tarruda.github.io/bootstrap-datetimepicker/
<div class="well">
<div id="datetimepicker1" class="input-append date">
<input data-format="dd/MM/yyyy hh:mm:ss" type="text"></input>
<span class="add-on">
<i data-time-icon="icon-time" data-date-icon="icon-calendar">
</i>
</span>
</div>
</div>
<script type="text/javascript">
$(function() {
$('#datetimepicker1').datetimepicker({
language: 'pt-BR'
});
});
</script>
<div class="well">
<div id="datetimepicker2" class="input-append">
<input data-format="MM/dd/yyyy HH:mm:ss PP" type="text"></input>
<span class="add-on">
<i data-time-icon="icon-time" data-date-icon="icon-calendar">
</i>
</span>
</div>
</div>
<script type="text/javascript">
$(function() {
$('#datetimepicker2').datetimepicker({
language: 'en',
pick12HourFormat: true
});
});
</script>
b)カード二https://eonasdan.github.io/bootstrap-datetimepicker/
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datetimepicker();
});
</script>
</div>
</div>
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker2'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker2').datetimepicker({
locale: 'ru'
});
});
</script>
</div>
</div>
3.Bootstrap 3応答フォーム認証Bootstrap 3 Validator
公式サイト:http://1000hz.github.io/bootstrap-validator/
プロジェクトアドレス:https://github.com/1000hz/bootstrap-validator
<form data-toggle="validator" role="form">
<div class="form-group">
<label for="inputName" class="control-label">Name</label>
<input type="text" class="form-control" id="inputName" placeholder="Cina Saffary" required>
</div>
<div class="form-group">
<label for="inputTwitter" class="control-label">Twitter</label>
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" pattern="^([_A-z0-9]){3,}$" maxlength="20" class="form-control" id="inputTwitter" placeholder="1000hz" required>
</div>
<span class="help-block with-errors">Up to 20 letters, numbers and underscores</span>
</div>
<div class="form-group">
<label for="inputEmail" class="control-label">Email</label>
<input type="email" class="form-control" id="inputEmail" placeholder="Email" data-error="Bruh, that email address is invalid" required>
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<label for="inputPassword" class="control-label">Password</label>
<div class="form-group col-sm-6">
<input type="password" data-minlength="6" class="form-control" id="inputPassword" placeholder="Password" required>
<span class="help-block">Minimum of 6 characters</span>
</div>
<div class="form-group col-sm-6">
<input type="password" class="form-control" id="inputPasswordConfirm" data-match="#inputPassword" data-match-error="Whoops, these don't match" placeholder="Confirm" required>
<div class="help-block with-errors"></div>
</div>
</div>
</div>
<div class="form-group">
<div class="radio">
<label>
<input type="radio" name="underwear" required>
Boxers
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="underwear" required>
Briefs
</label>
</div>
</div>
<div class="form-group">
<div class="checkbox">
<label>
<input type="checkbox" id="terms" data-error="Before you wreck yourself" required>
Check yourself
</label>
<div class="help-block with-errors"></div>
</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
添付ファイルをダウンロード:
bootstrap-validator-master
bootstrap-datetimepicker-master
bootstrap-datetimepicker-0.0.11
bootstrap-fileinput-master
justcode.ikeepstudying.com