Vous faire comprendre le menu déroulant bootstrap en trois minutes-Tutoriel d'amorçage-php.cn

Vous faire comprendre le menu déroulant bootstrap en trois minutes

醉折花枝作酒筹

Libérer： 2021-03-31 16:25:29

original

2735 Les gens l'ont consulté

Cet article vous présentera le menu déroulant du bouton Bootstrap. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

Vous faire comprendre le menu déroulant bootstrap en trois minutes

Ajoutez .btn-group au bouton pour déclencher le menu sous forme de bouton.

Menu déroulant à un seul bouton

Apportez quelques modifications au bouton pour l'utiliser comme menu déroulant.

<div class="btn-group">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        示例<span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
          <li><a href="#">列表1</a></li>
          <li><a href="#">列表2</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#">列表3</a></li>
      </ul>
    </div>

Copier après la connexion

Vous faire comprendre le menu déroulant bootstrap en trois minutes

Liste déroulante divisée

vs liste déroulante à bouton unique Très similaire, sauf que la version divisée a un bouton supplémentaire.

<div class="btn-group">
    <button type="button" class="btn btn-danger">示例</button>
    <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      <span class="caret"></span>
      <span class="sr-only">示例</span>//为了残障人士设计，不影响正常的阅读，屏幕阅读器能识别并阅读出来
    </button>
    <ul class="dropdown-menu">
        <li><a href="#">列表1</a></li>
        <li><a href="#">列表2</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="#">列表3</a></li>
    </ul>
</div>

Copier après la connexion

Vous faire comprendre le menu déroulant bootstrap en trois minutes

Taille

les menus déroulants prennent tous en charge les opérations de taille et prennent en charge différentes tailles.

<div class="btn-group">
        <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        大尺寸菜单<span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
            <li><a href="#">列表1</a></li>
            <li><a href="#">列表2</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">列表3</a></li>
        </ul>
    </div>
      
      <div class="btn-group">
        <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        中等尺寸菜单<span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
            <li><a href="#">列表1</a></li>
            <li><a href="#">列表2</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">列表3</a></li>
        </ul>
    </div>
      
      <div class="btn-group">
        <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        小尺寸菜单<span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
            <li><a href="#">列表1</a></li>
            <li><a href="#">列表2</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">列表3</a></li>
        </ul>
    </div>

Copier après la connexion

Vous faire comprendre le menu déroulant bootstrap en trois minutes