Was bedeutet Bootstrap? Wie verwende ich Bootstrap?

Was bedeutet Bootstrap? Wie verwende ich Bootstrap? Ich glaube, dass Neulinge, die neu in der Front-End-Entwicklung sind, mit Bootstrap etwas unbekannt sein werden. In diesem Artikel stellen wir Ihnen die Bedeutung von Bootstrap und die Verwendung von Bootstrap vor. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.

Lassen Sie uns zunächst verstehen Was ist Bootstrap?

Bootstrap ist ein Open-Source-Web-Frontend-Framework auf Basis von HTML, CSS und JavaScript für die schnelle Entwicklung von Webanwendungen und Websites. Es wurde im August 2011 von Twitter, der berühmten Social-Networking-Site, gestartet und der Pionier von Weibo. Es integriert HTML, CSS und JavaScript und nutzt die neueste Browsertechnologie, um ein Front-End-Toolkit für die schnelle Web-Front-End-Entwicklung bereitzustellen, einschließlich Layout, Raster, Tabelle, Schaltfläche, Formular, Navigation, Eingabeaufforderungen und anderen Komponenten. Mit Bootstrap können Sie eine sehr elegante Front-End-Schnittstelle erstellen, die nur sehr wenig Ressourcen beansprucht.

Das ist alles für die Einführung in Bootstrap. Wenn Sie mehr über Bootstrap erfahren möchten, können Sie das Bootstrap-Tutorial besuchen!

Nachdem wir gelesen haben, was Bootstrap ist, schauen wir uns an, wie man Bootstrap verwendet.

Schritte zur Verwendung des Bootstrap-Frameworks:

1. Laden Sie Bootstrap herunter

Wir müssen zuerst zum offiziellen Bootstrap gehen Website (http://www.bootcss.com/) zum Herunterladen:

Klicken Sie auf den roten Linienrand, um zur zu springen Auf der Download-Seite stehen uns drei Methoden zur Auswahl. Da wir uns jedoch jetzt in der Anfangsphase der Nutzung befinden, sollten wir Bootstrap einfach direkt in der Produktionsumgebung verwenden:

Wir erhalten eine komprimierte Version Paket: bootstrap-3.3.7-dist.zip. Schauen wir uns nach der Dekomprimierung die darin enthaltenen Dateien an:

Für diese Dateien schauen wir uns einige an der darin enthaltenen Dateien:

bootstrap.css: Das vollständige Bootstrap-Stylesheet, unkomprimiert, kann zum Debuggen während der Entwicklung verwendet werden.

bootstrap.min.css: Es handelt sich um ein komprimiertes Bootstrap-Stylesheet. Der Inhalt ist genau derselbe wie bootstrap.css, aber unnötige Leerzeichen und andere Dinge in der Mitte wurden gelöscht, sodass die Dateigröße unverändert bleibt kleiner als „bootstrap.css“ ist klein und kann bei der Bereitstellung der Website referenziert werden. Wenn auf diese Datei verwiesen wird, ist es nicht erforderlich, auf „bootstrap.css“ zu verweisen.

bootstrap.js: Dies ist die Seele von Bootstrap. Sie können sehen, dass alle JS-Effekte in Bootstrap von dieser Datei gesteuert werden . Die komprimierte Version kann zum Debuggen während der Entwicklung verwendet werden.

bootstrap.min.js: Es ist eine komprimierte Version von bootstrap.js, aber die Dateigröße ist bei der Bereitstellung der Website viel kleiner Muss nicht zitiert werden, sondern zitieren Sie stattdessen einfach diese Datei

Hinweis: Die Bootstrap-Umgebung erfordert mindestens 3 Dateien, nämlich: bootstrap.min.css, jQuery.min. js, bootstrap.min .js

2. Methoden zur Verwendung von Bootstrap (zwei Methoden)

①Durch Importieren der oben heruntergeladenen Datei

② Nutzen Sie direkt den kostenlosen CDN-Beschleunigungsdienst von BootCDN (unterstützt sowohl http- als auch https-Protokolle. Die Zugriffsgeschwindigkeit ist schneller, der Beschleunigungseffekt ist offensichtlicher, es gibt keine Geschwindigkeits- und Bandbreitenbeschränkung). und es ist dauerhaft kostenlos. BootCDN bietet auch CDN-Beschleunigungsdienste für eine große Anzahl von Front-End-Open-Source-Toolbibliotheken. Bitte besuchen Sie die BootCDN-Homepage, um weitere verfügbare Toolbibliotheken anzuzeigen.

Hinweis:

bootstrap.min.css, jquery.min.js, bootstrap.min Die Reihenfolge, in der die drei .js-Dateien eingeführt werden, darf nicht verwechselt werden. Im Allgemeinen werden die beiden Dateien jquery.min.js und bootstrap.min.js am Ende des HTML-Webseitendokuments platziert Das Laden dieser beiden Dateien kann zu unnötigen Problemen führen.

Sehen wir uns die Verwendung von Bootstrap anhand eines Beispiels an – unter Verwendung des Schriftartensymbols von Bootstrap

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<!--最新bootstrap 核心 css 文件-->
		<link rel="stylesheet" href="css/bootstrap.min.css" />
		
		<!--可选的bootstrap主题文件(一般不引入)-->
		<link rel="stylesheet" href="css/bootstrap-theme.min.css" />
		<style>
			ul{
				width: 200px;
				height: 500px;
				margin: 50px auto;
			}
			li{
				list-style: none;
				font-size: 50px;
				float: left;
				padding: 10px;
			}
		</style>
	</head>
	<body>
		<ul>
			<li><i class="glyphicon glyphicon-user"></i></li>
			<li><i class="glyphicon glyphicon-home"></i></li>
			<li><i class="glyphicon glyphicon-lock"></i></li>
			<li><i class="glyphicon glyphicon-qrcode"></i></li>
		</ul>
	</body>
	<!--jquery文件 务必在bootstrap.min.css前引用-->
	<script type="text/javascript" src="js/jquery.min.js" ></script>
	<!--最新bootstrap 核心 javascript 文件-->
	<script type="text/javascript" src="js/bootstrap.min.js" ></script>
</html>

Rendering:

Sie können alle von Bootstrap unterstützten Schriftsymbole auf der Komponentenseite der offiziellen Bootstrap-Website (https://v3.bootcss.com/components/) anzeigen.

Das obige ist der detaillierte Inhalt vonWas bedeutet Bootstrap? Wie verwende ich Bootstrap?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!