Тамчы

Bootstrap тамчы плагины белән сылтамалар исемлеген күрсәтү өчен контекстуаль каплауларны алыштырыгыз.

Бу биттә

Гомуми күзәтү

Тамчы төшү - күчерелмә, сылтамалар исемлеген күрсәтү өчен контекстуаль өстәмәләр. Алар Bootstrap тамчысы JavaScript плагины белән интерактив ясалган. Алар басу белән алыштырыла, каушап түгел; бу белә торып проектлау карары .

Тамчы төшү динамик позицияләү һәм күренешне ачыклауны тәэмин итүче Popper өченче як китапханәсендә төзелгән . Bootstrap'ның JavaScript алдыннан popper.min.js кертегез яки Popper булганbootstrap.bundle.min.js / кулланыгыз bootstrap.bundle.js. Поппер диңгез такталарында тамчыларны урнаштыру өчен кулланылмый, чөнки динамик позицияләү таләп ителми.

Уңайлык

WAI ARIA стандарты фактик role="menu"виджетны билгели , ләкин бу гамәлләргә яки функцияләргә этәрүче кушымтага охшаган менюларга хас. ARIA менюларында меню элементлары, меню пунктлары, радио төймә меню элементлары, радио төймә төркемнәре һәм суб-менюлар булырга мөмкин.

Ботстрапның төшүе, гомуми һәм төрле ситуацияләргә һәм билгеләр структураларына куллану өчен эшләнгән. Мәсәлән, эзләү кырлары яки логин формалары кебек өстәмә керемнәр һәм форма контроле булган тамчыларны ясарга мөмкин. Шуңа күрә, Bootstrap чын ARIA менюлары өчен кирәк булган roleһәм aria-атрибутларны көтми (яки автоматик рәвештә кушмый) . Авторларга бу конкрет атрибутларны кертергә туры киләчәк.

.dropdown-itemЛәкин, Bootstrap күпчелек стандарт клавиатура менюлары өчен урнаштырылган ярдәм өсти, мәсәлән , курсор ачкычларын кулланып аерым элементлар аша күчү һәм менюны ачкыч белән ябу ESC.

Мисаллар

Ачылучының күчү (төймә яки сылтама) һәм тамчы менюны .dropdown, яки игълан иткән бүтән элементны урыгыз position: relative;. Сезнең потенциаль ихтыяҗларыгызга яхшырак туры килер өчен тамчылар <a>яисә элементлардан башланырга мөмкин . <button>Монда күрсәтелгән мисаллар семантик <ul>элементларны кирәк булганда кулланалар, ләкин махсус билгеләнү ярдәм итә.

Бер төймә

Кайбер теләсә нинди .btnүзгәрешләр белән тамчыга күчү мөмкин. Менә сез аларны ике <button>элемент белән эшләргә ничек куя аласыз:

html

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
  </ul>
</div>

Elementәм <a>элементлар белән:

html

<div class="dropdown">
  <a class="btn btn-secondary dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown link
  </a>

  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
  </ul>
</div>

Иң яхшысы - сез моны теләсә нинди төймә варианты белән эшли аласыз:

<!-- Example single danger button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Action
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Separated link</a></li>
  </ul>
</div>

Бөлү төймәсе

Нәкъ шулай ук, бер төймә тамчылары белән бер үк марка белән бүленгән төймә тамчыларын булдырыгыз, ләкин .dropdown-toggle-splitтамчы карет тирәсендә дөрес аралар өстәп.

Без бу өстәмә классны paddingкаретның ике ягында горизонтальне 25% киметү өчен кулланабыз һәм margin-leftрегуляр төймә төшү өчен өстәлгәнне бетерәбез. Бу өстәмә үзгәрешләр каретны бүлү төймәсенә туплыйлар һәм төп төймә янындагы урынлы зурлыктагы мәйданны тәэмин итәләр.

<!-- Example split danger button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger">Action</button>
  <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Separated link</a></li>
  </ul>
</div>

Зурлык

Кнопка тамчылары барлык зурлыктагы төймәләр белән эшли, шул исәптән килешү һәм бүленгән төшү төймәләре.

<!-- Large button groups (default and split) -->
<div class="btn-group">
  <button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Large button
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>
<div class="btn-group">
  <button class="btn btn-secondary btn-lg" type="button">
    Large split button
  </button>
  <button type="button" class="btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

