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

Zusammenfassung der Linux-Befehle zur Dateiverzeichnisverwaltung

Befehl „touch“ Es hat zwei Funktionen: Eine beste...

Better-Scroll realisiert den Effekt der Verknüpfung von Menü und Inhalt

1. Grundlegende Verwendung <!DOCTYPE html> ...

Detaillierte Verwendung des Kubernetes-Objektvolumens

Überblick Volume ist die Abstraktion und Virtuali...

So stellen Sie gelöschte MySQL 8.0.17-Root-Konten und Passwörter unter Windows wieder her

Ich habe vor Kurzem mein SQL-Lernen beendet und M...

Das neueste, äußerst detaillierte grafische Tutorial zum Herunterladen und Installieren virtueller VMware-Maschinen

Inhaltsverzeichnis 1. Laden Sie die virtuelle Mas...

Tutorial zum Erstellen eines FTP-Servers in Ubuntu 16.04

Ubuntu 16.04 baut FTP-Server FTP installieren FTP...

So verwenden Sie die HTML 5 Drag & Drop-API in Vue

Die Drag & Drop-API fügt ziehbare Elemente zu...

Zusammenfassung häufig verwendeter Escape-Zeichen in HTML

Die in HTML häufig verwendeten Escape-Zeichen wer...

In JavaScript integrierter Zeit- und Datumsformatierungsbeispielcode

1. Grundkenntnisse (Methoden von Datumsobjekten) ...

Fallstricke bei der Installation der komprimierten Version von MySQL 5.7.17 unter Windows

Laden Sie zuerst die neueste komprimierte MySQL 5...

JavaScript zum Erreichen eines einfachen Seiten-Countdowns

In diesem Artikelbeispiel wird der spezifische Ja...

Schritte zum Upgrade von CentOS6 auf Glibc

Inhaltsverzeichnis Hintergrund Kompilieren Sie gl...

Detaillierte Erklärung der langsamen Remote-Verbindung von Navicat zu MySQL

Die endgültige Lösung ist im letzten Bild Wenn Si...

MySQL-Sequenz AUTO_INCREMENT ausführliche Erklärung und Beispielcode

MySQL-Sequenz AUTO_INCREMENT ausführliche Erkläru...

Der Unterschied zwischen JS-Pre-Parsing und Variablen-Promotion im Web-Interview

Inhaltsverzeichnis Was ist eine Voranalyse? Der U...