கீழிறங்கும்

பூட்ஸ்டார்ப் கீழ்தோன்றும் சொருகி மூலம் இணைப்புகளின் பட்டியல்கள் மற்றும் பலவற்றைக் காண்பிப்பதற்கான சூழல் மேலடுக்குகளை மாற்றவும்.

கண்ணோட்டம்

டிராப் டவுன்கள் மாறக்கூடியவை, இணைப்புகளின் பட்டியல்கள் மற்றும் பலவற்றைக் காண்பிப்பதற்கான சூழல் மேலடுக்குகள். அவை சேர்க்கப்பட்டுள்ள பூட்ஸ்டார்ப் கீழ்தோன்றும் ஜாவாஸ்கிரிப்ட் செருகுநிரலுடன் ஊடாடத்தக்கவை. அவை கிளிக் செய்வதன் மூலம் மாற்றப்படுகின்றன, வட்டமிடுவதன் மூலம் அல்ல; இது ஒரு திட்டமிட்ட வடிவமைப்பு முடிவு .

டிராப் டவுன்கள் மூன்றாம் தரப்பு நூலகமான பாப்பர் மீது கட்டமைக்கப்பட்டுள்ளன , இது டைனமிக் பொசிஷனிங் மற்றும் வியூபோர்ட் கண்டறிதலை வழங்குகிறது. பூட்ஸ்டார்ப்பின் ஜாவாஸ்கிரிப்ட்டுக்கு முன் popper.min.js ஐச் சேர்ப்பதை உறுதி செய்யவும் அல்லது பாப்பரைக் கொண்டிருக்கும் bootstrap.bundle.min.js/ பயன்படுத்தவும். bootstrap.bundle.jsடைனமிக் பொசிஷனிங் தேவையில்லை என்றாலும், நாவ்பார்களில் டிராப் டவுன்களை நிலைநிறுத்த பாப்பர் பயன்படுத்தப்படுவதில்லை.

நீங்கள் எங்கள் ஜாவாஸ்கிரிப்டை மூலத்திலிருந்து உருவாக்கினால், அதற்குutil.js .

அணுகல்

WAI ARIA தரநிலை ஒரு உண்மையான role="menu"விட்ஜெட்டை வரையறுக்கிறது , ஆனால் இது செயல்கள் அல்லது செயல்பாடுகளைத் தூண்டும் பயன்பாடு போன்ற மெனுக்களுக்குக் குறிப்பிட்டது. ARIA மெனுக்களில் மெனு உருப்படிகள், தேர்வுப்பெட்டி மெனு உருப்படிகள், ரேடியோ பொத்தான் மெனு உருப்படிகள், ரேடியோ பொத்தான் குழுக்கள் மற்றும் துணை மெனுக்கள் மட்டுமே இருக்க முடியும்.

மறுபுறம், பூட்ஸ்டார்ப்பின் கீழ்தோன்றும், பொதுவானதாகவும் பல்வேறு சூழ்நிலைகள் மற்றும் மார்க்அப் கட்டமைப்புகளுக்குப் பொருந்தக்கூடியதாகவும் வடிவமைக்கப்பட்டுள்ளது. எடுத்துக்காட்டாக, தேடல் புலங்கள் அல்லது உள்நுழைவு படிவங்கள் போன்ற கூடுதல் உள்ளீடுகள் மற்றும் படிவக் கட்டுப்பாடுகளைக் கொண்ட கீழ்தோன்றல்களை உருவாக்க முடியும். இந்த காரணத்திற்காக, பூட்ஸ்டார்ப் உண்மையான ARIA மெனுக்களுக்குத் தேவையான எந்த பண்புகளையும் roleஎதிர்பார்க்காது (அல்லது தானாகவே சேர்க்காது) . இந்த குறிப்பிட்ட பண்புகளை ஆசிரியர்கள் தாங்களாகவே சேர்த்துக்கொள்ள வேண்டும்.aria-