<div class="btn-group">
  <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Small button
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>
<div class="btn-group">
  <button class="btn btn-secondary btn-sm" type="button">
    Small split button
  </button>
  <button type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

Караңгы төшү

.dropdown-menu-darkКараңгы диңгез тактасына яки булган стильгә туры килер өчен, караңгы тамчыларга керегез .dropdown-menu. Ачылучы әйберләргә бернинди үзгәрешләр дә кирәк түгел.

html

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu dropdown-menu-dark">
    <li><a class="dropdown-item active" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Separated link</a></li>
  </ul>
</div>

Navәм аны диңгез тактасында куллану:

html

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDarkDropdown" aria-controls="navbarNavDarkDropdown" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavDarkDropdown">
      <ul class="navbar-nav">
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu dropdown-menu-dark">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

Ectionsнәлеш

РТЛ

Ротлда Bootstrap кулланганда юнәлешләр чагылдырылган, ягъни .dropstartуң якта күренәчәк.

Eredзәк

.dropdown-centerАшау менюсын төп элемент белән күчү астына урнаштырыгыз .

html

<div class="dropdown-center">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Centered dropdown
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Action two</a></li>
    <li><a class="dropdown-item" href="#">Action three</a></li>
  </ul>
</div>

Тамчы

.dropupАта-аналар элементына өстәп тамчы менюларны элементлар өстендә эшләгез .

<!-- Default dropup button -->
<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropup
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

<!-- Split dropup button -->
<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary">
    Split dropup
  </button>
  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

Тамчы үзәк

Ачылучы менюны төп элемент белән күчү өстендә .dropup-centerурнаштырыгыз.

html

<div class="dropup-center dropup">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Centered dropup
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Action two</a></li>
    <li><a class="dropdown-item" href="#">Action three</a></li>
  </ul>
</div>

Тамчы

.dropendАта-аналар элементын өстәп элементларның уң ягында тамчы менюларны триггер .

<!-- Default dropend button -->
<div class="btn-group dropend">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropend
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

<!-- Split dropend button -->
<div class="btn-group dropend">
  <button type="button" class="btn btn-secondary">
    Split dropend
  </button>
  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropend</span>
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

Тамчы

.dropstartАта-аналар элементын өстәп элементларның сул ягында тамчы менюларны триггер .

<!-- Default dropstart button -->
<div class="btn-group dropstart">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropstart
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

<!-- Split dropstart button -->
<div class="btn-group dropstart">
  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropstart</span>
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
  <button type="button" class="btn btn-secondary">
    Split dropstart
  </button>
</div>

Сез <a>яисә <button>элементларны тамчы әйберләр итеп куллана аласыз.

html

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown
  </button>
  <ul class="dropdown-menu">
    <li><button class="dropdown-item" type="button">Action</button></li>
    <li><button class="dropdown-item" type="button">Another action</button></li>
    <li><button class="dropdown-item" type="button">Something else here</button></li>
  </ul>
</div>

Сез шулай ук интерактив булмаган тамчы әйберләр ясый аласыз .dropdown-item-text. Алга таба махсус CSS яки текст ярдәмендә стиль ясарга ирек бирегез.

html

<ul class="dropdown-menu">
  <li><span class="dropdown-item-text">Dropdown item text</span></li>
  <li><a class="dropdown-item" href="#">Action</a></li>
  <li><a class="dropdown-item" href="#">Another action</a></li>
  <li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>

Актив

Аларны актив итеп.active стильләштерү өчен тамчы әйберләргә өстәгез . Актив халәтне ярдәмче технологияләргә җиткерү өчен, атрибутны кулланыгыз - хәзерге бит өчен, яки комплекттагы агымдагы әйбер өчен.aria-currentpagetrue

html

<ul class="dropdown-menu">
  <li><a class="dropdown-item" href="#">Regular link</a></li>
  <li><a class="dropdown-item active" href="#" aria-current="true">Active link</a></li>
  <li><a class="dropdown-item" href="#">Another link</a></li>
</ul>

Инвалид

Аларны инвалид итеп.disabled стильләштерү өчен тамчы әйберләргә өстәгез .

html

