Guide de l'ingénieur de données sur les stockages de données non traditionnels
Science Des Données Et Bases De Données
Interface Web
Qu'est-ce que Bootstrap? Un court didacticiel Bootstrap sur le quoi, le pourquoi et le comment
Si vous faites quelque chose en rapport avec le Web, il y a de fortes chances que vous ayez entendu parler de Bootstrap. Si vous ne savez toujours pas ce qu'est Bootstrap ou si vous souhaitez simplement trouver un didacticiel Bootstrap pour les débutants afin d'avoir un meilleur aperçu de ce qu'il est et de ce qu'il fait le mieux, vous êtes au bon endroit.
Amorcer est une boîte à outils puissante - une collection d'outils HTML, CSS et JavaScript pour créer et créer des pages Web et des applications Web. C'est un projet gratuit et open source, hébergé sur GitHub , et créé à l'origine par (et pour) Twitter .
Alors, pourquoi apprendre Boostrap?
Après sa sortie open source en 2011, Bootstrap est devenu très rapidement populaire, et non sans raison. Concepteurs Web et web développeurs comme Bootstrap car il est flexible et facile à utiliser. Ses principaux avantages sont qu'il est réactif de par sa conception, qu'il maintient une large compatibilité avec les navigateurs, qu'il offre une conception cohérente en utilisant des composants réutilisables, et qu'il est très facile à utiliser et rapide à apprendre. Il offre une extensibilité riche à l'aide de JavaScript, avec un support intégré pour les plugins jQuery et une API JavaScript programmatique. Bootstrap peut être utilisé avec n'importe quel IDE ou éditeur, et n'importe quelle technologie et langage côté serveur, d'ASP.NET à PHP en passant par Ruby on Rails.
quelle école de psychologie a développé le principe de fermeture
Avec Bootstrap, développeurs web peut se concentrer sur le travail de développement, sans se soucier de la conception, et obtenir rapidement un site Web attrayant. À l'inverse, cela donne aux concepteurs Web une base solide pour créer des thèmes Bootstrap intéressants.
Premiers pas avec les bases de Bootstrap
Bootstrap est disponible sous deux formes; en version précompilée et en version de code source. La version du code source utilise le Moins Préprocesseur CSS, mais si vous êtes plus dans Sass, il y a un port Sass officiel de Bootstrap aussi disponible. Pour faciliter l'utilisation des préfixes de fournisseurs CSS, Bootstrap utilise Autoprefixer .
La version du code source comprend le code source des styles écrit en Less (ou Sass), tout le JavaScript et la documentation qui l'accompagne. Cela permet aux concepteurs et développeurs plus ambitieux de modifier et de personnaliser, à leur guise, tous les styles fournis, et de créer leur propre version de Bootstrap. Mais si vous n'êtes pas familier avec Less (ou Sass), ou si vous n'êtes tout simplement pas intéressé par la modification du code source, ne vous inquiétez pas. Vous pouvez simplement utiliser le CSS vanilla précompilé. Tous les styles peuvent être remplacés ultérieurement en utilisant des styles personnalisés.
Structure des fichiers
Nous allons nous concentrer sur la version précompilée, qui peut être téléchargée Ici . Lorsque vous téléchargez l'archive zip et que vous la décompressez, la structure de base du fichier ressemble à ceci:
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 La structure Bootstrap est assez simple et explicite. Il comprend des fichiers précompilés qui permettent une utilisation rapide dans n'importe quel projet Web. Outre les fichiers CSS et JS compilés et minifiés, il comprend également des polices de Glyphicons et le thème Bootstrap de départ facultatif.
Cette structure peut être facilement incorporée dans la structure de fichiers de votre propre projet en incluant simplement les fichiers Bootstrap exactement comme ils sortent de l'archive zip, ou si cela convient mieux à votre projet, vous pouvez réorganiser ces fichiers et les placer où vous le souhaitez. Assurez-vous simplement que le dossier des polices Glyphicons est au même niveau que le dossier CSS.
Modèle HTML Bootstrap de base
Un modèle HTML Bootstrap de base devrait ressembler à ceci:
Bootstrap Template Il est important de commencer tout HTML avec une déclaration de Doctype HTML 5, afin que les navigateurs sachent à quel type de document ils peuvent s'attendre. La tête contient trois étiquettes importantes qui doivent être déclarées en premier, et toutes les étiquettes de tête supplémentaires doivent être ajoutées après celles-ci. Si vous souhaitez prendre en charge des navigateurs plus anciens comme IE8, vous pouvez également inclure Cale HTML 5 dans la tête, qui permettra l'utilisation d'éléments HTML5 dans les anciens navigateurs, et Respond.js , qui polyfill CSS3 Media Queries, dans les anciennes versions d'Internet Explorer.
outils de synchronisation de données de serveur sql
... Cependant, ce n'est pas très important si vous ciblez uniquement les navigateurs modernes.
Les fichiers JavaScript sont ajoutés à la fin du corps pour permettre à la page Web de se charger visiblement avant l'exécution de tout JavaScript. jQuery est nécessaire pour les plugins Bootstrap et doit être chargé avant bootstrap.js. Si vous n’utilisez aucune des fonctionnalités interactives de Bootstrap, vous pouvez également omettre ces fichiers de la source.
C'est le strict minimum nécessaire pour obtenir une mise en page Bootstrap de base opérationnelle. Si vous êtes développeur, vous souhaiterez probablement jeter un œil à des exemples plus avancés sur Page d'exemples de Bootstrap . Si vous êtes designer ou que vous cherchez simplement de l'inspiration, Expo Bootstrap présente les sites créés à l'aide de Bootstrap. Comme nous le verrons plus tard, chaque partie de Bootstrap peut être facilement personnalisée en CSS. Mais si ce n'est pas votre truc, et que vous recherchez une apparence légèrement différente des thèmes Bootstrap pré-emballés, il existe de nombreux thèmes gratuits, open source et premium disponibles à partir de sources telles que Botteswatch et WrapBootstrap .
Modèles Bootstrap et composants d'interface utilisateur
Bootstrap est fourni avec des modèles de conception HTML et CSS de base qui incluent de nombreux composants d'interface utilisateur courants. Ceux-ci incluent la typographie, les tableaux, les formulaires, les boutons, les glyphicons, les listes déroulantes, les boutons et les groupes d'entrée, la navigation, la pagination, les étiquettes et les badges, les alertes, les barres de progression, les modaux, les onglets, les accordéons, les carrousels et bien d'autres.
Beaucoup d'entre eux utilisent des extensions JavaScript et des plugins jQuery.
Ces modèles Bootstrap sont disponibles en tant que classes CSS bien factorisées que vous pouvez appliquer à votre HTML pour obtenir différents effets. Cela rend l'utilisation de Bootstrap très pratique. En utilisant des noms de classes sémantiques comme .success, .warning et .info, ces composants sont facilement réutilisables et extensibles. Mais bien que Bootstrap utilise des noms de classe descriptifs qui ont une signification, il n'est pas spécifique sur les détails de mise en œuvre. Toutes les classes peuvent être remplacées par un style et une couleur CSS personnalisés, et la signification de la classe restera la même.
Système de grille Bootstrap
Avant de nous plonger davantage dans les composants et les modèles de conception Bootstrap, il est important de mentionner l'une des principales fonctionnalités introduites par Bootstrap dans la version 3: a conception mobile d'abord philosophie, qui a abouti à un Bootstrap qui est réactif par conception. Le résultat final est que Bootstrap évolue facilement et efficacement avec une base de code unique, des téléphones, des tablettes aux ordinateurs de bureau.
Cette réactivité est obtenue à l'aide d'un système de grille Bootstrap fluide qui peut être appliqué pour mettre à l'échelle de manière appropriée jusqu'à 12 colonnes en fonction de la taille de l'appareil ou de la fenêtre. Les grilles fournissent une structure à la mise en page, définissant les lignes directrices horizontales et verticales pour organiser le contenu et appliquer les marges. Les grilles offrent également une structure intuitive pour les spectateurs, car il est facile de suivre un flux de contenu de gauche à droite ou de droite à gauche se déplaçant le long de la page. Avant les grilles, et avant que CSS ne soit si puissant, les mises en page basées sur des grilles étaient réalisées en utilisant des tableaux, où le contenu était organisé à l'intérieur de cellules de tableau. Au fur et à mesure que le CSS devenait plus mature, un certain nombre de cadres CSS pour les mises en page basées sur une grille ont commencé à apparaître. Ceux-ci inclus Grilles YUI , 960 GS et plan , pour n'en nommer que quelques-uns.
effets de la couleur sur les gens
Pour utiliser le système de grille Bootstrap, quelques règles doivent être suivies . Les éléments de colonne de grille sont placés à l'intérieur des éléments de ligne, qui créent des groupes horizontaux de colonnes. Vous pouvez avoir autant de lignes que vous le souhaitez sur la page, mais les colonnes doivent être des enfants immédiats de lignes. Dans une ligne complète, les largeurs de colonne seront n'importe quelle combinaison qui ajoute jusqu'à 12, mais il n'est pas obligatoire d'utiliser les 12 colonnes disponibles.
Les lignes doivent être placées dans un wrapper de mise en page à largeur fixe, qui a un .container classe et une largeur de 1170px, ou dans un wrapper de mise en page pleine largeur, qui a un .container-fluid class, et qui active le comportement réactif dans cette ligne.
Le système de grille Bootstrap comporte quatre niveaux de classes: xs pour les téléphones (<768px), sm pour les comprimés (≥768px), Maryland pour les ordinateurs de bureau (≥992px), et lg pour les ordinateurs de bureau plus grands (≥1200px). Celles-ci définissent essentiellement les tailles auxquelles les colonnes se réduiront ou s'étaleront horizontalement. Les niveaux de classe peuvent être utilisés dans n'importe quelle combinaison pour obtenir des mises en page dynamiques et flexibles.
Par exemple, si nous voulons obtenir deux lignes, une avec deux colonnes et une avec quatre, nous pourrions écrire:
First column Second column First column Second column Third column Fourth column Nous pouvons également utiliser des largeurs de colonne mixtes:
Wider column Smaller column Nous pouvons même décaler les colonnes en utilisant offset, par exemple pour créer un contenu plus étroit et centré:
Centered column Les colonnes peuvent être imbriquées. Il peut y avoir moins de 12 colonnes, et comme mentionné ci-dessus, nous pouvons choisir des colonnes de largeur fixe ou pleine largeur en utilisant .container ou .container-fluid emballages, respectivement.
Parent fixed-width column Nested column Nested column Fluid .. .. and full-width .. .. example Si nous combinons différents niveaux de classe, nous obtiendrons différents regards sur les vues mobiles et sur les ordinateurs de bureau. Dans l'exemple ci-dessous, sur le bureau, il y aura 4 colonnes dans une ligne, et sur mobile, elles auront toute la largeur et s'empileront les unes sur les autres.
.col-xs-12 .col-md-3 .col-xs-12 .col-md-3 .col-xs-12 .col-md-3 .col-xs-12 .col-md-3 
Il est possible de désactiver la réactivité de la page complètement. Cela désactivera essentiellement les aspects «site mobile» de Bootstrap. Gardez simplement à l'esprit que si vous désactivez la réactivité, tout composant à largeur fixe, comme une barre de navigation fixe, ne sera pas visible lorsque la fenêtre devient plus étroite que le contenu de la page. Pour un conteneur non réactif, cela signifie une largeur de 970 px. Dans ce cas également, les barres de navigation ne se réduiront pas dans les vues mobiles, comme décrit plus loin.
Ce ne sont que des exemples basiques. Pour voir tout le potentiel des grilles, consultez Documentation des grilles de Bootstrap .
Typographie Bootstrap
Les développeurs débutants supposent souvent que leur HTML pur et sans style aura le même aspect sur tous les navigateurs. Malheureusement, chaque navigateur a sa propre feuille de style «agent utilisateur» par défaut qui est appliquée au HTML, et aucun navigateur n'a les mêmes paramètres par défaut. Par exemple, les tailles de police de titre ne sont pas cohérentes entre les navigateurs, certaines listes non ordonnées et ordonnées ont des marges à gauche et d'autres ont un remplissage à gauche, les navigateurs appliquent des bordures et un remplissage personnalisés au corps HTML et même les boutons sont rendus différemment d'un navigateur à l'autre. Pour résoudre toutes ces incohérences, différentes règles de «réinitialisation» CSS sont nées qui définissent des valeurs de style cohérentes par défaut.
Bootstrap apporte d'autres goodies à la table en plus de la réinitialisation CSS pure. Il est livré avec normalize.css , une alternative prête pour HTML5 aux réinitialisations CSS, et il a également ses propres valeurs par défaut bien conçues. Par exemple, Bootstrap définit la valeur par défaut globale font-size à 14px, avec une hauteur de ligne de 1,428. La police par défaut est remplacée par Helvetica / Arial, avec un remplacement sans empattement. Tous ces styles sont appliqués à tous les paragraphes et à tous les paragraphes, avec l'ajout que (paragraphes) reçoivent une marge inférieure de la moitié de leur hauteur de ligne calculée (10px par défaut). Outre ces valeurs par défaut, il existe également des styles personnalisables pour les balises HTML standard qui apportent plus de cohérence au texte, tels que le texte en surbrillance (), le texte supprimé (et), le texte souligné (), le petit texte () et le texte en gras ( ). Les classes d'alignement permettent d'organiser plus facilement le contenu de la page en utilisant .text-left, .text-center, .text-right, .text-justify et .text-nowrap Des classes. Il existe également des styles prédéfinis pour les guillemets en bloc et des listes non ordonnées et ordonnées, avec des options en ligne, pour n'en nommer que quelques-uns. Pour obtenir une liste complète, rendez-vous sur le Page de typographie Bootstrap .
Une chose intéressante que Bootstrap rend également possible est que vous pouvez utiliser, par exemple, des styles de titre en utilisant soit le ou la balise .h1 classe. Ce dernier correspondra au style du titre, mais permettra au texte d'être affiché en ligne.
Formes
Les formulaires ont parcouru un long chemin au fil des ans et, aujourd'hui, l'utilisation d'un formulaire Web est l'une des activités les plus courantes lors de la navigation sur le Web. Alors que HTML5 a introduit un certain nombre de nouveaux attributs de formulaire, types d'entrée et autres éléments d'aide, les navigateurs n'ont pas beaucoup amélioré visuellement les formulaires. C'est un domaine où Bootstrap brille vraiment, car l'alignement et le style des étiquettes et des entrées, la validation des formulaires et l'affichage des messages d'erreur peuvent être délicats sans aide.
comment trouver des clients pour une entreprise de conseil
Tout d'abord, Bootstrap définit tous les éléments d'entrée textuels, tels que ,, et, sur 100% de la largeur de l'élément de formulaire parent. Il vous donne également la possibilité de choisir entre des formulaires en ligne, qui rendront plusieurs étiquettes et champs de saisie sur la même ligne, en utilisant le .form-inline classe, ou des formulaires horizontaux, qui utilisent des grilles pour aligner chaque entrée dans sa propre ligne, en utilisant le .form-horizontal classe. Et si vous devez placer du texte brut à côté d'une étiquette de formulaire, au lieu du champ de saisie, vous pouvez lui donner le .form-control-static classe pour qu'elle corresponde à l'aspect visuel du formulaire.
Peut-être que la plus grande fonctionnalité apportée par Bootstrap aux formulaires est les styles de validation pour les états d'erreur, d'avertissement et de réussite. Celles-ci peuvent être appliquées à l'aide des touches .has-warning, .has-error et .has-success classes, respectivement. En combinant cela avec des icônes qui peuvent être placées dans les formulaires de saisie, nous pouvons obtenir des effets de validation de formulaire rapides et efficaces, même sans utiliser de message texte d'erreur.
L'extrait de code suivant générera un champ de saisie avec un signe @, pour indiquer que nous recherchons un e-mail, et avec une icône d'avertissement et un contour jaune indiquant qu'il y a un problème dans le champ de saisie.
Email address input field with warning @ (warning) 
Encore une fois, nous n'avons fait qu'effleurer la surface ici. Pour plus d'exemples, jetez un œil à Documentation des formulaires de Bootstrap .
Images et icônes
Les images dans Bootstrap peuvent être rendues réactives en leur donnant simplement le .img-responsive classe. Ceci s'appliquera max-width:100%; height:auto; et display:block; à l'image en question, de sorte qu'elle s'adapte à l'élément parent.
En plus de rendre les images réactives, nous pouvons facilement ajouter différents effets. Par exemple, les coins arrondis sont appliqués avec .img-rounded classe, et l'image peut être mise en forme pour être un cercle en utilisant .img-circle, ou pour une vignette en utilisant .img-thumbnail classe.
Bootstrap est livré avec plus de 260 glyphes au format de police, du Halflings Glyphicons ensemble. Jan Kovařík, auteur et concepteur de Glyphicons, les a rendus disponibles pour Bootstrap gratuitement et sous la même licence que Bootstrap, ce qui est génial. Police de caractère Icônes présentent de nombreux avantages par rapport aux images matricielles simples, l'un des principaux étant qu'elles sont évolutives. Ils peuvent également être facilement personnalisés en utilisant uniquement CSS, donc manipuler la taille ou la couleur, ou même ajouter une ombre portée, est un jeu d'enfant.
Boutons, groupes de boutons et listes déroulantes de boutons
Les boutons sont l'une des choses que chaque navigateur rend totalement différemment. Si vous souhaitez avoir une conception cohérente sur tous les navigateurs, c'est potentiellement un gros problème. Heureusement, Bootstrap a une solution élégante pour boutons également. Et en plus de les rendre cohérents, cela apporte de nombreuses variations avec lesquelles jouer. Vous pouvez appliquer le .btn classe à andelements. Vous pouvez regrouper une série de boutons ensemble en une seule ligne en utilisant .btn-group classe sur le parent. Avec un peu d'aide de JavaScript, vous pouvez créer Comportement de style radio et case à cocher sur les boutons. Ou vous pouvez transformer vos boutons en menus déroulants en le plaçant dans un .btn-group, et en fournissant le balisage de menu approprié pour une liste d'éléments non ordonnés.
Navbars
La barre de navigation, ou barre de navigation, est un composant Bootstrap conçu spécifiquement pour créer le menu de navigation principal du site Web. Sur les grands écrans, il est affiché horizontalement, et sur les petits écrans mobiles (ceux de moins de 768px), il s'est transformé en un Menu déroulant 'hamburger' . Sous le capot, la barre de navigation est une liste en ligne non ordonnée d'éléments de menu, avec des éléments HTML supplémentaires qui sont ajoutés à volonté. Parmi les ajouts possibles figurent la marque (texte ou logo), des éléments de formulaire tels qu'une barre de recherche et des menus déroulants. Deux styles sont disponibles au choix: clair et foncé, inversé. Les éléments de la barre de navigation peuvent être alignés à gauche ou à droite en appliquant .navbar-left ou .navbar-right classes, respectivement.
l'industrie de la musique est-elle en croissance
Les barres de navigation peuvent avoir 4 comportements de position différents. La position flottante par défaut a un espace tampon autour de lui; la barre de navigation statique pleine largeur défile lorsque l'utilisateur fait défiler la page, et le barre de navigation fixe , qui peut être en haut ou en bas de la fenêtre, est toujours visible sur la page, quel que soit l'endroit où l'utilisateur a fait défiler.
Conclusion
Cela ne couvre que quelques-uns des grands composants Bootstrap qui placent Bootstrap avant les frameworks, bibliothèques et boîtes à outils similaires. Avec Bootstrap, il suffit de quelques classes CSS simples pour créer un frontal entièrement réactif et beau, rapidement et facilement. C'est un excellent point de départ pour votre prochain grand projet ou démarrage.
Comprendre les bases
Qu'est-ce que Bootstrap?
Bootstrap est un puissant framework frontal utilisé pour créer des sites Web et des applications Web modernes. Il est open-source et gratuit à utiliser, mais propose de nombreux modèles HTML et CSS pour les éléments d'interface de l'interface utilisateur tels que les boutons et les formulaires. Bootstrap prend également en charge les extensions JavaScript.
Pourquoi avons-nous besoin de Bootstrap?
Les ingénieurs en logiciel utilisent Bootstrap pour un certain nombre de raisons différentes. Il est facile à configurer et à maîtriser, il a beaucoup de composants, un bon système de grille, le style de nombreux éléments HTML allant de la typographie aux boutons, ainsi que le support des plugins JavaScript, ce qui le rend encore plus flexible.
Quelles sont les utilisations de Bootstrap?
Bootstrap est idéal pour créer des mises en page, car son CSS réactif est conçu pour se conformer à différents appareils. Il peut être utilisé pour assurer la cohérence, éliminer les problèmes entre navigateurs, etc.
Qu'est-ce qu'un thème Bootstrap?
Un thème Bootstrap est un package contenant du code CSS, HTML et JavaScript utilisé pour le style. Les thèmes Bootstrap comportent également divers composants d'interface utilisateur et mises en page qui peuvent être utilisés pour créer des sites Web. Vous pouvez les considérer comme des modèles de sites Web créés avec Bootstrap à l'esprit.
