hujung hadapan web
Tutorial Bootstrap
Mari kita bincangkan tentang susun atur grid dalam Bootstrap dan lihat cara menjajarkan secara menegak dan mendatar
Mari kita bincangkan tentang susun atur grid dalam Bootstrap dan lihat cara menjajarkan secara menegak dan mendatar
Artikel ini akan membawa anda melalui reka letak grid dalam Bootstrap dan lihat pada penjajaran menegak dan penjajaran mendatar saya harap ia akan membantu anda.
1. Reka letak grid Bootstrap
Dalam bahagian sebelumnya kami memperkenalkan grid dalam Bootstrap, dan grid digunakan dalam web susun atur halaman adalah titik kunci dan sukar adalah titik permulaan dan asas reka bentuk web Anda mesti meluangkan masa untuk memahaminya . Sudah tentu, untuk pereka web dengan asas tertentu, saya percaya kandungan ini boleh difahami sepintas lalu Hari ini kita akan mempelajari lebih lanjut mengenai susun atur grid. [Cadangan berkaitan: "tutorial bootstrap"]
Bahagian ini melibatkan beberapa fungsi dalam kotak fleksibel tujuan umum (Flex).
2. Penjajaran menegak
2.1 Tetapkan penjajaran menegak dalam tag baris
dengan menetapkan baris Menambah align-items-start, align-items-center dan align-items-end pada teg boleh menukar penjajaran menegak baris dalam bekas Tiga teg di atas ialah penjajaran atas, penjajaran tengah dan penjajaran bawah. Berikut ialah kod demo dan pemaparan Kod css dalam kod menetapkan warna latar belakang dan jarak untuk melihat kesannya dengan mudah.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="">
<meta name="description" content="">
<link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
<style>
.row{background-color: rgba(0, 0, 255, 0.178);height: 260px;margin:30px;}
.col{background-color: rgba(101, 101, 161, 0.842);height: 80px;padding: 30px;margin: 10px;}
</style>
<title>垂直对齐演示</title>
</head>
<body>
<div>
<div class="row align-items-start">
<div> </div>
<div></div>
<div></div>
</div>
<div class="row align-items-center">
<div> </div>
<div></div>
<div></div>
</div>
<div class="row align-items-end">
<div> </div>
<div></div>
<div></div>
</div>
</div>
<script src="bootstrap5/bootstrap.bundle.min.js" ></script>
</body>
</html>
2.2 Tetapkan penjajaran menegak dalam teg kol
Dengan menambah < dalam teg kol 🎜 >, align-self-start dan align-self-center boleh menukar penjajaran menegak lajur dalam baris Tiga label di atas ialah penjajaran atas, penjajaran tengah dan penjajaran bawah. Berikut ialah kod demo dan pemaparan Kod css dalam kod menetapkan warna latar belakang dan jarak untuk melihat kesannya dengan mudah. align-self-end
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="">
<meta name="description" content="">
<link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
<style>
.row{background-color: rgba(0, 0, 255, 0.178);height: 260px;margin:30px;}
.col{background-color: rgba(101, 101, 161, 0.842);height: 80px;padding: 30px;margin: 10px;}
</style>
<title>垂直对齐演示</title>
</head>
<body>
<div>
<div class="row align-items-start">
<div class="col align-self-start"> </div>
<div class="col align-self-center"></div>
<div class="col align-self-end"></div>
</div>
</div>
<script src="bootstrap5/bootstrap.bundle.min.js" ></script>
</body>
</html>
3. Penjajaran mendatar
3.1 Tetapkan penjajaran menegak dalam teg baris
Anda boleh menukar penjajaran mendatar lajur dalam satu baris dengan menambahkan, justify-content-start, justify-content-center, justify-content-end, justify-content-around, justify-content-between pada teg baris. Berikut ialah kod demo dan pemaparan Kod css dalam kod menetapkan warna latar belakang dan jarak untuk melihat kesannya dengan mudah. justify-content-evenly
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="">
<meta name="description" content="">
<link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
<style>
.row{background-color: rgba(0, 0, 255, 0.178);height: 120px;margin:10px;}
.col-4{background-color: rgba(101, 101, 161, 0.842);height: 30px;padding: 10px;margin: 10px;}
</style>
<title>垂直对齐演示</title>
</head>
<body>
<div>
<div class="row justify-content-start">
<div> </div>
<div></div>
<div></div>
</div>
<div class="row justify-content-center">
<div> </div>
<div></div>
<div></div>
</div>
<div class="row justify-content-end">
<div> </div>
## <div></div>
<div></div>
</div>
<div class="row justify-content-around">
<div> </div>
<div></div>
<div></div>
</div>
<div class="row justify-content-between">
<div> </div>
<div></div>
<div></div>
</div>
<div class="row justify-content-evenly">
<div> </div>
<div></div>
<div></div>
</div>
</div>
</body>
</html>
Video Pengaturcaraan! !
Atas ialah kandungan terperinci Mari kita bincangkan tentang susun atur grid dalam Bootstrap dan lihat cara menjajarkan secara menegak dan mendatar. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1359
52
Cara menggunakan butang bootstrap
Apr 07, 2025 pm 03:09 PM
Bagaimana cara menggunakan butang bootstrap? Perkenalkan CSS bootstrap untuk membuat elemen butang dan tambahkan kelas butang bootstrap untuk menambah teks butang
Cara memasukkan gambar di bootstrap
Apr 07, 2025 pm 03:30 PM
Terdapat beberapa cara untuk memasukkan imej dalam bootstrap: masukkan imej secara langsung, menggunakan tag HTML IMG. Dengan komponen imej bootstrap, anda boleh memberikan imej yang responsif dan lebih banyak gaya. Tetapkan saiz imej, gunakan kelas IMG-cecair untuk membuat imej boleh disesuaikan. Tetapkan sempadan, menggunakan kelas IMG-Sempadan. Tetapkan sudut bulat dan gunakan kelas IMG-bulat. Tetapkan bayangan, gunakan kelas bayangan. Saiz semula dan letakkan imej, menggunakan gaya CSS. Menggunakan imej latar belakang, gunakan harta CSS imej latar belakang.
Cara Membina Rangka Kerja Bootstrap
Apr 07, 2025 pm 12:57 PM
Untuk membuat rangka kerja bootstrap, ikuti langkah -langkah ini: Pasang bootstrap melalui CDN atau pasang salinan tempatan. Buat dokumen HTML dan pautan bootstrap CSS ke & lt; kepala & gt; seksyen. Tambah fail bootstrap JavaScript ke body & lt; body & gt; seksyen. Gunakan komponen bootstrap dan menyesuaikan lembaran gaya untuk memenuhi keperluan anda.
Cara melakukan pusat menegak bootstrap
Apr 07, 2025 pm 03:21 PM
Gunakan Bootstrap untuk melaksanakan pusat menegak: Kaedah Flexbox: Gunakan kelas D-Flex, Justify-Content, dan Align-Item-Center untuk meletakkan unsur-unsur dalam bekas Flexbox. Kaedah Kelas Align-Items-Center: Bagi pelayar yang tidak menyokong Flexbox, gunakan kelas Align-Items-Center, dengan syarat unsur induk mempunyai ketinggian yang ditetapkan.
Cara mengubah saiz bootstrap
Apr 07, 2025 pm 03:18 PM
Untuk menyesuaikan saiz unsur-unsur dalam bootstrap, anda boleh menggunakan kelas dimensi, yang termasuk: menyesuaikan lebar: .col-, .w-, .mw-adjust ketinggian: .h-, .min-h-, .max-h-
Cara Menulis Gambar Carousel di Bootstrap
Apr 07, 2025 pm 12:54 PM
Mewujudkan carta karusel menggunakan bootstrap memerlukan langkah -langkah berikut: Buat bekas yang mengandungi carta karusel, menggunakan kelas karusel. Tambah imej karusel ke bekas, menggunakan kelas Carousel-Item dan kelas aktif (hanya untuk imej pertama). Tambah butang kawalan, menggunakan kelas Carousel-Control-PREV dan Kelas-Control-Control-Next. Tambah metrik penunjuk karusel (titik kecil), menggunakan kelas penunjuk karusel (pilihan). Sediakan main balik automatik dan tambahkan data-bs-ride = "carousel &" on the carousel ".
Cara memuat naik fail pada bootstrap
Apr 07, 2025 pm 01:09 PM
Fungsi muat naik fail boleh dilaksanakan melalui bootstrap. Langkah -langkah adalah seperti berikut: Memperkenalkan fail bootstrap CSS dan JavaScript; Buat medan input fail; Buat butang muat naik fail; mengendalikan muat naik fail (menggunakan FormData untuk mengumpul data dan kemudian hantar ke pelayan); gaya tersuai (pilihan).
Cara susun atur bootstrap
Apr 07, 2025 pm 02:24 PM
Untuk menggunakan bootstrap untuk susun atur laman web, anda perlu menggunakan sistem grid untuk membahagikan halaman ke dalam bekas, baris, dan lajur. Mula -mula tambahkan bekas, kemudian tambahkan baris di dalamnya, tambahkan lajur dalam baris, dan akhirnya tambah kandungan dalam lajur. Fungsi susun atur responsif Bootstrap secara automatik menyesuaikan susun atur mengikut titik putus (XS, SM, MD, LG, XL). Susun atur yang berbeza di bawah saiz skrin yang berbeza boleh dicapai dengan menggunakan kelas responsif.
