Que signifie Bootstrap ? Comment utiliser Bootstrap ?

Que signifie Bootstrap ? Comment utiliser Bootstrap ? Je pense que les nouveaux arrivants qui débutent dans le développement front-end seront un peu peu familiers avec Bootstrap. Ainsi, dans cet article, nous allons vous présenter la signification de Bootstrap et l’utilisation de Bootstrap. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

Tout d’abord, comprenons Qu’est-ce que Bootstrap ?

Bootstrap est un framework web frontal open source basé sur HTML, CSS et JavaScript pour le développement rapide d'applications Web et de sites Web. Il a été lancé en août 2011 par Twitter, le célèbre site de réseautage social. et le pionnier du déploiement de Weibo. Il intègre HTML, CSS et JavaScript et utilise la dernière technologie de navigateur pour fournir une boîte à outils frontale pour un développement Web frontal rapide, comprenant une mise en page, une grille, un tableau, un bouton, un formulaire, une navigation, des invites et d'autres composants. En utilisant Bootstrap, vous pouvez créer une interface frontale très élégante qui consomme très peu de ressources.

C'est tout pour l'introduction à Bootstrap. Si vous souhaitez en savoir plus sur Bootstrap, vous pouvez visiter le tutoriel bootstrap !

Après avoir lu ce qu'est Bootstrap, jetons un coup d'œil à comment utiliser Bootstrap.

Étapes pour utiliser le framework Bootstrap :

1 Télécharger Bootstrap

Nous devons d'abord accéder au Bootstrap officiel. site Web (http://www.bootcss.com/) pour télécharger :

Cliquez sur la bordure de la ligne rouge pour accéder au page de téléchargement, nous avons le choix entre trois méthodes. Cependant, puisque nous en sommes maintenant à la phase initiale d'utilisation, nous devrions simplement utiliser Bootstrap directement dans l'environnement de production. Téléchargez simplement le premier :

Nous obtiendrons un fichier compressé. package : bootstrap-3.3.7-dist.zip. Après la décompression, jetons un coup d'œil aux fichiers à l'intérieur :

Pour ces fichiers, comprenons Jetez un œil à quelques-uns. des fichiers à l'intérieur :

bootstrap.css : La feuille de style bootstrap complète, non compressée, peut être utilisée pour le débogage pendant le développement.

bootstrap.min.css : Il s'agit d'une feuille de style bootstrap compressée. Le contenu est exactement le même que celui de bootstrap.css, mais les espaces inutiles et autres éléments au milieu ont été supprimés, donc la taille du fichier sera. plus petit que bootstrap.css est petit et peut être référencé lors du déploiement du site Web. Si ce fichier est référencé, il n'est pas nécessaire de référencer bootstrap.css.

bootstrap.js : C'est l'âme du bootstrap. C'est une collection de toutes les instructions js dans bootstrap. Vous pouvez voir que tous les effets js dans bootstrap sont contrôlés par ce fichier. . La version compressée peut être utilisée pour le débogage pendant le développement.

bootstrap.min.js : Il s'agit d'une version compressée de bootstrap.js. Le contenu est le même que celui de bootstrap.js, mais la taille du fichier sera beaucoup plus petite. Lors du déploiement du site Web, bootstrap.js le fait. pas besoin d'être cité, mais citez simplement ce fichier à la place

Remarque : L'environnement d'amorçage nécessite au moins 3 fichiers, à savoir : bootstrap.min.css, jQuery.min. js, bootstrap.min .js

2. Méthodes d'utilisation du bootstrap (deux méthodes)

①En important le fichier téléchargé ci-dessus

② Utilisez directement le service d'accélération CDN gratuit fourni par BootCDN (prend en charge les protocoles http et https). La vitesse d'accès est plus rapide, l'effet d'accélération est plus évident, il n'y a pas de limite de vitesse et de bande passante, et c'est gratuit en permanence. BootCDN fournit également des services d'accélération CDN pour un grand nombre de bibliothèques d'outils front-end open source. Veuillez vous rendre sur la page d'accueil de BootCDN pour afficher davantage de bibliothèques d'outils disponibles.

Remarque :

bootstrap.min.css, jquery.min.js, bootstrap.min L'ordre dans lequel les trois fichiers .js sont introduits ne doit pas être confondu. Généralement, les deux fichiers jquery.min.js et bootstrap.min.js sont placés en bas du document de la page web html. page d'être chargée avant qu'elle ne soit chargée. Le chargement de ces deux fichiers en premier peut entraîner des problèmes inutiles.

Jetons un coup d'œil à l'utilisation du bootstrap à travers un exemple --- utilisation des icônes de police 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>

Rendu :

Vous pouvez voir toutes les icônes de police prises en charge par bootstrap sur la page des composants du site officiel de bootstrap (https://v3.bootcss.com/components/).

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!