Bootstrap4 Tutoriel de base

Bootstrap4 Tutoriel

Bootstrap est la bibliothèque de composants front-end la plus populaire au monde, utilisée pour développer des projets WEB réactifs et à priorité mobile.

Bootstrap4 Il s'agit de la dernière version de Bootstrap, qui est une collection d'outils open source pour le développement HTML, CSS et JS. En utilisant les variables Sass fournies, ainsi que de nombreux mixins, un système de grille responsive, des composants préfabriqués extensibles et un puissant système de plugins basé sur jQuery, vous pouvez rapidement développer des prototypes ou construire des applications entières pour vos idées.

Pour qui ce tutoriel est-il destiné ?

Si vous possédez des connaissances de base en HTML et CSS, vous pouvez lire ce tutoriel et développer votre propre site web. Une fois que vous avez terminé ce tutoriel, vous atteindrez un niveau moyen dans l'utilisation de Bootstrap pour développer des projets Web.

Connaissances nécessaires avant de lire ce tutoriel :

Avant de commencer à lire ce tutoriel, vous devez avoir des connaissances de base en HTML, CSS et JavaScript. Si vous ne connaissez pas encore ces concepts, nous vous recommandons de lire nos tutoriels sur ces sujets d'abord:

Bootstrap4 示例

示例

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap4　实例</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="jumbotron text-center">
　　<h1>Ma première page Bootstrap</h1>
　　<p>Redéfinissez la taille du navigateur pour voir l'effet !</p>/p>　
</div>
　
<div class="container">
　　<div class="row">
　　　　<div class="col-sm-4">
　　　　　　<h3>Première colonne</h3>
　　　　　　<p>Tutoriel de base</p>
　　　　　　<p>Apprendre les bases est essentiel pour aller plus loin !</p>/p>
　　　　</div>
　　　　<div class="col-sm-4">
　　　　　　<h3>Deuxième colonne</h3>
　　　　　　<p>Tutoriel de base..</p>
　　　　　　<p>Apprendre les bases est essentiel pour aller plus loin !</p>/p>
　　　　</div>
　　　　<div class="col-sm-4">
　　　　　　<h3>Troisième colonne</h3>　
　　　　　　<p>Tutoriel de base..</p>
　　　　　　<p>Apprendre les bases est essentiel pour aller plus loin !</p>/p>
　　　　</div>
　　</div>
</div>
</body>
</html>

Vérifiez et voyez ›/›

Bootstrap4 　et Bootstrap3

Bootstrap4 est la dernière version de Bootstrap, compatible avec Bootstrap3 Compared to the previous version, it has more specific classes and some related parts have become related components. At the same time, the volume of Bootstrap.min.css has been reduced4au-dessus de 0%.

Bootstrap4 a abandonné le support pour IE8 et iOS 6 le support, maintenant il ne prend en charge que IE9 et iOS 7 versions de navigateurs ci-dessus. Si vous devez utiliser des navigateurs anciens, veuillez utiliser Bootstrap3.

Attention : par défaut, Bootstrap 4Utilisera la méthode de priorité mobile pour la réponse. Bootstrap 4.3est la dernière et la version la plus stable de Bootstrap. Tous les principaux navigateurs modernes supportent Bootstrap 4Par exemple, Google Chrome, Firefox, Safari, Internet Explorer 10et versions supérieures.

Bootstrap4 Installation et utilisation