❌

Vue normale

Reçu avant avant-hier

QCM sur Bootstrap – Partie 1

✇WayToLearnX
Par :Thomas
6 mars 2025 à 18:12

Vous souhaitez évaluer vos compétences en Bootstrap, le framework CSS le plus utilisé pour créer des sites web réactifs et modernes ? Dans cet article, nous vous proposons un QCM sur Bootstrap pour tester vos connaissances et vous perfectionner dans l’utilisation de ce puissant outil. Que vous soyez débutant ou développeur expérimenté, ce quiz vous aidera à mieux comprendre les concepts clés de Bootstrap, de la grille responsive aux composants avancés. Préparez-vous à améliorer vos compétences en développement web et à maîtriser Bootstrap grâce à ce QCM interactif !
 
 

1. Qu’est-ce que Bootstrap ?

A Un langage de programmation

B Une bibliothèque JavaScript

C Un outil de gestion de base de données

D Un framework CSS

D
Bootstrap est un framework CSS populaire qui permet de concevoir des sites web responsives (adaptables aux écrans de différentes tailles). Il offre des styles et des composants prêts à l’emploi pour simplifier la création de sites web modernes.

 

 
2. Quel fichier est essentiel pour utiliser Bootstrap dans un projet ?

A bootstrap.css

B bootstrap.js

C bootstrap.min.css

D index.html

C
Le fichier bootstrap.min.css contient toutes les règles CSS minimisées et est utilisé pour appliquer le style de Bootstrap à votre projet. Vous pouvez également utiliser la version non minimisée (bootstrap.css), mais la version minifiée est plus légère et donc plus rapide à charger.

 

 
3. Quel est l’objectif principal de Bootstrap ?

A Fournir une bibliothèque JavaScript pour l’animation

B Créer un design responsive et mobile-first pour les sites web

C Gérer les bases de données des sites web

D Ajouter des effets de transition CSS aux pages web

B
Bootstrap est un framework CSS populaire, utilisé pour développer des sites web responsive. Il propose des outils et des composants pour créer des interfaces utilisateur adaptées à différentes tailles d’écran.

 

 
 
4. Dans le système de grille de Bootstrap, quelle est la largeur d’une colonne « col-md-6 » ?

A 4 colonnes

B 6 colonnes

C 12 colonnes

D 50% de la largeur du conteneur

D
Le système de grille de Bootstrap est basé sur 12 colonnes. La classe col-md-6 signifie que la colonne occupe 6 colonnes sur 12, soit 50% de la largeur du conteneur sur les écrans de taille moyenne et plus grande.
 

 

 
5. Comment créer une grille responsive avec Bootstrap ?

A En utilisant la classe .container

B En utilisant la classe .row et .col-*

C En utilisant la classe .grid

D En utilisant la classe .box

B
Bootstrap utilise un système de grille basé sur des lignes (.row) et des colonnes (.col-*). Les colonnes peuvent être redimensionnées automatiquement en fonction de la taille de l’écran, ce qui rend le design responsive. Par exemple, .col-md-4 définit une colonne qui prend 4 colonnes sur un écran moyen. Exemple: 
<div class="container">
  <div class="row">
    <div class="col-md-4" style="background-color: lightblue; padding: 20px;">
      Colonne 1 (4 colonnes)
    </div>
    <div class="col-md-4" style="background-color: lightgreen; padding: 20px;">
      Colonne 2 (4 colonnes)
    </div>
    <div class="col-md-4" style="background-color: lightcoral; padding: 20px;">
      Colonne 3 (4 colonnes)
    </div>
  </div>
</div>

Résultat:

 

 
6. Quelle classe Bootstrap permet d’ajouter des boutons avec un style ?

A .btn

B .button

C .btn-style

D .btn-class

A
La classe .btn de Bootstrap permet de créer des boutons stylisés. Vous pouvez également ajouter des classes supplémentaires pour modifier la couleur ou le type du bouton, comme .btn-primary, .btn-success, etc. Exemple: 
<button class="btn btn-primary">Bouton</button>

 

 
 
7. Quelle classe Bootstrap utilise-t-on pour ajouter une marge supérieure (top margin) de 3 unités ?

A mt-3

B ml-3

C m-3

D margin-top-3

A
Bootstrap utilise des classes utilitaires pour ajouter des espacements. La classe mt-3 est utilisée pour ajouter une marge supérieure de taille moyenne. Le préfixe m désigne la marge et t signifie « top ».
 

 

 
8. Quelle classe Bootstrap permet de créer un bouton avec une couleur primaire ?


A btn-default

B btn-primary

C btn-success

D btn-info

B
La classe btn-primary permet de créer un bouton avec la couleur primaire définie par la palette de Bootstrap (généralement bleu).
 

 

 
9. Quel composant Bootstrap permet d’afficher un message de notification temporaire ?


