Bootstrap 5 డౌన్‌లోడ్ జాబితా

బేసిక్ డౌన్‌లోడ్ జాబితా

డౌన్‌లోడ్ మెనూ ఒక మార్పిడి మెనూ ఉంది, దీనిద్వారా వినియోగదారులు ముందుకు ఇచ్చిన జాబితా నుండి వికల్పాలను ఎంచుకోవచ్చు:

ఉదాహరణ

<div class="dropdown">
  <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
    డౌన్‌లోడ్ బటన్
  </button>
  <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 类添加到

元素，可实际构建下拉菜单。然后将 .dropdown-item 类添加到下拉菜单中的每个元素（链接或按钮）。

下拉列表分隔线

.dropdown-divider 类用于通过水平细边框分隔下拉菜单中的链接：

ఉదాహరణ

    •

    స్వయంగా ప్రయత్నించండి

    下拉列表标题

    .dropdown-header 类用于在下拉菜单中添加标题：

    ఉదాహరణ

  • Dropdown header 1
    •

    స్వయంగా ప్రయత్నించండి

    禁用的和活动的项目

    请使用 .active 类突出显示特定的下拉项（添加蓝色背景色）。

    如需禁用下拉列表中的某个项目，请使用 .disabled 类（在悬停时获得浅灰色文本颜色和 "no-parking-sign" 图标）。

    ఉదాహరణ

  • 普通的
    • 

  • 活动的
    • 

  • 禁用的
    •

    స్వయంగా ప్రయత్నించండి

    下拉列表位置

    您还可以通过将 .dropend 或 .dropstart 类添加到下拉元素，来创建 "dropend" 或 "dropstart" 菜单。请注意，插入符号/箭头是自动添加的：

    Dropright

    స్వయంగా ప్రయత్నించండి

    Dropleft

    స్వయంగా ప్రయత్నించండి

    下拉列表右对齐

    如需右对齐下拉菜单，请将 .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>

    స్వయంగా ప్రయత్నించండి