Bagaimana untuk menambah latar belakang pada bootstrap-Tutorial Bootstrap-php.cn

Bagaimana untuk menambah latar belakang pada bootstrap

下次还敢

Lepaskan： 2024-04-05 02:15:20

asal

997 orang telah melayarinya

Terdapat dua cara untuk menambah latar belakang dalam Bootstrap: menggunakan kelas CSS terbina dalam, seperti .bg- (latar belakang monokrom) dan .bg-gradient- (latar belakang kecerunan menggunakan peraturan CSS tersuai, seperti menetapkan latar belakang-); sifat warna dan imej latar belakang.

Bagaimana untuk menambah latar belakang pada bootstrap

Cara menambah latar belakang dalam Bootstrap

Bootstrap ialah rangka kerja bahagian hadapan yang popular yang menyediakan cara mudah untuk menambah latar belakang pada elemen HTML. Terdapat dua cara utama untuk melakukan ini:

Kaedah 1: Menggunakan Kelas CSS

Bootstrap menyediakan satu siri kelas CSS terbina dalam untuk menambah jenis latar belakang yang berbeza pada elemen:

.bg -* : Tambahkan latar belakang warna pepejal pada elemen, dengan * boleh menjadi sebarang warna, seperti bg-primary, bg-warning tunggu. .bg-*：为元素添加单色背景，其中 * 可以是任何颜色，例如 bg-primary、bg-warning 等。
.bg-gradient-*：为元素添加渐变背景，其中 * 可以是 primary、secondary、success 等。
.bg-image

.bg-gradient-*: Tambahkan latar belakang kecerunan pada elemen, dengan * boleh menjadi primary, secondary code> , <code>berjaya, dsb.

.bg-image: Tambahkan latar belakang imej pada elemen. URL atau laluan ke imej perlu ditentukan.

Cara menggunakan:

<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>

Salin selepas log masuk

Kaedah 2: Gunakan CSS tersuai

Jika anda memerlukan kawalan yang lebih terperinci, anda juga boleh menggunakan peraturan CSS tersuai untuk menambahkan latar belakang pada elemen: to

<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>

Salin selepas log masuk

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

Salin selepas log masuk

🎜Sila ambil perhatian bahawa peraturan CSS tersuai mempunyai keutamaan yang lebih tinggi daripada kelas CSS terbina dalam Bootstrap. 🎜

Atas ialah kandungan terperinci Bagaimana untuk menambah latar belakang pada bootstrap. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!