Bootstrap Profil
Was ist Bootstrap?
Bootstrap ist ein Front-End-Framework für die schnelle Entwicklung von Web-Anwendungen und Websites. Bootstrap basiert auf HTML, CSS, JavaScripts.
Geschichte
Bootstrap vonTwitterMark Otto undJacob ThorntonEntwicklung. Bootstrap ist August 2011 veröffentlicht auf GitHub Open-Source-Produkte.
Warum Bootstrap?
- Mobile First: seit Bootstrap 3 ab, enthält die Rahmen Bibliotheken im gesamten mobilen Gerät Priorität des Stils.
- Browser - Unterstützung:Alle gängigen Browser unterstützen Bootstrap.
- Einfach zu bedienen: so lange wie Sie Grundkenntnisse in HTML und CSS haben, können Sie beginnen Bootstrap zu lernen.
- Responsive Design: Bootstrap Responsive CSS fähig ist adaptive Desktops, Tablets und Mobiltelefone.Weitere Informationen über die ansprechende Design, erhältlich Bootstrap Responsive Design .
- Es Entwickler schaffen einfache Schnittstelle eine einheitliche Lösung zur Verfügung stellt.
- Es enthält eine leistungsstarke integrierte Komponenten, einfach anzupassen.
- Es bietet auch Web-basierte Anpassung.
- Es ist Open Source.
Bootstrap Paketinhalt
- Die Grundstruktur: Bootstrap stellt die grundlegende Struktur des Link - Stil Hintergrund mit einem Raster - System.Dies wird im DetailBootstrap basische Einheit erläutert.
- CSS: Bootstrap mit den folgenden Merkmalen kommt: globale CSS - Einstellungen definieren Sie die grundlegende HTML - Element Stile, skalierbare Klasse und eine erweiterte Rastersystem.Dieser Abschnitt wird im Detail dieBootstrap CSS erklären.
- Komponenten: Bootstrap enthält ein Dutzend wiederverwendbare Komponenten für Bilder erstellen, Dropdown-Menüs, Navigation, Warnfeld Pop-up - Box, und so weiter.Dadurch wirddie Anordnung der Bauteile im Detail erläutert.
- JavaScript - Widget:Bootstrap enthält ein Dutzend benutzerdefinierte jQuery - Plugin. Sie können alle Plug-Ins sind diese Plug-Ins können auch einzeln enthalten. Dies wird im DetailBootstrap Steckerteil erläutert.
- Anpassung: Sie können Bootstrap Komponenten anpassen, LESS Variablen und jQuery - Plug-in , um Ihre eigene Version zu bekommen.
Online Beispiele
Bootstrap-Tutorial-Website enthält Hunderte von Beispielen.
Sie können unser Online-Editor Online-Editor Code, und klicken Sie auf die Schaltfläche Ausführen, um die dafür Ergebnisse verwenden.
Bootstrap Beispiele
<Div class = "container">
<Div class = "jumbotron">
<H1> Meine erste Bootstrap - Seite </ h1>
<P> setzt die Fenstergröße die ansprechende Effekt zu sehen! </ P>
</ Div>
<Div class = "Zeile">
<Div class = "col-sm-4 ">
<H3> Spalte 1 </ h3 >
<P> Lernen ist nicht nur Technik, sondern auch ein Traum! </ P>
<P> wieder Niubi Träume, sondern auch Art und Weise geben und Sie Stick Sauger! </ P>
</ Div>
<Div class = "col-sm-4 ">
<H3> Spalte 2 </ h3 >
<P> Lernen ist nicht nur Technik, sondern auch ein Traum! </ P>
<P> wieder Niubi Träume, sondern auch Art und Weise geben und Sie Stick Sauger! </ P>
</ Div>
<Div class = "col-sm-4 ">
<H3> Spalte 3 </ h3 >
<P> Lernen ist nicht nur Technik, sondern auch ein Traum! </ P>
<P> wieder Niubi Träume, sondern auch Art und Weise geben und Sie Stick Sauger! </ P>
</ Div>
</ Div>
</ Div>
Versuchen »
Weitere Beispiele
Bootstrap Beispiel 2
<Div class = "table-responsive">
<Table class = "Tabelle Tabelle gestreiften Tabelle -bordered">
<Thead>
<Tr>
<Th> # </ th>
<Th> Name </ th>
<Th> Straße </ th>
</ Tr>
</ Thead>
<Tbody>
<Tr>
<Td> 1 </ td>
<Td> Anna Super </ td >
<Td> Broome Street </ td >
</ Tr>
<Tr>
<Td> 2 </ td>
<Td> Debbie Dallas </ td >
<Td> Houston Street </ td >
</ Tr>
<Tr>
<Td> 3 </ td>
<Td> John Doe </ td >
<Td> Madison Street </ td >
</ Tr>
</ Tbody>
</ Table>
</ Div>
Versuchen »
Klicken Sie auf die "Try" Taste , um zu sehen,wie es funktioniert.