Bootstrap 5 下拉列表

基础的下拉列表

下拉菜单是一种可切换菜单，允许用户从预定义列表中选择值：

ਇੰਸਟੈਂਸ


  
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">ਲਿੰਕ 1</a></li>
    <li><a class="dropdown-item" href="#">ਲਿੰਕ 2</a></li>
    <li><a class="dropdown-item" href="#">ਲਿੰਕ 3</a></li>
  </ul>
</div>

ਆਪਣੇ ਤੌਰ 'ਤੇ ਕੋਸ਼ਿਸ਼ ਕਰੋ

例子解释

.dropdown 类指示下拉菜单。

ਨਾਲ ਖੋਲ੍ਹਣ ਲਈ ਵਰਤੋਂ ਕਰੋ .dropdown-toggle 类和 ਕਲਾਸ ਅਤੇ ਲੋਕੇਸ਼ਨ ਦੇ ਬਟਨ ਜਾਂ ਲਿੰਕ ਨੂੰ

data-toggle="dropdown" .dropdown-menu ਕਲਾਸ ਨੂੰ <div> ਐਲੀਮੈਂਟ ਨੂੰ ਵਰਤ ਕੇ ਸਾਗਣ ਮੈਨੂ ਬਣਾਓ। ਫਿਰ .dropdown-item ਕਲਾਸ ਨੂੰ ਸਾਗਣ ਮੈਨੂ ਵਿੱਚ ਹਰ ਐਲੀਮੈਂਟ (ਲਿੰਕ ਜਾਂ ਬਟਨ) ਨੂੰ ਜੋੜਨ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ。

ਸਾਗਣ ਮੈਨੂ ਦੀ ਵੰਡਣੀ

.dropdown-divider ਕਲਾਸ ਨੂੰ ਵਰਤ ਕੇ ਸਾਗਣ ਮੈਨੂ ਵਿੱਚ ਲਿੰਕਾਂ ਨੂੰ ਹਰੀਜ਼ਨਟਲ ਪਾਰਟੀਸ਼ਨ ਕਰਨ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ:

ਇੰਸਟੈਂਸ

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

ਆਪਣੇ ਤੌਰ 'ਤੇ ਕੋਸ਼ਿਸ਼ ਕਰੋ

ਸਾਗਣ ਮੈਨੂ ਦੀ ਟਾਈਟਲ

.dropdown-header ਕਲਾਸ ਨੂੰ ਵਰਤ ਕੇ ਸਾਗਣ ਮੈਨੂ ਵਿੱਚ ਟਾਈਟਲ ਜੋੜਨ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ:

ਇੰਸਟੈਂਸ

<li><h5 class="dropdown-header">Dropdown header 1</h5></li>

ਆਪਣੇ ਤੌਰ 'ਤੇ ਕੋਸ਼ਿਸ਼ ਕਰੋ

ਨਾਮੰਦਾ ਅਤੇ ਸਰਗਰਮ ਐਲੀਮੈਂਟ

ਤੁਸੀਂ .active ਕਲਾਸ ਨੂੰ ਵਰਤ ਕੇ ਕਿਸੇ ਵੀ ਸਾਗਣ ਐਲੀਮੈਂਟ ਨੂੰ ਉਭਾਰਨਾ ਹੈ (ਨੀਲੇ ਪਿੱਛੋਕਦੀ ਰੰਗ ਜੋੜਿਆ ਜਾਂਦਾ ਹੈ)。

ਜੇਕਰ ਤੁਸੀਂ ਸਾਗਣ ਮੈਨੂ ਵਿੱਚ ਕਿਸੇ ਵੀ ਐਲੀਮੈਂਟ ਨੂੰ ਨਾਮੰਦਾ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ .disabled ਕਲਾਸ (ਹੋਰ ਸਮੇਂ ਨੂੰ ਸਫ਼ੇਦ ਲਿਖਤ ਰੰਗ ਅਤੇ "no-parking-sign" ਆਇਕਾਨ ਪ੍ਰਾਪਤ ਹੁੰਦਾ ਹੈ)。

ਇੰਸਟੈਂਸ

<li><a class="dropdown-item" href="#">ਆਮ</a></li>
<li><a class="dropdown-item active" href="#">ਸਰਗਰਮ</a></li>
<li><a class="dropdown-item disabled" href="#">ਨਾਮੰਦਾ</a></li>

ਆਪਣੇ ਤੌਰ 'ਤੇ ਕੋਸ਼ਿਸ਼ ਕਰੋ

ਸਾਗਣ ਮੈਨੂ ਦਾ ਸਥਾਨ

ਤੁਸੀਂ ਇਸ ਰੂਪ ਨਾਲ ਵੀ .dropend ਜਾਂ .dropstart ਕਲਾਸ ਨੂੰ ਸਾਗਣ ਐਲੀਮੈਂਟ ਨੂੰ ਜੋੜ ਕੇ "dropend" ਜਾਂ "dropstart" ਮੈਨੂ ਬਣਾਓ। ਮਹਿਸੂਸ ਕਰੋ ਕਿ ਪਿੰਨ੍ਹ / ਤੋਂਦ ਆਟੋਮੈਟਿਕ ਐਲੀਮੈਂਟ ਵਿੱਚ ਜੋੜਿਆ ਜਾਂਦਾ ਹੈ:

