Heim Web-Frontend js-Tutorial Eine Reihe von Freigabemethoden zur Verwendung der Bootstrap-Navigation bar_javascript-Fähigkeiten

Eine Reihe von Freigabemethoden zur Verwendung der Bootstrap-Navigation bar_javascript-Fähigkeiten

May 16, 2016 pm 03:03 PM

Dieser Artikel enthält die grundlegende Verwendung der Bootstrap-Navigationsleiste als Referenz. Der spezifische Inhalt ist wie folgt: 1. Erstellen der Navigationsleiste im Bootstrap-Framework hauptsächlich durch den .nav-Stil. Der Standardstil „.nav“ stellt keinen Standardnavigationsstil bereit und ein anderer Stil muss angehängt werden, um wirksam zu sein, z. B. „nav-tabs“, „nav-pills“ und dergleichen. Auf der rechten Seite finden Sie beispielsweise ein Beispiel für eine Tab-Navigationsleiste im Code-Editor. Die Implementierungsmethode besteht darin, die Klassenstile .nav und nav-tabs zum ul-Tag hinzuzufügen



2. Bootstrap-Basisnavigationsleiste
HomeCSS3SassjQueryResponsive
Nach dem Login kopieren

Beim Erstellen einer Basisnavigationsleiste gibt es hauptsächlich die folgenden Schritte:

Schritt 1 : Erstellen Sie zunächst eine Navigationsliste (

) und fügen Sie den Klassennamen „navbar-nav“ hinzu

  • Schritt 2 : Fügen Sie einen Container (p) außerhalb der Liste hinzu und verwenden Sie die Klassennamen „navbar“ und „navbar-default“
Die Hauptfunktion des „.navbar“-Stils besteht darin, Effekte wie links und rechts festzulegen Polsterung und abgerundete Ecken, aber es und farbbezogene Stile wurden in keiner Weise festgelegt


3. Titel hinzufügen zur Bootstrap-Navigationsleiste
网站首页系列教程名师介绍成功案例关于我们
Nach dem Login kopieren

Beim Erstellen von Webseiten steht häufig ein Titel vor dem Menü (die Textgröße ist etwas größer als bei anderen Texten). Tatsächlich hat das Bootstrap-Framework diesen Aspekt auch für alle berücksichtigt , durch „navbar-header“ und „navbar-brand“ zu erreichen.



4. Bootstrap-Navigationsleiste, sekundäres Menü
   导航条
  网站首页系列教程名师介绍成功案例关于我们
Nach dem Login kopieren

Hinzufügen eines sekundären Menüs zur Navigationsleiste, ebenfalls sehr einfach



5. Bootstrap-Navigationsleiste mit Formular
   导航条
  网站首页系列教程
  CSS3JavaScriptPHP名师介绍成功案例关于我们
Nach dem Login kopieren

Einige Navigationsleisten verfügen über eine Suche form. Im Bootstrap-Framework wird ein Formular mit dem Namen navbar-form bereitgestellt. „navbar-left“ ermöglicht es dem Formular, zur besseren Ausrichtung nach links zu schweben. Im Bootstrap-Framework wird auch der Stil „navbar-right“ bereitgestellt, um Elemente rechts von der Navigationsleiste auszurichten.



6. Schaltflächen, Texte und Links in der Bootstrap-Navigationsleiste
   Bootstrap
  网站首页系列教程
  CSS3JavaScriptPHP名师介绍成功案例关于我们搜索
Nach dem Login kopieren

Zusätzlich zur Verwendung des a-Elements und der Navigationsleiste in der Navigationsleiste Die Navigationsleiste des Bootstrap-Frameworks Zusätzlich zu nav's ul und navbar-form können auch andere Elemente verwendet werden:

1). >2).Navigationsleiste Der Text in Navbar-Text

3).Diese drei Stile unterliegen bei der Verwendung im Framework bestimmten Einschränkungen und müssen mit „navbar-brand“ und „navbar-nav“ kombiniert werden, und die Anzahl ist begrenzt. Im Allgemeinen gibt es kein Problem, wenn Sie ein oder zwei verwenden, aber es wird Probleme geben, wenn Sie mehr verwenden 🎜>

Feste Bootstrap-Navigationsleiste

In einem von vielen Fällen möchten Designer die Navigationsleiste oben oder unten im Browser fixieren Die feste Navigationsleiste wird häufiger in der mobilen Entwicklung verwendet. Das Bootstrap-Framework bietet zwei Möglichkeiten, die Navigationsleiste zu reparieren:

.navbar-fixed-top: Die Navigationsleiste ist oben im Browserfenster fixiert

