Was ist Bootstrap? Einführung in die Verwendung von Bootstrap

Die vorherigen Wörter

Bootstrap ist ein einfacher und flexibler Werkzeugsatz aus HTML, CSS und Javascript, der zum Erstellen von WEB-Seiten verwendet wird. Bootstrap basiert auf HTML5 und CSS3, mit schönem Design, benutzerfreundlicher Lernkurve, hervorragender Kompatibilität, 12-spaltiger responsiver Rasterstruktur, umfangreichen Komponenten und mehr. Laut der Werbung auf der offiziellen Website ist Bootstrap das beliebteste HTML-, CSS- und JS-Framework für die Entwicklung responsiver Layouts und mobiler Geräte-First-WEB-Projekte. In diesem Artikel wird ein Überblick über Bootstrap vorgestellt.

Einführung

Im traditionellen Front-End-Entwicklungsprozess kommt es häufig zu wiederholten, komplexen, bedeutungslosen Benennungen, redundanten Strukturen und zufälligen Verschachtelungen Es treten Probleme wie Seitenverwirrung auf.

Um ihre internen Analyse- und Verwaltungsfunktionen zu verbessern, nutzte die „kleine Gruppe“ von Twitter-Ingenieuren ihre Freizeit, um ein benutzerfreundliches, elegantes und flexibles System zu entwickeln und ein zuverlässiges Set an Tools für ihre Produkte – BootStrap. Bootstrap wurde von MARK OTTO und Jacob Thornton entworfen und erstellt. Nachdem es als Open Source auf Github veröffentlicht wurde, wurde es schnell zum meistgesehenen & Fork-Projekt auf der Website. Eine große Anzahl von Ingenieuren hat aktiv Code zum Projekt beigetragen, die Community ist überraschend aktiv, die Codeversion entwickelt sich sehr schnell und die offizielle Dokumentation ist von extrem hoher Qualität (und gleichzeitig kann man sagen, dass sie elegant ist). Es sind Websites entstanden, die auf Bootstrap basieren: Die Benutzeroberfläche ist frisch und prägnant und die Elemente sind ordentlich eingegeben.

Die neueste Version von Bootstrap ist Bootstrap4, die stabile Version ist Bootstrap3 und die Version ist mit niedrigeren Versionen kompatibel IE ist Bootstrap2

Bootstrap basiert auf HTML5 und CSS3, und viele seiner JavaScript-Plug-Ins basieren auf jQuery und jQuery. Die Version darf nicht niedriger als Version 1.9.1 sein

Funktionen

Bootstrap verfügt hauptsächlich über die folgenden Funktionen:

Responsives Design

Rasterlayout

Vollständige Klassenbibliothek

jQuery-Plugin

Verschiedene Nutzungsszenarien

Enthaltene Dateien

Bootstrap Im heruntergeladenen komprimierten Paket werden zwei Formen komprimierter Pakete bereitgestellt Siehe die folgenden Verzeichnisse und Dateien. Diese Dateien werden je nach Kategorie in verschiedenen Verzeichnissen abgelegt und es werden zwei Versionen, komprimiert und unkomprimiert, bereitgestellt.

【Vorkompilierte Version】

Nachdem Sie das komprimierte Paket heruntergeladen haben, entpacken Sie es in ein beliebiges Verzeichnis und Sie sehen die folgende Verzeichnisstruktur (komprimierte Version):

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap.min.css.map
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   ├── bootstrap-theme.min.css
│   └── bootstrap-theme.min.css.map
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2

Was oben gezeigt wird, ist die grundlegende Dateistruktur von Bootstrap: Vorkompilierte Dateien können direkt in jedem Webprojekt verwendet werden. Es werden kompilierte CSS- und JS-Dateien (bootstrap.*) sowie minimierte CSS- und JS-Dateien (bootstrap.min.*) bereitgestellt. Es bietet auch eine CSS-Quellcode-Zuordnungstabelle (bootstrap.*.map), die in den Entwicklungstools einiger Browser verwendet werden kann. Es enthält auch Symbolschriftarten von Glyphicons, die im enthaltenen Bootstrap-Theme verwendet werden.

【Bootstrap-Quellcode】

Der Bootstrap-Quellcode enthält vorkompilierte CSS-, JavaScript- und Symbolschriftdateien sind auch Quellcodes für LESS, JavaScript und Dokumentation. Im Einzelnen ist die Hauptstruktur der Dateiorganisation wie folgt: Die Verzeichnisse

bootstrap/
├── less/
├── js/
├── fonts/
├── dist/
│   ├── css/
│   ├── js/
│   └── fonts/
└── docs/
    └── examples/

　　less/, js/ und fonts/ enthalten jeweils den Quellcode von CSS, JS und Schriftartsymbolen . Das Verzeichnis dist/ enthält alle Dateien im oben erwähnten vorkompilierten Bootstrap-Paket. docs/ enthält die Quellcodedateien aller Dokumente. Das Verzeichnis examples/ ist ein offiziell von Bootstrap bereitgestelltes Beispielprojekt. Darüber hinaus umfassen weitere Dateien auch die Definitionsdatei, die Lizenzdatei und das Kompilierungsskript des Bootstrap-Installationspakets.

Basisvorlage

<!DOCTYPE html><html lang="zh-CN">
  <head><!-- utf-8编码--><meta charset="utf-8"><!-- 在IE运行最新的渲染模式--><meta http-equiv="X-UA-Compatible" content="IE=edge"><!--视口viewport设置--><meta name="viewport" content="width=device-width, initial-scale=1"><!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --><title>Bootstrap 101 Template</title><!-- 引入Bootstrap --><link href="css/bootstrap.min.css?1.1.11" rel="stylesheet"><!-- 在IE8-浏览器中，支持HTML5新标签和媒体查询@media--><!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js?1.1.11"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js?1.1.11"></script>
    <![endif]-->
  </head>
  <body><h1>你好，世界！</h1><!-- 先引入jQurey，再引入bootstrap插件 --><script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js?1.1.11"></script><script src="js/bootstrap.min.js?1.1.11"></script>
  </body></html>

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