首先他需要的元件有jquery、bootstrap與bootstrap-select，以下範例使用cdn：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.9.4/css/bootstrap-select.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.9.4/js/bootstrap-select.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.9.4/js/i18n/defaults-zh_CN.min.js"></script>
然後html body裡面寫入以下的內容
<body> <h2>selectpicker</h2> <form> <select class="selectpicker" data-live-search="true"> <option>Mustard</option> <option>Ketchup</option> <option>Relish</option> </select> </form> <script type="text/javascript"> $('.selectpicker').selectpicker({ style: 'btn-info', size: 4 }); </script> </body>
javascript的部分只要使用$('.selectpicker').selectpicker()就可以了
裡面的物件是定義他的大小跟樣式
也可以不定義
畫面如下
如果要更詳細的內容可以參考此網站的範例
bootstrap-select
沒有留言:
張貼留言