Heim > Web-Frontend > Bootstrap-Tutorial > Bootstrap-Lernschaltflächenkomponente (2)

Bootstrap-Lernschaltflächenkomponente (2)

青灯夜游
Freigeben: 2021-03-09 10:22:17
nach vorne
1624 Leute haben es durchsucht

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.

Bootstrap-Lernschaltflächenkomponente (2)

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>
Nach dem Login kopieren

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;
}
Nach dem Login kopieren

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>
Nach dem Login kopieren
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!

Verwandte Etiketten:
Quelle:cnblogs.com
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage