Bootstrap-Tutorial

Twitter Bootstrap ist das beliebteste Front-End-Framework der letzten Zeit. Es ist ein elegantes, intuitives und leistungsstarkes mobiles First-Front-End-Framework für eine schnellere und einfachere Webentwicklung. Es verwendet HTML, CSS und Javascript. In diesem Tutorial lernen Sie die Grundlagen von Bootstrap Framework kennen, mit denen Sie problemlos Webprojekte erstellen können. Das Tutorial ist in Abschnitte wie Bootstrap Basic Structure, Bootstrap CSS, Bootstrap Layout Components und Bootstrap Plugins unterteilt. Jeder dieser Abschnitte enthält verwandte Themen mit einfachen und nützlichen Beispielen.

Warum Bootstrap lernen?

Mobile first approach - Bootstrap 3, Framework besteht aus Mobile First Styles in der gesamten Bibliothek anstatt in separaten Dateien.
Browser Support - Es wird von allen gängigen Browsern unterstützt.

Easy to get started- Mit nur HTML- und CSS-Kenntnissen kann jeder mit Bootstrap beginnen. Auch die offizielle Bootstrap-Site hat eine gute Dokumentation.
Responsive design- Das reaktionsschnelle CSS von Bootstrap passt sich an Desktops, Tablets und Handys an. Weitere Informationen zum Responsive Design finden Sie im Kapitel Bootstrap Responsive Design.

Bietet eine saubere und einheitliche Lösung zum Erstellen einer Schnittstelle für Entwickler.
Es enthält schöne und funktionale integrierte Komponenten, die einfach anzupassen sind.
Es bietet auch eine webbasierte Anpassung.
Und das Beste ist, dass es Open Source ist.

Hallo Welt mit Bootstrap.

Um Ihnen ein wenig Aufregung über Bootstrap zu geben, werde ich Ihnen ein kleines herkömmliches Bootstrap Hello World-Programm geben. Sie können es über den Demo-Link ausprobieren.

<!DOCTYPE html>
<html>
   
   <head>
      <title>Bootstrap 101 Template</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
      
      <!-- Bootstrap -->
      <link href = "css/bootstrap.min.css" rel = "stylesheet">
      
      <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
      <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
      
      <!--[if lt IE 9]>
      <script src = "https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src = "https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
      <![endif]-->
      
   </head>
   
   <body>
      <h1>Hello, world!</h1>

      <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
      <script src = "https://code.jquery.com/jquery.js"></script>
      
      <!-- Include all compiled plugins (below), or include individual files as needed -->
      <script src = "js/bootstrap.min.js"></script>
      
   </body>
</html>

Anwendungen von Bootstrap

Scaffolding- Bootstrap bietet eine Grundstruktur mit Grid-System, Verbindungsstilen und Hintergrund. Dies wird im Abschnitt ausführlich behandeltBootstrap Basic Structure
CSS- Bootstrap verfügt über globale CSS-Einstellungen, grundlegende HTML-Elemente, die mit erweiterbaren Klassen gestaltet und erweitert wurden, und ein erweitertes Rastersystem. Dies wird im Abschnitt ausführlich behandeltBootstrap with CSS.
Components- Bootstrap enthält über ein Dutzend wiederverwendbarer Komponenten, die Ikonografie, Dropdowns, Navigation, Warnungen, Pop-Over und vieles mehr bieten. Dies wird im Abschnitt ausführlich behandeltLayout Components.
JavaScript Plugins- Bootstrap enthält über ein Dutzend benutzerdefinierte jQuery-Plugins. Sie können sie einfach alle oder einzeln einschließen. Dies wird im Abschnitt ausführlich behandeltBootstrap Plugins.
Customize - Sie können die Bootstrap-Komponenten, WENIGER Variablen und jQuery-Plugins anpassen, um Ihre eigene Version zu erhalten.

Publikum

Dieses Tutorial wurde für alle erstellt, die über Grundkenntnisse in HTML und CSS verfügen und den Drang haben, Websites zu entwickeln. Nach Abschluss dieses Tutorials verfügen Sie über ein mäßiges Fachwissen in der Entwicklung von Webprojekten mit Twitter Bootstrap.

Voraussetzungen

Bevor Sie mit diesem Lernprogramm fortfahren, gehen wir davon aus, dass Sie bereits mit den Grundlagen von HTML und CSS vertraut sind. Wenn Sie mit diesen Konzepten nicht vertraut sind, empfehlen wir Ihnen, unser kurzes Tutorial zu HTML-Tutorial und CSS-Tutorial durchzuarbeiten.