Heim >Web-Frontend >Bootstrap-Tutorial >So starten Sie schnell mit Bootstrap

So starten Sie schnell mit Bootstrap

(*-*)浩Original: 2019-07-11 10:17:453112Durchsuche

Beim Erlernen von Bootstrap gibt es zwei wichtige Punkte: Zum einen muss man das Konzept verstehen und verstehen, wie Bootstrap Divs verwendet, um das bisherige Tabellenlayout zu ersetzen Der Bedarf kann mit einem Klick gefunden und kombiniert werden.

Das größte Gefühl nach dem Lernen ist, dass Bootstrap die Arbeit des Front-End-Layouts und des Renderings vom Ausfüllen verändert. die leeren Fragen zur Auswahlfrage. (Empfohlenes Lernen: Bootstrap-Video-Tutorial)

Auch wenn Sie keine ausgeprägten ästhetischen Fähigkeiten haben, können Sie die Webseite und das Erscheinungsbild dennoch einfach und elegant gestalten ist atemberaubend.

BootStrap wurde im August 2010 von zwei Twitter-Mitarbeitern, Mark Otto und Jacob Thornton, erstellt, ist aber immer noch das beliebteste Front-End-CSS-Framework. Es basiert auf der Front-End-Entwicklungsbibliothek Less und stellt gängige CSS- und Javascript-Codes bereit, sodass Sie schnell loslegen können.

Es verfügt über die folgenden Funktionen: vollständiges grundlegendes CSS-Plug-in; umfangreicher vordefinierter JS-Plug-in-Satz, der auf einem sehr flexiblen responsiven Grid-System basiert und sich für das mobile Denken einsetzt. Mit der Popularität von Bootstrap sind viele hervorragende Plug-Ins erschienen, wie zum Beispiel die Schriftart Font Awesome. Die offizielle Bootstrap-Website, Demos und Dokumentation sind sehr umfangreich.

Was hier erwähnenswert ist, ist, dass Schriftarten .png durch Schriftartdateien ersetzen. Es verwendet die @font-face-Syntax, um sichere Web-Schriftarten in Echtzeit auf den Client herunterzuladen und die Farbe zu ändern.

Die HTML-Standardvorlage lautet wie folgt

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>bootstrap基础模板</title>
    <link href="../public/css/bootstrap.css" rel="stylesheet">
    <link href="../public/css/bootstrap-theme.css" rel="stylesheet">
</head>
<body>
    <header></header>
    <article></article>
    <footer></footer>
    <script type="text/javascript" src="../public/js/jquery-2.1.4.js"></script>
    <script type="text/javascript" src="../public/js/bootstrap.js"></script>
</body>
</html>

Weitere technische Artikel zum Thema Bootstrap finden Sie in der Spalte Bootstrap-Tutorial Studie!

Das obige ist der detaillierte Inhalt vonSo starten Sie schnell mit Bootstrap. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Welche Vorteile bietet die Verwendung von Bootstrap?Nächster Artikel：Welche Vorteile bietet die Verwendung von Bootstrap?

In Verbindung stehende Artikel

Mehr sehen