.dropdown-itemஇருப்பினும், பூட்ஸ்டார்ப் , கர்சர் விசைகளைப் பயன்படுத்தி தனிப்பட்ட உறுப்புகள் வழியாக நகர்த்துவது மற்றும் ESCவிசையுடன் மெனுவை மூடுவது போன்ற பெரும்பாலான நிலையான விசைப்பலகை மெனு தொடர்புகளுக்கு உள்ளமைக்கப்பட்ட ஆதரவைச் சேர்க்கிறது .

எடுத்துக்காட்டுகள்

கீழ்தோன்றும் நிலைமாற்றம் (உங்கள் பொத்தான் அல்லது இணைப்பு) மற்றும் கீழ்தோன்றும் மெனுவில் உள்ள .dropdownஅல்லது அறிவிக்கும் மற்றொரு உறுப்பை மடிக்கவும் position: relative;. உங்கள் சாத்தியமான தேவைகளுக்கு ஏற்றவாறு கீழ்தோன்றல்கள் <a>அல்லது உறுப்புகளிலிருந்து தூண்டப்படலாம் .<button>

ஒற்றை பொத்தான்

.btnசில மார்க்அப் மாற்றங்களுடன் எந்த தனிப்பாடலையும் கீழ்தோன்றும் நிலைமாற்றமாக மாற்றலாம். <button>இரண்டு கூறுகளுடன் வேலை செய்ய நீங்கள் அவற்றை எவ்வாறு வைக்கலாம் என்பது இங்கே :

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

மற்றும் <a>கூறுகளுடன்:

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

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

சிறந்த அம்சம் என்னவென்றால், நீங்கள் எந்த பொத்தான் மாறுபாட்டிலும் இதைச் செய்யலாம்:

<!-- Example single danger button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
    Action
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Separated link</a>
  </div>
</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-toggle="dropdown" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Separated link</a>
  </div>
</div>

அளவிடுதல்

பட்டன் கீழ்தோன்றும் பொத்தான்கள், இயல்புநிலை மற்றும் பிளவு கீழ்தோன்றும் பொத்தான்கள் உட்பட அனைத்து அளவுகளின் பொத்தான்களிலும் வேலை செய்கின்றன.

<!-- Large button groups (default and split) -->
<div class="btn-group">
  <button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
    Large button
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</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-toggle="dropdown" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</div>

<!-- Small button groups (default and split) -->
<div class="btn-group">
  <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
    Small button
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</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-toggle="dropdown" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</div>

திசைகள்

வரை கைவிட

.dropupமூல உறுப்பில் சேர்ப்பதன் மூலம் உறுப்புகளுக்கு மேலே உள்ள கீழ்தோன்றும் மெனுவைத் தூண்டவும் .

<!-- Default dropup button -->
<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
    Dropup
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</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-toggle="dropdown" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

டிராப்ரைட்

.droprightமூல உறுப்பைச் சேர்ப்பதன் மூலம் உறுப்புகளின் வலதுபுறத்தில் கீழ்தோன்றும் மெனுக்களைத் தூண்டவும் .

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

<!-- Split dropright button -->
<div class="btn-group dropright">
  <button type="button" class="btn btn-secondary">
    Split dropright
  </button>
  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
    <span class="sr-only">Toggle Dropright</span>
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

நீர்த்துளி

.dropleftமூல உறுப்பைச் சேர்ப்பதன் மூலம் உறுப்புகளின் இடதுபுறத்தில் கீழ்தோன்றும் மெனுக்களைத் தூண்டவும் .

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

<!-- Split dropleft button -->
<div class="btn-group">
  <div class="btn-group dropleft">
    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
      <span class="sr-only">Toggle Dropleft</span>
    </button>
    <div class="dropdown-menu">
      <!-- Dropdown menu links -->
    </div>
  </div>
  <button type="button" class="btn btn-secondary">
    Split dropleft
  </button>
</div>

வரலாற்று ரீதியாக கீழ்தோன்றும் மெனு உள்ளடக்கங்கள் இணைப்புகளாக இருக்க வேண்டும், ஆனால் அது இனி v4 இல் இல்லை. இப்போது s <button>க்குப் பதிலாக உங்கள் கீழ்தோன்றும் உறுப்புகளை விருப்பமாகப் பயன்படுத்தலாம் .<a>

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

