Detaillierte Erklärung des Rastersystems, der Navigationsleiste und des Karussells von Javascript Bootstrap

Detaillierte Erklärung des Rastersystems, der Navigationsleiste und des Karussells von Javascript Bootstrap

Einführung in Bootstrap und die damit verbundenen Inhalte

Bootstrap ist ein Front-End-Framework für die schnelle Entwicklung von Webanwendungen und Websites. Beim Zitieren müssen Sie über bestimmte Grundvorlagen verfügen:

    <meta charset="utf-8">
    <meta http-equiv="X-UA-kompatibel" content="IE=edge">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1">
    <!-- Die oben genannten 3 Meta-Tags *müssen* an erster Stelle stehen und alle anderen Inhalte *müssen* ihnen folgen! -->
    <title>Bootstrap 101-Vorlage</title>
    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonym">
    <!-- HTML5-Shim und Respond.js sollen dafür sorgen, dass IE8 HTML5-Elemente und Medienabfragen unterstützt -->
    <!-- Achtung: Respond.js funktioniert nicht beim Seitenaufruf über das Protokoll file:// (also beim direkten Ziehen der HTML-Seite in den Browser) -->
    <!--[wenn IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dest/respond.min.js"></script>
    <![endif]-->

Rastersystem

Bootstrap teilt die Seite oder den Container horizontal in 12 gleiche Teile. Zeilen müssen innerhalb der Klasse .container platziert werden, um eine korrekte Ausrichtung und Polsterung zu erhalten. Verwenden Sie col-lg-("Zahl"), um es horizontal in 12 gleiche Teile zu verteilen.

<div Klasse="Zeile">
    <div Klasse="col-lg-3">1</div>
    <div Klasse="col-lg-3">2</div>
    <div Klasse="col-lg-3">3</div>
    <div class="col-lg-3">4</div>
</div>

Bildbeschreibung hier einfügen

Verschachtelte Spalten

<div Klasse="Container">
    <div Klasse="Zeile">
        <div Klasse="col-md-6">
            <!-- col-md-6 trennt standardmäßig zwei Boxen horizontal. Wenn es sich nur um ein einfaches Div handelt, wird es als vertikale Verteilung angezeigt-->
            <div Klasse="col-md-6">ein</div>
            <div class="col-md-6">b</div>
        </div>
    </div>
</div>

Spaltenversatz

Verwenden Sie .col-md-offset-*, um die Spalte nach rechts zu verschieben

<div Klasse="Container">
    <div Klasse="Zeile">
            <div class="col-md-4">Toilette</div>
             <!-- Insgesamt sind es zwölf gleiche Teile. Die beiden Kästen belegten ursprünglich nur acht Spalten, vier Spalten wurden nicht genutzt.
            Also col-md-offset-4, damit die Box rechts weiter um 4 Spalten nach rechts verschoben wird -->
            <div class="col-md-4 col-md-offset-4">Rechts</div>
        </div>
    </div>
</div>

Spaltensortierung

Wird im Allgemeinen verwendet, um die Reihenfolge der Boxen zu ändern

 <div Klasse="Container">
    <div Klasse="Zeile">
        <!-- Verwenden Sie Push- und Pull-Elemente sowohl auf den linken als auch auf den rechten Boxen, damit die Boxen nicht nach unten gedrückt werden-->
            <div class="col-md-4 col-md-push-8">Toilette</div>
            <div class="col-md-8 col-md-pull-4">Rechts</div>
        </div>
    </div>
</div>

Bildbeschreibung hier einfügen

Navigationsleiste

  • Fügen Sie dem <nav> -Tag class .navbar und navbar-default hinzu.
  • Das Hinzufügen von role="navigation" zum obigen Element kann die Zugänglichkeit verbessern.
  • Das <div>-Element fügt eine Header- class .navbar-header hinzu und enthält ein <a>-Element mit class navbar-brand . Dadurch wird der Text größer angezeigt.
  • Um Links zur Navigationsleiste hinzuzufügen, fügen Sie einfach eine ungeordnete Liste mit class .nav und .navbar-nav hinzu.

Die Demonstration sieht wie folgt aus:

<!doctype html>
<html lang="de">
<Kopf>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-kompatibel" content="IE=edge">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1">
    <!-- Die oben genannten 3 Meta-Tags *müssen* an erster Stelle stehen und alle anderen Inhalte *müssen* ihnen folgen! -->
    <title>Bootstrap 101-Vorlage</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <!-- Es müssen beide Skripte geschrieben werden, sonst wird das Dropdown-Menü nicht angezeigt-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</Kopf>
    <!-- Dies ist ein responsives Layout. Das Layout ist bei maximiertem Bildschirm anders als bei verkleinertem Bildschirm. -->
<Text>
    <!-- role="navigation" trägt zur Verbesserung der Zugänglichkeit bei -->
    <nav class="navbar navbar-default" role="navigation">
        <div Klasse="Containerflüssigkeit">
            <!-- "navbar-header", das ein <a>-Element mit classnav-brand enthält, lässt den Text größer erscheinen -->
            <div Klasse="Navigationsleiste-Header">
                <button Typ="Schaltfläche" Klasse="Navigationsleiste umschalten" Daten umschalten="Zusammenklappen"
                    Datenziel="#Beispiel-Navbar-Collapse">
                    <!-- data-toggle wird verwendet, um JavaScript mitzuteilen, was mit der Schaltfläche geschehen soll, icon-target gibt an, zu welchem ​​Element gewechselt werden soll, und die drei Symbole stellen die sogenannte Hamburger-Schaltfläche dar -->
                    <span class="sr-only">Navigation umschalten</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">Tutorial für Anfänger</a>
            </div>
            <div Klasse="Navigationsleiste einklappen" id="Beispiel-Navigationsleiste einklappen">
                <ul Klasse="nav navbar-nav">
                    <li class="active"><a href="#">iOS</a></li>
                    <li><a href="#">SVN</a></li>
                    <li Klasse="Dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                            Java
                            <b Klasse="caret"></b>
                        </a>
                        <ul Klasse="Dropdown-Menü">
                            <li><a href="#">jmeter</a></li>
                            <li><a href="#">EJB</a></li>
                            <li><a href="#">Jasper-Bericht</a></li>
                            <li class="divider"></li>
                            <li><a href="#">Getrennte Links</a></li>
                            <li class="divider"></li>
                            <li><a href="#">Ein weiterer separater Link</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

Globale Schnittstelle

Bildbeschreibung hier einfügen

Kleine Fensteroberfläche

Bildbeschreibung hier einfügen

Karussell

Das Bootstrap Carousel-Plugin ist eine flexible und reaktionsschnelle Möglichkeit, Ihrer Site Slider hinzuzufügen. Darüber hinaus ist der Inhalt auch flexibel genug und kann aus Bildern, Iframes, Videos oder jeder anderen Art von Inhalt bestehen, den Sie platzieren möchten.

Beispieldemonstration:

 <Text>
	<div id="myCarousel" class="Karussell-Folie">
		<!-- Karussellindikatoren-->
		<ol Klasse="Karussell-Indikatoren">
			<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
			<li data-target="#myCarousel" data-slide-to="1"></li>
			<li data-target="#myCarousel" data-slide-to="2"></li>
		</ol>
		<!-- Karussell-Projekt-->
		<div Klasse="Karussell-inner">
			<div Klasse="Element aktiv">
		<!-- Das Bild verweist auf den absoluten Pfad, der relative Pfad wäre falsch-->
				<img src="1.jpg" alt="Erste Folie" style="width: 100%;height: 200px;">
			</div>
			<div Klasse="Artikel">
				<img src="2.jpg" alt="Zweite Folie" style="width: 100%;height: 200px;">
			</div>
			<div Klasse="Artikel">
				<img src="3.jpg" alt="Dritte Folie" style="width: 100%;height: 200px;">
			</div>
		</div>
		<!-- Sprungsteuerung nach oben und unten, Sprungsteuerung kann vorwärts, vorwärts und rückwärts gehen -->
		<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
			<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
			<span class="sr-only">Zurück</span>
		</a>
		<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
			<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
			<span class="sr-only">Weiter</span>
		</a>
	</div>
</body>

Bildbeschreibung hier einfügen

Zusammenfassen

Dieser Artikel endet hier. Ich hoffe, er kann Ihnen helfen. Ich hoffe auch, dass Sie mehr Inhalt auf 123WORDPRESS.COM lesen können!

Das könnte Sie auch interessieren:
  • Detaillierte Erklärung des Layouts des Bootstrap-Rastersystems
  • Analyse der Verwendung des Bootstrap-Rastersystems
  • BootStrap-Navigationsleisten-Problemdatensatz
  • Bootstrap nutzen – Navigationsleiste
  • Bootstrap realisiert den Karusselleffekt
  • Detaillierte Erklärung zur Verwendung der Bootstrap-Karussell-Vorlage

<<:  MySQL-Dateneinfügungsoptimierungsmethode concurrent_insert

>>:  Detaillierte Erklärung des HTML-Seitenkopfcodebeispiels

Artikel empfehlen

Vue realisiert problemlos Wasserzeicheneffekte

Vorwort: Verwenden Sie den Wasserzeicheneffekt im...

Detaillierte Erklärung zur Konfiguration des sekundären Domänennamens auf einem Apache-Server in einer Linux-Umgebung

Dieser Artikel beschreibt, wie Sie einen sekundär...

Lösung des Konflikts zwischen Linux-Kernel- und SVN-Versionen

Phänomen Das System konnte den Linux-Systemkernel...

Detaillierte Erläuterung des Prozesses der Zabbix-Überwachung von SQLServer

Werfen wir einen Blick auf die Zabbix-Überwachung...

SQL-Anweisungen in MySQL verwenden keine Indizes

MySQL-Abfrage ohne Verwendung der Indexaggregatio...

Verwenden Sie CSS, um ein Datei-Upload-Muster zu zeichnen

Wenn Sie es wären, wie würden Sie es erreichen, w...

Implementierung von nacos1.3.0, erstellt mit Docker

1. Fortsetzen nacos-Datenbank Datenbankname nacos...

Tencent-Interview: Was sind die Gründe, warum eine SQL-Anweisung sehr langsam ausgeführt wird? ---Sehen Sie sich die Serie „Regret“ nicht an (empfohlen)

Ehrlich gesagt erfordert diese Frage eine Menge g...

Detaillierte Erklärung, wie MySQL bestimmt, ob eine InnoDB-Tabelle ein unabhängiger Tablespace oder ein gemeinsam genutzter Tablespace ist

Vorwort InnoDB speichert Daten in Tablespaces. In...

Beste Tools zum Erstellen und Bearbeiten von Screenshots unter Linux

Als ich mein primäres Betriebssystem von Windows ...

Das WeChat-Applet implementiert eine einfache Taschenrechnerfunktion

WeChat-Applet: Einfacher Rechner. Zu Ihrer Inform...

Detailliertes Tutorial zur Installation von JDK1.8 unter Linux

1. Reinigung vor der Installation rpm -qa | grep ...

Super ausführliches Tutorial zur Installation einer virtuellen VMware-Maschine unter Apple Mac OS

Inhaltsverzeichnis Zusammenfassen Manchmal müssen...

Beispiel für die Verwendung von @media responsive CSS zur Anpassung an verschiedene Bildschirme

Definition und Verwendung Mithilfe von @media-Abf...

Beispiel für eine einfache Operation einer MySQL-Abfrageanweisung

Dieser Artikel veranschaulicht anhand von Beispie...