Maison >interface Web >Tutoriel d'amorçage >A quoi sert le bootstrap ?

A quoi sert le bootstrap ?

青灯夜游
青灯夜游original
2020-11-20 10:20:062807parcourir

Bootstrap est une boîte à outils open source pour le développement front-end, un framework pour créer des pages Web. Vous pouvez utiliser les styles et les composants qu'il fournit pour écrire rapidement des sites Web. Les utilisateurs n'ont besoin que de référencer certaines classes définies, qui sont. noms de classe. , vous pouvez créer des pages Web qui ont déjà de très beaux styles et prennent en charge l'adaptabilité.

A quoi sert le bootstrap ?

Bootstrap est une boîte à outils open source lancée par Twitter pour le développement front-end. Il a été développé par les concepteurs de Twitter Mark Otto et Jacob Thornton et est un framework CSS/HTML. [Recommandations associées : "Tutoriel vidéo bootstrap"]

Site officiel de Bootstrap : http://v3.bootcss.com/

Bootstrap est un créateur de site Web Framework (actuellement le framework frontal WEB le plus populaire) signifie qu'il vous suffit d'écrire des balises HTML et d'appeler ses classes, et vous pouvez rapidement créer une page Web haut de gamme. Vous n'avez pas à vous soucier des problèmes de compatibilité et. il existe de nombreux styles parmi lesquels choisir !

Par exemple, vous devez créer une navigation sur un site Web, n'est-ce pas ? Si vous l'écrivez vous-même, vous devez écrire beaucoup de code, mais si vous utilisez le framework bootstrap pour l'écrire, il vous suffit d'écrire la balise HTML et appelez le nom de la classe !

Fonction :

Utilisez les styles et les composants qu'il fournit pour écrire rapidement des sites Web

Il vous suffit de référencer certaines classes définies, qui sont des noms de classe , vous pouvez créer une page Web qui a déjà un très beau style et qui prend en charge l'auto-adaptation. C'est un très bon framework.

Pour faire simple : il s'agit d'un projet open source (basé sur Jquery) permettant de construire rapidement la page front-end d'un site Web. Il vous suffit de comprendre la signification des classes pertinentes, des noms de balises, etc., puis lors de la construction de la page, d'importer le JS, le CSS, etc. de bootstrap, et il affichera les effets correspondants :

Par exemple, description HTML : abréviations ; le contenu complet sera affiché lorsque la souris passe sur les abréviations et les abréviations. Bootstrap implémente des styles améliorés pour les éléments HTML. L'élément abréviation a un attribut title et apparaît sous la forme d'un léger cadre en pointillés lorsque la souris est déplacée dessus, il se transforme en un pointeur avec un "point d'interrogation". Lorsque vous avez besoin qu'un certain mot ou une certaine phrase dans un paragraphe ait l'effet ci-dessus, vous pouvez simplement l'écrire dans ce format. Le class="initialism" supplémentaire réduit la taille de la police, ou ce n'est pas nécessaire. D'un autre côté : si vous n'essayez pas le bootstrap ou d'autres frameworks similaires, vous devez alors écrire de tels effets vous-même, ce qui prend beaucoup de temps à développer. Un autre exemple est easyui de Jquery, qui est similaire.

Une brève introduction au package de fichiers bootstrap

Nom du fichier :

bootstrap.css
bootstrap.min.css
bootstrap-responsive.css
bootstrap-responsive.min.css
bootstrap.js
bootstrap.min.js

Explication :

  • bootstrap.css est une feuille de style bootstrap complète. Elle n'est pas compressée et peut être utilisée pour le débogage pendant le développement

  • bootstrap.min.css est 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 sont supprimés, la taille du fichier sera donc inférieure à celle de bootstrap.css. Il peut être référencé lors du déploiement du site Web. Il n'est pas nécessaire de référencer bootstrap.css

  • bootstrap-responsive.css Il s'agit de la feuille de style CSS requise après l'application d'une mise en page réactive au framework bootstrap Si votre projet de site Web n'est pas préparé Quand. en faisant du responsive design, il n'est pas nécessaire de référencer ce CSS.

  • bootstrap-responsive.min.css a la même fonction que bootstrap.min.css, c'est une version compressée de bootstrap-responsive.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. Ce fichier est également une version non compressée pour le débogage. développement, utilisez

  • bootstrap.min.js est une version compressée de bootstrap.js. Le contenu est le même que bootstrap.js, mais la taille du fichier sera beaucoup plus petite lors du déploiement. le site Web À ce moment-là, vous ne pouvez pas référencer bootstrap.js, mais plutôt référencer ce fichier ~~

Pour plus de connaissances liées à la programmation, veuillez visiter : Introduction à la programmation! !

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn