Mari kita bincangkan tentang titik putus dan bekas dalam Bootstrap5

Artikel ini akan membawa anda melalui titik putus dan bekas dalam Bootstrap5.

1. Titik putus Bootstrap5

1.1 Mudah alih dahulu

Bercakap tentang mudah alih terlebih dahulu, kita mesti menyebut antara muka responsif adalah untuk mereka bentuk halaman yang boleh menyesuaikan diri dengan peranti yang berbeza menggunakan teknologi seperti pertanyaan media untuk mencapai penyesuaian gaya di bawah peranti/tetingkap yang berbeza untuk mengatakan, ia akan memaparkan reka letak halaman yang berbeza kepada pengguna mengikut peranti berbeza yang anda gunakan. [Syor berkaitan: "

tutorial bootstrap"]

Ini dilaksanakan dengan mempunyai teknologi pertanyaan media berdasarkan HTML5, yang boleh mendapatkan lebar skrin dan kemudian menggunakan css untuk menggunakan nilai yang berbeza ​Di bawah lebar yang berbeza Hanya kesan css.

Mudah alih pertama adalah untuk membangunkan antara muka yang sesuai untuk pelanggan mudah alih, dan kemudian menyesuaikan gaya yang sepadan mengikut situasi PC Sebaliknya, idea reka bentuk adalah untuk memberi keutamaan kepada PC ? Kaedah ini harus dipertimbangkan berdasarkan tabiat anda dan pengguna mana yang mengambil bahagian yang besar. Mudah alih dahulu kini secara amnya dianjurkan.

1.2 Titik putus Bootstrap

Titik putus yang dipanggil merujuk kepada titik kritikal. Jadual ini dan kandungannya mesti diingat Selain itu, terutamanya infix kelas, ia sering digunakan. Ini akan ditunjukkan secara terperinci dalam susun atur bahagian seterusnya Anda hanya perlu membacanya beberapa kali. Anda boleh menyemaknya apabila tiba masanya.

Seperti yang dapat dilihat dari jadual di atas, skrin dibahagikan kepada 6 saiz melalui 5 titik putus Pembaca hanya perlu memahaminya terlebih dahulu.

2. Bekas

2.1 Bekas digunakan untuk menyimpan barang

Bekas adalah yang paling banyak elemen susun atur asas dalam Bootstrap dan diperlukan semasa mereka bentuk tapak web responsif menggunakan sistem grid lalai Lebar maksimum bekas boleh berubah mengikut lebar penyemak imbas. Penggunaan bekas adalah sangat mudah. ​​Hanya letakkan teg bekas di dalam badan Secara umumnya, halaman hanya memerlukan satu teg bekas untuk membungkus semua kandungan visual yang lain, untuk membandingkan kesan bekas , jadi berbilang bekas diletakkan pada satu halaman.

2.2 Klasifikasi bekas Bootstrap

Bekas Bootstrap dibahagikan kepada tiga jenis secara lalai:

• . bekas, bekas lalai, yang lebarnya ialah lebar maksimum titik putus sebelumnya sebelum setiap titik putus tindak balas.

• .bendalir bekas, bekas bendalir yang sentiasa menduduki 100% lebar penyemak imbas.

• .bekas-{breakpoint}, bekas pecah sebelum mencapai titik putus, lebarnya sentiasa menyumbang 100% daripada lebar penyemak imbas Selepas mencapai gangguan kuasa, lebarnya sentiasa lebar maksimum titik putus. Nilai titik putus sepadan dengan titik putus yang diperkenalkan sebelum ini.

Jadual berikut menunjukkan lebar bekas pada peleraian berbeza.

	Lebih kecil
	Extra small	Small ≥576px	Medium ≥768px	Large ≥992px	X-Large ≥1200px	XX-Large ≥1400px
.container	100%	540px	720px	960px	1140px	1320px
.container-sm	100%	540px	720px	960px	1140px	1320px
.container-md	100%	100%	720px	960px	1140px	1320px
.container-lg	100%	100%	100%	960px	1140px	1320px
.container-xl	100%	100%	100%	100%	1140px	1320px
.container-xxl	100%	100%	100%	100%	100%	1320px
.container-fluid	100%	100%	100%	100%	100%	100%

Kecil
≥576px

Sederhana
≥768px Besar
≥992px X-Large
≥1200px XX-Besar
≥1400px .bekas 100% 540px 720px 960px 1140px 1320px .container-sm 100% 540px 720px 960px 1140px 1320px .container-md 100% 100% 720px 960px 1140px 1320px .container-lg100%100% 100% 960px 1140px 1320px .container-xl 100% 100% 100% td> 100% 1140px 1320px .container-xxl th> 100% 100% 100% 100% 100% 1320px .bendalir bekas 100% 100% 100% 100% 100% 100%

2.3 Analisis bekas berubah dengan lebar penyemak imbas

2.3.1 Contoh mudah

Untuk jadual dalam 2.2, sesetengah rakan mungkin Ia tidak begitu jelas. Biar saya berikan anda beberapa contoh:

Ambil bekas-md sebagai contoh Apabila lebar skrin kurang daripada 768px, lebar bekas menyumbang 100% daripada lebar skrin lebar skrin lebih besar daripada 768px dan Apabila lebar skrin kurang daripada 992px, lebar bekas sentiasa 720px apabila lebar skrin lebih besar daripada 992px dan kurang daripada 1200px, lebar bekas sentiasa 960px, dan seterusnya, perkara yang sama; benar untuk bekas titik putus lain dan bekas lalai.

• 2.3.2 Beberapa ciri bekas Bootstrap (tidak termasuk bekas aliran)
• Lebar bekas melompat dan tidak licin antara setiap dua titik putus adalah sama

Bekas adalah tanpa sempadan sebelum titik putus dan mempunyai jidar selepas titik putus Untuk skrin 768px, lebar kontena ialah 720px. Bekas lalai (bekas) dan bekas kecil (bekas-sm) pada masa ini adalah setara, tetapi tidak diketepikan bahawa akan ada perubahan dalam langkah seterusnya.

2.4 Kod demo untuk perubahan bekas dengan lebar penyemak imbas

Berikut ialah kod demo dan GIF di bawah lebar penyemak imbas yang berbeza Jika anda tidak memahami rendering, anda boleh memuat turun kod dan mengkajinya sendiri Bahagian gaya ditulis oleh saya untuk menetapkan warna latar belakang bekas dan menetapkan selang untuk setiap bekas untuk memudahkan perbezaan dan tontonan dengan bekas itu sendiri.

2.4.1 Animasi demonstrasi

<!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">
 
    <title>不同宽度下容器宽度演示</title>
    <style>
      div{background-color: rgba(0, 0, 255, 0.178);padding: 10px;margin: 10px;}
    </style>
  </head>
  <body>
    <div>    默认容器  </div>
    <div>container-sm 100% wide until small breakpoint</div>
    <div>container-md 100% wide until medium breakpoint</div>
    <div>container-lg 100% wide until large breakpoint</div>
    <div>container-xl 100% wide until extra large breakpoint</div>
    <div>container-xxl 100% wide until extra extra large breakpoint</div>
    <div> 流式容器 </div>
 
     <script src="bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

2.4.2 Kod sumber demonstrasi

Untuk lebih banyak pengetahuan berkaitan pengaturcaraan, sila lawati: Video Pengaturcaraan! !

Atas ialah kandungan terperinci Mari kita bincangkan tentang titik putus dan bekas dalam Bootstrap5. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!