Introduction à BootStrap et comment le déployer et l'installer (introduction)-tutoriel HTML-php.cn

Introduction à BootStrap et comment le déployer et l'installer (introduction)

青灯夜游

Libérer： 2018-10-13 16:31:01

avant

3147 Les gens l'ont consulté

Cet article vous présentera ce qu'est BootStrap et comment le déployer et l'installer. 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. Vous pouvez également visiter le tutoriel bootstrap pour obtenir et en savoir plus sur les didacticiels vidéo liés au bootstrap.

Introduction à Bootstrap

Qu'est-ce que Bootstrap ?

Bootstrap a été développé par Mark Otto et Jacob Thornton sur Twitter .

Bootstrap est un produit open source publié sur GitHub en août 2011.

Bootstrap est un framework frontal pour le développement rapide d'applications Web et de sites Web.

Bootstrap prend en charge la mise en page réactive et est compatible avec nombreux Accès via des terminaux (ordinateurs, tablettes, téléphones portables).

Déployer et installer Bootstrap

1 . Téléchargez le framework bootstrap sur le site officiel https://v3.bootcss.com/.

2. Placez le framework téléchargé dans le répertoire racine et importez le fichier.

Prend en charge les déclarations axées sur les appareils mobiles, qui doivent être placées au-dessus de la balise head

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

Copier après la connexion

, puis introduisez le fichier CSS bootstrap.

Le framework bootstrap dépend de jQuery, vous devez donc d'abord introduire la bibliothèque jQuery, puis introduire le fichier bootstrap js.

Ce qui suit est un code complet qui présente le framework

(les fichiers bootstrap js sont mieux placés en bas du corps)

	<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>

Copier après la connexion

3. Vous pouvez également utiliser le CDN officiellement fourni

et le placer dans la balise head

doit être présente lors de l'accès à ce qui suit. fichier jQuery. Seul Internet le peut.

<!-- 最新版本的 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>

Copier après la connexion

Résumé : Ce qui précède représente l'intégralité du contenu de cet article, j'espère qu'il sera utile à l'étude de chacun.

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!