简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Maison > interface Web > tutoriel HTML > le corps du texte

Ajouter des dimensions aux boutons Bootstrap

PHPz
Libérer： 2023-08-20 16:29:14
avant
989 Les gens l'ont consulté

Ajouter des dimensions aux boutons Bootstrap

Afin d'ajouter de la taille aux boutons dans Bootstrap, vous pouvez essayer les classes suivantes :

Ceci fera grossir le bouton. 
<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Example</title>  
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
   </head>
   <body>
      <button type = "button" class = "btn btn-default btn-sm">
         Small button
      </button>
   </body>
</html>
Copier après la connexion
Classe

Description

.btn-sm

 Cela rendra le bouton plus petit.

.btn-xs

 Cela rendra le bouton extrêmement petit.

.btn-block

 Cela crée un bouton au niveau du bloc, qui occupe toute la largeur de l'élément parent.

Exemple

 Vous pouvez essayer d'exécuter le code suivant pour créer un petit bouton −

Démo

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!

Étiquettes associées：
bootstrap 按钮 尺寸
source：tutorialspoint.com
Article précédent：Attribut désactivé de réinitialisation d'entrée HTML DOM L'attribut HTML DOM Input Reset Disabled est utilisé pour définir ou déterminer si le bouton de réinitialisation est désactivé. Article suivant：Comment définir le remplissage des cellules en HTML ?
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
Comparez Imagick, Adobe Photoshop et Windows - Détecter la résolution (pixels par centimètre ou pixels par pouce) Ce n'est pas une question mais une tentative d'améliorer ma compréhension de la façon dont...
Depuis 2024-04-06 16:01:27
0
1
397
Le rembourrage du parent ignoré par l'enfant en position collante Comment empêcher les éléments collants de passer derrière le collecteur ? L'extrait de cod...
Depuis 2024-04-06 11:42:51
0
1
338
Comment puis-je modifier ces cartes pour qu'elles soient réactives avec Boostrap 4 ? Comment puis-je faire en sorte que chaque ligne affiche 4 cartes, et bien sûr les empiler ...
Depuis 2024-04-05 10:48:45
0
1
4072
Méthodes CSS et HTML pour déplacer les paragraphes vers la gauche sur les écrans de taille mobile Il semble parfait sur un écran d'ordinateur 16:9 normal, avec du texte à gauche et des ima...
Depuis 2024-04-04 20:25:22
0
1
330
Titre réécrit : centrez un élément carré ou circulaire HTML fixe horizontalement et verticalement une fois redimensionné. Comment centrer un élément HTML fixe carré ou circulaire de différentes tailles horizontal...
Depuis 2024-04-04 12:31:51
0
1
322
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！