உடன் ஊடாடாத கீழ்தோன்றும் உருப்படிகளையும் நீங்கள் உருவாக்கலாம் .dropdown-item-text. தனிப்பயன் CSS அல்லது உரை பயன்பாடுகள் மூலம் மேலும் ஸ்டைல் செய்ய தயங்க வேண்டாம்.

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

செயலில்

.activeகீழ்தோன்றும் உருப்படிகளை செயலில் உள்ளதாக வடிவமைக்க அவற்றைச் சேர்க்கவும் .

<div class="dropdown-menu">
  <a class="dropdown-item" href="#">Regular link</a>
  <a class="dropdown-item active" href="#">Active link</a>
  <a class="dropdown-item" href="#">Another link</a>
</div>

முடக்கப்பட்டது

.disabledகீழ்தோன்றலில் உள்ள உருப்படிகளை முடக்கியதாக வடிவமைக்க அவற்றைச் சேர்க்கவும் .

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

இயல்பாக, கீழ்தோன்றும் மெனு தானாகவே மேலே இருந்து 100% மற்றும் அதன் பெற்றோரின் இடது பக்கமாக நிலைநிறுத்தப்படும். கீழ்தோன்றும் மெனுவை வலப்புறமாக சீரமைக்க .dropdown-menu-righta இல் சேர்க்கவும் ..dropdown-menu

எச்சரிக்கை! கீழ்தோன்றல்கள் பாப்பருக்கு நன்றி செலுத்தப்படுகின்றன (அவை நவ்பாரில் உள்ளதைத் தவிர).

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

பதிலளிக்கக்கூடிய சீரமைப்பு

நீங்கள் பதிலளிக்கக்கூடிய சீரமைப்பைப் பயன்படுத்த விரும்பினால், data-display="static"பண்புக்கூறைச் சேர்ப்பதன் மூலம் டைனமிக் பொசிஷனிங்கை முடக்கவும் மற்றும் பதிலளிக்கக்கூடிய மாறுபாடு வகுப்புகளைப் பயன்படுத்தவும்.

கொடுக்கப்பட்ட பிரேக் பாயிண்ட் அல்லது பெரியதுடன் கீழ்தோன்றும் மெனுவை வலதுபுறமாக சீரமைக்க , சேர்க்கவும் .dropdown-menu{-sm|-md|-lg|-xl}-right.

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

கொடுக்கப்பட்ட பிரேக்பாயிண்ட் அல்லது பெரியதுடன் கீழ்தோன்றும் மெனுவைச் சீரமைக்க , சேர் .dropdown-menu-rightமற்றும் .dropdown-menu{-sm|-md|-lg|-xl}-left.

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

data-display="static"நேவ்பார்களில் பாப்பர் பயன்படுத்தப்படாததால், நேவ்பார்களில் உள்ள கீழ்தோன்றும் பொத்தான்களில் பண்புக்கூறுகளைச் சேர்க்க வேண்டியதில்லை என்பதை நினைவில் கொள்ளவும் .

தலைப்புகள்

கீழ்தோன்றும் மெனுவில் செயல்களின் பிரிவுகளை லேபிளிட ஒரு தலைப்பைச் சேர்க்கவும்.

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

பிரிப்பான்கள்

ஒரு வகுப்பியுடன் தொடர்புடைய மெனு உருப்படிகளின் தனி குழுக்கள்.

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

உரை

எந்தவொரு ஃப்ரீஃபார்ம் உரையையும் கீழ்தோன்றும் மெனுவில் உரையுடன் வைக்கவும் மற்றும் இடைவெளி பயன்பாடுகளைப் பயன்படுத்தவும் . மெனுவின் அகலத்தைக் கட்டுப்படுத்த உங்களுக்கு கூடுதல் அளவு பாணிகள் தேவைப்படும் என்பதை நினைவில் கொள்ளவும்.

<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>

படிவங்கள்