<ul class="dropdown-menu">
  <li><a class="dropdown-item" href="#">Regular link</a></li>
  <li><a class="dropdown-item disabled">Disabled link</a></li>
  <li><a class="dropdown-item" href="#">Another link</a></li>
</ul>

Килешү буенча, тамчы меню автоматик рәвештә 100% өстән һәм ата-анасының сул ягына урнаштырыла. Сез моны юнәлеш .drop*класслары белән үзгәртә аласыз, ләкин сез аларны өстәмә үзгәртүче класслар белән контрольдә тота аласыз.

Ачылучы менюны уңга тигезләү өчен .dropdown-menu-endөстәгез . .dropdown-menuRTL'да Bootstrap кулланганда юнәлешләр чагылдырылган, ягъни .dropdown-menu-endсул якта күренәчәк.

Идарә итә! Тамчы төшү Поппер ярдәмендә урнашкан, алар диңгез тактасында булганнан кала.

html

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Right-aligned menu example
  </button>
  <ul class="dropdown-menu dropdown-menu-end">
    <li><button class="dropdown-item" type="button">Action</button></li>
    <li><button class="dropdown-item" type="button">Another action</button></li>
    <li><button class="dropdown-item" type="button">Something else here</button></li>
  </ul>
</div>

Onsаваплы тигезләү

Әгәр дә сез җаваплы тигезләү кулланырга телисез икән, data-bs-display="static"атрибутны өстәп динамик позицияне сүндерегез һәм җаваплы вариация классларын кулланыгыз.

Тамчы менюсын бирелгән нокта яки зуррак белән тигезләү өчен, өстәгез .dropdown-menu{-sm|-md|-lg|-xl|-xxl}-end.

html

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
    Left-aligned but right aligned when large screen
  </button>
  <ul class="dropdown-menu dropdown-menu-lg-end">
    <li><button class="dropdown-item" type="button">Action</button></li>
    <li><button class="dropdown-item" type="button">Another action</button></li>
    <li><button class="dropdown-item" type="button">Something else here</button></li>
  </ul>
</div>

Ачылган менюны бирелгән нокта яки зуррак белән тигезләү өчен, өстәгез .dropdown-menu-endһәм .dropdown-menu{-sm|-md|-lg|-xl|-xxl}-start.

html

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
    Right-aligned but left aligned when large screen
  </button>
  <ul class="dropdown-menu dropdown-menu-end dropdown-menu-lg-start">
    <li><button class="dropdown-item" type="button">Action</button></li>
    <li><button class="dropdown-item" type="button">Another action</button></li>
    <li><button class="dropdown-item" type="button">Something else here</button></li>
  </ul>
</div>

Игътибар итегез, data-bs-display="static"диңгез такталарында төшү төймәләренә атрибут өстәргә кирәк түгел, чөнки Поппер диңгез такталарында кулланылмый.

Тигезләү вариантлары

Aboveгарыда күрсәтелгән вариантларның күбесен алып, монда бер кухняда төрле тамчы тигезләү вариантларының кечкенә кухня чокыры демо.

html

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Right-aligned menu
  </button>
  <ul class="dropdown-menu dropdown-menu-end">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
    Left-aligned, right-aligned lg
  </button>
  <ul class="dropdown-menu dropdown-menu-lg-end">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
    Right-aligned, left-aligned lg
  </button>
  <ul class="dropdown-menu dropdown-menu-end dropdown-menu-lg-start">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group dropstart">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropstart
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group dropend">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropend
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropup
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

Башлыклар

Теләсә нинди тамчы менюда эш бүлекләрен билгеләргә башлам өстәгез.

html

<ul class="dropdown-menu">
  <li><h6 class="dropdown-header">Dropdown header</h6></li>
  <li><a class="dropdown-item" href="#">Action</a></li>
  <li><a class="dropdown-item" href="#">Another action</a></li>
</ul>

Бүләкләүчеләр

Бәйләнешле меню әйберләренең төркемнәрен бүлүче белән аерыгыз.

html

<ul class="dropdown-menu">
  <li><a class="dropdown-item" href="#">Action</a></li>
  <li><a class="dropdown-item" href="#">Another action</a></li>
  <li><a class="dropdown-item" href="#">Something else here</a></li>
  <li><hr class="dropdown-divider"></li>
  <li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>

Текст