Dropright

<div class="dropdown dropend">

ਆਪਣੇ ਤੌਰ 'ਤੇ ਕੋਸ਼ਿਸ਼ ਕਰੋ

Dropleft

<div class="dropdown dropstart">

ਆਪਣੇ ਤੌਰ 'ਤੇ ਕੋਸ਼ਿਸ਼ ਕਰੋ

ਸਾਗਣ ਮੈਨੂ ਦੇਹਾਂਤ

ਜੇਕਰ ਤੁਸੀਂ ਸਾਗਣ ਮੈਨੂ ਦੇ ਨਾਲੋਂ ਦੇਹਾਂਤ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ .dropdown-menu-end ਦੀ ਕਲਾਸ ਨੂੰ ਨਾਲ ਲਿਆਉਣ ਵਾਲੇ .dropdown-menu ਦੇ ਐਲੀਮੈਂਟ:

ਇੰਸਟੈਂਸ

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

ਆਪਣੇ ਤੌਰ 'ਤੇ ਕੋਸ਼ਿਸ਼ ਕਰੋ

ਉੱਪਰ ਸਾਗਣ

ਤੁਸੀਂ ਜੇਕਰ ਚਾਹੁੰਦੇ ਹੋ ਕਿ ਸਾਗਣ ਮੈਨੂ ਉੱਪਰ ਖੋਲ੍ਹੇ ਜਾਵੇ ਨਾ ਕਿ ਹੇਠਾਂ, ਤਾਂ class="dropdown" ਦੇ <div> ਐਲੀਮੈਂਟ ਨੂੰ ਬਦਲੋ "dropup"：

ਇੰਸਟੈਂਸ

<div class="dropup">

ਆਪਣੇ ਤੌਰ 'ਤੇ ਕੋਸ਼ਿਸ਼ ਕਰੋ

ਡਰਾਪ-ਡਾਊਨ ਟੈਕਸਟ

.dropdown-item-text ਕਲਾਸ ਵਰਤੋਂ ਕੀਤੀ ਜਾਂਦੀ ਹੈ ਕਿਉਂਕਿ ਗੁੱਣਾ ਟੈਕਸਟ ਜੋੜਨ ਲਈ, ਜਾਂ ਲਿੰਕ ਲਈ ਮੂਲਤਬੀ ਲਿੰਕ ਸਟਾਈਲ ਜੋੜਨ ਲਈ。

ਇੰਸਟੈਂਸ

<ul class="dropdown-menu">
  <li><a class="dropdown-item" href="#">ਲਿੰਕ 1</a></li>
  <li><a class="dropdown-item" href="#">ਲਿੰਕ 2</a></li>
  <li><a class="dropdown-item" href="#">ਲਿੰਕ 3</a></li>
  <li><a class="dropdown-item-text" href="#">ਲਿੰਕ ਟੈਕਸਟ</a></li>
  <li><span class="dropdown-item-text">ਸਾਦਾ ਟੈਕਸਟ</span></li>
</ul>

ਆਪਣੇ ਤੌਰ 'ਤੇ ਕੋਸ਼ਿਸ਼ ਕਰੋ

ਕੰਪੋਜ਼ੀਸ਼ਨ ਅਤੇ ਡਰਾਪ-ਡਾਊਨ ਲਿਸਟ

ਇੰਸਟੈਂਸ

<div class="btn-group">
  <button type="button" class="btn btn-primary">ਹਵਾਈਵੇ</button>
  <button type="button" class="btn btn-primary">ਦਿਆਨ</button>
  <div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">ਹਿਊਵੇਲੇਟ</button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">ਮੋਬਾਈਲ</a></li>
      <li><a class="dropdown-item" href="#">ਟੇਬਲੇਟ</a></li>
    </ul>
  </div>
</div>

ਆਪਣੇ ਤੌਰ 'ਤੇ ਕੋਸ਼ਿਸ਼ ਕਰੋ

ਵਿਕਟਿਕਲ ਕੰਪੋਜ਼ੀਸ਼ਨ ਅਤੇ ਡਰਾਪ-ਡਾਊਨ ਲਿਸਟ

ਇੰਸਟੈਂਸ

<div class="btn-group-vertical">
  <button type="button" class="btn btn-primary">ਹਵਾਈਵੇ</button>
  <button type="button" class="btn btn-primary">ਦਿਆਨ</button>
  <div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">ਹਿਊਵੇਲੇਟ</button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">ਮੋਬਾਈਲ</a></li>
      <li><a class="dropdown-item" href="#">ਟੇਬਲੇਟ</a></li>
    </ul>
  </div>
</div>

ਆਪਣੇ ਤੌਰ 'ਤੇ ਕੋਸ਼ਿਸ਼ ਕਰੋ