Aus welchen Komponenten besteht die offizielle Bootstrap-Website?

(*-*)浩
Freigeben: 2019-07-18 14:56:25
Original
2526 Leute haben es durchsucht

Bootstrap enthält eine Fülle von Webkomponenten, mit denen Sie schnell eine schöne und voll funktionsfähige Website erstellen können. Es umfasst die folgenden Komponenten:

Dropdown-Menü, Schaltflächengruppe, Schaltflächen-Dropdown-Menü, Navigation, Navigationsleiste, Pfadnavigation, Paginierung, Layout, Miniaturansicht, Warndialog, Fortschritt Bar, Medienobjekte usw.

Aus welchen Komponenten besteht die offizielle Bootstrap-Website?

Hier sind einige der gezeigten Komponenten. (Empfohlenes Lernen: Bootstrap-Video-Tutorial)

Dropdowns)

Das Dropdown-Menü ist umschaltbar und zeigt Links in einem Kontextmenü im Listenformat an . Dies kann durch Interaktion mit dem Dropdown-JavaScript-Plugin erreicht werden.

Wenn Sie das Dropdown-Menü verwenden müssen, müssen Sie nur das Dropdown-Menü in der Klasse .dropdown hinzufügen. Das folgende Beispiel zeigt ein einfaches Dropdown-Menü:

<div class="dropdown">
    <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">主题        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">Java</a>
        </li>
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">数据挖掘</a>
        </li>
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">数据通信/网络</a>
        </li>
        <li role="presentation" class="divider"></li>
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">分离的链接</a>
        </li>
    </ul>
</div>
Nach dem Login kopieren

Navigation

Sie verwenden das gleiche Markup und die gleiche Basisklasse .nav. Bootstrap bietet außerdem eine Hilfsklasse zum Teilen von Markup und Status. Durch Ändern der geänderten Klasse können Sie zwischen verschiedenen Stilen wechseln.

<p>标签式的导航菜单</p>
<ul class="nav nav-tabs">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">SVN</a></li>
  <li><a href="#">iOS</a></li>
  <li><a href="#">VB.Net</a></li>
  <li><a href="#">Java</a></li>
  <li><a href="#">PHP</a></li>
</ul>
Nach dem Login kopieren

Weitere technische Artikel zu Bootstrap finden Sie in der Spalte Bootstrap-Tutorial, um mehr darüber zu erfahren!

Das obige ist der detaillierte Inhalt vonAus welchen Komponenten besteht die offizielle Bootstrap-Website?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
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