Теләсә нинди ирекле текстны тамчы меню эчендә урнаштырыгыз һәм аралар ярдәмендә кулланыгыз . Игътибар итегез, меню киңлеген чикләү өчен сезгә өстәмә зурлык стильләре кирәк булыр.

html

<div class="dropdown-menu p-4 text-muted" style="max-width: 200px;">
  <p>
    Some example text that's free-flowing within the dropdown menu.
  </p>
  <p class="mb-0">
    And this is more example text.
  </p>
</div>

Формалар

Форманы тамчы менюга куегыз, яисә тамчы менюга кертегез, һәм сез кирәк булган тискәре урынны бирү өчен маржа яки паддер ярдәмендә кулланыгыз.

html

<div class="dropdown-menu">
  <form class="px-4 py-3">
    <div class="mb-3">
      <label for="exampleDropdownFormEmail1" class="form-label">Email address</label>
      <input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="[email protected]">
    </div>
    <div class="mb-3">
      <label for="exampleDropdownFormPassword1" class="form-label">Password</label>
      <input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password">
    </div>
    <div class="mb-3">
      <div class="form-check">
        <input type="checkbox" class="form-check-input" id="dropdownCheck">
        <label class="form-check-label" for="dropdownCheck">
          Remember me
        </label>
      </div>
    </div>
    <button type="submit" class="btn btn-primary">Sign in</button>
  </form>
  <div class="dropdown-divider"></div>
  <a class="dropdown-item" href="#">New around here? Sign up</a>
  <a class="dropdown-item" href="#">Forgot password?</a>
</div>

html

<div class="dropdown">
  <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-auto-close="outside">
    Dropdown form
  </button>
  <form class="dropdown-menu p-4">
    <div class="mb-3">
      <label for="exampleDropdownFormEmail2" class="form-label">Email address</label>
      <input type="email" class="form-control" id="exampleDropdownFormEmail2" placeholder="[email protected]">
    </div>
    <div class="mb-3">
      <label for="exampleDropdownFormPassword2" class="form-label">Password</label>
      <input type="password" class="form-control" id="exampleDropdownFormPassword2" placeholder="Password">
    </div>
    <div class="mb-3">
      <div class="form-check">
        <input type="checkbox" class="form-check-input" id="dropdownCheck2">
        <label class="form-check-label" for="dropdownCheck2">
          Remember me
        </label>
      </div>
    </div>
    <button type="submit" class="btn btn-primary">Sign in</button>
  </form>
</div>

Тамчы урынын кулланыгыз data-bs-offsetяки data-bs-referenceүзгәртегез.

html

<div class="d-flex">
  <div class="dropdown me-1">
    <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-offset="10,20">
      Offset
    </button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li><a class="dropdown-item" href="#">Something else here</a></li>
    </ul>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-secondary">Reference</button>
    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false" data-bs-reference="parent">
      <span class="visually-hidden">Toggle Dropdown</span>
    </button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li><a class="dropdown-item" href="#">Something else here</a></li>
      <li><hr class="dropdown-divider"></li>
      <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
  </div>
</div>

Авто ябык тәртип

Килешү буенча, тамчы меню эчкә яки тышка чыккач ябыла. Сез autoCloseтамчы тәртибен үзгәртү вариантын куллана аласыз.

html

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="true" aria-expanded="false">
    Default dropdown
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="inside" aria-expanded="false">
    Clickable outside
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
    Clickable inside
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="false" aria-expanded="false">
    Manual close
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

CSS

Variзгәрешләр

V5.2.0 өстәлде

