hujung hadapan web
Tutorial Bootstrap
Penjelasan mendalam tentang cara menggunakan komponen kotak amaran dalam Bootstrap
Penjelasan mendalam tentang cara menggunakan komponen kotak amaran dalam Bootstrap
Bagaimana untuk memunculkan kotak amaran (Amaran) dalam
Bootstrap? Artikel berikut akan menerangkan penggunaan komponen kotak amaran Bootstrap5 melalui contoh kod saya harap ia akan membantu anda!
1 Makluman
Jangan mengelirukan perkataan Makluman dengan tetingkap amaran Makluman dalam js. Takrifan rasmi bagi kotak amaran Bootstrap5 adalah untuk menyediakan mesej maklum balas kontekstual untuk operasi pengguna biasa dan menyediakan sebilangan kecil mesej amaran yang tersedia dan fleksibel. Takrifan rasmi agak mengelirukan Secara umumnya, kotak amaran sebenarnya lebih sesuai dinamakan peringatan mesej Ia biasanya mengingatkan "anda mempunyai beberapa mesej yang belum dibaca" di sudut kanan bawah atau sudut kanan atas tetingkap. [Cadangan berkaitan: "tutorial bootstrap"]
<!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>
</head>
<body>
<div>
<br><br><br>
<div class="alert alert-warning alert-dismissible fade show" role="alert">
<strong>老刘!</strong> 你收到一条站内短信，<a href="#">点此查看</a>
<button type="button" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
</div>
<script src="../bootstrap5/bootstrap.bundle.min.js" ></script>
</body>
</html>
2 Komposisi Kotak Makluman
Kotak amaran agak mudah, yang terdiri daripada bekas terdiri daripada butang tutup. Butang tutup boleh ditinggalkan dan boleh ditutup secara tetap melalui js. Di bawah ialah contoh paling mudah bagi kotak mesej.
<!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>
</head>
<body>
<div class="alert alert-primary">
老刘!你收到一条站内短信。
</div>
<script ></script>
</body>
</html>
3 Warna kotak amaran
Dalam contoh di atas, selain menggunakan amaran dalam bekas untuk menandakan ini sebagai kotak amaran, terdapat juga merupakan kelas amaran- Primer, menetapkan warna latar belakang kotak amaran. Semua warna biasa untuk kotak amaran disenaraikan di bawah.
<!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>
</head>
<body>
<div>
<br><br><br>
<div class="alert alert-primary" role="alert">
alert-primary
</div>
<div class="alert alert-secondary" role="alert">
alert-secondary
</div>
<div class="alert alert-success" role="alert">
alert-success
</div>
<div class="alert alert-danger" role="alert">
alert-danger
</div>
<div class="alert alert-warning" role="alert">
alert-warning
</div>
<div class="alert alert-info" role="alert">
alert-info
</div>
<div class="alert alert-light" role="alert">
alert-light
</div>
<div class="alert alert-dark" role="alert">
alert-dark
</div>
</div>
<script ></script>
</body>
</html>
4 Warna pautan dalam kotak amaran
4.1 Padanan automatik
Menggunakan kelas utiliti pautan .alert anda boleh dengan pantas sediakan pautan berwarna padan dalam sebarang makluman, di bawah saya hanya memberikan perbandingan tiga warna.
<!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>
</head>
<body>
<div>
<br><br><br>
<div class="alert alert-primary" role="alert">
A simple primary alert with <a href="#">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-secondary" role="alert">
A simple secondary alert with <a href="#">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-success" role="alert">
A simple success alert with <a href="#">an example link</a>. Give it a click if you like.
</div>
<br><br>
<div class="alert alert-primary" role="alert">
A simple primary alert with <a href="#">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-secondary" role="alert">
A simple secondary alert with <a href="#">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-success" role="alert">
A simple success alert with <a href="#">an example link</a>. Give it a click if you like.
</div>
</div>
<script ></script>
</body>
</html>
4.2 Menggunakan kelas pautan berwarna
Dalam pautan berwarna dalam kategori pembantu "Bootstrap5 Chinese Manual", anda boleh menggunakan link-* pewarnaan pautan pasangan kelas. Tidak seperti kelas text-*, kelas ini mempunyai keadaan :hover dan :focus. Pautan berwarna tidak unik untuk kotak amaran dan sah untuk semua pautan, jadi warna kotak amaran tidak digunakan di bawah ini adalah pelbagai warna:
<!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>
</head>
<body>
<div>
<br><br><br>
<div><a href="#">Primary link</a></div>
<div><a href="#">Secondary link</a></div>
<div><a href="#">Success link</a></div>
<div><a href="#">Danger link</a></div>
<div><a href="#">Warning link</a></div>
<div><a href="#">Info link</a></div>
<div><a href="#" class="bg-dark link-light">Light link</a></div>
<div><a href="#">Dark link</a></div>
</div>
<script ></script>
</body>
</html>
kedua-dua saya Tetapkan latar belakang kepada hitam, jika tidak, sukar untuk dibezakan.
5 Kandungan Tambahan
Makluman juga boleh mengandungi elemen HTML lain seperti tajuk, perenggan dan pemisah.
<div class="alert alert-success" role="alert"> <h4 id="Well-nbsp-done">Well done!</h4> <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p> <hr> <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p> </div>
Walaupun ia kelihatan bagus, ia tidak disyorkan untuk menggunakannya sebagai komponen untuk susun atur dan atur huruf dan kad yang lebih berkuasa yang diperkenalkan kemudian lebih sesuai penetapan huruf.
6 Tutup
Dalam contoh pertama, kami telah menggunakan butang tutup Mari kita bincangkan prinsipnya lagi Jika anda tidak mahu mengkaji bahagian ini secara mendalam, salin sahaja contoh secara langsung.
Sebarang makluman sebaris (iaitu kotak amaran) boleh dimatikan menggunakan pemalam JavaScript amaran. Begini caranya:
- Pastikan bootstrap.bundle.min.js dimuatkan.
- Tambahkan butang tutup dan kelas .alert-dismissible, yang menambahkan pelapik tambahan di sebelah kanan amaran dan meletakkan butang tutup.
- Pada butang tutup, tambahkan atribut data-bs-dismiss="alert", yang mencetuskan fungsi JavaScript. Pastikan anda menggunakan elemen butang untuk operasi yang betul pada semua peranti.
- Untuk menghidupkan penggera apabila ia diketepikan, pastikan anda menambah kelas .fade dan .show.
Apabila amaran diketepikan, elemen akan dialih keluar sepenuhnya daripada struktur halaman. Jika pengguna papan kekunci menolak amaran menggunakan butang "Tutup", tumpuan mereka akan tiba-tiba hilang dan, bergantung pada penyemak imbas, ditetapkan semula ke permulaan halaman/dokumen. Oleh itu, kami mengesyorkan agar anda memasukkan JavaScript tambahan untuk mendengar acara closed.bs.alert dan tetapkan fokus() secara pemrograman kepada kedudukan yang paling sesuai dalam halaman. Jika anda bercadang untuk mengalihkan fokus kepada elemen bukan interaktif yang biasanya tidak menerima fokus, pastikan anda menambah tabindex="-1" pada elemen tersebut.
Untuk pengetahuan lanjut tentang bootstrap, sila lawati: tutorial asas bootstrap! !
Atas ialah kandungan terperinci Penjelasan mendalam tentang cara menggunakan komponen kotak amaran dalam Bootstrap. 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
Bagaimana untuk memperkenalkan bootstrap ke dalam Eclipse
Apr 05, 2024 am 02:30 AM
Perkenalkan Bootstrap dalam Eclipse dalam lima langkah: Muat turun fail Bootstrap dan nyahzipnya. Import folder Bootstrap ke dalam projek. Tambah pergantungan Bootstrap. Muatkan Bootstrap CSS dan JS dalam fail HTML. Mula menggunakan Bootstrap untuk meningkatkan antara muka pengguna anda.
Bagaimana untuk memperkenalkan idea ke dalam bootstrap
Apr 05, 2024 am 02:33 AM
Langkah-langkah untuk memperkenalkan Bootstrap dalam IntelliJ IDEA: Buat projek baharu dan pilih "Aplikasi Web". Tambah pergantungan Maven "Bootstrap". Buat fail HTML dan tambah rujukan Bootstrap. Gantikan dengan laluan sebenar ke fail CSS Bootstrap. Jalankan fail HTML untuk menggunakan gaya Bootstrap. Petua: Gunakan CDN untuk mengimport Bootstrap atau menyesuaikan templat fail HTML.
750,000 pusingan pertempuran satu lawan satu antara model besar, GPT-4 memenangi kejuaraan, dan Llama 3 menduduki tempat kelima
Apr 23, 2024 pm 03:28 PM
Mengenai Llama3, keputusan ujian baharu telah dikeluarkan - komuniti penilaian model besar LMSYS mengeluarkan senarai kedudukan model besar Llama3 menduduki tempat kelima, dan terikat untuk tempat pertama dengan GPT-4 dalam kategori Bahasa Inggeris. Gambar ini berbeza daripada Penanda Aras yang lain Senarai ini berdasarkan pertempuran satu lawan satu antara model, dan penilai dari seluruh rangkaian membuat cadangan dan skor mereka sendiri. Pada akhirnya, Llama3 menduduki tempat kelima dalam senarai, diikuti oleh tiga versi GPT-4 dan Claude3 Super Cup Opus yang berbeza. Dalam senarai tunggal Inggeris, Llama3 mengatasi Claude dan terikat dengan GPT-4. Mengenai keputusan ini, ketua saintis Meta LeCun sangat gembira, tweet semula dan
Cara membaca keputusan ujian kesan pengantaraan bootstrap dalam stata
Apr 05, 2024 am 01:48 AM
Langkah tafsiran ujian kesan pengantaraan Bootstrap dalam Stata: Semak tanda pekali: Tentukan arah positif atau negatif kesan pengantaraan. Nilai p ujian: kurang daripada 0.05 menunjukkan bahawa kesan pengantaraan adalah signifikan. Semak selang keyakinan: tidak mengandungi sifar menunjukkan bahawa kesan pengantaraan adalah ketara. Membandingkan nilai p median: kurang daripada 0.05 menyokong lagi kepentingan kesan pengantaraan.
Cara membaca keputusan ujian pengantaraan bootstrap
Apr 05, 2024 am 03:30 AM
Ujian pengantaraan Bootstrap menilai kesan pengantaraan dengan mengambil semula data beberapa kali: Selang keyakinan kesan tidak langsung: menunjukkan anggaran julat kesan pengantaraan Jika selang tidak mengandungi sifar, kesannya adalah ketara. p-value: Menilai kebarangkalian bahawa selang keyakinan tidak mengandungi sifar, dengan nilai kurang daripada 0.05 menunjukkan signifikan. Saiz sampel: Bilangan sampel data yang digunakan untuk analisis. Masa subsampling Bootstrap: bilangan persampelan berulang (500-2000 kali). Jika selang keyakinan tidak mengandungi sifar dan nilai p kurang daripada 0.05, kesan pengantaraan adalah signifikan, menunjukkan bahawa pembolehubah pengantara menerangkan hubungan antara pembolehubah bebas dan bersandar.
Cara menggunakan bootstrap untuk menguji kesan pengantaraan
Apr 05, 2024 am 03:57 AM
Ujian Bootstrap menggunakan teknologi pensampelan semula untuk menilai kebolehpercayaan ujian statistik dan digunakan untuk membuktikan kepentingan kesan pengantaraan: pertama, hitung selang keyakinan kesan langsung, kesan tidak langsung dan kesan pengantaraan; jenis pengantaraan mengikut kaedah Baron dan Kenny atau Sobel dan akhirnya menganggarkan selang keyakinan untuk kesan tidak langsung semula jadi.
Apakah perbezaan antara bootstrap dan springboot
Apr 05, 2024 am 04:00 AM
Perbezaan utama antara Bootstrap dan Spring Boot ialah Bootstrap ialah rangka kerja CSS yang ringan untuk penggayaan tapak web, manakala Spring Boot ialah rangka kerja belakang luar biasa yang berkuasa untuk pembangunan aplikasi web Java. Bootstrap adalah berdasarkan CSS dan HTML, manakala Spring Boot adalah berdasarkan Java dan rangka kerja Spring. Bootstrap memfokuskan pada mencipta rupa dan rasa tapak web, manakala Spring Boot memfokuskan pada fungsi bahagian belakang. Spring Boot boleh disepadukan dengan Bootstrap untuk mencipta berfungsi sepenuhnya, cantik
Bagaimana untuk mengeksport keputusan perintah stata kesan pengantaraan ujian bootstrap
Apr 05, 2024 am 03:39 AM
Eksport keputusan ujian kesan pengantaraan Bootstrap dalam Stata: Simpan keputusan: siaran bootstrap Cipta senarai pembolehubah: vars tempatan: coef se ci Eksport keputusan (CSV): eksport hasil yang dibataskan.csv, varlist(`vars') gantikan nolabel koma
