Vorne schreiben
In diesem Artikel werde ich über die Verwendung von Bootstrap basierend auf einer Landschafts -Webseite sprechen, die ich gemacht habe. Die Webseiten -Screenshots sind wie folgt:
Die Effekte und der Code der vollständigen Webseite können hier angezeigt oder auf CodePen angezeigt werden. Die Haupteffekte, die Webseiten erreichen müssen, umfassen Folgendes:
1. Die Anmelde- und Registrierungsschaltflächen in der Navigationsleiste werden nach dem Klicken auf die Anmelde- und Registrierungsmodalfelder angezeigt, und die Anmelde- und Registrierungsfenster können umgeschaltet werden. Die Menüleiste reagiert an
2. Die Landschaftsoptionen in der Navigationsleiste können heruntergezogen werden. Klicken Sie in der Dropdown-Abgabe auf die Jiuzhaigou Lijiang-Wasservorhanghöhle, um die entsprechende Registerkarte zu finden.
3..
4. Klicken Sie Klicken, um die Registerkartenseite einzuschalten
Jetzt fangen wir an, Bootstrap zu umarmen.
Ich glaube, dass Freunde von Bootstrap gehört oder es benutzt haben. Auf dieser Webseite verwende ich CDN Bootstrap v3.3.4. Klicken Sie hier, um die neueste Version von Bootstrap v3.3.5 herunterzuladen, oder klicken Sie hier, um sie auf der offiziellen Website herunterzuladen. Ich glaube, es gibt immer einen, der zu dir passt ~~~~~~
Lassen Sie uns in diesem Artikel zuerst über die Navigationsleiste sprechen.
Navigationsleiste
Bevor Sie BS verwenden, müssen Sie sich zunächst auf BS beziehen, einschließlich CSS und JS. Die Referenzmethode ist sehr einfach, genau wie die Referenzierung gewöhnlicher externer Dateien. Sie können CDN -Links verwenden oder in lokalen Referenzen platzieren. Der Code ist unten angegeben.
<html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>myvin's landscape</title><link rel="stylesheet" href = "http://cdn.bootcs.com/bootstrap/3.3.4/css/bootstrap.min.css"> <!-html5 shim und reagieren.js für IE8 Unterstützung von Html5-Elementen und Medienfragen-> <!-Wenn Sie nicht arbeiten, wenn Sie die Seite über die Seite schauen. 9]> <script src = "http://cdn.bootcs.com/html5shiv/3.7.2/html5shiv.min.js"> </script> <script src = "http://cdn.bootcs.com/resprespectur <! [endif]-> </head> <!-jQuery (notwendig für die JavaScript-Plugins von Bootstrap)-> <script src = "http://cdn.bootcs.com/jquery/1.11.2/jquery.min.js"> </script> <! src = "http://cdn.bootcs.com/bootstrap/3.3.4/js/bootstrap.min.js"> </script>
In diesem Beispiel für Landschaftswebseite verwende ich den CDN -Link.
Gleichzeitig muss auch JQ eingeführt werden, da das BS -Plugin auf JQ basiert.
Geben Sie zuerst den vollständigen Code der Navigationsleiste an
<nav> <div> <!-- Brand and toggle get grouped for better mobile display --> <div> <button type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span>Toggle navigation</span> <span></span> <span></span> <span></span> <span></span> </button> <a href="#">Define a trademark yourself</a> </div> <!-- Navigation in the upper left corner --> <div id="bs-example-navbar-collapse-1"> <ul > <li ><a href="#">Homepage<span>(current)</span></a></li> <li> <a href="#" data-toggle="dropdown" ROLLE = "Button" aria-expanded = "false"> Szenerie <span> </span> </a> <ul rolle = "mseu"> <li> <a href = "#jiuzhaigou"> jiuzhaigou </a> </li> <li> <a href = "#lijiang"> lijiang " href = "#shuilianong"> Shuijian Cave </a> </li> <li> </li> <li> <a href = "#shuilianandong"> shuijian cave </a> </li> <li> </li> <a href = "#"#". data-target="#about"><a href="#" >About </a></li> </ul> <form role="search"> <div> <input type="text" placeholder="Search for Attractions.."> <button type="button">Go</button> </div> </form> <ul> <li data-toggle="modal" data-target="#signin-signup-tab" id="signin-button"><a href="#" >Login</a></li> <li data-toggle="modal" data-target="#signin-signup-tab" id="signup-button"><a href="#" >Register</a></li> </ul> </div> </div> </nav>
Die Navigationskomponenten von BS basieren alle auf derselben .nav -Klasse und der Code wird separat erläutert. Schauen wir uns zuerst diesen Absatz an:
<button type = "button" data-toggle = "collapse" data-target = "#bs-example-navbar-collapse-1"> <span> Umschalten der Navigation </span> <span> </span> <span> </span> <dan> </span> </button>
Der Zweck dieses Codes besteht darin, das Ansichtsfenster zu reduzieren, die Menüoptionen in der Navigationsleiste zusammenbrechen, auf das Zusammenbruchsymbol klicken und die Menüoptionen in der Navigationsleiste vertikal angeordnet werden. Die Navbar-Invers- Klasse in NAV ist umgekehrt. Freunde können die .navbar-Invers- Klasse entfernen, um den Effekt zu beobachten. Da ich eine schwarze Kontrolle bin, verwende ich hier die umgekehrte Farbe. Wenn Sie andere Farben verwenden möchten, reiches Gold, können Freunde sie nach ihrem eigenen Geschmack anpassen. Die .Navbar-Brand-Klasse kann verwendet werden, um die Marke Ihrer eigenen Website zu definieren. Ich werde den Text verwenden, um hier eine Marke zu definieren. Interessierte Freunde können ihr eigenes Logo hinzufügen. Die .Dropdown-Toggle-Klasse kann eine Pulldown implementieren, und die .Divider- Klasse kann eine helle und dunkle Trennlinie implementieren.
Wie der Name schon sagt , ist die .navbar-Rechtsklasse im Suchfeld und die Anmeldung und Registrierung rechts.
Datenattribute
Hier ist es notwendig, über das Datenattribut von BS zu sprechen. In BS können Entwickler alle JS -Plugins in BS nur über die Datenattribute verwenden. Dies ist eine erstklassige API in BS und ist oft unsere bevorzugte Art, JS-Plugins zu verwenden. Beispielsweise sind die Data-Toggle = "Collapse" und Data-Toggle = "Dropdown" im obigen Code die Möglichkeit, JS-Plug-Ins in BS zu verwenden.
Wenn Sie weiterhin ausführlich studieren möchten, können Sie hier klicken, um Ihnen zu studieren und 3 aufregende Themen anzuhängen:
Bootstrap -Lern -Tutorial
Bootstrap Practical Tutorial
Bootstrap-Plug-in-Nutzungs-Tutorial
Das obige dreht sich alles um diesen Artikel. Ich hoffe, dass es für alle hilfreich sein wird, die Bootstrap -Navigationsleiste zu lernen.