Aus welchen Komponenten besteht die offizielle Bootstrap-Website?

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.

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>

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>

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!