Bootstrap үсешенең CSS үзгәрүчәнлеге алымы кысаларында, тамчылар хәзерге вакытта җирле CSS үзгәрүләрен .dropdown-menuреаль вакытны көйләү өчен кулланалар. CSS үзгәрүчәннәре өчен кыйммәтләр Sass аша куела, шуңа күрә Sass көйләү дә ярдәм итә.

  --#{$prefix}dropdown-zindex: #{$zindex-dropdown};
  --#{$prefix}dropdown-min-width: #{$dropdown-min-width};
  --#{$prefix}dropdown-padding-x: #{$dropdown-padding-x};
  --#{$prefix}dropdown-padding-y: #{$dropdown-padding-y};
  --#{$prefix}dropdown-spacer: #{$dropdown-spacer};
  @include rfs($dropdown-font-size, --#{$prefix}dropdown-font-size);
  --#{$prefix}dropdown-color: #{$dropdown-color};
  --#{$prefix}dropdown-bg: #{$dropdown-bg};
  --#{$prefix}dropdown-border-color: #{$dropdown-border-color};
  --#{$prefix}dropdown-border-radius: #{$dropdown-border-radius};
  --#{$prefix}dropdown-border-width: #{$dropdown-border-width};
  --#{$prefix}dropdown-inner-border-radius: #{$dropdown-inner-border-radius};
  --#{$prefix}dropdown-divider-bg: #{$dropdown-divider-bg};
  --#{$prefix}dropdown-divider-margin-y: #{$dropdown-divider-margin-y};
  --#{$prefix}dropdown-box-shadow: #{$dropdown-box-shadow};
  --#{$prefix}dropdown-link-color: #{$dropdown-link-color};
  --#{$prefix}dropdown-link-hover-color: #{$dropdown-link-hover-color};
  --#{$prefix}dropdown-link-hover-bg: #{$dropdown-link-hover-bg};
  --#{$prefix}dropdown-link-active-color: #{$dropdown-link-active-color};
  --#{$prefix}dropdown-link-active-bg: #{$dropdown-link-active-bg};
  --#{$prefix}dropdown-link-disabled-color: #{$dropdown-link-disabled-color};
  --#{$prefix}dropdown-item-padding-x: #{$dropdown-item-padding-x};
  --#{$prefix}dropdown-item-padding-y: #{$dropdown-item-padding-y};
  --#{$prefix}dropdown-header-color: #{$dropdown-header-color};
  --#{$prefix}dropdown-header-padding-x: #{$dropdown-header-padding-x};
  --#{$prefix}dropdown-header-padding-y: #{$dropdown-header-padding-y};

CSS үзгәрүчәннәре аша үзләштерү .dropdown-menu-darkкласста күренә, анда без CSS селекторларын кабатламыйча, билгеле кыйммәтләрне юкка чыгарабыз.

  --#{$prefix}dropdown-color: #{$dropdown-dark-color};
  --#{$prefix}dropdown-bg: #{$dropdown-dark-bg};
  --#{$prefix}dropdown-border-color: #{$dropdown-dark-border-color};
  --#{$prefix}dropdown-box-shadow: #{$dropdown-dark-box-shadow};
  --#{$prefix}dropdown-link-color: #{$dropdown-dark-link-color};
  --#{$prefix}dropdown-link-hover-color: #{$dropdown-dark-link-hover-color};
  --#{$prefix}dropdown-divider-bg: #{$dropdown-dark-divider-bg};
  --#{$prefix}dropdown-link-hover-bg: #{$dropdown-dark-link-hover-bg};
  --#{$prefix}dropdown-link-active-color: #{$dropdown-dark-link-active-color};
  --#{$prefix}dropdown-link-active-bg: #{$dropdown-dark-link-active-bg};
  --#{$prefix}dropdown-link-disabled-color: #{$dropdown-dark-link-disabled-color};
  --#{$prefix}dropdown-header-color: #{$dropdown-dark-header-color};

Сасс үзгәрүләр

Барлык тамчылар өчен үзгәрешләр:

$dropdown-min-width:                10rem;
$dropdown-padding-x:                0;
$dropdown-padding-y:                .5rem;
$dropdown-spacer:                   .125rem;
$dropdown-font-size:                $font-size-base;
$dropdown-color:                    $body-color;
$dropdown-bg:                       $white;
$dropdown-border-color:             var(--#{$prefix}border-color-translucent);
$dropdown-border-radius:            $border-radius;
$dropdown-border-width:             $border-width;
$dropdown-inner-border-radius:      subtract($dropdown-border-radius, $dropdown-border-width);
$dropdown-divider-bg:               $dropdown-border-color;
$dropdown-divider-margin-y:         $spacer * .5;
$dropdown-box-shadow:               $box-shadow;

$dropdown-link-color:               $gray-900;
$dropdown-link-hover-color:         shade-color($dropdown-link-color, 10%);
$dropdown-link-hover-bg:            $gray-200;

$dropdown-link-active-color:        $component-active-color;
$dropdown-link-active-bg:           $component-active-bg;

$dropdown-link-disabled-color:      $gray-500;

$dropdown-item-padding-y:           $spacer * .25;
$dropdown-item-padding-x:           $spacer;

$dropdown-header-color:             $gray-600;
$dropdown-header-padding-x:         $dropdown-item-padding-x;
$dropdown-header-padding-y:         $dropdown-padding-y;
// fusv-disable
$dropdown-header-padding:           $dropdown-header-padding-y $dropdown-header-padding-x; // Deprecated in v5.2.0
// fusv-enable

Караңгы төшү өчен үзгәрешләр :

$dropdown-dark-color:               $gray-300;
$dropdown-dark-bg:                  $gray-800;
$dropdown-dark-border-color:        $dropdown-border-color;
$dropdown-dark-divider-bg:          $dropdown-divider-bg;
$dropdown-dark-box-shadow:          null;
$dropdown-dark-link-color:          $dropdown-dark-color;
$dropdown-dark-link-hover-color:    $white;
$dropdown-dark-link-hover-bg:       rgba($white, .15);
$dropdown-dark-link-active-color:   $dropdown-link-active-color;
$dropdown-dark-link-active-bg:      $dropdown-link-active-bg;
$dropdown-dark-link-disabled-color: $gray-500;
$dropdown-dark-header-color:        $gray-500;

Тамчы интерактивлыгын күрсәтүче CSS нигезендәге каретлар өчен үзгәрешләр:

$caret-width:                 .3em;
$caret-vertical-align:        $caret-width * .85;
$caret-spacing:               $caret-width * .85;

Миксинс

Миксиннар CSS нигезендәге каретлар ясау өчен кулланыла һәм аларны табып була scss/mixins/_caret.scss.

@mixin caret-down {
  border-top: $caret-width solid;
  border-right: $caret-width solid transparent;
  border-bottom: 0;
  border-left: $caret-width solid transparent;
}

@mixin caret-up {
  border-top: 0;
  border-right: $caret-width solid transparent;
  border-bottom: $caret-width solid;
  border-left: $caret-width solid transparent;
}

@mixin caret-end {
  border-top: $caret-width solid transparent;
  border-right: 0;
  border-bottom: $caret-width solid transparent;
  border-left: $caret-width solid;
}

@mixin caret-start {
  border-top: $caret-width solid transparent;
  border-right: $caret-width solid;
  border-bottom: $caret-width solid transparent;
}

@mixin caret($direction: down) {
  @if $enable-caret {
    &::after {
      display: inline-block;
      margin-left: $caret-spacing;
      vertical-align: $caret-vertical-align;
      content: "";
      @if $direction == down {
        @include caret-down();
      } @else if $direction == up {
        @include caret-up();
      } @else if $direction == end {
        @include caret-end();
      }
    }

    @if $direction == start {
      &::after {
        display: none;
      }

      &::before {
        display: inline-block;
        margin-right: $caret-spacing;
        vertical-align: $caret-vertical-align;
        content: "";
        @include caret-start();
      }
    }

    &:empty::after {
      margin-left: 0;
    }
  }
}

Куллану

.showМәгълүмат атрибутлары яки JavaScript аша, тамчы плагин яшерен эчтәлекне (тамчы менюларны) ата-анага күчереп алыштыра .dropdown-menu. Атрибут кушымта дәрәҗәсендә тамчы менюларны ябу өчен data-bs-toggle="dropdown"таяна, шуңа күрә аны һәрвакыт куллану яхшы идея.

Сенсор ярдәмендә җайланмаларда тамчы ачылу элементның mouseoverякын балаларына буш эшкәртүчеләр өсти. <body>Бу ямьсез хак , iOS вакыйгалар делегациясендә чуалыш өстендә эшләргә кирәк , бу тамчы тамчы ябылган кодны эшләтеп җибәрүдән саклый. Тамчы ябылганнан соң, бу өстәмә буш mouseoverэшкәртүчеләр бетерелә.

Мәгълүмат атрибутлары аша

Ачылуны data-bs-toggle="dropdown"алыштыру өчен сылтамага яки төймәгә өстәгез.

<div class="dropdown">
  <button type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown trigger
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

JavaScript аша

JavaScript аша тамчыларга шалтыратыгыз:

const dropdownElementList = document.querySelectorAll('.dropdown-toggle')
const dropdownList = [...dropdownElementList].map(dropdownToggleEl => new bootstrap.Dropdown(dropdownToggleEl))

`data-bs-toggle="dropdown"`һаман кирәк

JavaScript аша тамчыгызга шалтыратасызмы, яисә мәгълүмат-api кулланасызмы, data-bs-toggle="dropdown"тамчы триггер элементында һәрвакыт булырга тиеш.

Вариантлар

Вариантлар мәгълүмат атрибутлары яки JavaScript аша уза алганлыктан, сез опция исемен куша data-bs-аласыз data-bs-animation="{value}". Вариант исемен мәгълүмат атрибутлары аша үткәндә " camelCase " дан "kebab -case " га үзгәртегез. Мәсәлән, data-bs-custom-class="beautifier"урынына кулланыгыз data-bs-customClass="beautifier".

Bootstrap 5.2.0 мәгълүматларына караганда, барлык компонентлар эксперименталь сакланган мәгълүмат атрибутын хуплый, data-bs-configалар гади компонент конфигурациясен JSON сызыгы итеп урнаштыра ала. Элемент data-bs-config='{"delay":0, "title":123}'һәм data-bs-title="456"атрибутлар булганда, соңгы titleкыйммәт булачак 456һәм аерым мәгълүмат атрибутлары бирелгән кыйммәтләрне юкка чыгарачак data-bs-config. Моннан тыш, булган мәгълүмат атрибутлары JSON кебек кыйммәтләрне урнаштыра ала data-bs-delay='{"show":0,"hide":150}'.

Исем	Тип	Килешү	Тасвирлау
`autoClose`	буле, кыл	`true`	Төшүнең автоматик якын тәртибен конфигурацияләгез: `true`- тамчы менюның тышына яки эченә басып ябылачак. `falsehide`- тамчы күчү төймәсенә басып, кул белән шалтырату яки `toggle`ысул белән ябылачак . `esc`(Шулай ук төймәгә басып ябылмаячак ) `'inside'`- тамчы меню эчендә басып ябылачак. `'outside'`- тамчы менюдан тыш басып ябылачак. `ESC`Искәрмә: төшү һәрвакыт ачкыч белән ябылырга мөмкин .
`boundary`	тезмә, элемент	`'clippingParents'`	Ачылучы менюның ташып торган чик чикләре (Попперның профилактикаOverflow модификаторына гына кагыла). Килешү буенча ул `clippingParents`һәм HTMLElement сылтамасын кабул итә ала (JavaScript аша гына). Күбрәк мәгълүмат өчен Popper's detectOverflow документларына мөрәҗәгать итегез .
`display`	кыл	`'dynamic'`	Килешү буенча без динамик позиция өчен Popper кулланабыз. Моны сүндерегез `static`.
`offset`	массив, тезмә, функция	`[0, 2]`	Максатына караганда төшү төшүе. Сез мәгълүмат атрибутларында үтем белән аерылган кыйммәтләр белән уза аласыз : `data-bs-offset="10,20"`. Офсетны билгеләү өчен функция кулланылганда, ул беренче аргумент буларак поппер урнаштыру, белешмәлек һәм поппер ректлары булган объект белән атала. Икенче аргумент буларак DOM төененең этәргеч элементы уза. Функция ике сан белән массивны кайтарырга тиеш: скидинг , дистанция . Күбрәк мәгълүмат өчен Попперның офсет документларына мөрәҗәгать итегез .
`popperConfig`	нуль, объект, функция	`null`	Bootstrap'ның default Popper конфигурациясен үзгәртү өчен, Popper конфигурациясен карагыз . Popper конфигурациясен булдыру өчен функция кулланылганда, ул Bootstrap'ның демократик Popper конфигурациясен үз эченә алган объект белән атала. Бу сиңа конфигурацияне кулланырга һәм берләштерергә ярдәм итә. Функция Popper өчен конфигурация объектын кайтарырга тиеш.
`reference`	тезмә, элемент, объект	`'toggle'`	Ачылучы менюның сылтама элементы. `'toggle'`,, `'parent'`HTMLElement сылтамасын яки тәэмин итүче объектның кыйммәтләрен кабул итә `getBoundingClientRect`. Күбрәк мәгълүмат өчен Попперның конструктор документларына һәм виртуаль элемент документларына мөрәҗәгать итегез .

Белән функция куллану`popperConfig`

const dropdown = new bootstrap.Dropdown(element, {
  popperConfig(defaultBsPopperConfig) {
    // const newPopperConfig = {...}
    // use defaultBsPopperConfig if needed...
    // return newPopperConfig
  }
})

Методлар

Метод	Тасвирлау
`dispose`	Элементның төшүен юкка чыгара. (DOM элементында сакланган мәгълүматны бетерә)
`getInstance`	DOM элементына бәйләнгән төшү инстанциясен алырга мөмкинлек бирүче статик ысул, сез аны болай куллана аласыз : `bootstrap.Dropdown.getInstance(element)`.
`getOrCreateInstance`	Статик ысул, ул DOM элементына бәйләнгән төшү инстанциясен кире кайтара яки башланмаган очракта яңасын булдыра. Сез аны болай куллана аласыз : `bootstrap.Dropdown.getOrCreateInstance(element)`.
`hide`	Бирелгән диңгез тактасының тамчы менюсын яки салынган навигацияне яшерә.
`show`	Бирелгән навигация яки тамгаланган навигациянең тамчы менюсын күрсәтә.
`toggle`	Бирелгән диңгез тактасының тамчы менюсын яисә салынган навигацияне алыштыра.
`update`	Элементның төшү позициясен яңарта.

Вакыйгалар

Барлык төшү вакыйгалары күчү элементына атыла, аннары күбекләнә. Шулай итеп сез вакыйга тыңлаучыларын ата- .dropdown-menuаналар элементына өсти аласыз. hide.bs.dropdownһәм hidden.bs.dropdownвакыйгаларның clickEventмилеге бар (вакыйганың оригиналь төре булганда click), анда чирттерү вакыйгасы өчен Вакыйга объекты бар.

Вакыйга төре	Тасвирлау
`hide.bs.dropdown`	`hide`Мисал ысулы чакырылганда шунда ук янып тора .
`hidden.bs.dropdown`	Кулланучының яшеренлеге беткәч һәм CSS күчү тәмамлангач, эштән китте.
`show.bs.dropdown`	`show`Мисал ысулы чакырылганда шунда ук янып тора .
`shown.bs.dropdown`	Тамчы кулланучыга күренгәч һәм CSS күчү тәмамлангач, эштән китте.

const myDropdown = document.getElementById('myDropdown')
myDropdown.addEventListener('show.bs.dropdown', event => {
  // do something...
})

Тамчы

Гомуми күзәтү

Уңайлык

Мисаллар

Бер төймә

Бөлү төймәсе

Зурлык

Караңгы төшү

Ectionsнәлеш

РТЛ

Eredзәк

Тамчы

Тамчы үзәк

Тамчы

Тамчы

Меню әйберләре

Актив

Инвалид

Меню тигезләү

Onsаваплы тигезләү

Тигезләү вариантлары

Меню эчтәлеге

Башлыклар

Бүләкләүчеләр

Текст

Формалар

Авто ябык тәртип

CSS

Variзгәрешләр

Сасс үзгәрүләр

Миксинс

Куллану

Мәгълүмат атрибутлары аша

JavaScript аша

`data-bs-toggle="dropdown"`һаман кирәк

Вариантлар

Белән функция куллану`popperConfig`

Методлар

Вакыйгалар

Тамчы

Гомуми күзәтү

Уңайлык

Мисаллар

Бер төймә

Бөлү төймәсе

Зурлык

Караңгы төшү

Ectionsнәлеш

РТЛ

Eredзәк

Тамчы

Тамчы үзәк

Тамчы

Тамчы

Меню әйберләре

Актив

Инвалид

Меню тигезләү

Onsаваплы тигезләү

Тигезләү вариантлары

Меню эчтәлеге

Башлыклар

Тамчы башы

Бүләкләүчеләр

Текст

Формалар

Ачылу вариантлары

Авто ябык тәртип

CSS

Variзгәрешләр

Сасс үзгәрүләр

Миксинс

Куллану

Мәгълүмат атрибутлары аша

JavaScript аша

data-bs-toggle="dropdown"һаман кирәк

Вариантлар

Белән функция куллануpopperConfig

Методлар

Вакыйгалар

`data-bs-toggle="dropdown"`һаман кирәк

Белән функция куллану`popperConfig`