Bootstrap 下拉菜单(Dropdowns)

一、Bootstrap 下拉菜单(Dropdowns)

1.1 基本下拉框

.dropdown 类用来指定一个下拉菜单。
我们可以使用一个按钮或链接来打开下拉菜单, 按钮或链接需要添加 .dropdown-toggle 和 data-toggle=“dropdown” 属性。

元素上添加 .dropdown-menu 类来设置实际下拉菜单,然后在下拉菜单的选项中添加 .dropdown-item 类。

<div class="container">
    <h2>下拉菜单h2>
    <p>.dropdown 类用来指定一个下拉菜单。p>
    <p>.dropdown-menu 类来设置实际下拉菜单。p>
    <p>我们可以使用一个按钮或链接来打开下拉菜单, 按钮或链接需要添加 .dropdown-toggle 和 data-toggle="dropdown" 属性。p>
    <div class="dropdown">
        <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
            Dropdown button
        button>
        <div class="dropdown-menu">
            <a class="dropdown-item" href="#">Link 1a>
            <a class="dropdown-item" href="#">Link 2a>
            <a class="dropdown-item" href="#">Link 3a>
        div>
    div>
div>

Bootstrap 下拉菜单(Dropdowns)_第1张图片

1.2 下拉菜单中的分割线

.dropdown-divider类用于定义下拉菜单中的分割线

<div class="container">
  <h2>下拉菜单中h2>
  <p>.dropdown-divider 类用于在下拉菜单中创建一个水平的分割线:p>
  <div class="dropdown">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
      Dropdown button
    button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Link 1a>
      <a class="dropdown-item" href="#">Link 2a>
      <a class="dropdown-item" href="#">Link 3a>
      <div class="dropdown-divider">div>
      <a class="dropdown-item" href="#">Another linka>
    div>
  div>
div>

Bootstrap 下拉菜单(Dropdowns)_第2张图片

1.3 下拉菜单中的禁用项

<div class="container">
  <h2>下拉菜单h2>
  <p>.active 类会让下拉菜单的选项高亮显示 (添加蓝色背景)。p>
  <p>如果要禁用下拉菜单的选项,可以使用.disabled 类。p>
  <div class="dropdown">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
      Dropdown button
    button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Normala>
      <a class="dropdown-item active" href="#">Activea>
      <a class="dropdown-item disabled" href="#">Disableda>
    div>
  div>
div>

Bootstrap 下拉菜单(Dropdowns)_第3张图片

1.4 指定向上弹出的下拉菜单

如果你希望下拉菜单向上弹出,可以将

元素的 class=“dropdown” 替换为 “dropup”:

<div class="container">
  <h2>下拉菜单h2>
  <p> .dropup 类用于设置下拉菜单向上弹出:p><br>
  <div class="dropup">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
      Dropdown button
    button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Link 1a>
      <a class="dropdown-item" href="#">Link 2a>
    div>
  div>
div>

Bootstrap 下拉菜单(Dropdowns)_第4张图片

1.5 下拉菜单中添加标题

.dropdown-dropdown-header 下拉菜单中添加标题

<div class="container">
  <h2>下拉菜单中h2>
  <p>.dropdown-header 类用于在下拉菜单中添加标题:p>
  <div class="dropdown">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
      Dropdown button
    button>
    <div class="dropdown-menu">
      <h5 class="dropdown-header">Dropdown headerh5>
      <a class="dropdown-item" href="#">Link 1a>
      <a class="dropdown-item" href="#">Link 2a>
      <a class="dropdown-item" href="#">Link 3a>
      <h5 class="dropdown-header">Dropdown headerh5>
      <a class="dropdown-item" href="#">Another linka>
    div>
  div>
div>

Bootstrap 下拉菜单(Dropdowns)_第5张图片

1.6 按钮中设置下拉菜单


<html>
<head>
  <title>Bootstrap 实例title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js">script>
  <script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js">script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js">script>
head>
<body>

<div class="container">
  <h2>按钮中的下拉菜单h2>
  <div class="btn-group">
    <button type="button" class="btn btn-primary">Primarybutton>
    <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
      <span class="caret">span>
    button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Link 1a>
      <a class="dropdown-item" href="#">Link 2a>
    div>
  div>
  
  <div class="btn-group">
    <button type="button" class="btn btn-secondary">Secondarybutton>
    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
      <span class="caret">span>
    button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Link 1a>
      <a class="dropdown-item" href="#">Link 2a>
    div>
  div>

  <div class="btn-group">
    <button type="button" class="btn btn-success">Successbutton>
    <button type="button" class="btn btn-success dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
      <span class="caret">span>
    button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Link 1a>
      <a class="dropdown-item" href="#">Link 2a>
    div>
  div>

  <div class="btn-group">
    <button type="button" class="btn btn-info">Infobutton>
    <button type="button" class="btn btn-info dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
      <span class="caret">span>
    button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Link 1a>
      <a class="dropdown-item" href="#">Link 2a>
    div>
  div>

  <div class="btn-group">
    <button type="button" class="btn btn-warning">Warningbutton>
    <button type="button" class="btn btn-warning dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
      <span class="caret">span>
    button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Link 1a>
      <a class="dropdown-item" href="#">Link 2a>
    div>
  div>

  <div class="btn-group">
    <button type="button" class="btn btn-danger">Dangerbutton>
    <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
      <span class="caret">span>
    button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Link 1a>
      <a class="dropdown-item" href="#">Link 2a>
    div>
  div>
div>
body>
html>

Bootstrap 下拉菜单(Dropdowns)_第6张图片

你可能感兴趣的:(前端)