Bootstrap 3 响应式上传图片，时间拾取器和表单认证 Fileinput, Date/Time Pickr, Validator

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 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