index.html 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778
  1. ---
  2. layout: minimal
  3. version: 3.5.2
  4. ---
  5. <div class="jumbotron">
  6. <div class="container">
  7. <div class="select2-wrapper">
  8. <select class="form-control input-lg select2">
  9. <option></option>
  10. {% include select2-select.html %}
  11. </select>
  12. </div>
  13. <div class="select2-wrapper">
  14. <select class="form-control select2" multiple="multiple">
  15. <option></option>
  16. {% include select2-select.html %}
  17. </select>
  18. </div>
  19. <div class="select2-wrapper">
  20. <div class="form-group">
  21. <div class="input-group input-group-sm select2-bootstrap-prepend">
  22. <span class="input-group-addon">
  23. <input type="checkbox">
  24. </span>
  25. <select id="select2-single-input-group-sm" class="form-control select2" disabled>
  26. <option></option>
  27. {% include select2-select.html %}
  28. </select>
  29. </div>
  30. </div>
  31. </div>
  32. <h1 class="jumbotron-title">Select2 Bootstrap&nbsp;3&nbsp;CSS</h1>
  33. <p class="lead">CSS to make <a href="http://select2.github.io/select2/">Select2</a> fit in with <a href="http://getbootstrap.com/">Bootstrap 3</a> – ready for use in original, LESS, Sass and Compass flavors.</p>
  34. <a href="https://raw.githubusercontent.com/t0m/select2-bootstrap-css/bootstrap3/select2-bootstrap.css" class="btn btn-outline btn-lg">Download CSS from GitHub</a>
  35. <h2>Demonstrations</h2>
  36. <div class="select2-wrapper">
  37. <div class="input-group input-group-sm select2-bootstrap-prepend" id="abId0.002539606299251318">
  38. <div class="input-group-btn">
  39. <button class="btn btn-default" type="button" data-select2-open="demonstrations">
  40. Bootstrap 3.3.2 and
  41. </button>
  42. </div>
  43. <select id="demonstrations" class="form-control">
  44. <option></option>
  45. {% for version in site.versions reversed %}
  46. <option value="{{ version }}.html">{{ version }}</option>
  47. {% endfor %}
  48. </select>
  49. </div>
  50. </div>
  51. </div>
  52. </div>
  53. {% include footer.html %}
  54. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  55. <script src="//select2.github.io/select2/select2-3.4.2/select2.js"></script>
  56. <script>
  57. $( ".select2" ).select2( { placeholder: "Select a State", maximumSelectionSize: 6 } );
  58. $( ":checkbox" ).on( "click", function() {
  59. $( this ).parent().nextAll( "select" ).select2( "enable", this.checked );
  60. });
  61. $( "#demonstrations" ).select2( { placeholder: "Select2 version", minimumResultsForSearch: -1 } ).on( "change", function() {
  62. document.location = $( this ).find( ":selected" ).val();
  63. } );
  64. $( "button[data-select2-open]" ).click( function() {
  65. $( "#" + $( this ).data( "select2-open" ) ).select2( "open" );
  66. });
  67. </script>