கீழ்தோன்றும் மெனுவில் ஒரு படிவத்தை வைக்கவும் அல்லது கீழ்தோன்றும் மெனுவாகவும் உருவாக்கவும், உங்களுக்குத் தேவையான எதிர்மறை இடத்தை வழங்க, விளிம்பு அல்லது திணிப்பு பயன்பாடுகளைப் பயன்படுத்தவும்.

<div class="dropdown-menu">
  <form class="px-4 py-3">
    <div class="form-group">
      <label for="exampleDropdownFormEmail1">Email address</label>
      <input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="[email protected]">
    </div>
    <div class="form-group">
      <label for="exampleDropdownFormPassword1">Password</label>
      <input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password">
    </div>
    <div class="form-group">
      <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>

<form class="dropdown-menu p-4">
  <div class="form-group">
    <label for="exampleDropdownFormEmail2">Email address</label>
    <input type="email" class="form-control" id="exampleDropdownFormEmail2" placeholder="[email protected]">
  </div>
  <div class="form-group">
    <label for="exampleDropdownFormPassword2">Password</label>
    <input type="password" class="form-control" id="exampleDropdownFormPassword2" placeholder="Password">
  </div>
  <div class="form-group">
    <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>

கீழ்தோன்றும் இடத்தைப் பயன்படுத்தவும் data-offsetஅல்லது data-referenceமாற்றவும்.

<div class="d-flex">
  <div class="dropdown mr-1">
    <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false" data-offset="10,20">
      Offset
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
    </div>
  </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-toggle="dropdown" aria-expanded="false" data-reference="parent">
      <span class="sr-only">Toggle Dropdown</span>
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </div>
</div>

பயன்பாடு

தரவு பண்புக்கூறுகள் அல்லது ஜாவாஸ்கிரிப்ட் வழியாக, கீழ்தோன்றும் செருகுநிரல் .showபெற்றோரில் உள்ள வகுப்பை மாற்றுவதன் மூலம் மறைக்கப்பட்ட உள்ளடக்கத்தை (கீழ்தோன்றும் மெனுக்கள்) மாற்றுகிறது .dropdown-menu. பயன்பாட்டு data-toggle="dropdown"மட்டத்தில் கீழ்தோன்றும் மெனுக்களை மூடுவதற்கு பண்புக்கூறு சார்ந்துள்ளது, எனவே எப்போதும் அதைப் பயன்படுத்துவது நல்லது.

டச்-இயக்கப்பட்ட சாதனங்களில், கீழ்தோன்றும் திறப்பு , உறுப்புகளின் உடனடி குழந்தைகளுக்கு வெற்று ( $.noop) ஹேண்ட்லர்களை சேர்க்கிறது. ஐஓஎஸ் நிகழ்வுப் பிரதிநிதித்துவத்தில் உள்ள ஒரு வினோதத்தைச் சுற்றி வேலை செய்ய இந்த அசிங்கமான ஹேக் அவசியம் . கீழ்தோன்றும் மூடப்பட்டவுடன், இந்த கூடுதல் வெற்று ஹேண்ட்லர்கள் அகற்றப்படும். mouseover<body>mouseover

தரவு பண்புக்கூறுகள் மூலம்

data-toggle="dropdown"கீழ்தோன்றும் நிலையை மாற்ற, இணைப்பு அல்லது பொத்தானில் சேர்க்கவும் .

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

ஜாவாஸ்கிரிப்ட் வழியாக

ஜாவாஸ்கிரிப்ட் வழியாக கீழ்தோன்றல்களை அழைக்கவும்:

$('.dropdown-toggle').dropdown()

`data-toggle="dropdown"`இன்னும் தேவை

ஜாவாஸ்கிரிப்ட் வழியாக உங்கள் கீழ்தோன்றும் அழைப்பு அல்லது அதற்குப் பதிலாக டேட்டா-ஏபிஐப் பயன்படுத்தினாலும், டிராப் data-toggle="dropdown"டவுன் தூண்டுதல் உறுப்பில் எப்போதும் இருக்க வேண்டும்.

