Lista rozwijana Bootstrap 5

Podstawowa lista rozwijana

Menu rozwijane to menu przełączalne, które pozwala użytkownikowi wybrać wartość z预先定义的列表：

Przykład

<div class="dropdown">
  <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
    Przycisk rozwijany
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Link 1</a></li>
    <li><a class="dropdown-item" href="#">Link 2</a></li>
    <li><a class="dropdown-item" href="#">Link 3</a></li>
  </ul>
</div>

Spróbuj sam

Przykład wyjaśnienia

.dropdown klasy wskazującej menu rozwijane.

Aby otworzyć menu rozwijane, użyj ustawionego .dropdown-toggle 类和 klasę i data-toggle="dropdown"

przycisku lub linku z atrybutem .dropdown-menu klasę do <div> elementy, które można faktycznie zbudować menu rozwijane. Następnie dodaj .dropdown-item dodaj klasę do każdego elementu w menu rozwijanym (linki lub przyciski).

separatorka listy rozwijanej

.dropdown-divider klasy do oddzielenia linków w menu rozwijanym za pomocą poziomej ramki:

Przykład

<li><hr class="dropdown-divider"></hr></li>

Spróbuj sam

tytuł listy rozwijanej

.dropdown-header klasy do dodania tytułu w menu rozwijanym:

Przykład

<li><h5 class="dropdown-header">Nagłówek menu rozwijanego 1</h5></li>

Spróbuj sam

wyłączonych i aktywnych elementów

Użyj .active klasy, aby wyróżnić określony element (dodaje niebieski kolor tła).

Aby wyłączyć określony element w menu rozwijanym, użyj .disabled klasę (otrzymuje kolor tekstu na szaro przy najechaniu i ikonę "no-parking-sign".).

Przykład

<li><a class="dropdown-item" href="#">zwykły</a></li>
<li><a class="dropdown-item active" href="#">aktywny</a></li>
<li><a class="dropdown-item disabled" href="#">wyłączony</a></li>

Spróbuj sam

pozycję listy rozwijanej

Możesz również określić pozycję listy rozwijanej, poprzez .dropend lub .dropstart dodaj klasę do elementu rozwijanego, aby utworzyć menu "dropend" lub "dropstart". Proszę zauważyć, że wstrzałownik/strzałka jest automatycznie dodawany:

Dropright

<div class="dropdown dropend">

Spróbuj sam

Dropleft

<div class="dropdown dropstart">

Spróbuj sam

listy rozwijane prawojustowane

Jeśli chcesz prawojustować menu rozwijane, zmień .dropdown-menu-end dodaj klasę .dropdown-menu do elementów:

Przykład

<div class="dropdown-menu dropdown-menu-end">

Spróbuj sam

listy rozwijane w górę

Jeśli chcesz, aby menu rozwijało się w górę zamiast w dół, zmień element <div> o klasie "dropdown" "dropup"：

Przykład

<div class="dropup">

Spróbuj sam

Tekst rozwijany

.dropdown-item-text Klasa używana do dodawania czystego tekstu do elementów rozwijanych, lub do dodawania domyślnego stylu linku do linków.

Przykład

<ul class="dropdown-menu">
  <li><a class="dropdown-item" href="#">Link 1</a></li>
  <li><a class="dropdown-item" href="#">Link 2</a></li>
  <li><a class="dropdown-item" href="#">Link 3</a></li>
  <li><a class="dropdown-item-text" href="#">Tekst linku</a></li>
  <li><span class="dropdown-item-text">Czysty tekst</span></li>
</ul>

Spróbuj sam

组合按钮和下拉列表

Przykład

<div class="btn-group">
  <button type="button" class="btn btn-primary">Huawei</button>
  <button type="button" class="btn btn-primary">DJI</button>
  <div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">Xiaomi</button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Telefony</a></li>
      <li><a class="dropdown-item" href="#">Tablety</a></li>
    </ul>
  </div>
</div>

Spróbuj sam

Pionowe组合按钮和下拉列表

Przykład

<div class="btn-group-vertical">
  <button type="button" class="btn btn-primary">Huawei</button>
  <button type="button" class="btn btn-primary">DJI</button>
  <div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">Xiaomi</button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Telefony</a></li>
      <li><a class="dropdown-item" href="#">Tablety</a></li>
    </ul>
  </div>
</div>

Spróbuj sam