ડ્રોપડાઉન

બુટસ્ટ્રેપ ડ્રોપડાઉન પ્લગઇન સાથે લિંક્સની સૂચિ અને વધુ પ્રદર્શિત કરવા માટે સંદર્ભિત ઓવરલેને ટૉગલ કરો.

ઝાંખી

ડ્રોપડાઉન ટૉગલ કરી શકાય તેવા છે, લિંક્સની સૂચિ અને વધુ પ્રદર્શિત કરવા માટે સંદર્ભિત ઓવરલે છે. તેઓ સમાવવામાં આવેલ બુટસ્ટ્રેપ ડ્રોપડાઉન JavaScript પ્લગઇન સાથે ઇન્ટરેક્ટિવ બનાવવામાં આવ્યા છે. તેઓ ક્લિક કરીને ટૉગલ થાય છે, હોવર કરીને નહીં; આ એક ઇરાદાપૂર્વક ડિઝાઇન નિર્ણય છે .

ડ્રોપડાઉન તૃતીય પક્ષ લાઇબ્રેરી, Popper.js પર બનેલ છે , જે ગતિશીલ સ્થિતિ અને વ્યુપોર્ટ શોધ પ્રદાન કરે છે. બુટસ્ટ્રેપની JavaScript પહેલાં popper.min.js શામેલ કરવાની ખાતરી કરો અથવા bootstrap.bundle.min.js/ bootstrap.bundle.jsજેમાં Popper.js હોય તેનો ઉપયોગ કરો. Popper.js નો ઉપયોગ નેવબારમાં ડ્રોપડાઉનને સ્થાન આપવા માટે થતો નથી, જોકે ગતિશીલ સ્થિતિની જરૂર નથી.

જો તમે સ્ત્રોતમાંથી અમારી JavaScript બનાવી રહ્યાં છો, તો તેને જરૂરી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" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <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" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown link
  </a>

  <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
    <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-haspopup="true" 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-haspopup="true" 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-haspopup="true" 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-haspopup="true" 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-haspopup="true" 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-haspopup="true" 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-haspopup="true" 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-haspopup="true" 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-haspopup="true" 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-haspopup="true" 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-haspopup="true" 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" role="group">
    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" 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 સાથે કેસ નથી . હવે તમે <button>ફક્ત <a>s ને બદલે વૈકલ્પિક રીતે તમારા ડ્રોપડાઉનમાં ઘટકોનો ઉપયોગ કરી શકો છો.

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenu2">
    <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" href="#" tabindex="-1" aria-disabled="true">Disabled link</a>
  <a class="dropdown-item" href="#">Another link</a>
</div>

ડિફૉલ્ટ રૂપે, ડ્રોપડાઉન મેનૂ આપોઆપ 100% ઉપરથી અને તેના પેરેન્ટની ડાબી બાજુએ સ્થિત છે. ડ્રોપડાઉન મેનૂને જમણે સંરેખિત કરવા .dropdown-menu-rightમાટે a માં ઉમેરો ..dropdown-menu

હેડ અપ! ડ્રોપડાઉન Popper.js ને આભારી છે (જ્યારે તેઓ navbar માં સમાવિષ્ટ હોય તે સિવાય).

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" 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-haspopup="true" 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-haspopup="true" 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>

નોંધ કરો કે તમારે navbars માં ડ્રોપડાઉન બટનો માટે વિશેષતા ઉમેરવાની જરૂર નથી data-display="static", કારણ કે Popper.js નો ઉપયોગ navbars માં થતો નથી.

હેડરો

કોઈપણ ડ્રોપડાઉન મેનૂમાં ક્રિયાઓના વિભાગોને લેબલ કરવા માટે હેડર ઉમેરો.

<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" id="dropdownMenuOffset" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-offset="10,20">
      Offset
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuOffset">
      <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" id="dropdownMenuReference" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-reference="parent">
      <span class="sr-only">Toggle Dropdown</span>
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuReference">
      <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>

ઉપયોગ

ડેટા એટ્રિબ્યુટ્સ અથવા JavaScript દ્વારા, ડ્રોપડાઉન પ્લગઇન .showપિતૃ સૂચિ આઇટમ પર વર્ગને ટૉગલ કરીને છુપાયેલ સામગ્રી (ડ્રોપડાઉન મેનૂ) ને ટૉગલ કરે છે. data-toggle="dropdown"એપ્લિકેશન સ્તરે ડ્રોપડાઉન મેનૂ બંધ કરવા માટે વિશેષતા પર આધાર રાખે છે, તેથી તેનો હંમેશા ઉપયોગ કરવો એ સારો વિચાર છે .

ટચ-સક્ષમ ઉપકરણો પર, ડ્રોપડાઉન ખોલવાથી તત્વના તાત્કાલિક બાળકોમાં ખાલી ( $.noop) હેન્ડલર ઉમેરાય છે. આ સ્વીકાર્ય રીતે નીચ હેક iOSના ઇવેન્ટ ડેલિગેશનમાં ક્વિર્કની આસપાસ કામ કરવા માટે જરૂરી છે , જે અન્યથા ડ્રોપડાઉનની બહાર ગમે ત્યાં ટેપને ડ્રોપડાઉન બંધ કરતા કોડને ટ્રિગર કરવાથી અટકાવશે. એકવાર ડ્રોપડાઉન બંધ થઈ જાય, આ વધારાના ખાલી હેન્ડલર્સ દૂર કરવામાં આવે છે.mouseover<body>mouseover

ડેટા લક્ષણો દ્વારા

data-toggle="dropdown"ડ્રોપડાઉનને ટૉગલ કરવા માટે લિંક અથવા બટનમાં ઉમેરો .

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

JavaScript દ્વારા

JavaScript દ્વારા ડ્રોપડાઉનને કૉલ કરો:

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

`data-toggle="dropdown"`હજુ પણ જરૂરી છે

ભલે તમે JavaScript દ્વારા તમારા ડ્રોપડાઉનને કૉલ કરો અથવા તેના બદલે data-api નો ઉપયોગ કરો, data-toggle="dropdown"ડ્રોપડાઉનના ટ્રિગર તત્વ પર હંમેશા હાજર રહેવું જરૂરી છે.

વિકલ્પો

વિકલ્પો ડેટા વિશેષતાઓ અથવા JavaScript દ્વારા પસાર કરી શકાય છે. ડેટા એટ્રિબ્યુટ્સ માટે, વિકલ્પ નામને data-, જેમ કે માં ઉમેરો data-offset="".