விருப்பங்கள்

தரவு பண்புக்கூறுகள் அல்லது ஜாவாஸ்கிரிப்ட் மூலம் விருப்பங்களை அனுப்பலாம். data-தரவு பண்புக்கூறுகளுக்கு, இல் உள்ளதைப் போல விருப்பப் பெயரைச் சேர்க்கவும் data-offset="".

பெயர்	வகை	இயல்புநிலை	விளக்கம்
ஆஃப்செட்	எண் \| சரம் \| செயல்பாடு	0	அதன் இலக்குடன் தொடர்புடைய கீழ்தோன்றும் ஆஃப்செட். ஆஃப்செட்டைத் தீர்மானிக்க ஒரு செயல்பாடு பயன்படுத்தப்படும்போது, அதன் முதல் வாதமாக ஆஃப்செட் தரவைக் கொண்ட ஒரு பொருளுடன் அது அழைக்கப்படுகிறது. செயல்பாடு அதே அமைப்பைக் கொண்ட ஒரு பொருளைத் திருப்பி அனுப்ப வேண்டும். தூண்டுதல் உறுப்பு DOM முனை இரண்டாவது வாதமாக அனுப்பப்பட்டது. மேலும் தகவலுக்கு, பாப்பரின் ஆஃப்செட் டாக்ஸைப் பார்க்கவும் .
புரட்டவும்	பூலியன்	உண்மை	குறிப்பு உறுப்பில் ஒன்றுடன் ஒன்று ஏற்பட்டால், கீழ்தோன்றலை புரட்ட அனுமதிக்கவும். மேலும் தகவலுக்கு, Popper's flip docs ஐப் பார்க்கவும் .
எல்லை	சரம் \| உறுப்பு	'சுருள் பெற்றோர்'	கீழ்தோன்றும் மெனுவின் அதிகப்படியான கட்டுப்பாடு எல்லை. `'viewport'`, `'window'`, `'scrollParent'`, அல்லது HTMLElement குறிப்பு (JavaScript மட்டும்) இன் மதிப்புகளை ஏற்கிறது . மேலும் தகவலுக்கு, Popper's preventOverflow ஆவணத்தைப் பார்க்கவும் .
குறிப்பு	சரம் \| உறுப்பு	'மாற்று'	கீழ்தோன்றும் மெனுவின் குறிப்பு உறுப்பு. `'toggle'`, `'parent'`அல்லது HTMLElement குறிப்பின் மதிப்புகளை ஏற்கிறது . மேலும் தகவலுக்கு, Popper's referenceObject ஆவணத்தைப் பார்க்கவும் .
காட்சி	லேசான கயிறு	'மாறும்'	இயல்பாக, டைனமிக் பொசிஷனிங்கிற்கு பாப்பரைப் பயன்படுத்துகிறோம். உடன் இதை முடக்கவும் `static`.
popperConfig	பூஜ்ய \| பொருள்	ஏதுமில்லை	பூட்ஸ்டார்ப்பின் இயல்புநிலை பாப்பர் கட்டமைப்பை மாற்ற, பாப்பரின் உள்ளமைவைப் பார்க்கவும்

கன்டெய்னருக்குப் பயன்படுத்தப்படும் பாணியைத் boundaryதவிர வேறு எந்த மதிப்புக்கும் அமைக்கப்படும்போது கவனிக்கவும் .'scrollParent'position: static.dropdown

முறைகள்

முறை	விளக்கம்
`$().dropdown('toggle')`	கொடுக்கப்பட்ட navbar அல்லது டேப் செய்யப்பட்ட வழிசெலுத்தலின் கீழ்தோன்றும் மெனுவை நிலைமாற்றுகிறது.
`$().dropdown('show')`	கொடுக்கப்பட்ட navbar அல்லது டேப் செய்யப்பட்ட வழிசெலுத்தலின் கீழ்தோன்றும் மெனுவைக் காட்டுகிறது.
`$().dropdown('hide')`	கொடுக்கப்பட்ட navbar அல்லது டேப் செய்யப்பட்ட வழிசெலுத்தலின் கீழ்தோன்றும் மெனுவை மறைக்கிறது.
`$().dropdown('update')`	உறுப்பின் கீழ்தோன்றும் நிலையைப் புதுப்பிக்கிறது.
`$().dropdown('dispose')`	ஒரு உறுப்பின் கீழ்தோன்றலை அழிக்கிறது.

