Comment ajouter un arrière-plan au bootstrap-Tutoriel d'amorçage-php.cn

Comment ajouter un arrière-plan au bootstrap

下次还敢

Libérer： 2024-04-05 02:15:20

original

996 Les gens l'ont consulté

Il existe deux façons d'ajouter un arrière-plan dans Bootstrap : en utilisant des classes CSS intégrées, telles que .bg- (arrière-plan monochrome) et .bg-gradient- (arrière-plan dégradé) ; en utilisant des règles CSS personnalisées, telles que la définition d'arrière-plan- ; propriété de couleur et d’image d’arrière-plan.

Comment ajouter un arrière-plan au bootstrap

Comment ajouter un arrière-plan dans Bootstrap

Bootstrap est un framework frontal populaire qui fournit des moyens simples d'ajouter des arrière-plans aux éléments HTML. Il existe deux manières principales de procéder :

Méthode 1 : Utiliser des classes CSS

Bootstrap fournit une série de classes CSS intégrées pour ajouter différents types d'arrière-plans aux éléments :

.bg -* : ajoutez un arrière-plan de couleur unie à l'élément, où * peut être n'importe quelle couleur, telle que bg-primary, bg-warning attends. .bg-*：为元素添加单色背景，其中 * 可以是任何颜色，例如 bg-primary、bg-warning 等。
.bg-gradient-*：为元素添加渐变背景，其中 * 可以是 primary、secondary、success 等。
.bg-image

.bg-gradient-*

*

primaire

secondaire code> , <code>succès

.bg-image : Ajoutez un arrière-plan d'image à l'élément. L'URL ou le chemin d'accès à l'image doit être spécifié.

Comment utiliser :

<code class="html"><div class="bg-primary">This is a blue background.</div>
<div class="bg-gradient-primary">This is a blue gradient background.</div>
<div class="bg-image" style="background-image: url('image.png');">This is a background image.</div></code>

Copier après la connexion

Méthode 2 : Utiliser du CSS personnalisé

Si vous avez besoin d'un contrôle plus granulaire, vous pouvez également utiliser des règles CSS personnalisées pour ajouter des arrière-plans aux éléments :

<code class="css">body {
  background-color: #ccc;
}

.my-background {
  background-image: url('image.png');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}</code>

Copier après la connexion

Comment utiliser :

🎜

<code class="html"><body class="my-background"></body></code>

Copier après la connexion

🎜Veuillez noter que les règles CSS personnalisées ont une priorité plus élevée que les classes CSS intégrées de Bootstrap. 🎜

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!