A quoi sert le bootstrap ?
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é.
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!

Outils d'IA chauds

Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool
Images de déshabillage gratuites

Clothoff.io
Dissolvant de vêtements AI

AI Hentai Generator
Générez AI Hentai gratuitement.

Article chaud

Outils chauds

Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise
Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP

Dreamweaver CS6
Outils de développement Web visuel

SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Sujets chauds



Utilisez Bootstrap pour implémenter Centering vertical: Flexbox Méthode: Utilisez les classes D-Flex, Justify-Content-Center et Align-Items-Center pour placer des éléments dans le conteneur Flexbox. Méthode de classe Align-Items-Center: Pour les navigateurs qui ne prennent pas en charge FlexBox, utilisez la classe Align-Items-Center, à condition que l'élément parent ait une hauteur définie.

Comment utiliser le bouton bootstrap? Introduisez Bootstrap CSS pour créer des éléments de bouton et ajoutez la classe de bouton bootstrap pour ajouter du texte du bouton

Pour ajuster la taille des éléments dans Bootstrap, vous pouvez utiliser la classe de dimension, qui comprend: ajuster la largeur: .col-, .w-, .mw-ajustement Hauteur: .h-, .min-h-, .max-h-

Il existe plusieurs façons d'insérer des images dans Bootstrap: insérer directement les images, en utilisant la balise HTML IMG. Avec le composant d'image bootstrap, vous pouvez fournir des images réactives et plus de styles. Définissez la taille de l'image, utilisez la classe IMG-FLUID pour rendre l'image adaptable. Réglez la bordure en utilisant la classe IMG-border. Réglez les coins arrondis et utilisez la classe Roundée IMG. Réglez l'ombre, utilisez la classe Shadow. Redimensionner et positionner l'image, en utilisant le style CSS. À l'aide de l'image d'arrière-plan, utilisez la propriété CSS d'image d'arrière-plan.

La fonction de téléchargement de fichiers peut être implémentée via Bootstrap. Les étapes sont les suivantes: introduire les fichiers Bootstrap CSS et JavaScript; créer des champs d'entrée de fichier; créer des boutons de téléchargement de fichiers; gérer les téléchargements de fichiers (à l'aide de FormData pour collecter des données, puis envoyer au serveur); style personnalisé (facultatif).

Pour utiliser Bootstrap pour disposer d'un site Web, vous devez utiliser un système de grille pour diviser la page en conteneurs, lignes et colonnes. Ajoutez d'abord le conteneur, puis ajoutez les lignes dedans, ajoutez les colonnes dans la ligne et enfin ajoutez le contenu dans la colonne. La fonction de mise en page réactive de Bootstrap ajuste automatiquement la disposition en fonction des points d'arrêt (XS, SM, MD, LG, XL). Différentes dispositions sous différentes tailles d'écran peuvent être réalisées en utilisant des classes réactives.

Pour créer un framework bootstrap, suivez ces étapes: Installez Bootstrap via CDN ou installez une copie locale. Créez un document HTML et liez Bootstrap CSS à & lt; head & gt; section. Ajoutez un fichier JavaScript bootstrap au & lt; body & gt; section. Utilisez le composant bootstrap et personnalisez la feuille de style en fonction de vos besoins.

La taille d'une liste d'amorçage dépend de la taille du conteneur qui contient la liste, pas de la liste elle-même. L'utilisation du système de grille de bootstrap ou de Flexbox peut contrôler la taille du conteneur, redimentant ainsi indirectement les éléments de la liste.
