twitter-bootstrap Tutorial
Erste Schritte mit twitter-bootstrap

Angular 2 AngularJS ASP.NET asp.net-mvc CSS HTML JavaScript jQuery PHP Ruby on Rails

Bemerkungen

Bootstrap ist ein HTML-, CSS- und JavaScript-Framework, das zum Erstellen von Websites verwendet wird, die mit einem Mobile-First-Paradigma sowie Responsive Web Design (RWD) erstellt werden. Es verwendet eine Kombination aus vorgefertigten CSS-Klassen und JavaScript, um verschiedene Dinge im Web zu erstellen. Dazu gehören ein benutzerdefiniertes, responsives Grid, mit dem Websites auf jedem Bildschirm angezeigt werden können, eine Dropdown-Navigationsleiste, die ansprechbar ist, und sogar einfache Dinge, die zeitaufwändig sein können, wie beispielsweise vorgefertigte Schaltflächen, Formulare und Akkordeons wenige.

Bootstrap kann aus folgenden Gründen nützlich sein:

Zeitersparnis : Bootstrap bietet viele Funktionen, die beim Erstellen von Code vorgefertigt sind und lediglich aufgerufen werden müssen. Dies spart viel Zeit und kann die Codierung einer Website erheblich verkürzen.
Entwickelt für responsives Webdesign : Bootstrap ermöglicht Webentwicklern, sich keine Gedanken über das Erstellen von Dingen zu machen, die mit der Größe des Bildschirms skaliert werden können, da Bootstrap ein Mobile-First-Responsive-Design verwendet, mit dem Dinge erstellt werden können, die auf jedem Bildschirm funktionieren Größe.
Vereinfacht den Design-Prozess : Bootstrap wird mit vorgefertigten Elementen geliefert, die über gute Design-Praktiken verfügen. Dies kann für diejenigen nützlich sein, deren Webdesign-Kenntnisse nicht besonders hoch sind, oder für diejenigen, die Design als langwierige Aufgabe betrachten, da viele Bootstrap-Klassen ästhetisch ansprechend und schön anzusehen sind.

Dieser Abschnitt sollte alle großen Themen in Twitter-Bootstrap erwähnen und auf die verwandten Themen verweisen. Da die Dokumentation für twitter-bootstrap neu ist, müssen Sie möglicherweise erste Versionen dieser verwandten Themen erstellen.

Versionen

Ausführung	Veröffentlichungsdatum
4,0	2999-01-01
3.3.7	2016-07-25
3.3.6	2015-11-24
3.3.5	2015-06-15
3.3.4	2015-03-16
3.3.1	2014-11-12
3.3.0	2014-10-29
3.2.0	2014-06-26
3.1.0	2014-01-30
3,0	2013-08-19
2.3	2013-02-07
2.2	2012-10-29
2.1	2012-08-20
2,0	2012-02-01
1,0	2011-08-18

Installation / Setup

Wird heruntergeladen:

Laden Sie Bootstrap direkt herunter oder klonen Sie usw. aus dem GitHub- Repository
Laden Sie Ihre angepasste Version von Bootstrap von offiziellen Dokumenten herunter
bower install bootstrap mit Bower: bower install bootstrap
npm install bootstrap mit npm: npm install bootstrap
Mit Composer installieren: composer require twbs/bootstrap

Die Dateistruktur

Installation:

Fügen Sie in Ihre HTML-Seite Bootstraps CSS, JS und die Abhängigkeit von jQuery (Vorversion 3, mindestens ab der neuesten Bootstrap-Version) ein. Wenn Sie beabsichtigen, die JavaScript-Funktionen von Bootstrap zu verwenden, muss Ihre jQuery-Referenz vor Ihrer bootstrap.js-Referenz in Ihrem HTML-Code stehen.

Sie können Ihre installierten Bootstrap-Dateien aus dem obigen Abschnitt verwenden oder auf ein CDN verweisen, das von den Herstellern von Bootstrap bereitgestellt wird (Links, die aus Erste Schritte mit Bootstrap stammen ):

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

Eine sehr einfache Bootstrap-Webseite:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for 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/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

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

Grundlegende Vorlage

