Einführung in BootStrap und wie man es bereitstellt und installiert (Einführung)-HTML-Tutorial-php.cn

Einführung in BootStrap und wie man es bereitstellt und installiert (Einführung)

青灯夜游

Freigeben： 2018-10-13 16:31:01

nach vorne

3121 Leute haben es durchsucht

In diesem Artikel erfahren Sie, was BootStrap ist und wie Sie es bereitstellen und installieren. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein. Sie können auch Bootstrap-Tutorial besuchen, um weitere Video-Tutorials zum Thema Bootstrap zu erhalten und zu lernen.

Einführung in Bootstrap

Was ist Bootstrap?

Bootstrap wurde von Mark Otto und Jacob Thornton bei Twitter entwickelt .

Bootstrap ist ein Open-Source-Produkt, das im August 2011 auf GitHub veröffentlicht wurde.

Bootstrap ist ein Front-End-Framework für die schnelle Entwicklung von Webanwendungen und Websites.

Bootstrap unterstützt responsives Layout und ist kompatibel mit viele Zugriffe über Endgeräte (Computer, Tablets, Mobiltelefone).

Bootstrap bereitstellen und installieren

1 . Laden Sie das Bootstrap-Framework von der offiziellen Website https://v3.bootcss.com/ herunter.

2. Legen Sie das heruntergeladene Framework in das Stammverzeichnis und importieren Sie die Datei.

Unterstützt Mobile-Device-First-Anweisungen, die über dem Head-Tag

 <meta name="viewport" content="width=device-width, initial-scale=1">

Nach dem Login kopieren

platziert werden müssen, und führt dann die Bootstrap-CSS-Datei ein.

Das Bootstrap-Framework hängt von jQuery ab. Sie müssen daher zuerst die jQuery-Bibliothek und dann die Bootstrap-JS-Datei einführen.

Das Folgende ist ein vollständiger Code, der das Framework vorstellt

(Bootstrap-JS-Dateien werden am besten unten im Körper platziert)

	<head>
		<meta charset="UTF-8">
		<!--支持移动设备优先-->
		<meta name="viewport" content="width=device-width,initial-scale=1">
		<title>测试文档</title>
		<!--引入 Css 文件-->
		<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
		<!--引入 jQuery 文件-->
		<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
		<!--引入 bootstrap 框架 js 文件-->
		<script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
	</head>

Nach dem Login kopieren

3. Sie können auch das offiziell bereitgestellte CDN verwenden

im Head-Tag, unterhalb der jQuery-Datei

Sie müssen beim Zugriff über eine Internetverbindung verfügen Dürfen.

<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

Nach dem Login kopieren

Zusammenfassung: Das Obige ist der gesamte Inhalt dieses Artikels, ich hoffe, dass er für das Studium aller hilfreich sein wird.

Das obige ist der detaillierte Inhalt vonEinführung in BootStrap und wie man es bereitstellt und installiert (Einführung). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!