Bootstrap-Lernschaltflächenkomponente (1)

In diesem Artikel wird Ihnen die Schaltflächenkomponente in Bootstrap vorgestellt. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein. 🔜

Css: Bootstrap.css Zeile 3131 ~ Zeile 3291

Die Schaltflächengruppe ist dieselbe wie die Dropdown-Menükomponente und muss sich auf das Button.js-Plug-In verlassen, um ordnungsgemäß zu funktionieren.

Struktureller Aspekt: ​​Verwenden Sie einen Container mit dem Klassennamen btn-group und platzieren Sie mehrere Schaltflächen in diesem Container.

<div>
  <button>
     <span></span>
  </button>
   …
  <button>
     <span></span>
  </button>
</div>

.btn-group,
.btn-group-vertical {
  position: relative;
  display: inline-block;
  vertical-align: middle;
}
.btn-group > .btn,
.btn-group-vertical > .btn {
  position: relative;
  float: left;
}
.btn-group > .btn:hover,
.btn-group-vertical > .btn:hover,
.btn-group > .btn:focus,
.btn-group-vertical > .btn:focus,
.btn-group > .btn:active,
.btn-group-vertical > .btn:active,
.btn-group > .btn.active,
.btn-group-vertical > .btn.active {
  z-index: 2;
}
.btn-group > .btn:focus,
.btn-group-vertical > .btn:focus {
  outline: none;
}
.btn-group .btn + .btn,
.btn-group .btn + .btn-group,
.btn-group .btn-group + .btn,
.btn-group .btn-group + .btn-group {
   margin-left: -1px;
}

Zusätzlich zum -Element können Sie auch andere Tag-Elemente verwenden, wie zum Beispiel das -Tag. Der .btn-group-Container Das Beschriftungselement im Inneren muss einen Klassennamen haben btn

Die vier Ecken der Schaltflächengruppe sind abgerundet, mit Ausnahme der ersten und letzten Schaltflächen, die an den Seiten abgerundete Ecken haben keine abgerundeten Ecken haben.

Detaillierte Erklärung:

1. Standard: Alle Schaltflächen haben abgerundete Ecken

2. Mit Ausnahme der ersten Schaltfläche und der letzten Schaltfläche sind die abgerundeten Ecken der anderen Schaltflächen deaktiviert.

3 Ecke und untere rechte Ecke Für abgerundete Ecken

Quellcode:

.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
  border-radius: 0;
}
.btn-group > .btn:first-child {
  margin-left: 0;
}
.btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.btn-group > .btn:last-child:not(:first-child),
.btn-group > .dropdown-toggle:not(:first-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.btn-group > .btn-group {
  float: left;
}
.btn-group > .btn-group:not(:first-child):not(:last-child) > .btn {
  border-radius: 0;
}
.btn-group > .btn-group:first-child> .btn:last-child,
.btn-group > .btn-group:first-child> .dropdown-toggle {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.btn-group > .btn-group:last-child> .btn:first-child {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

Symbolleiste für Schaltflächengruppen

Gruppieren Sie im Rich-Text-Editor Schaltflächengruppen, z. B. Kopieren, Ausschneiden, Einfügen einer Gruppe, linksbündig, mittig ausgerichtet, Um eine Gruppe an beiden Enden rechts auszurichten und auszurichten, müssen Sie die Bootstrap-Framework-Schaltflächensymbolleiste BTN-Toolbar

<div>
  <div>
    …
  </div>
  <div>
    …
  </div>
  <div>
    …
  </div>
  <div>
    …
  </div>
</div>

Prinzip verwenden: Die Hauptsache besteht darin, mehrere Gruppen der BTN-Gruppenelemente schweben zu lassen und dazwischen zu halten Gruppen 5px linker Rand

.btn-toolbar {
  margin-left: -5px;
}
.btn-toolbar .btn-group,
.btn-toolbar .input-group {
  float: left;
}
.btn-toolbar > .btn,
.btn-toolbar > .btn-group,
.btn-toolbar > .input-group {
  margin-left: 5px;
}

Achten Sie darauf, den Float in der BTN-Toolbar zu löschen

.btn-toolbar:before,
.btn-toolbar:after｛
　display: table;
content: " ";
｝
.btn-toolbar:after{
  clear: both;
}

Beispiel:

<div>
           <div>
               <button>
                   <span></span>
               </button>
               <button>
                   <span></span>
               </button>
               <button>
                   <span></span>
               </button>
               <button>
                   <span></span>
               </button>
           </div>
           <div>
               <button>
                   <span></span>
               </button>
               <button>
                   <span></span>
               </button>
           </div>
       </div>

Verschachtelte Schaltflächengruppierung

Oft ordnen wir gemeinsame Schaltflächengruppen mit Dropdown-Menüs an, um so etwas wie die zu erreichen Auswirkung auf das Navigationsmenü:

Wenn Sie es verwenden, ändern Sie einfach den Klassennamen des Dropdown-Containers, der zuvor zum Erstellen des Dropdown-Menüs verwendet wurde, in „btn-group“ und platzieren Sie ihn auf derselben Ebene wie die normalen Schaltflächen:

<div>
           <button>首页</button>
           <button>产品展示</button>
           <button>案例分析</button>
           <button>联系我们</button>
           <div>
               <button>
                   关于我们<span></span>
               </button>
               <ul>
                   <li><a>公司简介</a></li>
                   <li><a>企业文化</a></li>
                   <li><a>组织结构</a></li>
                   <li><a>客服服务</a></li>
               </ul>
           </div>
       </div>

.btn-group > .btn-group {
  float: left;
}
.btn-group > .btn-group:not(:first-child):not(:last-child) > .btn {
  border-radius: 0;
}
.btn-group > .btn-group:first-child> .btn:last-child,
.btn-group > .btn-group:first-child> .dropdown-toggle {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.btn-group > .btn-group:last-child> .btn:first-child {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.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;
}

Schaltfläche für vertikale Gruppierung

Ersetzen Sie einfach den Namen der horizontalen Gruppierungsklasse .btn-group durch .btn-group-vertical.

<div>
            <button>首页</button>
            <button>产品展示</button>
            <button>案例分析</button>
            <button>联系我们</button>
            <div>
                <button>
                    关于我们<span></span>
                </button>
                <ul>
                    <li><a>公司简介</a></li>
                    <li><a>企业文化</a></li>
                    <li><a>组织结构</a></li>
                    <li><a>客服服务</a></li>
                </ul>
            </div>
        </div>

.btn-group-vertical > .btn,
.btn-group-vertical > .btn-group,
.btn-group-vertical > .btn-group > .btn {
  display: block;
  float: none;
  width: 100%;
  max-width: 100%;
}
.btn-group-vertical > .btn-group > .btn {
  float: none;
}
.btn-group-vertical > .btn + .btn,
.btn-group-vertical > .btn + .btn-group,
.btn-group-vertical > .btn-group + .btn,
.btn-group-vertical > .btn-group + .btn-group {
  margin-top: -1px;
  margin-left: 0;
}
.btn-group-vertical > .btn:not(:first-child):not(:last-child) {
  border-radius: 0;
}
.btn-group-vertical > .btn:first-child:not(:last-child) {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.btn-group-vertical > .btn:last-child:not(:first-child) {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-left-radius: 4px;
}
.btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn {
  border-radius: 0;
}
.btn-group-vertical > .btn-group:first-child:not(:last-child) > .btn:last-child,
.btn-group-vertical > .btn-group:first-child:not(:last-child) > .dropdown-toggle {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.btn-group-vertical > .btn-group:last-child:not(:first-child) > .btn:first-child {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

Gleichmäßig unterteilte Schaltflächen werden auch als adaptive Gruppenschaltflächen bezeichnet:

Die Breite der gesamten Schaltflächengruppe beträgt 100 % des Containers, und jede Schaltfläche in der Schaltflächengruppe teilt die Breite des gesamten Containers gleichmäßig auf. Es gibt fünf Schaltflächen in einer Schaltflächengruppe, jede Schaltfläche hat 20 % der Breite des Containers. Es gibt vier Schaltflächen in einer Schaltflächengruppe, jede Schaltfläche hat 25 % der Breite des Containers.

Implementierungsmethode: Einfach hinzufügen eine Klasse für die Schaltfläche group.btn-group. Der Name .btn-group-justified

<div>
           <buttton>首页</buttton>
           <buttton>案例分析</buttton>
           <buttton>联系我们</buttton>
           <buttton>关于我们</buttton>
       </div>

.btn-group-justified {
  display: table;
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
}
.btn-group-justified > .btn,
.btn-group-justified > .btn-group {
  display: table-cell;
  float: none;
  width: 1%;
}
.btn-group-justified > .btn-group .btn {
  width: 100%;
}

simuliert .btn-group-justified in eine Tabelle (Anzeige: Tabelle) und simuliert die darin enthaltene Schaltflächenvorlage in eine Tabellenzelle (Anzeige: Tabellenzelle).

Hinweis: Versuchen Sie beim Erstellen gleicher Schaltflächengruppen, das Tag zu verwenden, da die Verwendung des Schaltflächen-Tag-Elements in einigen Browsern nicht benutzerfreundlich ist.

Mehr Programmierung für Verwandte Weitere Kenntnisse finden Sie unter:

Einführung in die Programmierung! !

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