<!DOCTYPE html>
<html lang="en">
  
    <head>
        
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    
        
        <title>Bootstrap 101 Template</title>  <!-- The title of the Website -->


        <!-- Reference to Bootstrap's CSS file -->
        <!-- This is the line to reference the bootstrap's Stylesheet -->
        <link href="css/bootstrap.min.css" rel="stylesheet"> 


        <!-- HTML5 shim and Respond.js for 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/html5shiv/3.7.2/html5shiv.min.js"></script>
         <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <!--[endif]-->
  

    </head>
  
    <body>
    
        <h1>Hello, world!</h1>

        <!-- Referencing jQuery (necessary for Bootstrap JavaScript plugins(bootstrap.min.js) to work) -->
        <script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    

        <!-- Referencing Javascript Bootstrap Plugin to Facilitate Bootstrap Animations and functionalities. -->
        <!-- (Necessary to run Bootstrap) -->
        <script src="js/bootstrap.min.js"></script>
  

    </body>
</html>

Wann sollte Bootstrap verwendet werden?

Bootstrap ist ein Opinionated Framework für HTML, CSS und Javascript. Es enthält grundlegende Gestaltungsmerkmale und Funktionen für Elemente, die als Benutzeroberfläche akzeptiert wurden, z. B. Formularelemente, Schaltflächen, modale Fenster und Navigationselemente.

Bootstrap ist ein responsives Web-Framework, das heißt, Layout und Design für große und kleine Bildschirmgrößen wie mobile Geräte, Tablets und Desktop-Computer in einer einzigen Codebasis anpassen.

Eines der grundlegenden Konzepte von Bootstrap ist das Grid-Framework. Durch das Anwenden von Klassen auf HTML-Elemente können komplexe Layouts mit einem Grundraster mit zwölf Spalten erstellt werden. Beispielsweise kann sich ein Layout mit vier Spalten an zwei Spalten auf Tablet-Geräten und eine Spalte an mobilen Geräten anpassen. Das Raster verwendet media queries , eine CSS-Methode zur Ausrichtung auf bestimmte Bildschirmgrößen, um dies zu erreichen.

Bootstrap funktioniert besonders gut, wenn:

Custom Design hat keine oberste Priorität
Sie können HTML-Code leichter bearbeiten und Klassen hinzufügen als benutzerdefinierte CSS
Sie können ein Framework verwenden, das viele visuelle Ähnlichkeiten mit vielen anderen Websites aufweist

Bootstrap kann von Neulingen in HTML, CSS und Javascript verwendet werden, da die Dokumentation hervorragend ist. Es gibt jedoch eine Lernkurve für diejenigen, die mit den drei von Bootstrap verwendeten Basistechnologien (HTML, CSS und Javascript) nicht ganz vertraut sind.

Sie können Bootstrap-Designs kaufen oder herunterladen, um den Stil oder die Funktionalität von Bootstrap zu ändern. Es ist auch möglich, Bootstrap als Ausgangspunkt für die Anpassung von CSS und Javascript zu verwenden.

Grundlegende Webseite mit Bootstrap-Komponenten

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for 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/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
     <!-- Fixed navbar -->
        <nav class="navbar navbar-default navbar-fixed-top">
          <div class="container">
            <div class="navbar-header">
              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
              <a class="navbar-brand" href="#">Project name</a>
            </div>
            <div id="navbar" class="navbar-collapse collapse">
              <ul class="nav navbar-nav">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#contact">Contact</a></li>
                <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                  <ul class="dropdown-menu">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li role="separator" class="divider"></li>
                    <li class="dropdown-header">Nav header</li>
                    <li><a href="#">Separated link</a></li>
                    <li><a href="#">One more separated link</a></li>
                  </ul>
                </li>
              </ul>
              <ul class="nav navbar-nav navbar-right">
                <li><a href="../navbar/">Default</a></li>
                <li><a href="../navbar-static-top/">Static top</a></li>
                <li class="active"><a href="./">Fixed top <span class="sr-only">(current)</span></a></li>
              </ul>
            </div><!--/.nav-collapse -->
          </div>
        </nav>
    
        <div class="container">

          <div class="jumbotron">
            <h1>Navbar example</h1>
            <p>This example is a quick exercise to illustrate how the default, static and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
            <p>To see the difference between static and fixed top navbars, just scroll.</p>
            <p>
              <a class="btn btn-lg btn-primary" href="../../components/#navbar" role="button">View navbar docs &raquo;</a>
            </p>
          </div>
    
        </div> <!-- /container -->


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

Modified text is an extract of the original Stack Overflow Documentation

Lizenziert unter CC BY-SA 3.0

Nicht angeschlossen an Stack Overflow