In diesem Kapitel erfahren Sie, was Bootstrap ist und welche Eigenschaften es hat. Lassen Sie alle ein vorläufiges Verständnis des Bootstrap-Frameworks haben. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.
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
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.
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 aus, v3.3.4)Nach der Dekomprimierung wird die Es erscheint ein Verzeichnis mit einer solchen 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) und Schriftarten (Schriftarten).
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
<!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 (dh 20 Pixel). Das p>paragraph-Element ist auf 1/2 Zeilenhöhe (d. h. 10 Pixel) eingestellt; die Farbe ist auf #333 eingestellt.
Das obige ist der detaillierte Inhalt vonWas ist Bootstrap und welche Eigenschaften hat es?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
