Rumah > Artikel > hujung hadapan web > Mari kita bincangkan tentang komponen gambar dan komponen garis dalam Bootstrap
Mari kita bincangkan tentang komponen gambar dan komponen garis dalam Bootstrap
- 青灯夜游ke hadapan
- 2021-11-19 19:32:332285semak imbas
Artikel ini akan membawa anda melalui komponen gambar dan komponen rangka dalam Bootstrap, dan memperkenalkan imej responsif, lakaran kecil imej, tanda gambar dan garis besar (Angka-angka).
1 Imej
Dalam bahagian ini anda akan belajar cara membuat imej menyokong tingkah laku responsif (supaya ia tidak keluar dari skop elemen induk ) dan cara menggunakan kelas (kelas) Tambah beberapa gaya.
1.1 Imej responsif
Gunakan kelas .img-fluid yang disediakan oleh Bootstrap untuk menyokong reka letak responsif bagi imej. Prinsipnya adalah untuk memberikan lebar maksimum: 100% dan ketinggian: auto kepada imej supaya ia berskala dengan elemen induk. [Cadangan berkaitan: "tutorial bootstrap"]
nbsp;html> <meta> <meta> <meta> <meta> <link> <title>图片演示</title> <div> <img alt="Mari kita bincangkan tentang komponen gambar dan komponen garis dalam Bootstrap" > </div> <script></script>
Bekas di atas adalah untuk memusatkan imej dan memotongnya dengan jidar pada semua sisi. Ia bukan sebahagian daripada komponen imej. Di bawah adalah video demonstrasi.
10.1.2 Lakaran kecil imej
Selain jejari sempadan yang disediakan oleh kelas umum, anda juga boleh menggunakan .img-thumbnail untuk membuat lakaran kenit imej Penampilan mempunyai sempadan bulat dengan lebar 1px.
<!doctype html>
<html lang="zh-CN">
<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>
.div1{width: 300; height: 300px;text-align: center;padding-top: 50px;}
</style>
<title>图片演示</title>
</head>
<body>
<div class="div1">
<img src="pic/taohua.jpg" width="50%" class="img-thumbnail" alt="点击查看大图">
</div>
<script src="bootstrap5/bootstrap.bundle.min.js" ></script>
</body>
</html>Komponen ini juga responsif, tetapi saya hanya memberikan tangkapan skrin gaya css di atas adalah untuk mengelakkan imej daripada dekat dengan tepi, supaya sempadan tidak kelihatan boleh juga menggunakan bekas itu secara langsung, di sini hanya untuk tidak menggunakan bekas supaya semua orang tidak akan menganggap bekas itu juga sebahagian daripadanya.
1.3 tag gambar
Elemen gambar digunakan dengan memasukkan satu atau lebih elemen sumber dan elemen img digabungkan dengan media (pertanyaan media). Gambar yang berbeza dipaparkan mengikut saiz berbeza yang dipadankan oleh skrin Jika tiada padanan atau penyemak imbas tidak menyokong atribut gambar, elemen img akan digunakan Tidak kira berapa banyak sumber yang ditentukan untuk elemen gambar, hanya satu daripadanya atau img akan dipaparkan.
Jika anda menggunakan elemen <img alt="Mari kita bincangkan tentang komponen gambar dan komponen garis dalam Bootstrap" > untuk menentukan berbilang elemen <source></source>, sila pastikan anda menambah kelas .img-* pada elemen <img alt="Mari kita bincangkan tentang komponen gambar dan komponen garis dalam Bootstrap" > dan bukan elemen <picture></picture> atau elemen sumber.
Elemen sumber disusun mengikut urutan. Nilai pertanyaan media, jika lebar maksimum, diisih dari kecil ke besar; jika lebar min, ia diisih dari besar ke kecil. Berikut ialah kod sumber Kod js dalam kod sumber adalah untuk mendapatkan lebar skrin sebagai perbandingan.
<!doctype html>
<html lang="zh-CN">
<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>
</head>
<body>
<div class="container">
<p>
<span id="info"></span>
<script>
getwidth();
window.onresize = function(){
getwidth();
}
function getwidth(){
document.getElementById("info").innerHTML="宽度："+document.documentElement.clientWidth+"，高度："+document.documentElement.clientHeight;
}
</script>
</p>
<picture>
<source media="(max-width: 600px)" srcset="pic/girl1.jpg">
<source media="(max-width: 700px)" srcset="pic/girl2.jpg">
<img src="pic/taohua.jpg" class="img-thumbnail" alt="Mari kita bincangkan tentang komponen gambar dan komponen garis dalam Bootstrap" >
</picture>
<picture>
<source media="(min-width: 700px)" srcset="pic/girl1.jpg">
<source media="(min-width: 600px)" srcset="pic/girl2.jpg">
<img src="pic/taohua.jpg" class="img-thumbnail" alt="Mari kita bincangkan tentang komponen gambar dan komponen garis dalam Bootstrap" >
</picture>
</div>
<script src="bootstrap5/bootstrap.bundle.min.js" ></script>
</body>
</html>Berikut ialah demonstrasi
2 Angka
Gunakan komponen angka Bootstrap untuk memaparkan gambar dan teks perhubungan yang berkaitan. Pada bila-bila masa anda perlu memaparkan sekeping kandungan (seperti imej dengan kapsyen pilihan), gunakan teg <figure></figure>.
menggunakan kategori .figure, .figure-img dan .figure-caption terbina dalam untuk menyediakan beberapa tetapan penggayaan asas untuk teg HTML5 <figure></figure> dan <figcaption></figcaption>. Imej tidak mempunyai saiz yang jelas Sila pastikan anda menambah kategori .img-fluid pada teg <img alt="Mari kita bincangkan tentang komponen gambar dan komponen garis dalam Bootstrap" > untuk menetapkannya sebagai imej responsif.
Malah, komponen garis besar bukan sahaja digunakan untuk gambar Dalam bahagian susun atur teks dan bahagian petikan sumber bahagian sebelumnya, komponen garis besar telah digunakan.
<!doctype html>
<html lang="zh-CN">
<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>figure演示</title>
</head>
<body>
<div class="container">
<figure class="figure">
<img src="pic/taohua.jpg" class="figure-img img-fluid rounded" alt="...">
<figcaption class="figure-caption text-center">桃花朵朵开</figcaption>
</figure>
</div>
<script src="bootstrap5/bootstrap.bundle.min.js" ></script>
</body>
</html>
Penjelasan ringkas tentang kelas bulat dalam teg img bermakna sudut imej dibulatkan Anda tidak perlu menulisnya jika anda tidak tidak memerlukannya. Pusat teks kelas dalam teg figcaption adalah untuk menjajarkan imej di tengah Anda juga boleh menggunakan hujung teks untuk menjajarkannya ke kanan.
Itu sahaja untuk pelajaran hari ini. Sila ikuti saya dan pelajari jadual dalam Bootstrap dalam Bahagian 11 "Bootstrap 5 dari Asas Sifar kepada Penguasaan" asal saya oleh Liu Liu mempunyai pelbagai kegunaan dan agak menyusahkan untuk mereka bentuk , dengan bantuan bootstrap kami Mudah untuk mencipta jadual yang cantik.
Jika artikel ini membantu anda, sila ingat untuk menyukainya!
Untuk pengetahuan lanjut tentang bootstrap, sila lawati: tutorial asas bootstrap! !
Atas ialah kandungan terperinci Mari kita bincangkan tentang komponen gambar dan komponen garis dalam Bootstrap. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!