Qu'est-ce que Bootstrap et quelles sont ses caractéristiques ?

Ce chapitre va vous présenter ce qu'est Bootstrap et quelles sont ses caractéristiques ? Laissez chacun avoir une compréhension préliminaire du framework 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.

1. Présentation de Bootstrap
Bootstrap est un framework open source basé sur
HTML, CSS et JavaScript développé par deux ingénieurs techniques de Twitter (le plus grand Weibo au monde). Le code du framework est concis et visuellement beau, et peut être utilisé pour créer rapidement et facilement
des exigences de page Web basées sur un PC et des appareils mobiles.
En juin 2010, les ingénieurs de Twitter ont travaillé pour résoudre le problème de la collaboration et de l'unification dans les tâches de développement front-end. Après avoir parcouru
diverses options, Bootstrap a finalement été finalisé et publié en août 2011. Après une longue période de mises à niveau itératives, il est passé d'un projet initial basé sur CSS à un framework open source avec de nombreux plug-ins et icônes JavaScript intégrés pour une interface Web multifonctionnelle.
La partie la plus importante de Bootstrap est sa mise en page réactive, qui est compatible avec l'accès aux pages sur PC, PAD
et téléphones mobiles.
Téléchargement et démonstration Bootstrap :
Site officiel de la traduction de documents nationaux :
http://www.bootcss.com

2. Fonctionnalités de Bootstrap

Bootstrap est très populaire en raison de ses fonctions et caractéristiques très utiles. Les principales fonctionnalités de base sont les suivantes : (1) Multi-appareils et multi-navigateurs
Compatible avec tous les navigateurs modernes, y compris les très critiqués IE7 et 8. Bien entendu, ce cours ne prend plus en compte les
navigateurs inférieurs à IE9.
(2). La disposition réactive
peut non seulement prendre en charge l'affichage de différentes résolutions sur le PC, mais également prendre en charge la commutation réactive
l'affichage du PAD mobile, du téléphone mobile et d'autres écrans.
(3). Composants complets fournis
Bootstrap fournit des composants très pratiques, notamment : la navigation, les étiquettes, les barres d'outils, les boutons et une série de composants
que les développeurs peuvent facilement appeler.
(4). Plug-ins jQuery intégrés
Bootstrap fournit de nombreux plug-ins jquery pratiques, qui permettent aux développeurs d'implémenter divers
effets spéciaux conventionnels sur le Web.
(5). Prise en charge HTML5, CSS3
Les balises sémantiques HTML5 et les attributs CSS3 sont bien pris en charge.
(6). Prise en charge des styles dynamiques LESS
LESS utilise des variables, l'imbrication et le codage mixte d'opérations pour écrire du CSS plus rapide et plus flexible. Il peut
être développé en collaboration avec Bootstrap.

3. Structure du Bootstrap

Tout d'abord, si vous souhaitez comprendre la structure du document de Boostrap, vous devez le télécharger localement depuis le site officiel. Bootstrap

L'adresse de téléchargement est la suivante :

Adresse de téléchargement Bootstrap :
http://v3.bootcss.com/
(Sélectionnez l'environnement de production, v3.3.4)Après décompression, le Le répertoire apparaît Une telle structure : bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap. min. css
│ ├── bootstrap-theme.css
│ ├── bootstrap-theme.css.map
│ └── bootstrap-theme.min.css
├── js /
│ ├── bootstrap.js
│ └── bootstrap.min.js
└── fonts/
├── glyphicons-halflings-regular.eot
├── glyphicons-halflings-regular.svg
├── glyphicons-halflings-regular.ttf
├── glyphicons-halflings-regular.woff
└── glyphicons-halflings-regular.woff2
est principalement divisé en trois répertoires principaux : css (style), js (script) et fonts (polices).
1.css Il y a quatre fichiers avec le suffixe css dans le répertoire. Les fichiers contenant le mot min sont des versions compressées. Généralement, utilisez
Les fichiers qui n'incluent pas le suffixe css sont non compressés et vous pouvez apprendre. pour comprendre les fichiers de code CSS ; et Le fichier avec le suffixe de carte est
table de mappage de code source CSS, qui est utilisée dans certains outils de navigateur spécifiques.
Le répertoire 2.js contient deux fichiers, qui sont des fichiers js non compressés et compressés.
Le répertoire 3.fonts contient des fichiers de polices avec différents suffixes.

Créer la première page bootstrap

Bootstrap définit la taille de police globale à 14 px et la hauteur de ligne à 1,428 (c'est-à-dire 20 px) ; L'élément de paragraphe est défini sur une hauteur de 1/2 ligne (c'est-à-dire 10 px) ; la couleur est définie sur #333 ;

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>bootstrap初体验</title>
    <link rel="stylesheet" href="css/bootstrap.css" />
    </head>
    <body>
        <button class="btn btn-default">bootstrap初体验之按钮</button>
    </body>
</html>

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!