1. Bootstrap 3 响应式上传图片 bootstrap-fileinput

项目地址： 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 detailsof 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