So erstellen Sie mehrere responsive Spalten mit Bootstrap 3
Veröffentlicht: 2022-02-16
Möchten Sie die Reaktionsfähigkeit Ihrer Website mit Bootstrap verbessern? Der wichtigste Aspekt von Bootstrap ist sein 12-Spalten-Mobile-First-Grid-System. Dies ist, was Sie verwenden, um ein responsives Layout zu erstellen.
In diesem Video-Tutorial erstellen Sie eine einfache Website mit Bootstrap und lernen, wie Sie das Bootstrap-Rastersystem verwenden, um ein responsives Layout mit mehreren Spalten zu erstellen.
Vor dem Ansehen des Tutorials
Bevor Sie dem Video-Tutorial unten folgen und lernen können, wie Sie Ihre eigenen responsiven Spalten erstellen, benötigen Sie Folgendes:
- Grundlegendes Verständnis dessen, was Bootstrap ist
- Grundlegendes Verständnis dessen, was das Bootstrap-Grid-System ist
- Laden Sie Bootstrap auf Ihre Festplatte herunter
- Erstellen Sie eine grundlegende Bootstrap index.html-Datei, auf der Sie aufbauen können
Was ist Bootstrap
- Bootstrap ist ein Framework für HTML-, CSS- und JavaScript-Entwickler, die an der Reaktionsfähigkeit von Websites arbeiten.
- Es besteht aus bereits vorgefertigten responsiven CSS-Stilen für Spalten, Listen, Navigation, Webformulare und viele andere Webelemente.
Das Bootstrap-Grid-System verstehen
- Das Bootstrap-Rastersystem klassifiziert Bildschirmgrößen in vier Typen: Extraklein, Klein, Mittel und Groß.
- Das Extra-Small ist für Mobiltelefone. Das Small ist für Tablets wie das I-Pad. Das Medium ist für Desktop-Monitore. Und der Large ist nur für größere Desktop-Monitore.
- Um Ihnen bei der Feinabstimmung der Reaktionsfähigkeit für diese vier Arten von Bildschirmen zu helfen, unterteilt Bootstrap die Breite der Webanzeigegeräte in das 12-Spalten-Rastersystem.
- Jeder dieser vier Bootstrap-Grid-Typen reagiert nur dann, wenn Sie ihm eine eigene CSS-Klasse zuweisen.
- Um beispielsweise ein div für besonders kleine Geräte reaktionsfähig zu machen, muss das div über eine eigene Bootstrap-.col-xs-<number_of_columns_to_take>-Klasse verfügen, z. B. <div class="col-xs-6">.
Bootstrap herunterladen
- Gehen Sie zu getboostrap.com und klicken Sie auf die Schaltfläche „Bootstrap herunterladen“:
- Sie sehen die Seite „Erste Schritte“. Klicken Sie auf die Schaltfläche "Bootstrap herunterladen":
- Speichern Sie diese Datei an einem beliebigen Ort auf der Festplatte Ihres Computers. Es muss nicht auf einem Webserver gespeichert werden.
- Entpacken Sie diese Datei und benennen Sie den extrahierten Ordner in „bootstrap“ um.
Bereiten Sie Ihre grundlegende Bootstrap index.html-Seite vor
Schritt 1. Erstellen Sie Ihre Bootstrap index.html-Datei
- Kehren Sie zur Seite „Getting Started“ (http://getbootstrap.com/getting-started/#download) zurück und klicken Sie auf den Link „Basic Template“ in der rechten Seitenleiste:
- Sie sehen den Code "Basisvorlage". Klicken Sie auf die Schaltfläche „Kopieren“, um den Code zu kopieren:
- Fügen Sie den „Basic Template“-Code in Ihren Texteditor ein und speichern Sie ihn als index.html im selben Ordner, in dem Sie den „bootstrap“-Ordner gespeichert haben. Es wird nun zur Startseite Ihrer Bootstrap-Site.
- Öffnen Sie die neu erstellte index.html und werfen Sie einen Blick auf Ihre grundlegende Bootstrap-Website:
- Öffnen Sie die Datei index.html in Ihrem Texteditor und fügen Sie zwischen den öffnenden Tags <body> und <h1> <div class="container"> hinzu (1). Schließen Sie dieses neue div nach dem schließenden </h1>-Tag (2) und speichern Sie die Datei:
- Überprüfen Sie das Frontend der Seite und beachten Sie, wie die Meldung "Hello World!" klebt nicht mehr am Seitenrand und ist jetzt leicht nach rechts gewandert, damit es etwas aufgeräumter aussieht. Die "Container"-Klasse von Bootstrap, die Sie diesem div zugewiesen haben, hat diesem Text etwas Rand hinzugefügt:
- Gehen Sie zurück zu Ihrer index.html-Datei. Ersetzen Sie zwischen den Tags <h1> und </h1> das "Hello World!" zu "Trusthub". Speichern Sie die Datei und überprüfen Sie das Frontend Ihrer Website.
Schritt 2. Fügen Sie einige Inhalte und eine Seitenleiste hinzu
- Gehen Sie zurück zu Ihrer index.html-Datei und kopieren Sie unter dem <h1>Trustub</h1>-Code den folgenden Code:
<div class="row"> <div> <h2>What Trusthub can do for you</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.</p> </div> <div> <h2>Our Team</h2> <p>Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus.</p> </div> </div>- Gehen Sie zurück zum Frontend Ihrer Website. Aktualisieren Sie es. Sie sollten jetzt Ihren Inhalt und die Seitenleiste „Unser Team“ sehen, noch ohne responsives Spaltenlayout:
- Gehen Sie zurück zur Website getbootstrap.com und klicken Sie im oberen Menü auf die Schaltfläche "CSS":
- Klicken Sie in der Seitenleiste auf die Schaltfläche "Rastersystem":
- Scrollen Sie auf der Seite nach unten zum Abschnitt "Rasteroptionen" (1) und beachten Sie das 12-Spalten-Rastersystem von Bootstrap mit seinen vier Bildschirmgrößentypen, ihrer Breite und ihren festgelegten CSS-Klassenpräfixen (2):
- Machen Sie sich keine Sorgen, wenn die Bootstrap-Grid-Systemoptionen für Sie noch keinen Sinn ergeben. Es wird alles in einer Sekunde für Sie zusammenkommen, wenn Sie anfangen, auf Ihrer Website damit herumzuspielen.
- Öffnen Sie erneut Ihre index.html-Datei und geben Sie unter <div class="row"> für Ihr vorhandenes <div> die Klasse "col-md-9" ein. Ihr neues div sollte jetzt wie folgt aussehen: "div class="col-md-9">:
- Gehen Sie nun zu Ihrem div, das sich direkt über dem Header <h2> „Out Team“ befindet, und geben Sie ihm die Bootstrap-Grid-CSS-Klasse „col-md-3“. Speicher die Datei:
- Gehen Sie zurück zu Ihrer Website, um diese Änderung in Aktion zu sehen. Drücken Sie die Taste F5 auf Ihrer Tastatur, um Ihre Website zu aktualisieren. Jetzt sehen Sie, dass Ihr Inhaltsbereich und die Seitenleiste nebeneinander sitzen.
- Ihr Inhalts-Div nimmt jetzt 9 der in seinem Bootstrap-Raster verfügbaren 12 Spalten ein (75 % der gesamten Desktop-Bildschirmbreite). Und Ihre Seitenleiste nimmt 3 der 12 Spalten des Bootstrap-Rasters ein (25 % der gesamten Breite des Desktop-Bildschirms):
Brillant! Sie sind jetzt bereit, dem Video-Tutorial unten zu folgen. Lass uns anfangen.
Herzliche Glückwünsche! Sie haben gerade gelernt, wie Sie mit Bootstrap ein responsives Webseitenlayout mit mehreren Spalten erstellen. Möchten Sie mehr über Bootstrap erfahren? Wenn ja, besuchen Sie bitte unseren OSTraining-YouTube-Kanal und sehen Sie sich die „Bootstrap Framework Tutorials“ an.