Question

首先，我想在一个选项中添加一个图标，但我无法弄清楚为什么它在一段时间后无法工作我意识到当我的外部.js文件正常工作时，没有任何数据属性有效，而我没有对bootsrap文件所做的更改。 值得注意 我在本地服务器（xampp）上运行该网站。我也有一些PHP（从来没有任何问题）。

<!DOCTYPE html>
<head>

<link href="css/bootstrap.min.css" rel="stylesheet">
<!--conecting link to boostrap -->
<link rel="stylesheet" type="text/css" href="css/workshop.css">  <!-- conectin link to css -->
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">

</head>
<body>
<div class="pull-left">

                   <select class="selectpicker " style="width: 100px; height: 29px;">
                      <option selected disabled style="color: red;">Categories</option>

                      <option>Random</option>
                      <option>Random</option>
                      <option>Random</option>
                      <option>Random</option>
                      <option>Random</option>
                      <option>Random</option>
                  </select>

                  </div>



                   <div class="pull-right">

                   <select class="selectpicker "data-style="btn-primary" style="width: 68px; height: 29px;">
                      <option data-icon="glyphicon-heart">Public </option>
                      <option>Private</option>
                  </select>


                      <input id="botton2" type="submit" value="Post" />





            </div>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>  <!--conecting link to js -->
<script src="js/workshop.js"></script>          

    </body>
    </html>

Answer 1

要使用字形，您可以将它们作为一个类（而不是数据属性）添加到一个＆＃39; span＆＃39;或者＆＃39;我＆＃39;选项中的元素不是选项本身。

https://www.w3schools.com/bootstrap/bootstrap_glyphicons.asp

Answer 2

您正在尝试使用bootstrap-select插件，而不将其CSS和JS包含在您的代码中。

Bootstrap Select

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/css/bootstrap-select.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.min.js"></script>

如果包含它，那么它可以正常工作。

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/css/bootstrap-select.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<head>

<link href="css/bootstrap.min.css" rel="stylesheet">
<!--conecting link to boostrap -->
<link rel="stylesheet" type="text/css" href="css/workshop.css">  <!-- conectin link to css -->
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">

</head>
<body>
<div class="pull-left">

                   <select class="selectpicker " style="width: 100px; height: 29px;">
                      <option selected disabled style="color: red;">Categories</option>

                      <option>Random</option>
                      <option>Random</option>
                      <option>Random</option>
                      <option>Random</option>
                      <option>Random</option>
                      <option>Random</option>
                  </select>

                  </div>



                   <div class="pull-right">

                   <select class="selectpicker "data-style="btn-primary" style="width: 68px; height: 29px;">
                      <option data-icon="glyphicon-heart">Public </option>
                      <option>Private</option>
                  </select>


                      <input id="botton2" type="submit" value="Post" />





            </div>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>  <!--conecting link to js -->
<script src="js/workshop.js"></script>          

    </body>
    </html>

＆＃13;

Bootsrap数据属性不起作用

2 个答案: