Bootstrap-Lernschaltflächenkomponente (2)

Im vorherigen Artikel haben wir die Button-Komponente in Bootstrap bereits vorgestellt. In diesem Artikel stellen wir Ihnen die Bootstrap-Button-Komponente vor. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.

Verwandte Empfehlungen: „Bootstrap-Tutorial“

Schaltflächen-Dropdown-Menü

Das Schaltflächen-Dropdown-Menü ist im Aussehen im Grunde das gleiche wie das Dropdown-Menü. Der einzige Unterschied zwischen ihnen besteht darin, dass der externe Container p.dropdown durch die Datei p.btn-group

<div class="btn-group">
        <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
            按钮下拉菜单
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
            <li><a href="#">菜单列表1</a></li>
            <li><a href="#">菜单列表2</a></li>
            <li><a href="#">菜单列表3</a></li>
            <li><a href="#">菜单列表4</a></li>
            <li><a href="#">菜单列表5</a></li>
        </ul>
    </div>

bootstrap.css ersetzt wird in der Schaltfläche übergeben Fügen Sie dem Tag das Span-Tag-Element hinzu, und der Klassenname lautet .caret

.btn-group .dropdown-toggle:active,
.btn-group.open .dropdown-toggle {
  outline: 0;
}
.btn-group > .btn + .dropdown-toggle {
  padding-right: 8px;
  padding-left: 8px;
}
.btn-group > .btn-lg + .dropdown-toggle {
  padding-right: 12px;
  padding-left: 12px;
}
.btn-group.open .dropdown-toggle {
  -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
          box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
}
.btn-group.open .dropdown-toggle.btn-link {
  -webkit-box-shadow: none;
          box-shadow: none;
}

Diese Dreiecksform wird über CSS implementiert. Das Folgende ist der Bootstrap.css-Quellcode:

<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
        按钮下拉菜单
        <span class="caret"></span>
</button>

Für weitere programmierbezogene Kenntnisse , besuchen Sie bitte: Einführung in die Programmierung! !

Das obige ist der detaillierte Inhalt vonBootstrap-Lernschaltflächenkomponente (2). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!