நிகழ்வுகள்

அனைத்து கீழ்தோன்றும் நிகழ்வுகளும் .dropdown-menu'பேரன்ட் உறுப்பில் சுடப்படுகின்றன relatedTarget, மேலும் அதன் மதிப்பு நிலைமாற்ற ஆங்கர் உறுப்பு ஆகும். hide.bs.dropdownமற்றும் hidden.bs.dropdownநிகழ்வுகள் clickEventசொத்தை (அசல் நிகழ்வு வகையாக இருக்கும் போது மட்டும் click) கிளிக் நிகழ்விற்கான நிகழ்வுப் பொருளைக் கொண்டிருக்கும்.

நிகழ்வு	விளக்கம்
`show.bs.dropdown`	நிகழ்ச்சி நிகழ்வு முறை என்று அழைக்கப்படும் போது இந்த நிகழ்வு உடனடியாகத் தொடங்குகிறது.
`shown.bs.dropdown`	கீழ்தோன்றும் பயனருக்குத் தெரியும் போது இந்த நிகழ்வு நீக்கப்படும் (CSS மாற்றங்கள் முடியும் வரை காத்திருக்கும்).
`hide.bs.dropdown`	மறை நிகழ்வு முறை அழைக்கப்பட்டவுடன் இந்த நிகழ்வு உடனடியாக நீக்கப்படும்.
`hidden.bs.dropdown`	கீழ்தோன்றும் பயனரிடமிருந்து மறைத்து முடிந்ததும் இந்த நிகழ்வு நீக்கப்படும் (CSS மாற்றங்கள் முடியும் வரை காத்திருக்கும்).

$('#myDropdown').on('show.bs.dropdown', function () {
  // do something...
})

கீழிறங்கும்

கண்ணோட்டம்

அணுகல்

எடுத்துக்காட்டுகள்

ஒற்றை பொத்தான்

பிளவு பொத்தான்

அளவிடுதல்

திசைகள்

வரை கைவிட

டிராப்ரைட்

நீர்த்துளி

மெனு உருப்படிகள்

செயலில்

முடக்கப்பட்டது

மெனு சீரமைப்பு

பதிலளிக்கக்கூடிய சீரமைப்பு

மெனு உள்ளடக்கம்

தலைப்புகள்

பிரிப்பான்கள்

உரை

படிவங்கள்

பயன்பாடு

தரவு பண்புக்கூறுகள் மூலம்

ஜாவாஸ்கிரிப்ட் வழியாக

`data-toggle="dropdown"`இன்னும் தேவை

விருப்பங்கள்

முறைகள்

நிகழ்வுகள்

கீழிறங்கும்

கண்ணோட்டம்

அணுகல்

எடுத்துக்காட்டுகள்

ஒற்றை பொத்தான்

பிளவு பொத்தான்

அளவிடுதல்

திசைகள்

வரை கைவிட

டிராப்ரைட்

நீர்த்துளி

மெனு உருப்படிகள்

செயலில்

முடக்கப்பட்டது

மெனு சீரமைப்பு

பதிலளிக்கக்கூடிய சீரமைப்பு

மெனு உள்ளடக்கம்

தலைப்புகள்

கீழ்தோன்றும் தலைப்பு

பிரிப்பான்கள்

உரை

படிவங்கள்

கீழ்தோன்றும் விருப்பங்கள்

பயன்பாடு

தரவு பண்புக்கூறுகள் மூலம்

ஜாவாஸ்கிரிப்ட் வழியாக

data-toggle="dropdown"இன்னும் தேவை

விருப்பங்கள்

முறைகள்

நிகழ்வுகள்

`data-toggle="dropdown"`இன்னும் தேவை