Si vous commencez tout juste à apprendre Bootstrap, nous avons créé une série de tutoriels appelés 14 jours Bootstrap 4 cela peut vous aider.

Le sélecteur de sélection Bootstrap 4 est l’un des composants les plus couramment utilisés dans les formulaires. Si vous devez ajouter un choix, la première option est le composant Bootstrap 4 standard. Cependant, cela ne formate pas le menu déroulant qui affiche les options. Une autre option populaire consiste à créer vos propres classes et à les ajouter à <select> Journée de restylage.

Cependant, l’une des solutions les plus simples consiste à trouver des sélecteurs jQuery Select ou des projets open source spécialement créés à cet effet. De cette façon, vous pouvez être sûr de ne pas avoir à écrire vous-même les nouvelles fonctionnalités dont vous avez besoin pour la sélection choisie. Dans cet article, nous allons expliquer l’option la plus populaire et les avantages et inconvénients de son utilisation. Nous utiliserons également des exemples pour montrer comment le sélecteur Bootstrap Select est intégré et utilisé.

Cela étant dit, plongeons-nous!

  1. Utilisation de .custom-select Bootstrap 4 Sélectionnez la classe de sélecteur

Pour utiliser les composants Bootstrap 4, vous devrez importer les fichiers CSS et JS dans votre application. Le moyen le plus simple est d’utiliser les CDN. Vous devez ajouter le fichier CSS entre le <head></head> Mots clés:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

Et vous devez ajouter les bibliothèques JavaScript dans le <script></script> Balises à la fin du document. Le Javascript Bootstrap est basé sur jQuery et PopperJs, vous devez donc les importer d’abord.

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

Voici un modèle de démarrage que vous pouvez utiliser:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  </body>
</html>

Si vous ne souhaitez pas vous fier aux CDN (votre connexion Internet peut être instable lorsque vous travaillez sur votre projet), vous pouvez télécharger les fichiers source d’amorçage à partir de Ici. Une fois que vous avez votre CSS et JS, vous devrez les importer comme dans le cas du CDN, vous seul utiliserez votre chemin local. Pour importer vos fichiers, vous aurez besoin de quelque chose comme ce qui suit:

<!-- for css -->
<link rel="stylesheet" href="https://bootstrapbay.com/blog/useful-bootstrap-4-select-picker-for-your-forms/path/to/file/bootstrap.min.css">

<!-- for javascript -->
<script type="text/javascript" src="path/to/file/bootstrap.min.js"></script>

Une fois que vous avez importé avec succès les fichiers Bootstrap 4 dans votre projet, vous pouvez commencer à utiliser les composants. La sortie de Bootstrap 4 comprend plusieurs nouveaux éléments. L’un d’eux est que .custom-select Classe Bootstrap 4 qui formate la sélection de choix par défaut. Pour comprendre la différence entre utiliser et ne pas utiliser, voici un exemple:

Voir le stylo Bootstrap 4 Choisissez le sélecteur par cristina (@ Cristinaconacel) au CodePen.foncé

Vous pouvez également choisir entre les tailles pour la sélection Bootstrap 4. En plus de la version standard, vous pouvez également le faire grand – en ajoutant que .custom-select-lg Grand ou petit – en ajoutant le .custom-select-sm Classer.

Voir le stylo Bootstrap 4 Choisissez les tailles de sélection par cristina (@ Cristinaconacel) au CodePen.foncé

Le sélecteur de sélection personnalisée Bootstrap 4 prend également en charge multiple Attribut qui vous donne la possibilité de choisir plusieurs options. Une autre option utile est le navigateur de fichiers. Vous pouvez voir les exemples suivants:

Voir le stylo Sélecteur de sélection multiple Bootstrap 4 par cristina (@ Cristinaconacel) au CodePen.foncé

Vous pouvez également ajouter un préfixe ou un bouton décrivant ce que vous choisissez dans le sélecteur Bootstrap 4. Voici à quoi ils ressemblent:

Voir le stylo Bootstrap 4 Select Picker avec Prepend par cristina (@ Cristinaconacel) au CodePen.foncé

2. Ajout de votre style personnalisé

Si vous pensez que les options de sélection Bootstrap 4 sont suffisantes pour vos besoins, mais que la conception n’est pas tout à fait correcte, vous pouvez la personnaliser. Le moyen le plus simple de le faire sans provoquer d’effets indésirables est d’ajouter une autre classe à côté de cela .custom-select. Vous pouvez ensuite écrire le style pour cela.

À titre d’exemple, nous avons créé un sélecteur de sélection Bootstrap 4 personnalisé avec des bords arrondis et une couleur d’arrière-plan. Vous pouvez essayer d’ajouter le style de votre choix. Si vous cherchez de l’inspiration, essayez de chercher des idées Dribble.

Voir le stylo Sélecteur de sélection personnalisé Bootstrap 4 par cristina (@ Cristinaconacel) au CodePen.foncé

3. Intégrez un plug-in tiers

le Plugin de sélection Boostrap Select est une bibliothèque pour prendre en charge le travail avec des entrées sélectionnées. Une boîte de sélection simple s’affiche par défaut et la conception du menu déroulant est la même que celle du menu déroulant Liste déroulante Bootstrap 4. C’est un plus car votre conception sera cohérente dans tout votre projet. En plus des options standard pour une sélection sélectionnée, différentes options de personnalisation vous sont proposées. Ici, la vraie puissance du plugin est évidente. Il existe de nombreuses façons de personnaliser l’apparence du choix de sélection Bootstrap 4, ainsi que plusieurs fonctionnalités intéressantes que vous pouvez utiliser pour des actions personnalisées.

