Выпадающий по предупреждению начальной загрузки V3 - PullRequest
Новая
       6

Выпадающий по предупреждению начальной загрузки V3

0 голосов
/ 23 октября 2018

Раскрывающийся список в окне предупреждения

Я хотел отобразить раскрывающийся список в моем окне предупреждения.Что у меня сейчас: enter image description here

Но при нажатии на него ничего не появляется.

Это мой код: 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div class="alert alert-warning row" role="alert">
  <div class="col-md-6">
    <span class="glyphicon glyphicon-info-sign" style="color: #FFA500;"></span> Conseil: La photo du produit est de mauvaise qualité, vous pouvez la modifier dans la partie 'Image et description'<br><br>
    <div class="dropdown">
      <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">Dropdown<span class="caret"></span></button>
      <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="#">Separated link</a></li>
      </ul>
    </div>
  </div>
  <div class="col-md-6">
    <p style="text-align: center">Indice de complétion : </p>
    <div class="progress" style="width: 50%; margin-left: 25%">
      <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" style="width: 50%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">50%</div><br>
    </div>
  </div>
</div>

https://ghostbin.com/paste/wfqzv

1 Ответ

0 голосов
/ 23 октября 2018

Добавить эти файлы 

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
https://code.jquery.com/jquery-2.1.0.min.js
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js

HTML 

<div class="alert alert-warning row" role="alert">
            <div class="col-md-6">
                <span class="glyphicon glyphicon-info-sign" style="color: #FFA500;"></span> Conseil: La photo du produit est de mauvaise qualité, vous pouvez la modifier dans la partie 'Image et description'<br><br>
                <div class="dropdown">
                    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                        Dropdown
                        <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                    </ul>
                </div>
            </div>
            <div class="col-md-6">
                <p style="text-align: center">Indice de complétion : </p>

                <div class="progress" style="width: 50%; margin-left: 25%">
                    <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" style="width: 50%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">50%</div><br>
                </div>
            </div>
    </div>

https://jsfiddle.net/8ype69d4/

...