.navbar-fixed-bottom: Die Navigationsleiste am unteren Rand des Browserfensters fixiert

   Bootstrap
  Navbar TextNavbar TextNavbar Text   Bootstrap
  Navbar Text
  Navbar Text
  Navbar Text
Nach dem Login kopieren

8. Bootstrap-Paging Navigation
Seitennavigation mit Seitenzahlen, wahrscheinlich die häufigste Art der Seitennavigation, insbesondere wenn die Listenseite viel Inhalt hat. Normalerweise verwenden viele Schüler gerne p>a und p>span-Strukturen zum Erstellen einer Paging-Navigation mit Seitenzahlen. Im Bootstrap-Framework wird jedoch eine Struktur wie ul>li>a verwendet und dem ul-Tag hinzugefügt Sie können die Paging-Schaltflächengröße auch in verschiedenen Situationen einstellen
1). 🎜>


Zusätzlich zur Seitennavigation mit Seitenzahlen bietet das Bootstrap-Framework diese Art der Seitennavigation häufig auf einigen einfachen Websites an, z B. persönliche Blogs, Zeitschriften-Websites usw. Bei dieser Art der Seitennavigation wird die konkrete Seitennummer nicht angezeigt, sondern es werden nur die Schaltflächen „Vorherige Seite“ und „Nächste Seite“ angezeigt.
 …我是内容 …
Nach dem Login kopieren
Im tatsächlichen Gebrauch ähnelt die Seitennavigation der Seitennavigation mit Seitenzahlen. Die Pager-Klasse wird dem ul-Tag hinzugefügt.



Standardmäßig wird die Seitennavigation in der Mitte angezeigt, aber manchmal brauchen wir eine auf der linken und eine auf der linken Seite rechts. Das Bootstrap-Framework bietet zwei Stile:

Vorherige: Lassen Sie die Schaltfläche „Zurück“ auf der linken Seite.

Nächste: Lassen Sie die Schaltfläche „Weiter“ auf der rechten Seite.
«12345»
Nach dem Login kopieren




Das Obige ist eine Reihe von Informationen zur Verwendung von Bootstrap-Navigationsbar_Javascript-Fähigkeiten. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn)!

………
Nach dem Login kopieren

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

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
2 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Abenteuer: Wie man riesige Samen bekommt
1 Monate vor By 尊渡假赌尊渡假赌尊渡假赌
Zwei -Punkte -Museum: Alle Exponate und wo man sie finden kann
1 Monate vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

So führen Sie Bootstrap in Eclipse ein So führen Sie Bootstrap in Eclipse ein Apr 05, 2024 am 02:30 AM

Führen Sie Bootstrap in Eclipse in fünf Schritten ein: Laden Sie die Bootstrap-Datei herunter und entpacken Sie sie. Importieren Sie den Bootstrap-Ordner in das Projekt. Bootstrap-Abhängigkeit hinzufügen. Laden Sie Bootstrap CSS und JS in HTML-Dateien. Beginnen Sie mit der Verwendung von Bootstrap, um Ihre Benutzeroberfläche zu verbessern.

So lesen Sie die Ergebnisse des Bootstrap-Mediation-Effekt-Tests in Stata So lesen Sie die Ergebnisse des Bootstrap-Mediation-Effekt-Tests in Stata Apr 05, 2024 am 01:48 AM

Interpretationsschritte des Bootstrap-Mediationseffekttests in Stata: Überprüfen Sie das Vorzeichen des Koeffizienten: Bestimmen Sie die positive oder negative Richtung des Mediationseffekts. Test-p-Wert: weniger als 0,05 zeigt an, dass die vermittelnde Wirkung signifikant ist. Überprüfen Sie die Konfidenzintervalle: Wenn sie nicht Null enthalten, bedeutet dies, dass der Mediationseffekt signifikant ist. Ein Vergleich des mittleren p-Werts: weniger als 0,05 untermauert die Bedeutung des Mediationseffekts zusätzlich.

Nach 750.000 Runden Einzelkampf zwischen großen Modellen gewann GPT-4 die Meisterschaft und Llama 3 belegte den fünften Platz Nach 750.000 Runden Einzelkampf zwischen großen Modellen gewann GPT-4 die Meisterschaft und Llama 3 belegte den fünften Platz Apr 23, 2024 pm 03:28 PM

Zu Llama3 wurden neue Testergebnisse veröffentlicht – die große Modellbewertungs-Community LMSYS veröffentlichte eine große Modell-Rangliste, die Llama3 auf dem fünften Platz belegte und mit GPT-4 den ersten Platz in der englischen Kategorie belegte. Das Bild unterscheidet sich von anderen Benchmarks. Diese Liste basiert auf Einzelkämpfen zwischen Modellen, und die Bewerter aus dem gesamten Netzwerk machen ihre eigenen Vorschläge und Bewertungen. Am Ende belegte Llama3 den fünften Platz auf der Liste, gefolgt von drei verschiedenen Versionen von GPT-4 und Claude3 Super Cup Opus. In der englischen Einzelliste überholte Llama3 Claude und punktgleich mit GPT-4. Über dieses Ergebnis war Metas Chefwissenschaftler LeCun sehr erfreut und leitete den Tweet weiter