Plug-in Bootstrap Select

Notre conseil est d’essayer ce plugin chaque fois que vous savez que vous avez une forme sévère qui nécessite de nombreuses options sélectionnées. Si tout ce que vous voulez est une sélection de sélection simple, le style de sélection de sélection Bootstrap 4 standard est suffisant.

Une fois que vous avez choisi le plugin, vous devrez importer les fichiers CSS et JS pour commencer. Le plugin nécessite le framework d’amorçage, donc les fichiers source doivent d’abord être importés (via CDN ou fichiers locaux). Vous pouvez également choisir entre une source externe ou interne pour les fichiers de plug-in.

Pour pouvoir utiliser le CDN, vous avez besoin des fichiers suivants (fichier CSS dans les balises head et scripts à la fin du document):

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>

<!-- (Optional) Latest compiled and minified JavaScript translation files -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/i18n/defaults-*.min.js"></script>

Si vous préférez télécharger les fichiers localement, vous pouvez les télécharger Ici de GitHub.

Voici un modèle de démarrage pour vous aider à démarrer avec le plugin Bootstrap Select Picker:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    
    <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.min.css">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    
    <!-- Latest compiled and minified JavaScript -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>

        <!-- (Optional) Latest compiled and minified JavaScript translation files -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/i18n/defaults-*.min.js"></script>

  </body>
</html>

Une fois que vous avez configuré votre fichier, vous pouvez ajouter le sélecteur de sélection. Votre documentationC’est un excellent endroit pour comprendre comment utiliser le plugin et toutes ses fonctionnalités. Nous montrerons également certaines des fonctionnalités ci-dessous si vous souhaitez simplement les copier et les coller dans votre projet.

Sélecteur de sélection de base

Commençons par deux exemples de base, avec les options affichées sous forme de liste déroulante (par défaut) ou de liste déroulante. La classe de base pour la sélection est .selectpicker. Cette classe est utilisée dans tous les exemples. Les autres classes sont fournies en tant que modules complémentaires à cette classe. Pour en faire un drop-up, vous en aurez besoin aussi .dropup Classer.

Voir le stylo Exemples de base du plugin Bootstrap Select par cristina (@ Cristinaconacel) au CodePen.foncé

Désactivé Sélectionner la sélection

Le plugin prend en charge le « désactivéAttribut. Cela ferme les choix.

Voir le stylo Bootstrap Select Picker Plugin désactivé par cristina (@ Cristinaconacel) au CodePen.foncé

Sélecteur de sélection multiple

Vous pouvez ajouter plusieurs sélections en utilisant le multipleAttribut sur le sélecteur de sélection. Vous pouvez sélectionner des boîtes de sélection avec optgroups en incluant les options optgroupvoir Ajouter disabledsur une option ou un groupe d’options les rend inaccessibles. Voici quelques exemples:

Voir le stylo Bootstrap Select Picker Plugin Plusieurs options par cristina (@ Cristinaconacel) au CodePen.foncé

Style du sélecteur de sélection

Il existe plusieurs options de style. La chose la plus utile est de changer l’apparence d’un bouton. Vous pouvez utiliser l’une des classes de boutons Bootstrap 4 via le data-styleAttribut. Voici un exemple de sélecteur sélectionné qui en ressemble à un .btn-info::

Voir le stylo Exemple de plug-in Bootstrap Select Picker avec bouton par cristina (@ Cristinaconacel) au CodePen.foncé

Choisissez Sélectionner avec recherche

Parfois, vous avez le choix entre de nombreuses options et il peut être difficile de trouver l’option que vous recherchez. La fonction de recherche est utile ici. En ajoutant le data-live-search="true"Attribut du sélecteur de sélection, une entrée de recherche est affichée au début de la liste déroulante. Vous pouvez simplement rechercher et sélectionner votre option. Voici un exemple:

Voir le stylo Exemple de plug-in Bootstrap Select Picker avec recherche par cristina (@ Cristinaconacel) au CodePen.foncé

Il existe beaucoup plus d’options de style et de fonctionnalités que vous pouvez utiliser. Assurez-vous donc de consulter les options officielles Exemples. Le plugin Bootstrap 4 Select Picker a également beaucoup d’options, et vous pouvez trouver la documentation pour eux Ici. Si vous êtes expérimenté avec JavaScript, vous pouvez également y accéder Méthodes.

En plus d’utiliser le plugin susmentionné, il existe également la possibilité de créer votre propre sélecteur de sélection (cela peut prendre un certain temps si vous partez de zéro). Une autre option populaire consiste à utiliser un kit d’interface utilisateur. Les kits d’interface utilisateur sont ce que l’on pourrait appeler un «super thème». Habituellement, ils importent déjà les composants d’amorçage manquants et les redessinent pour qu’ils correspondent au reste de la conception. Si vous pensez que c’est une option intéressante, en voici une Liste des kits d’interface utilisateur dont nous avons parlé (à titre de clause de non-responsabilité, la plupart des produits de la liste ont le sélecteur de sélection en tant que composant PRO).

Les ressources utilisées pour ce didacticiel sont:

Si vous avez des questions sur le sélecteur de sélection Bootstrap 4, veuillez lire la documentation officielle de Bootstrap 4 et du plug-in Select Picker et faites-le moi savoir dans les commentaires. Le code de ces exemples est disponible auprès de Codepen. Vous pouvez copier et coller les parties dont vous avez besoin dans votre projet ou télécharger les fichiers source. Faites-moi savoir comment faire!

Partager c’est aimer!



Source link

Recent Posts