નામ	પ્રકાર	ડિફૉલ્ટ	વર્ણન
ઓફસેટ	નંબર \| શબ્દમાળા \| કાર્ય	0	તેના લક્ષ્યની તુલનામાં ડ્રોપડાઉનની ઓફસેટ. જ્યારે ઑફસેટ નક્કી કરવા માટે ફંક્શનનો ઉપયોગ કરવામાં આવે છે, ત્યારે તેને પ્રથમ દલીલ તરીકે ઑફસેટ ડેટા ધરાવતા ઑબ્જેક્ટ સાથે કહેવામાં આવે છે. ફંક્શને સમાન બંધારણ સાથે ઑબ્જેક્ટ પરત કરવું આવશ્યક છે. ટ્રિગરિંગ એલિમેન્ટ DOM નોડ બીજી દલીલ તરીકે પસાર થાય છે. વધુ માહિતી માટે Popper.js ના ઑફસેટ દસ્તાવેજોનો સંદર્ભ લો .
ફ્લિપ	બુલિયન	સાચું	સંદર્ભ તત્વ પર ઓવરલેપ થવાના કિસ્સામાં ડ્રોપડાઉનને ફ્લિપ કરવાની મંજૂરી આપો. વધુ માહિતી માટે Popper.js ના ફ્લિપ ડોક્સનો સંદર્ભ લો .
સીમા	શબ્દમાળા \| તત્વ	'સ્ક્રોલ પેરન્ટ'	ડ્રોપડાઉન મેનૂની ઓવરફ્લો અવરોધ સીમા. `'viewport'`, `'window'`, `'scrollParent'`, અથવા HTMLElement સંદર્ભ (માત્ર JavaScript) ના મૂલ્યો સ્વીકારે છે . વધુ માહિતી માટે Popper.js ના preventOverflow દસ્તાવેજો નો સંદર્ભ લો .
સંદર્ભ	શબ્દમાળા \| તત્વ	'ટૉગલ'	ડ્રોપડાઉન મેનૂનો સંદર્ભ ઘટક. `'toggle'`, `'parent'`, અથવા HTMLElement સંદર્ભના મૂલ્યો સ્વીકારે છે . વધુ માહિતી માટે Popper.js ના referenceObject દસ્તાવેજોનો સંદર્ભ લો .
પ્રદર્શન	તાર	'ગતિશીલ'	મૂળભૂત રીતે, અમે ગતિશીલ સ્થિતિ માટે Popper.js નો ઉપયોગ કરીએ છીએ. આ સાથે અક્ષમ કરો `static`.
popperConfig	નલ \| પદાર્થ	નલ	બુટસ્ટ્રેપની ડિફૉલ્ટ Popper.js રૂપરેખા બદલવા માટે, Popper.js ની ગોઠવણી જુઓ

નોંધ કરો કે જ્યારે , કન્ટેનર પર શૈલી લાગુ કરવામાં આવે છે ત્યારે boundaryતે સિવાયના કોઈપણ મૂલ્ય પર સેટ કરવામાં આવે છે.'scrollParent'position: static.dropdown

પદ્ધતિઓ

પદ્ધતિ	વર્ણન
`$().dropdown('toggle')`	આપેલ નેવબાર અથવા ટેબ કરેલ નેવિગેશનના ડ્રોપડાઉન મેનૂને ટોગલ કરે છે.
`$().dropdown('show')`	આપેલ નેવબાર અથવા ટેબ કરેલ નેવિગેશનનું ડ્રોપડાઉન મેનૂ બતાવે છે.
`$().dropdown('hide')`	આપેલ નેવબાર અથવા ટેબ કરેલ નેવિગેશનનું ડ્રોપડાઉન મેનૂ છુપાવે છે.
`$().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...
})

ડ્રોપડાઉન

ઝાંખી

ઉપલ્બધતા

ઉદાહરણો

સિંગલ બટન

સ્પ્લિટ બટન

કદ બદલવાનું

દિશાઓ

ડ્રોપઅપ

ડ્રોપ્રાઈટ

ડ્રોપલેફ્ટ

મેનુ વસ્તુઓ

સક્રિય

અક્ષમ

મેનુ સંરેખણ

પ્રતિભાવ સંરેખણ

મેનુ સામગ્રી

હેડરો

વિભાજકો

ટેક્સ્ટ

સ્વરૂપો

ઉપયોગ

ડેટા લક્ષણો દ્વારા

JavaScript દ્વારા

`data-toggle="dropdown"`હજુ પણ જરૂરી છે

વિકલ્પો

પદ્ધતિઓ

ઘટનાઓ

ડ્રોપડાઉન

ઝાંખી

ઉપલ્બધતા

ઉદાહરણો

સિંગલ બટન

સ્પ્લિટ બટન

કદ બદલવાનું

દિશાઓ

ડ્રોપઅપ

ડ્રોપ્રાઈટ

ડ્રોપલેફ્ટ

મેનુ વસ્તુઓ

સક્રિય

અક્ષમ

મેનુ સંરેખણ

પ્રતિભાવ સંરેખણ

મેનુ સામગ્રી

હેડરો

ડ્રોપડાઉન હેડર

વિભાજકો

ટેક્સ્ટ

સ્વરૂપો