So führen Sie eine Idee in Bootstrap ein So führen Sie eine Idee in Bootstrap ein Apr 05, 2024 am 02:33 AM

Schritte zur Einführung von Bootstrap in IntelliJ IDEA: Erstellen Sie ein neues Projekt und wählen Sie „Webanwendung“. Fügen Sie die Maven-Abhängigkeit „Bootstrap“ hinzu. Erstellen Sie eine HTML-Datei und fügen Sie Bootstrap-Referenzen hinzu. Ersetzen Sie ihn durch den tatsächlichen Pfad zur Bootstrap-CSS-Datei. Führen Sie die HTML-Datei aus, um Bootstrap-Stile zu verwenden. Tipp: Sie können ein CDN verwenden, um Bootstrap zu importieren oder HTML-Dateivorlagen anzupassen.

So verwenden Sie Bootstrap, um den Mediationseffekt zu testen So verwenden Sie Bootstrap, um den Mediationseffekt zu testen Apr 05, 2024 am 03:57 AM

Der Bootstrap-Test verwendet Resampling-Technologie, um die Zuverlässigkeit des statistischen Tests zu bewerten und die Signifikanz des Mediationseffekts zu beweisen: Berechnen Sie zunächst das Konfidenzintervall des direkten Effekts, des indirekten Effekts und des Mediationseffekts Mediationstyp nach der Baron- und Kenny- oder Sobel-Signifikanz und schließlich das Konfidenzintervall für den natürlichen indirekten Effekt schätzen.

So lesen Sie die Ergebnisse des Bootstrap-Mediation-Tests So lesen Sie die Ergebnisse des Bootstrap-Mediation-Tests Apr 05, 2024 am 03:30 AM

Der Bootstrap-Mediationstest bewertet den Mediationseffekt durch mehrfaches erneutes Abtasten der Daten: Konfidenzintervall für indirekte Effekte: Gibt den geschätzten Bereich des Mediationseffekts an. Wenn das Intervall nicht Null enthält, ist der Effekt signifikant. p-Wert: Bewertet die Wahrscheinlichkeit, dass das Konfidenzintervall nicht Null enthält, wobei Werte unter 0,05 auf Signifikanz hinweisen. Stichprobengröße: Die Anzahl der für die Analyse verwendeten Datenproben. Bootstrap-Unterabtastzeiten: die Anzahl der wiederholten Abtastungen (500–2000 Mal). Wenn das Konfidenzintervall nicht Null enthält und der p-Wert kleiner als 0,05 ist, ist der Mediationseffekt signifikant, was darauf hinweist, dass die vermittelnde Variable die Beziehung zwischen der unabhängigen und der abhängigen Variablen erklärt.

Was ist der Unterschied zwischen Bootstrap und Springboot? Was ist der Unterschied zwischen Bootstrap und Springboot? Apr 05, 2024 am 04:00 AM

Der Hauptunterschied zwischen Bootstrap und Spring Boot besteht darin, dass Bootstrap ein leichtes CSS-Framework für das Website-Design ist, während Spring Boot ein leistungsstarkes, sofort einsatzbereites Backend-Framework für die Entwicklung von Java-Webanwendungen ist. Bootstrap basiert auf CSS und HTML, während Spring Boot auf Java und dem Spring-Framework basiert. Bootstrap konzentriert sich auf die Erstellung des Erscheinungsbilds einer Website, während sich Spring Boot auf die Back-End-Funktionalität konzentriert. Spring Boot kann in Bootstrap integriert werden, um voll funktionsfähige und schöne Produkte zu erstellen

So exportieren Sie die Ergebnisse des Befehls Bootstrap Test Mediation Effect Stata So exportieren Sie die Ergebnisse des Befehls Bootstrap Test Mediation Effect Stata Apr 05, 2024 am 03:39 AM

Exportieren Sie die Ergebnisse des Bootstrap-Mediation-Effekttests in Stata: Speichern Sie die Ergebnisse: Bootstrap-Post. Erstellen Sie eine Variablenliste: lokale Variablen: coef se ci. Exportieren Sie die Ergebnisse (CSV): exportieren Sie durch Trennzeichen getrennte Ergebnisse.csv, varlist(`vars') ersetzen Sie Komma und Nolabel

See all articles