6g下载网
当前位置: 主页 > 软件教程 > 编程开发 >

bootstrap-select怎么用?bootstrap-select使用方法举例介绍

时间: 2016-12-22 21:57 来源: 6g下载网

分享到:

bootstrap-select怎么用?今天小编整理一篇bootstrap-select使用方法举例介绍的文章和大家分享,希望能给大家提供帮助。

文章以bootstrap-select-1.12.1版本举例。

1.下载压缩包,下载地址:http://silviomoreto.github.io/bootstrap-select/

2.解压后找到 bootstrap-select.min.css, bootstrap-select.min.js,i18n文件夹复制到自己的项目中,因为是基于jQuery所有要另外导入Jquery.js。

bootstrap-select使用举例:

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.   <title>Bootstrap-select test page</title>  
  5.  
  6.   <meta charset="utf-8">  
  7.  
  8.   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">  
  9.   <link rel="stylesheet" href="dist/css/bootstrap-select.css">  
  10.  
  11.   <style>  
  12.     body {  
  13.       padding-top: 70px;  
  14.     }  
  15.   </style>  
  16.  
  17.   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>  
  18.   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>  
  19.   <script src="dist/js/bootstrap-select.js"></script>  
  20. </head>  
  21. <body>  
  22. <nav class="navbar navbar-default navbar-fixed-top" role="navigation">  
  23.   <div class="container">  
  24.     <div class="navbar-header">  
  25.       <a class="navbar-brand" href="#">Bootstrap-select usability tests</a>  
  26.     </div>  
  27.   </div>  
  28. </nav>  
  29.  
  30. <div class="container">  
  31.   <form class="form-horizontal" role="form">  
  32.     <div class="form-group">  
  33.       <label for="basic" class="col-lg-2 control-label">"Basic" (liveSearch disabled)</label>  
  34.  
  35.       <div class="col-lg-10">  
  36.         <select id="basic" class="selectpicker show-tick form-control">  
  37.           <option>cow</option>  
  38.           <option data-subtext="option subtext">bull</option>  
  39.           <option class="get-class" disabled>ox</option>  
  40.           <optgroup label="test" data-subtext="optgroup subtext">  
  41.             <option>ASD</option>  
  42.             <option selected>Bla</option>  
  43.             <option>Ble</option>  
  44.           </optgroup>  
  45.         </select>  
  46.       </div>  
  47.     </div>  
  48.   </form>  
  49.  
  50.   <hr>  
  51.  
  52.   <form class="form-horizontal" role="form">  
  53.     <div class="form-group">  
  54.       <label for="basic" class="col-lg-2 control-label">"Basic" (liveSearch enabled)</label>  
  55.  
  56.       <div class="col-lg-10">  
  57.         <select id="basic" class="selectpicker show-tick form-control" data-live-search="true">  
  58.           <option>cow</option>  
  59.           <option data-subtext="option subtext">bull</option>  
  60.           <option class="get-class" disabled>ox</option>  
  61.           <optgroup label="test" data-subtext="optgroup subtext">  
  62.             <option>ASD</option>  
  63.             <option selected>Bla</option>  
  64.             <option>Ble</option>  
  65.           </optgroup>  
  66.         </select>  
  67.       </div>  
  68.     </div>  
  69.   </form>  
  70.  
  71.   <hr>  
  72.   <form class="form-horizontal" role="form">  
  73.     <div class="form-group">  
  74.       <label for="basic2" class="col-lg-2 control-label">"Basic" (multiple, maxOptions=1)</label>  
  75.  
  76.       <div class="col-lg-10">  
  77.         <select id="basic2" class="show-tick form-control" multiple>  
  78.           <option>cow</option>  
  79.           <option>bull</option>  
  80.           <option class="get-class" disabled>ox</option>  
  81.           <optgroup label="test" data-subtext="another test">  
  82.             <option>ASD</option>  
  83.             <option selected>Bla</option>  
  84.             <option>Ble</option>  
  85.           </optgroup>  
  86.         </select>  
  87.       </div>  
  88.     </div>  
  89.   </form>  
  90.  
  91.   <hr>  
  92.   <form class="form-horizontal" role="form">  
  93.     <div class="form-group">  
  94.       <label for="maxOption2" class="col-lg-2 control-label">multiple, show-menu-arrow, maxOptions=2</label>  
  95.  
  96.       <div class="col-lg-10">  
  97.         <select id="maxOption2" class="selectpicker show-menu-arrow form-control" multiple data-max-options="2">  
  98.           <option>chicken</option>  
  99.           <option>turkey</option>  
  100.           <option disabled>duck</option>  
  101.           <option>goose</option>  
  102.         </select>  
  103.       </div>  
  104.     </div>  
  105.   </form>  
  106.  
  107.   <hr>  
  108.   <form class="form-inline">  
  109.     <div class="form-group">  
  110.       <label class="col-md-1 control-label" for="lunch">Lunch:</label>  
  111.     </div>  
  112.     <div class="form-group">  
  113.       <select id="lunch" class="selectpicker" data-live-search="true" title="Please select a lunch ...">  
  114.         <option>Hot Dog, Fries and a Soda</option>  
  115.         <option>Burger, Shake and a Smile</option>  
  116.         <option>Sugar, Spice and all things nice</option>  
  117.         <option>Baby Back Ribs</option>  
  118.         <option>A really really long option made to illustrate an issue with the live search in an inline form</option>  
  119.       </select>  
  120.     </div>  
  121.   </form>  
  122.  
  123.   <hr>  
  124.   <form class="form-horizontal" role="form">  
  125.     <div class="form-group form-group-lg">  
  126.       <label for="error" class="col-lg-2 control-label">error</label>  
  127.  
  128.       <div class="col-lg-10 error">  
  129.         <select id="error" class="selectpicker show-tick form-control">  
  130.           <option>pen</option>  
  131.           <option>pencil</option>  
  132.           <option selected>brush</option>  
  133.         </select>  
  134.       </div>  
  135.     </div>  
  136.   </form>  
  137.  
  138.   <hr>  
  139.   <form class="form-horizontal" role="form">  
  140.     <div class="form-group has-error form-group-lg">  
  141.       <label class="control-label col-lg-2" for="country">error type 2</label>  
  142.  
  143.       <div class="col-lg-10">  
  144.         <select id="country" name="country" class="form-control selectpicker">  
  145.           <option>Argentina</option>  
  146.           <option>United State</option>  
  147.           <option>Mexico</option>  
  148.         </select>  
  149.  
  150.         <p class="help-block">No service available in the selected country</p>  
  151.       </div>  
  152.     </div>  
  153.   </form>  
  154.  
  155.   <hr>  
  156.   <nav class="navbar navbar-default" role="navigation">  
  157.     <div class="container-fluid">  
  158.       <div class="navbar-header">  
  159.         <a class="navbar-brand" href="#">Navbar</a>  
  160.       </div>  
  161.  
  162.       <form class="navbar-form navbar-left" role="search">  
  163.         <div class="form-group">  
  164.           <select class="selectpicker" multiple data-live-search="true" data-live-search-placeholder="Search" data-actions-box="true">  
  165.             <optgroup label="filter1">  
  166.               <option>option1</option>  
  167.               <option>option2</option>  
  168.               <option>option3</option>  
  169.               <option>option4</option>  
  170.             </optgroup>  
  171.             <optgroup label="filter2">  
  172.               <option>option1</option>  
  173.               <option>option2</option>  
  174.               <option>option3</option>  
  175.               <option>option4</option>  
  176.             </optgroup>  
  177.             <optgroup label="filter3">  
  178.               <option>option1</option>  
  179.               <option>option2</option>  
  180.               <option>option3</option>  
  181.               <option>option4</option>  
  182.             </optgroup>  
  183.           </select>  
  184.         </div>  
  185.  
  186.         <div class="input-group">  
  187.           <input type="text" class="form-control" placeholder="Search" name="q">  
  188.  
  189.           <div class="input-group-btn">  
  190.             <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>  
  191.           </div>  
  192.         </div>  
  193.         <button type="submit" class="btn btn-default">Search</button>  
  194.       </form>  
  195.  
  196.     </div>  
  197.     <!-- .container-fluid -->  
  198.   </nav>  
  199.  
  200.   <hr>  
  201.   <select id="first-disabled" class="selectpicker" data-hide-disabled="true" data-live-search="true">  
  202.     <optgroup disabled="disabled" label="disabled">  
  203.       <option>Hidden</option>  
  204.     </optgroup>  
  205.     <optgroup label="Fruit">  
  206.       <option>Apple</option>  
  207.       <option>Orange</option>  
  208.     </optgroup>  
  209.     <optgroup label="Vegetable">  
  210.       <option>Corn</option>  
  211.       <option>Carrot</option>  
  212.     </optgroup>  
  213.   </select>  
  214.  
  215.   <hr>  
  216.   <select id="first-disabled2" class="selectpicker" multiple data-hide-disabled="true" data-size="5">  
  217.     <option>Apple</option>  
  218.     <option>Banana</option>  
  219.     <option>Orange</option>  
  220.     <option>Pineapple</option>  
  221.     <option>Apple2</option>  
  222.     <option>Banana2</option>  
  223.     <option>Orange2</option>  
  224.     <option>Pineapple2</option>  
  225.     <option>Apple2</option>  
  226.     <option>Banana2</option>  
  227.     <option>Orange2</option>  
  228.     <option>Pineapple2</option>  
  229.   </select>  
  230.   <button id="special" class="btn btn-default">Hide selected by disabling</button>  
  231.   <button id="special2" class="btn btn-default">Reset</button>  
  232.   <p>Just select 1st element, click button and check list again</p>  
  233.  
  234.   <hr>  
  235.   <div class="input-group">  
  236.     <span class="input-group-addon">@</span>  
  237.     <select class="form-control selectpicker">  
  238.       <option>One</option>  
  239.       <option>Two</option>  
  240.       <option>Three</option>  
  241.     </select>  
  242.   </div>  
  243.  
  244.   <hr>  
  245.   <div class="input-group">  
  246.     <span class="input-group-addon">@</span>  
  247.     <select class="form-control selectpicker" data-mobile="true">  
  248.       <option>One</option>  
  249.       <option>Two</option>  
  250.       <option>Three</option>  
  251.     </select>  
  252.   </div>  
  253.   <p>With <code>data-mobile="true"</code> option.</p>  
  254.  
  255.   <hr>  
  256.   <select id="done" class="selectpicker" multiple data-done-button="true">  
  257.     <option>Apple</option>  
  258.     <option>Banana</option>  
  259.     <option>Orange</option>  
  260.     <option>Pineapple</option>  
  261.     <option>Apple2</option>  
  262.     <option>Banana2</option>  
  263.     <option>Orange2</option>  
  264.     <option>Pineapple2</option>  
  265.     <option>Apple2</option>  
  266.     <option>Banana2</option>  
  267.     <option>Orange2</option>  
  268.     <option>Pineapple2</option>  
  269.   </select>  
  270.  
  271.   <hr>  
  272.   <select id="tokens" class="selectpicker" multiple data-live-search="true">  
  273.     <option data-tokens="first">I actually am called "first"</option>  
  274.     <option data-tokens="second">And me "second"</option>  
  275.     <option data-tokens="last">I am "last"</option>  
  276.   </select>  
  277.  
  278.   <hr>  
  279.   <form class="form-inline">  
  280.     <div class="form-group">  
  281.       <label class="col-md-1 control-label" for="lunchBegins">Lunch (Begins search):</label>  
  282.     </div>  
  283.     <div class="form-group">  
  284.       <select id="lunchBegins" class="selectpicker" data-live-search="true" data-live-search-style="begins" title="Please select a lunch ...">  
  285.         <option>Hot Dog, Fries and a Soda</option>  
  286.         <option>Burger, Shake and a Smile</option>  
  287.         <option>Sugar, Spice and all things nice</option>  
  288.         <option>Baby Back Ribs</option>  
  289.         <option>A really really long option made to illustrate an issue with the live search in an inline form</option>  
  290.       </select>  
  291.     </div>  
  292.   </form>  
  293. </div>  
  294.  
  295. <script>  
  296.   $(document).ready(function () {  
  297.     var mySelect = $('#first-disabled2');  
  298.  
  299.     $('#special').on('click'function () {  
  300.       mySelect.find('option:selected').prop('disabled'true);  
  301.       mySelect.selectpicker('refresh');  
  302.     });  
  303.  
  304.     $('#special2').on('click'function () {  
  305.       mySelect.find('option:disabled').prop('disabled'false);  
  306.       mySelect.selectpicker('refresh');  
  307.     });  
  308.  
  309.     $('#basic2').selectpicker({  
  310.       liveSearch: true,  
  311.       maxOptions: 1  
  312.     });  
  313.   });  
  314. </script>  
  315. </body>  
  316. </html>  

bootstrap-select使用方法举例介绍的文章和大家分享完毕,感谢阅读!

(责任编辑:大卫)

分享到:

------分隔线----------------------------