Was ist Bootstrap? Eine kurze Einführung in Bootstrap

Der Inhalt dieses Artikels befasst sich mit der Frage, was Bootstrap ist. Eine kurze Einführung in Bootstrap hat einen gewissen Referenzwert. Ich hoffe, dass es für Sie hilfreich ist.

[Ähnliche Videoempfehlungen: Bootstrap-Tutorial]

1. Bootstrap-Übersicht
Bootstrap ist ein Open-Source-Framework, das auf
HTML, CSS und JavaScript basiert und von zwei technischen Ingenieuren von Twitter (dem weltweit größten Weibo) entwickelt wurde. Der Framework-Code ist prägnant und optisch ansprechend und kann verwendet werden, um schnell und einfach
Webseitenanforderungen basierend auf PCs und Mobilgeräten zu erstellen.
Im Juni 2010 arbeiteten Ingenieure bei Twitter daran, das Problem der Zusammenarbeit und Vereinheitlichung bei Front-End-Entwicklungsaufgaben zu lösen. Nachdem
verschiedene Optionen durchgegangen waren, wurde Bootstrap schließlich fertiggestellt und im August 2011 veröffentlicht. Nach einer langen Zeit iterativer Upgrades hat es sich von einem anfänglichen CSS-gesteuerten Projekt zu einem Open-Source-Framework mit vielen integrierten JavaScript-Plug-Ins und Symbolen für ein multifunktionales Web-Frontend entwickelt.
Der wichtigste Teil von Bootstrap ist sein responsives Layout, das mit dem Seitenzugriff auf PC, PAD
und Mobiltelefonen kompatibel ist.
Bootstrap-Download und Demonstration:
Offizielle Website für die Übersetzung inländischer Dokumente: http://www.bootcss.com

2. Bootstrap-Funktionen

Bootstrap ist aufgrund seiner sehr nützlichen Funktionen und Features sehr beliebt. Die wichtigsten Kernfunktionen sind wie folgt: (1) Geräte- und browserübergreifend
Kompatibel mit allen modernen Browsern, einschließlich der viel kritisierten IE7 und 8. Natürlich berücksichtigt dieser Kurs keine
Browser unter IE9 mehr.
(2). Responsives Layout
kann nicht nur die Anzeige verschiedener Auflösungen auf dem PC unterstützen, sondern auch die reaktionsfähige Umschaltung
Anzeige von mobilen PAD-, Mobiltelefon- und anderen Bildschirmen.
(3). Umfassende Komponenten bereitgestellt
Bootstrap bietet äußerst praktische Komponenten, darunter: Navigation, Beschriftungen, Symbolleisten, Schaltflächen und eine Reihe von Komponenten
, die für Entwickler bequem aufzurufen sind.
(4). Integrierte jQuery-Plug-ins
Bootstrap bietet viele praktische jQuery-Plug-ins, die es Entwicklern erleichtern, verschiedene
herkömmliche Spezialeffekte im Web zu implementieren.
(5). Unterstützung von HTML5, CSS3
HTML5-semantische Tags und CSS3-Attribute werden gut unterstützt.
(6). Unterstützt dynamische LESS-Stile.
LESS verwendet Variablen, Verschachtelung und gemischte Operationscodierung, um schnelleres und flexibleres CSS zu schreiben. Es kann
in Verbindung mit Bootstrap entwickelt werden.

3. Bootstrap-Struktur

Wenn Sie zunächst die Dokumentstruktur von Boostrap verstehen möchten, müssen Sie es lokal von der offiziellen Website herunterladen. Bootstrap

Download-Adresse lautet wie folgt:

Bootstrap-Download-Adresse: http://v3.bootcss.com/ (Wählen Sie die Produktionsumgebung, v3.3.4)
Nach der Dekomprimierung hat das Verzeichnis diese Struktur:
bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css
│ ├ ── bootstrap-theme.css
│ ├── bootstrap-theme.css.map
│ └── bootstrap-theme.min.css
├── js/
│ ├ ── bootstrap.js
│ └── bootstrap.min.js
└── Schriftarten/
├── glyphicons-halflings-regular.eot
├── glyphicons-halflings-regular. svg
├── glyphicons-halflings-regular.ttf
├── glyphicons-halflings-regular.woff
└── glyphicons-halflings-regular.woff2
ist hauptsächlich in drei Kernverzeichnisse unterteilt : CSS (Stil), JS (Skript), Schriftarten (Schriftart).
1.css Es gibt vier Dateien mit dem Suffix „css“ im Verzeichnis. Die Dateien, die das Wort „min“ enthalten, sind im Allgemeinen komprimierte Versionen, die nicht mit dem Suffix „css“ versehen sind um die CSS-Codedateien zu verstehen; und Die Datei mit dem Kartensuffix ist eine CSS-Quellcode-Zuordnungstabelle, die in einigen spezifischen Browser-Tools verwendet wird.
2.js-Verzeichnis enthält zwei Dateien, eine unkomprimierte und eine komprimierte js-Datei.
3.fonts-Verzeichnis enthält Schriftartdateien mit unterschiedlichen Suffixen.

Erstellen Sie die erste Bootstrap-Seite

<!--描述：Bootstrap之初体验-->
<!DOCTYPE html><html>
    <head>
        <meta charset="utf-8" />
        <title>bootstrap初体验</title>
    <link rel="stylesheet" href="css/bootstrap.css" />
    </head>
    <body>
        <button class="btn btn-default">bootstrap初体验之按钮</button>
    </body></html>

Bootstrap setzt die globale Schriftgröße auf 14 Pixel und die Zeilenhöhe auf 1,428 (d. h. 20 Pixel);

gleich der Hälfte der Zeilenhöhe (d. h. 10 Pixel); die Farbe ist auf #333 eingestellt.

Das obige ist der detaillierte Inhalt vonWas ist Bootstrap? Eine kurze Einführung in Bootstrap. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!