Barre de progression que Bootstrap doit apprendre tous les jours_compétences javascript

1. Barre de progression

Dans les pages Web, les effets des barres de progression ne sont pas rares, comme un système de notation, comme l'état de chargement, etc.

La barre de progression est la même que celle des autres composants indépendants. Les développeurs peuvent choisir la version correspondante en fonction de leurs propres besoins :

☑ Version MOINS : Fichier de code source progress-bars.less

☑ Version Sass : Fichier source _progress-bars.scss

☑ Compilez la version ultérieure : Ligne 4500 ~ Ligne 4575 du fichier bootstrap.css

Et le framework Bootstrap vous propose différents styles de barres de progression que tout le monde peut utiliser.

2. Barre de progression – style de base

Le framework Bootstrap fournit un style de base pour la barre de progression, une couleur d'arrière-plan de 100 % de largeur et une couleur en surbrillance pour indiquer la progression. En fait, il est très simple de créer une telle barre de progression. Généralement, deux conteneurs sont utilisés. Le conteneur extérieur a une certaine largeur et définit une couleur d'arrière-plan. Ses éléments enfants définissent une largeur, par exemple, le degré d'achèvement est de 30 %. (c'est-à-dire la largeur du conteneur parent). valeur d'échelle) et définissez-y une couleur d'arrière-plan de surbrillance.

1) Comment utiliser :

Le framework Bootstrap est également implémenté de cette manière. Il fournit deux conteneurs, le conteneur externe Utilisez le. style "progress" et les sous-conteneurs utilisent le style "progress-bar". Parmi eux, progress est utilisé pour définir le style de conteneur de la barre de progression, et progress-bar est utilisé pour limiter la progression de la barre de progression. La méthode d'utilisation est très simple :

2), principe de mise en œuvre

Comme mentionné précédemment, une telle barre de progression de base est principalement divisée en deux parties :

Le style de progression définit principalement la couleur d'arrière-plan, la hauteur du conteneur, l'espacement, etc. du conteneur de la barre de progression :

/bootstrap.css file line 4516~line 4524/

Bien que le style de la barre de progression définisse la direction de la progression, il est important de définir la couleur d'arrière-plan et l'effet de transition de la barre de progression :

/lines 4525~4538 du bootstrap.css file/

3), optimisation structurelle :

Bien que cela permette d'obtenir l'effet de barre de progression de base, il est un peu difficile pour les personnes handicapées de naviguer sur le Web, nous pouvons donc améliorer la structure (plus sémantiquement conviviale) :

1>, fonction d'attribut de rôle : tell. le moteur de recherche que la fonction de ce div est une barre de progression.

2>, effet d'attribut aria-valuenow="40" : la progression actuelle de la barre de progression est de 40 %.

3>, fonction d'attribut aria-valuemin="0" : la valeur minimale de la barre de progression est de 0 %.

4>, fonction d'attribut aria-valuemax="100" : la valeur maximale de la barre de progression est de 100 %.

3. Barre de progression – barre de progression colorée

La barre de progression dans le framework Bootstrap est la même que la boîte de message d'avertissement afin de donner à l'utilisateur une meilleure visibilité. expérience, il est également basé sur différents états configurés avec différentes couleurs de barre de progression. On l'appelle ici barre de progression colorée, qui comprend principalement les quatre types suivants :

☑ progress-bar-info : représente la barre de progression des informations, et la couleur de la barre de progression est bleue Couleur

☑ progress-bar-success : indique une barre de progression réussie, et la couleur de la barre de progression est verte

☑ progress -bar-warning : indique une barre de progression d'avertissement, la couleur de la barre de progression est jaune

☑ progression -bar-danger : indique une barre de progression d'erreur, la couleur de la barre de progression est rouge

1) Comment utiliser :

L'utilisation spécifique est très simple, il vous suffit de suivre la progression de base. Ajoutez le nom de la classe correspondante.

2), principe de mise en œuvre :

Par rapport à la barre de progression de base, la barre de progression des couleurs présente certains changements dans la couleur de la progression barre de style. Le code de style correspondant est le suivant :

/bootstrap.css fichier ligne 4548 ~ ligne 4550/

4. Barre de progression – Barre de progression stripes

En plus de fournir une barre de progression colorée, le framework Bootstrap fournit également une barre de progression rayée. Cette barre de progression rayée est implémentée à l'aide de dégradés linéaires CSS3 sans aucune aide. Pour utiliser la barre de progression rayée dans le framework Bootstrap, il vous suffit d'ajouter le nom de classe "progress-striped" au conteneur "progress" de la barre de progression. Bien sûr, si vous souhaitez que les rayures de votre barre de progression aient un effet de couleur. comme la progression colorée, il vous suffit d'ajouter le nom de la classe de couleur correspondante à la barre de progression, comme mentionné dans la barre de progression des couleurs précédente.

Jetons un coup d'œil à la structure de création d'une barre de progression rayée : ,

1), implémentation originale :

Comme mentionné précédemment, implémentation stripes La barre de progression utilise principalement le dégradé linéaire de CSS3. Le code spécifique est le suivant :

/bootstrap.css fichier ligne 4539~ligne 4547/