A Alert

B Modal

C Tooltip

D Toast

D
Le composant Toast de Bootstrap permet d’afficher des notifications temporaires et non intrusives sur la page. Les « toasts » disparaissent après un certain temps ou lorsque l’utilisateur interagit avec eux.
 

 

 
10. Quelle classe Bootstrap est utilisée pour rendre un élément centré verticalement et horizontalement ?


A .align-center

B .text-center

C .d-flex et .justify-content-center

D .center

C
Pour centrer un élément à la fois verticalement et horizontalement avec Bootstrap, vous pouvez utiliser la classe .d-flex pour activer le mode flexbox, puis utiliser .justify-content-center pour centrer horizontalement et .align-items-center pour centrer verticalement. Exemple : 
<div class="d-flex justify-content-center align-items-center">
    <p>Texte centré</p>
</div>

 

 
11. Quelle classe permet d’afficher un élément seulement sur les écrans moyens et plus grands ?

A .d-none

B .d-md-block

C .d-lg-none

D .d-md-none

B
La classe .d-md-block permet d’afficher un élément seulement sur les écrans moyens (≥ 768px) et plus grands. Les classes d-*-none et d-*-block sont utilisées pour contrôler la visibilité en fonction de la taille de l’écran.

 

 
 
12. Quelle classe Bootstrap permet d’activer le modèle Flexbox pour un élément ?

A d-flex

B flex-item

C flexbox

D display-flex

A
La classe d-flex de Bootstrap applique le modèle Flexbox à un élément, permettant un agencement flexible de ses enfants.

 

 
13. Quelle classe Bootstrap est utilisée pour rendre une barre de navigation (navbar) fixe en haut de la page ?

A navbar-fixed

B navbar-sticky-top

C navbar-fixed-top

D navbar-static-top

C
La classe navbar-fixed-top permet de rendre la barre de navigation fixe en haut de la page. Cela fait en sorte que la navbar reste visible même lorsque l’utilisateur fait défiler la page.
 

 

 
14. Quelle classe est utilisée pour créer une carte dans Bootstrap ?

A card

B container-card

C box-card

D panel-card

A
La classe card de Bootstrap permet de créer des éléments de type « carte », qui peuvent contenir des images, des titres, du texte, et d’autres composants.
 

 

 
 
15. Quelle classe permet de rendre un texte en gras avec Bootstrap ?

A .font-weight-bold

B .text-bold

C .strong-text

D .bold

A
La classe .font-weight-bold est utilisée pour rendre le texte en gras. C’est une classe de Bootstrap qui modifie le poids de la police.

 

 

L’article QCM sur Bootstrap – Partie 1 est apparu en premier sur WayToLearnX.

Zaibu, une alternative libre pour les amateurs de dégustation

✇LinuxFr.org : les dépêches
Par :lovasoa · Nanawel · BAud · Ysabeau 🧶
19 février 2025 à 08:59

Cette dépêche présente Zaibu, une application web auto-hébergeable permettant de conserver un journal structuré de ses dégustations de bières et de vins. Développée avec SQLPage, elle met l’accent sur la simplicité, l’indépendance et le respect de la vie privée. Contrairement aux solutions centralisées comme Untappd ou Vivino, Zaibu ne collecte aucune donnée et reste entièrement sous le contrôle de l’utilisateur.

Logo de Zaibu

Note : n’ayant absolument aucune compétence ni aucun talent en graphisme, le logo a été créé avec Bing Image Creator et retravaillé et vectorisé par mes soins. Je sais, çaymal.

Sommaire

L’alcool est dangereux pour la santé, même en petite quantité. Le vin et la bière, comme les autres alcools, induisent une dépendance et tuent. Il est recommandé de ne pas consommer plus de 2 verres par jour, et de ne pas boire d’alcool au moins 2 jours par semaine. Si vous avez des doutes sur votre consommation, n’hésitez pas à contacter un professionnel de santé.

Pourquoi créer Zaibu ?

Zaibu répond avant tout à un besoin très concret : garder une trace de ses dégustations de boissons (uniquement bières et vins pour l’instant) sans dépendre d’applications trop encombrées ou propriétaires qui exploitent les données de leurs utilisateurs.

Ce projet est en fait l’évolution d’un simple fichier texte mis en forme selon une structure plus ou moins régulière. Il était à l’origine partagé via Nextcloud, un service de stockage et de synchronisation de fichiers, libre et auto-hébergeable. Pour passer de ce fichier brut à une véritable application, plusieurs outils ont été utilisés:

  • Makefile : un fichier de configuration pour GNU Make, permettant d’automatiser diverses tâches (ici, la conversion du fichier texte).
  • Gawk : une version libre de l’outil AWK, qui lit et transforme le contenu du fichier texte pour l’adapter au format voulu.
  • textql : un utilitaire en ligne de commande qui interprète des fichiers texte (CSV, TSV…) comme des tables SQL, ce qui facilite le chargement des données dans une base SQLite.

