编程教程示范演示-小库网

Bootstrap5 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.staticfile.net/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.staticfile.net/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
  <style>.bd-placeholder-img{font-size:1.125rem;text-anchor:middle;-webkit-user-select:none;-moz-user-select:none;user-select:none}@media (min-width:768px){.bd-placeholder-img-lg{font-size:3.5rem}}.b-example-divider{height:3rem;background-color:rgba(0,0,0,.1);border:solid rgba(0,0,0,.15);border-width:1px 0;box-shadow:inset 0 .5em 1.5em rgba(0,0,0,.1),inset 0 .125em .5em rgba(0,0,0,.15)}.bi{vertical-align:-.125em;fill:currentColor}.dropdown-menu{position:static;display:block;width:auto;margin:4rem auto}.dropdown-menu-macos{display:grid;gap:.25rem;padding:.5rem;border-radius:.5rem}.dropdown-menu-macos .dropdown-item{border-radius:.25rem}.dropdown-item-danger{color:var(--bs-red)}.dropdown-item-danger:hover,.dropdown-item-danger:focus{color:#fff;background-color:var(--bs-red)}.dropdown-item-danger.active{background-color:var(--bs-red)}.btn-hover-light{text-align:left;background-color:var(--bs-white);border-radius:.25rem}.btn-hover-light:hover,.btn-hover-light:focus{color:var(--bs-blue);background-color:var(--bs-light)}.cal-month,.cal-days,.cal-weekdays{display:grid;grid-template-columns:repeat(7,1fr);align-items:center}.cal-month-name{grid-column-start:2;grid-column-end:7;text-align:center}.cal-weekday,.cal-btn{display:flex;flex-shrink:0;align-items:center;justify-content:center;height:3rem;padding:0}.cal-btn:not([disabled]){font-weight:500}.cal-btn:hover,.cal-btn:focus{background-color:rgba(0,0,0,.05)}.cal-btn[disabled]{opacity:.5}.form-control-dark{background-color:rgba(255,255,255,.05);border-color:rgba(255,255,255,.15)}</style>

<div class="d-flex gap-5 justify-content-center" id="dropdownMacos">
  <ul class="dropdown-menu dropdown-menu-macos mx-0 shadow" style="width: 220px;">
    <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>
  <ul class="dropdown-menu dropdown-menu-dark dropdown-menu-macos mx-0 border-0 shadow" style="width: 220px;">
    <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>

<div class="d-flex gap-5 justify-content-center" id="dropdownFilter">
  <div class="dropdown-menu pt-0 mx-0 rounded-3 shadow overflow-hidden" style="width: 280px;">
    <form class="p-2 mb-2 bg-light border-bottom">
      <input type="search" class="form-control" autocomplete="false" placeholder="Type to filter...">
    </form>
    <ul class="list-unstyled mb-0">
      <li><a class="dropdown-item d-flex align-items-center gap-2 py-2" href="#">
        <span class="d-inline-block bg-success rounded-circle" style="width: .5em; height: .5em;"></span>
        Action
      </a></li>
      <li><a class="dropdown-item d-flex align-items-center gap-2 py-2" href="#">
        <span class="d-inline-block bg-primary rounded-circle" style="width: .5em; height: .5em;"></span>
        Another action
      </a></li>
      <li><a class="dropdown-item d-flex align-items-center gap-2 py-2" href="#">
        <span class="d-inline-block bg-danger rounded-circle" style="width: .5em; height: .5em;"></span>
        Something else here
      </a></li>
      <li><a class="dropdown-item d-flex align-items-center gap-2 py-2" href="#">
        <span class="d-inline-block bg-info rounded-circle" style="width: .5em; height: .5em;"></span>
        Separated link
      </a></li>
    </ul>
  </div>

<div class="dropdown-menu dropdown-menu-dark border-0 pt-0 mx-0 rounded-3 shadow overflow-hidden" style="width: 280px;">
    <form class="p-2 mb-2 bg-dark border-bottom border-dark">
      <input type="search" class="form-control form-control-dark" autocomplete="false" placeholder="Type to filter...">
    </form>
    <ul class="list-unstyled mb-0">
      <li><a class="dropdown-item d-flex align-items-center gap-2 py-2" href="#">
        <span class="d-inline-block bg-success rounded-circle" style="width: .5em; height: .5em;"></span>
        Action
      </a></li>
      <li><a class="dropdown-item d-flex align-items-center gap-2 py-2" href="#">
        <span class="d-inline-block bg-primary rounded-circle" style="width: .5em; height: .5em;"></span>
        Another action
      </a></li>
      <li><a class="dropdown-item d-flex align-items-center gap-2 py-2" href="#">
        <span class="d-inline-block bg-danger rounded-circle" style="width: .5em; height: .5em;"></span>
        Something else here
      </a></li>
      <li><a class="dropdown-item d-flex align-items-center gap-2 py-2" href="#">
        <span class="d-inline-block bg-info rounded-circle" style="width: .5em; height: .5em;"></span>
        Separated link
      </a></li>
    </ul>
  </div>
</div>

<div class="d-flex gap-5 justify-content-center" id="dropdownIcons">
  <ul class="dropdown-menu mx-0 shadow" style="width: 220px;">
    <li>
      <a class="dropdown-item d-flex gap-2 align-items-center" href="#">
        <svg class="bi" width="16" height="16"><use xlink:href="#files"/></svg>
        Documents
      </a>
    </li>
    <li>
      <a class="dropdown-item d-flex gap-2 align-items-center" href="#">
        <svg class="bi" width="16" height="16"><use xlink:href="#image-fill"/></svg>
        Photos
      </a>
    </li>
    <li>
      <a class="dropdown-item d-flex gap-2 align-items-center" href="#">
        <svg class="bi" width="16" height="16"><use xlink:href="#film"/></svg>
        Movies
      </a>
    </li>
    <li>
      <a class="dropdown-item d-flex gap-2 align-items-center" href="#">
        <svg class="bi" width="16" height="16"><use xlink:href="#music-note-beamed"/></svg>
        Music
      </a>
    </li>
    <li>
      <a class="dropdown-item d-flex gap-2 align-items-center" href="#">
        <svg class="bi" width="16" height="16"><use xlink:href="#joystick"/></svg>
        Games
      </a>
    </li>
    <li><hr class="dropdown-divider"></li>
    <li>
      <a class="dropdown-item dropdown-item-danger d-flex gap-2 align-items-center" href="#">
        <svg class="bi" width="16" height="16"><use xlink:href="#trash"/></svg>
        Trash
      </a>
    </li>
  </ul>
  <ul class="dropdown-menu dropdown-menu-dark mx-0 border-0 shadow" style="width: 220px;">
    <li>
      <a class="dropdown-item d-flex gap-2 align-items-center" href="#">
        <svg class="bi" width="16" height="16"><use xlink:href="#files"/></svg>
        Documents
      </a>
    </li>
    <li>
      <a class="dropdown-item d-flex gap-2 align-items-center" href="#">
        <svg class="bi" width="16" height="16"><use xlink:href="#image-fill"/></svg>
        Photos
      </a>
    </li>
    <li>
      <a class="dropdown-item d-flex gap-2 align-items-center" href="#">
        <svg class="bi" width="16" height="16"><use xlink:href="#film"/></svg>
        Movies
      </a>
    </li>
    <li>
      <a class="dropdown-item d-flex gap-2 align-items-center" href="#">
        <svg class="bi" width="16" height="16"><use xlink:href="#music-note-beamed"/></svg>
        Music
      </a>
    </li>
    <li>
      <a class="dropdown-item d-flex gap-2 align-items-center" href="#">
        <svg class="bi" width="16" height="16"><use xlink:href="#joystick"/></svg>
        Games
      </a>
    </li>
    <li><hr class="dropdown-divider"></li>
    <li>
      <a class="dropdown-item d-flex gap-2 align-items-center" href="#">
        <svg class="bi" width="16" height="16"><use xlink:href="#trash"/></svg>
        Trash
      </a>
    </li>
  </ul>
</div>

<div class="dropdown-menu p-2 shadow rounded-3" style="width: 340px" id="dropdownCalendar">
  <div class="d-grid gap-1">
    <div class="cal">
      <div class="cal-month">
        <button class="btn cal-btn" type="button">
          <svg class="bi" width="16" height="16"><use xlink:href="#arrow-left-short"/></svg>
        </button>
        <strong class="cal-month-name">June</strong>
        <select class="form-select cal-month-name d-none">
          <option value="January">January</option>
          <option value="February">February</option>
          <option value="March">March</option>
          <option value="April">April</option>
          <option value="May">May</option>
          <option selected value="June">June</option>
          <option value="July">July</option>
          <option value="August">August</option>
          <option value="September">September</option>
          <option value="October">October</option>
          <option value="November">November</option>
          <option value="December">December</option>
        </select>
        <button class="btn cal-btn" type="button">
          <svg class="bi" width="16" height="16"><use xlink:href="#arrow-right-short"/></svg>
        </button>
      </div>
      <div class="cal-weekdays text-muted">
        <div class="cal-weekday">Sun</div>
        <div class="cal-weekday">Mon</div>
        <div class="cal-weekday">Tue</div>
        <div class="cal-weekday">Wed</div>
        <div class="cal-weekday">Thu</div>
        <div class="cal-weekday">Fri</div>
        <div class="cal-weekday">Sat</div>
      </div>
      <div class="cal-days">
        <button class="btn cal-btn" disabled type="button">30</button>
        <button class="btn cal-btn" disabled type="button">31</button>

<div class="dropdown-menu d-flex align-items-stretch p-3 rounded-3 shadow-lg" style="width: 600px" id="dropdownMega">
  <nav class="d-grid gap-2 col-8">
    <a href="#" class="btn btn-hover-light d-flex align-items-center gap-3 py-2 px-3 lh-sm">
      <svg class="bi" width="32" height="32"><use xlink:href="#image-fill"/></svg>
      <div>
        <strong class="d-block">Features</strong>
        <small>Take a tour through the product</small>
      </div>
    </a>
    <a href="#" class="btn btn-hover-light d-flex align-items-center gap-3 py-2 px-3 lh-sm">
      <svg class="bi" width="32" height="32"><use xlink:href="#question-circle"/></svg>
      <div>
        <strong class="d-block">Support</strong>
        <small>Get help from our support crew</small>
      </div>
    </a>
  </nav>
  <div class="col-4">
    ...
  </div>
</div>