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

Codebeispiel für die Verwendung der MySql COALESCE-Funktion

COALESCE ist eine Funktion, die sich nacheinander...

Natives JS zum Erzielen eines Puzzle-Effekts

In diesem Artikel wird der spezifische Code von n...

Das Vue-CLI-Framework implementiert eine Timer-Anwendung

Technischer Hintergrund Diese Anwendung verwendet...

Die ultimative Lösung zum Schreiben von Bash-Skripten mit Node.js

Inhaltsverzeichnis Vorwort zx-Bibliothek $`Befehl...

So ändern Sie die Tomcat-Portnummer in Linux

Ich habe hier mehrere Tomcats. Wenn ich sie gleic...

Verwendung von Docker-Image-Speicher-Overlays

1. Übersicht Das Image in Docker ist in Schichten...

Lösung für das Problem, dass die Anzahl der MySQL-Verbindungen in CentOS 7 auf 214 begrenzt ist

Finden Sie das Problem Vor kurzem ist bei mir ein...

Ausführliches Installationstutorial für MySQL Installer Community 5.7.16

Dieser Artikel zeichnet das ausführliche Tutorial...

N Möglichkeiten, ein Div mit einzeiligem/mehrzeiligem Text vertikal zu zentrieren (unbekannte Höhe/feste Höhe)

Wenn über dieses Problem gesprochen wird, fragen s...

So zeigen Sie Serverhardwareinformationen in Linux an

Hallo zusammen, heute ist Double 12, habt ihr sch...

Anwendungsverschachtelung von HTML-ul-ungeordneten Tabellen

Anwendungsschachtelung ungeordneter Listen Code ko...

So fügen Sie Batchdaten unter Node.js in eine MySQL-Datenbank ein

Im Projekt (nodejs) müssen mehrere Daten gleichze...

JavaScript zum Erzielen eines Bodeneffekts

In diesem Artikel wird der spezifische JavaScript...

Lösung für das automatische Trennen der Verbindung von Navicat zur Datenbank nach einer gewissen Zeit

Dies liegt daran, dass der Datenbankserver so ein...

Detaillierte Erklärung zum Festlegen des Änderungswerts innerhalb einer bestimmten Zeit in Zabbix

Hintergrundbeschreibung: Auf einem vorhandenen La...