Was ist Bootstrap ?
- Bootstrap ist ein freies Front-End - Rahmen für die schnellere und einfachere Web - Entwicklung
- Bootstrap enthält HTML und CSS - basierte Design - Vorlagen für Typografie, Formulare, Buttons, Tabellen, Navigation, Modalverben, Bild Karussells und viele andere, sowie optional JavaScript - Plugins
- Bootstrap gibt Ihnen auch die Möglichkeit, einfach ansprechende Designs zu erstellen
Was ist Responsive Web Design?
Responsive Web-Design ist über Web-Sites zu schaffen, die sich automatisch auf allen Geräten gut aussehen anpassen, von kleinen Telefone bis hin zu großen Desktop-PCs.
Bootstrap Geschichte
Bootstrap wurde von Mark Otto und Jacob Thornton bei Twitter entwickelt und als Open - Source - Produkt im August 2011 auf GitHub veröffentlicht.
Im Juni 2014 Bootstrap war die Nummer 1 Projekt auf GitHub!
Warum verwenden Sie Bootstrap ?
Vorteile von Bootstrap :
- Einfach zu bedienen: Jeder mit nur Grundkenntnisse in HTML und CSS beginnen mit Bootstrap
- Responsive Merkmale: Bootstrap 's reagiert , CSS stellt sich auf Smartphones, Tablets und Desktops
- Mobil-First - Ansatz: In Bootstrap 3, Mobile-first - Stile sind Teil des Kern Rahmen
- Browser - Kompatibilität: Bootstrap ist kompatibel mit allen modernen Browsern (Chrome, Firefox, Internet Explorer, Safari und Opera)
Wo bekommt man Bootstrap ?
Es gibt zwei Möglichkeiten , um zu starten Bootstrap auf Ihrer eigenen Webseite.
Sie können:
- Herunterladen Bootstrap von getbootstrap.com
- Fügen Sie Bootstrap von einem CDN
Das Herunterladen Bootstrap
Wenn Sie zum Download und Host wollen Bootstrap selbst, gehen Sie zu getbootstrap.com , und befolgen Sie die Anweisungen.
Bootstrap CDN
Wenn Sie herunterladen möchten nicht und Host Bootstrap selbst, können Sie es von einem umfassen CDN (Content Delivery Network).
MaxCDN liefern CDN Unterstützung für Bootstrap 's CSS und JavaScript. Auch gehören jQuery:
MaxCDN:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>Ein Vorteil der Verwendung von Bootstrap CDN :
Viele Anwender haben bereits Bootstrap heruntergeladen MaxCDN , wenn eine andere Website besuchen. Als Ergebnis wird es aus dem Cache geladen werden, wenn sie Ihre Website besuchen, die zu einer schnelleren Ladezeiten führt. Außerdem haben die meisten CDN's wird sicherstellen , dass , sobald ein Benutzer eine Datei von ihm fordert, wird es vom Server ihnen am nächsten bedient werden, was auch zu einer schnelleren Ladezeiten führt.
Erstellen Erste Web - Seite mit Bootstrap
1. Fügen Sie die HTML5 Doctype
Bootstrap verwendet HTML - Elemente und CSS - Eigenschaften, die die HTML5 Doctype erfordern.
Immer auch die HTML5 Doctype am Anfang der Seite, zusammen mit dem Attribut lang und die richtigen Zeichensatz:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
</html>2. Bootstrap 3 Mobile-first
Bootstrap 3 ist entworfen , um mobile Geräte zu reagieren. Mobil-first-Stile sind Teil des Kern Rahmen.
Um sicherzustellen , dass die richtige Darstellung und Touch - Zoom, fügen Sie das folgende <meta> -Tag innerhalb des <head> Element:
<meta name="viewport" content="width=device-width, initial-scale=1"> Die width=device-width Teil setzt die Breite der Seite , um die Bildschirmbreite des Geräts zu folgen (die auf dem Gerät variieren je).
Die initial-scale=1 Teil legt die anfängliche Zoomstufe , wenn die Seite zum ersten Mal durch den Browser geladen wird.
3. Container
Bootstrap erfordert auch ein Element enthält , Seiteninhalte zu wickeln.
Es gibt zwei Containerklassen zur Auswahl:
- Die
.container- Klasse stellt eine ansprechende feste Breite Behälter - Die
.container-fluid- Klasse bietet eine volle Breite Behälter, die gesamte Breite des Darstellungs Spanning
Hinweis: Die Container nicht schachtelbar sind (Sie keinen Container in einem anderen Behälter eingebracht werden).
Zwei Grund Bootstrap Seiten
Das folgende Beispiel zeigt den Code für eine grundlegende Bootstrap - Seite (mit einem ansprechenden Breite Behälter fest):
Beispiel
<!DOCTYPE html>
<html lang="en">
<head>
<title> Bootstrap
Example</title>
<meta charset="utf-8">
<meta
name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>My First
Bootstrap Page</h1>
<p>This is some text.</p>
</div>
</body>
</html> Versuch es selber " Das folgende Beispiel zeigt den Code für eine grundlegende Bootstrap - Seite (mit einer vollen Breite Container):
Beispiel
<!DOCTYPE html>
<html lang="en">
<head>
<title> Bootstrap
Example</title>
<meta charset="utf-8">
<meta
name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h1>My
First Bootstrap Page</h1>
<p>This is some text.</p>
</div>
</body>
</html> Versuch es selber "