Grâce à cette chaîne d’outils, le fichier texte initial a pu être converti en une base de données exploitable, pour ensuite alimenter l’application Zaibu.

Pour ceux qui collectionnent les bouteilles comme d’autres collectionnent les timbres, c’est un outil pratique et léger, conçu pour être maîtrisé de bout en bout : le code source est distribué sous licence libre (AGPLv3), l’application est facile à héberger sur son propre serveur, et consomme très peu de ressources.

Un objectif secondaire était de tester les capacités de l’outil SQLPage pour le développement rapide d’applications de gestion de données.

Un besoin personnel

Il peut être difficile de se souvenir d’une bonne bière artisanale goûtée l’année passée ou du vin qui vous a tant plu à un mariage. Un carnet de notes ou un tableau dans un logiciel de bureautique peuvent dépanner, mais on s’y perd vite, et ce n’est pas toujours très pratique à consulter sur son téléphone quand on est en pleine dégustation.

Zaibu propose un formulaire simple où vous pouvez renseigner le nom, le producteur, le style, l’amertume, le taux d’alcool, vos impressions… Une fois la dégustation terminée, vous conservez une trace précise, consultable à tout moment. En un coup d’œil, vous pouvez comparer vos différents coups de cœur ou vous rappeler pourquoi un vin particulier ne vous avait pas convaincu.

Une occasion de tester SQLPage

Zaibu a aussi été conçu comme une démonstration technique. Il a servi de terrain d’expérimentation pour un nouvel outil, SQLPage, qui permet de créer une application web de gestion et d’affichage de données complète sans s’encombrer de milliers de lignes de code. En partant de requêtes de bases de données très simples, on obtient un site fonctionnel rapidement.

Ici il s’agit d’une application de type CRUD dans sa plus simple expression, donc parfaitement adaptée à être écrite en pur SQL. Même si certains traitements nécessitent de se creuser un peu plus la tête quand rien d’autre n’est disponible, il existe généralement une manière d’arriver à ses fins (et on découvre parfois avec bonheur des subtilités du langage qu’on ignorait !).

C’est le framework parfait pour créer rapidement ses propres outils tout en gardant la maîtrise complète de sa donnée, en utilisant une base de données que l’on peut héberger soi-même facilement.

Une approche libre et auto-hébergeable

De nombreuses applications existent déjà, mais elles imposent souvent la création d’un compte, exploitent les données des utilisateurs et monétisent leur activité via la publicité ou des abonnements. Zaibu prend le contre-pied en offrant une solution entièrement libre, légère et indépendante.

L’application repose sur SQLite, un système de gestion de base de données qui se distingue des bases de données traditionnelles comme MySQL ou PostgreSQL. Contrairement à ces dernières, qui nécessitent un serveur dédié fonctionnant en arrière-plan pour gérer les requêtes et stocker les informations, SQLite est une base de données embarquée.

Cela signifie que toutes les données sont enregistrées directement dans un fichier unique sur l’ordinateur ou le serveur où l’application est installée. Il n’y a donc pas besoin d’installer et de configurer un logiciel supplémentaire pour gérer la base de données. Cette approche simplifie considérablement l’installation et l’utilisation de l’application, surtout pour des utilisateurs qui ne sont pas familiers avec l’administration de serveurs.

Et puis bien sûr, son code est ouvert. C’est comme une bière artisanale : vous savez exactement quels ingrédients sont utilisés, comment ils interagissent, et si l’envie vous prend, vous pouvez modifier la recette pour l’adapter à vos préférences. Vous pouvez la brasser tel quel, y ajouter une touche personnelle, ou même la partager améliorée avec d’autres passionnés. Ici, tout est transparent et modifiable.

Une interface simple et accessible

Pensée pour une utilisation mobile et desktop, l’interface de Zaibu permet d’ajouter rapidement une dégustation, sans fioritures. Sur smartphone, il devient facile de consulter ses notes en magasin ou chez un caviste pour retrouver une référence appréciée ou éviter une déception.

capture d'écran du menu principal de l'interface mobile

capture d'écran du formulaire de saisie de dégustation de bière de l'interface desktop

Et maintenant ?

Zaibu est encore jeune et perfectible. L’application pourrait évoluer avec des fonctionnalités comme le partage entre utilisateurs ou l’intégration d’une base collaborative… N’hésitez pas à faire vos retours dans les commentaires !

Et si le principe vous intéresse, vous pouvez aussi découvrir Mon petit potager du même auteur et construit sur le même framework, cette fois pour suivre les récoltes de son jardin et la pluviométrie.

Commentaires : voir le flux Atom ouvrir dans le navigateur

❌