twitter-bootstrap-3Erste Schritte mit twitter-bootstrap-3


Bemerkungen

Bootstrap ist ein kostenloses und quelloffenes Front-End-Web-Framework zum Entwerfen von Websites und Webanwendungen. Es enthält HTML- und CSS-basierte Designvorlagen für Typografie, Formulare, Schaltflächen, Navigation und andere Schnittstellenkomponenten sowie optionale JavaScript-Erweiterungen. Im Gegensatz zu vielen Web-Frameworks handelt es sich nur um die Front-End-Entwicklung.

Bootstrap ist das zweithäufigste Projekt auf GitHub, mit fast 100.000 Sternen und fast 45.000 Gabeln.

Versionen

Ausführung Veröffentlichungsdatum
3.3.7 2016-07-25

Bootstrap-Installation und erste Schritte

Einführung
Sie wollen also Bootstrap für Ihr Projekt verwenden? Großartig! dann können wir gleich loslegen!

Was ist Bootstrap? Bootstrap ist eine Open-Source-Bibliothek, mit der Sie mit responsivem Design und einfachem Code erstaunliche responsive Projekte erstellen können. Responsive Design ist eine Designphilosophie, bei der das Design des Systems (die Darstellung und das Layout) abhängig vom Layout des Geräts anspricht. Der Hauptgrund für die Reaktionsfähigkeit Ihres Designs besteht darin, die Reichweite Ihrer Anwendung mithilfe einer Reihe von Geräten für eine größere Benutzerbasis zu erhöhen.
Installation
Bootstrap kann auf viele verschiedene Arten und für viele verschiedene Projekte installiert werden. In der folgenden Liste habe ich einige Links zum Herunterladen und zum Tutorial für die Installation von Bootstrap hinzugefügt
Download links

  • Direkter Download - Link zum Herunterladen
  • CDN - komm hierher
  • Bower - Bower bower install bootstrap [lesen]
  • NPM - npm install bootstrap [lesen]
  • Composer - composer require twbs/bootstrap [lesen]
  • Anpassen - Wenn Sie eine eigene Konfiguration haben, können Sie sie hier anpassen.
  • Sass - Für Sass-bezogene Projekte können Sie es [hier] [1] erhalten.

Grundinformation
Sie haben jetzt Bootstrap in Ihrem Projekt installiert. Und jetzt ist es an der Zeit, die großen Vorteile von Bootstrap zu nutzen. Zuerst werde ich Ihnen einige grundlegende Verwendungsmöglichkeiten von Bootstrap erklären, danach einige kleine Beispiele und am Ende ein Startcode-Beispiel, das Sie als Startvorlage verwenden können!

Das netzsystem
Bootstrap verwendet ein Rastersystem. Dieses Gittersystem besteht normalerweise aus 12 Spalten. Jede dieser 12 Säulen hat dieselbe Breite, kann aber unterschiedliche Höhen haben.

Wir haben also ein Gittersystem, das aus 12 Spalten besteht. Wir können diese Spalten verwenden, um unsere grundlegende Website zu erstellen. Sagen wir, dass wir folgendes Layout erreichen wollen:

Menü - volle Breite
Seitenleiste - 1/3 des Bildschirms
Hauptinhalt 2/3 des Bildschirms
Fußzeile - volle Breite

Das Menü
Zuerst schauen wir uns das Menü an. Wie wir wissen, arbeitet das Gittersystem mit 12 Spalten. Da wir das Menü in voller Breite haben möchten, müssen wir das Menü in alle 12 Spalten einfügen. Es wird wie im Beispiel unten aussehen

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
    Menu
</div>
 

Indem wir dem Menü eine col-lg-12-Klasse geben, geben wir Folgendes an:
col - Die Spalte im Klassennamen steht für Spalten.
lg - Das lg im Klassennamen steht für die Breite des Bildschirms, in diesem Fall groß.
12 - Die 12 im Klassennamen steht für die Anzahl der Spalten, die unser Menü haben soll. da in diesem Fall das Menü in voller Breite angezeigt werden soll, erhalten wir alle 12 Spalten (12/12)

Da wir 12 der 12 Spalten für unser Menü verwendet haben, wird alles nach dem Menü in eine neue Zeile gesetzt.

Die Seitenleiste
Das zweite Element, das wir unserer Vorlage hinzufügen möchten, ist die Seitenleiste. Wie ich gesagt habe, möchten wir, dass die Seitenleiste 1/3 des Bildschirms ist. Was wir also tun werden, ist die Aufteilung der 12 Spalten in 3., was 4. Wir wissen jetzt, wie viele Spalten wir füllen wollen, um ein Drittel des Bildschirms zu erreichen. Folgen Sie dem untenstehenden Code.

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
    The menu
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
    The sidebar
</div>
 

Das gleiche wie beim Menü, nur jetzt unterscheidet sich unsere Anzahl von Farben vom Menü.
col - Die Spalte im Klassennamen steht für Spalten.
lg - Das lg im Klassennamen steht für die Breite des Bildschirms, in diesem Fall groß.
4 - Die 12 im Klassennamen steht für die Anzahl der Spalten, die unsere Seitenleiste haben soll. Da in diesem Fall die Seitenleiste ein Drittel des Bildschirms ausfüllen soll, greifen wir nur 4 der 12 Spalten (4/12) auf.

Der Inhalt
Jetzt haben wir in dieser Reihe noch 8 Spalten neben unserer Seitenleiste. Jetzt werden wir diese mit unserem Inhalt füllen. Siehe den Beispielcode unten

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
    The menu
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
    The sidebar
</div>
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
    The main content
</div>
 

Nachdem wir nun die restlichen 8 Spalten unserer 12 Spalten in dieser Zeile gefüllt haben, beginnt der nächste Abschnitt wieder mit einer neuen Zeile mit 12 Spalten.

Die Fußzeile
Die Fußzeile ist, genau wie das Menü, ein Block voller Breite auf dem Bildschirm, also greifen wir alle 12 Spalten in dieser Zeile für unsere Fußzeile auf (siehe Beispielcode unten).

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
    The menu
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
    The sidebar
</div>
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
    The main content
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
    The footer
</div>i are described below.
 

Nun haben wir mit nur einer sehr kleinen HTML-Datei unsere erste Bootstrap-Vorlage erstellt. Aber das ist genau das Wesentliche. Normalerweise würden wir diesen Code etwas mehr formulieren, um die volle Bootstrap-Erfahrung zu erhalten. Einige dieser Erfahrungen werden unten beschrieben.

Verwenden von Zeilen und Containern Wie im obigen einfachen Beispiel erläutert, verwendet bootstrap Zeilen mit 12 Spalten. Wenn eine Zeile mit 12 Spalten gefüllt ist, startet Bootstrap in einer neuen Zeile. Die beste Art, diese Zeilen anzuzeigen, ist die Verwendung von Zeilenklassen. Wir verwenden auch eine Containerklasse. Dies ist wie ein Body-Tag. In diesem Container werden wir unseren gesamten Code einfügen. Sie können zwischen einem Behälter oder einer Behälterflüssigkeitsklasse wählen. Der einzige Unterschied besteht darin, dass die Behälterflüssigkeitsklasse die volle Breite eines Bildschirms verwendet und die Behälterklasse dies nicht. Ein Beispiel für diese grundlegenden Funktionen finden Sie unten.

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            The menu consisting of 12 columns
        </div>
    </div>
    <div class="row">
        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
            The sidebar consisting of 4 columns
        </div>
        <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
            The main content consisting of 8 columns
        </div>
    </div>
    <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            The footer consisting of 12 columns
        </div>
    </div>
</div>
 

Deshalb haben wir jetzt eine vollständige Seitenvorlage mit Bootstrap erstellt. Es ist in der Tat sehr einfach, aber fangen Sie mit den Grundlagen an und später können Sie alle Arten von Bootstrap-Klassen und -Funktionalitäten verwenden. Letztes Ding. Die Spaltennamen lg - md - sm und xs in den Klassen stimmen überein, wie ich der Breite der Seite gesagt habe. LarGe, MeDium, SMall und XSmall. Vergessen Sie nicht, dass Sie das verwenden können, um Spalten mit unterschiedlichen Breiten unterschiedlich zu gestalten, indem Sie die Anzahl der Spalten ändern. Denken Sie daran, dass eine ganze Reihe aus 12 Spalten besteht!

Weitere Informationen finden Sie unter: http://getbootstrap.com/ <br? Für großartige Beispiele besuchen Sie: http://expo.getbootstrap.com oder http://bootsnipp.com/

Wenn Sie möchten, dass ich weitere Informationen hinzufüge oder wenn Sie auf Probleme stoßen würden, lassen Sie es mich wissen! und alles Gute für euch!

Hallo Welt

Die folgende HTML Seite veranschaulicht eine einfache Hello World-Seite, die Bootstrap 3 .

Die Seite enthält eine Navigationsleiste in voller Breite mit Beispiellinks und einem Dropdown-Steuerelement. Die Navigationsleiste nutzt die mobilen ersten Funktionen von Bootstrap. Es wird in mobilen Ansichten minimiert und wird horizontal, wenn die Breite des verfügbaren Ansichtsfensters zunimmt.

Zusätzlich wurde ein jumbotron Element verwendet, um die angezeigten Informationen anzuzeigen.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Hello World</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>

<body>

    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <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="#">Hello, World!</a>
            </div>


            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">Link</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><a href="#">Separated link</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <div class="container">
        <div class="jumbotron">
            <h1>Bootstrap</h1>
            <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
            <p><a class="btn btn-primary btn-lg">Learn more</a></p>
        </div>
    </div>


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</body>
</html>
 

Installation

  • Direkter Download - Link zum Herunterladen
  • CDN - komm hierher
  • Bower - Bower bower install bootstrap [lesen]
  • NPM - npm install bootstrap [lesen]
  • Composer - composer require twbs/bootstrap [lesen]
  • Anpassen - Wenn Sie eine eigene Konfiguration haben, können Sie sie hier anpassen.
  • Sass - Für Sass-verwandte Projekte erhalten Sie es hier .

Verwendungszweck

<head>
  <link rel="stylesheet" href="path/to/bootstrap.min.css">
</head>
 

Der Verweis auf die Bootstrap-js-Datei wird mithilfe des Skript-Tags direkt über dem Body-Tag (siehe unten) erstellt. Beachten Sie auch, dass bootstrap jQuery für die meisten Widgets verwendet - wie etwa ein Akkordeon-Karussell usw. - Referenzieren Sie die bootstrap-Datei js unterhalb der jQuery-Datei js.

**Probe**
<!DOCTYPE html>
<html lang="en">

<head>

  <title>Form Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>

<body>

  <div class="container">
    <h2>Form Email</h2>
    <form role="form">
      <div class="form-group">
        <label for="email">Email:</label>
        <input type="email" class="form-control" id="email" placeholder="Enter email">
      </div>
      <div class="form-group">
        <label for="pwd">Password:</label>
        <input type="password" class="form-control" id="pwd" placeholder="Enter password">
      </div>
      <div class="checkbox">
        <label><input type="checkbox"> Remember me</label>
      </div>
      <button type="submit" class="btn btn-default">Submit</button>
    </form>
  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</body>

</html>