Bootstrap Select Picker樣式不起作用
[英]Bootstrap select picker style not working
問題描述
在下面的代碼中，我嘗試使用“ btn警告樣式”來設置引導選擇器的樣式，如下所示： https : //silviomoreto.github.io/bootstrap-select/
我的代碼如下所示：
<head> <title>Title</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="drake.css"/> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css"> <link rel="stylesheet" type="text/css" media="screen" href="http://silviomoreto.github.io/bootstrap-select/stylesheets/bootstrap-select.css"> </head> <body> <div id="course2"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script> <script src="http://silviomoreto.github.io/bootstrap-select/javascripts/bootstrap-select.js"></script> <select class="selectpicker" data-style="btn-primary" data-width="500px"> <option>Mustard</option> <option>Ketchup</option> <option>Relish</option> </select> <script type="text/javascript"> $(document).ready(function() { $('.selectpicker').selectpicker(); }); </script> </div> </body>
如您所見，選擇器沒有采用樣式或寬度屬性。 我究竟做錯了什么？ 非常感謝！
1 個解決方案
解決方案1
4 已采納 2015-11-10 04:06:43
為您修復了網址。
請注意，我已將javascript文件移到了結束標簽</body>之前，以加快頁面加載速度，並將css文件保留在<head> 。
問題是您為引導選擇庫使用了錯誤的URL。 您可以使用瀏覽器的開發人員工具輕松解決這些錯誤，然后... 做好一些魔術 。 ：D
<head> <title>Title</title> <meta charset="utf-8"> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css"> <link rel="stylesheet" type="text/css" media="screen" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.5/css/bootstrap-select.min.css"> </head> <body> <div id="course2"> <select class="selectpicker" data-style="btn-primary" data-width="500px"> <option>Mustard</option> <option>Ketchup</option> <option>Relish</option> </select> </div> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.5/js/bootstrap-select.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $('.selectpicker').selectpicker(); }); </script> </body>
編輯：另外，為什么還要鏈接兩個引導程序版本？ 3.3.5 CSS和2.3.1 JS / CSS？ 您應該只使用最新的...嘗試
<head> <title>Title</title> <meta charset="utf-8"> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" media="screen" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.5/css/bootstrap-select.min.css"> </head> <body> <div id="course2"> <select class="selectpicker" data-style="btn-primary" data-width="500px"> <option>Mustard</option> <option>Ketchup</option> <option>Relish</option> </select> </div> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.5/js/bootstrap-select.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $('.selectpicker').selectpicker(); }); </script> </body>
取消選擇引導程序中的所有選定選項 select 選擇器不起作用
[英]Deselect All selected options in bootstrap select picker not working
選擇Picker插件Bootstrap下拉列表不適用於手機/平板電腦
[英]Select Picker plugin Bootstrap dropdown not working on mobiles/tablets
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.