پلاگین‌های فرم توضیح هدر در این قسمت قرار دارد...

<!-- required js / css -->
<link href="assets/plugins/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css" rel="stylesheet" />
<script src="assets/plugins/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js"></script>

<!-- default html -->
<input type="text" class="form-control" id="datepicker" placeholder="dd/mm/yyyy" />

<!--component html -->
<div class="input-group">
  <input type="text" class="form-control" id="datepicker" placeholder="ووردی گروهی" />
  <label class="input-group-text" for="datepicker">
    <i class="fa fa-calendar"></i>
  </label>
</div>

<!-- range html -->
<div class="input-group input-daterange" id="datepicker">
  <input type="text" class="form-control" name="start" placeholder="تاریخ شروع" />
  <span class="input-group-text">to</span>
  <input type="text" class="form-control" name="end" placeholder="تاریخ پایان" />
</div>

<!-- script -->
<script>
  $('#datepicker').datepicker({
    autoclose: true
  });
</script>

<!-- required js / css -->
<link href="assets/plugins/bootstrap-daterangepicker/daterangepicker.css" rel="stylesheet" />
<script src="assets/plugins/bootstrap-daterangepicker/daterangepicker.js"></script>

<!-- html -->
<div class="input-group" id="daterange">
  <input type="text" name="daterange" class="form-control" value="" placeholder="برای انتخاب محدوده تاریخ کلیک کنید" />
  <span class="input-group-text"><i class="fa fa-calendar"></i></span>
</div>

<!-- script -->
<script>
  $('#daterange').daterangepicker({
    opens: 'right',
    format: 'MM/DD/YYYY',
    separator: ' to ',
    startDate: moment().subtract('days', 29),
    endDate: moment(),
    minDate: '01/01/2012',
    maxDate: '12/31/2018',
  }, function (start, end) {
    $('#daterange input').val(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
  });
</script>

<!-- required js / css -->
<link href="assets/plugins/bootstrap-timepicker/css/bootstrap-timepicker.min.css" rel="stylesheet" />
<script src="assets/plugins/bootstrap-timepicker/js/bootstrap-timepicker.min.js"></script>

<!-- html -->
<div class="input-group bootstrap-timepicker timepicker">
  <input id="timepicker" type="text" class="form-control" />
  <span class="input-group-addon input-group-text">
    <i class="fa fa-clock"></i>
  </span>
</div>

<!-- script -->
<script>
  $('#timepicker').timepicker();
</script>

<!-- required js / css -->
<link href="assets/plugins/bootstrap-slider/dist/css/bootstrap-slider.min.css" rel="stylesheet" />
<script src="assets/plugins/bootstrap-slider/dist/bootstrap-slider.min.js"></script>

<!-- default -->
<input type="text" id="slider" class="form-control" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-value="14"/>

<!-- script -->
<script>
  $('#slider').bootstrapSlider();
</script>

<!-- required js -->
<script src="assets/plugins/bootstrap-3-typeahead/bootstrap3-typeahead.js"></script>

<!-- html -->
<input type="text" value="" placeholder="Type 'a'" class="form-control" id="typeahead" />

<!-- script -->
<script>
  $('#typeahead').typeahead({
    source: [
      { id: '1', name: 'ActionScript' },
      { id: '2', name: 'AppleScript' },
      ...
    ],
    autoSelect: true
  });
</script>

<!-- required js / css -->
<link href="assets/plugins/tag-it/css/jquery.tagit.css" rel="stylesheet" />
<script src="assets/plugins/jquery-migrate/dist/jquery-migrate.min.js"></script>
<script src="assets/plugins/tag-it/js/tag-it.min.js"></script>

<!-- default -->
<ul id="jquery-tagit" class="tagit form-control">
  <li>تفننی</li>
  <li>جدید</li>
  <li>برچسب</li>
  <li>نمایشی</li>
</ul>

<script>
  $(document).ready(function() {
    $('#jquery-tagit').tagit({
      fieldName: 'tags',
      availableTags: ['c++', 'java', 'php', 'javascript', 'ruby', 'python', 'c'],
      autocomplete: {
        delay: 0, 
        minLength: 2
      }
    });
  });
</script>

<!-- required js -->
<script src="assets/plugins/jquery.maskedinput/src/jquery.maskedinput.js"></script>

<!-- html -->
<input type="text" id="masked-input" class="form-control" placeholder="mm/dd/yyyy" />

<!-- script -->
<script>
  $('#masked-input').mask('99/99/9999');
</script>

<!-- required css / js -->
<link href="assets/plugins/summernote/dist/summernote-lite.css" rel="stylesheet" />
<script src="assets/plugins/summernote/dist/summernote-lite.min.js"></script>

<!-- html -->
<textarea name="text" class="summernote" id="contents" title="Contents">...</textarea>

<!-- script -->
<script>
  $('.summernote').summernote({
    height: 300
  });
</script>

<!-- required js / css -->
<link href="assets/plugins/select-picker/dist/picker.min.css" rel="stylesheet" />
<script src="assets/plugins/select-picker/dist/picker.min.js"></script>

<!-- default -->
<select class="form-control" id="ex-basic">
  <option>خردل</option>
  <option>سس گوجه</option>
  <option>پر کردن</option>
</select>

<!-- multiple -->
<select class="form-control" multiple>
  <optgroup label="پیک نیک">
    <option>خردل</option>
    <option>سس گوجه</option>
    <option>پر کردن</option>
  </optgroup>
  <optgroup label="چادر زدن">
    <option>چادر</option>
    <option>چراغ قوه</option>
    <option>دستمال توالت</option>
  </optgroup>
</select>

<!-- required js / css -->
<link href="assets/plugins/spectrum-colorpicker2/dist/spectrum.min.css" rel="stylesheet" />
<script src="assets/plugins/spectrum-colorpicker2/dist/spectrum.min.js"></script>

<!-- default -->
<input type="text" value="#007aff" class="form-control" id="colorpicker" />

<!-- script -->
<script>
  $('#colorpicker').spectrum({
    "showInput": true
  });
</script>