Cara Membuat Auto Pop Up Responsive Menggunakan Bootstrap
Bootstrap adalah sebuah framework HTML dan CSS yang digunakan bagi membangun situs menjadi memiliki tampilan yang dinamis, sehingga sekiranya kita mendesign sebuah situs, karenanya situs tersebut dapat menyesuaikan dengan ukuran monitor device seperti desktop, tablet, dan ponsel. Dengan menggunakan bootstrap situs yang kita miliki menjadi lebih ringan ketika diakses, Karena bootstrap bikin lebih terstruktur. Nah di panduan kali ini kita akan menggunakan sebuah framework HTML dan CSS, bagi membangun Auto Pop Up yang kita gunakan menjadi memiliki tampilan yang dinamis, dan bagi Cara Merancang Auto Pop Up Memiliki tampilan yang dinamis Menggunakan Bootstrap teman-teman dapat mengikuti step by step yang terdapat dibawah ini.
Seperti yang kita ketahui Auto Pop up adalah sebuah jendela yang muncul ketika kita membuka sebuah situs, dan auto pop up sering sekali digunakan bagi membangun iklan-iklan yang terdapat di sebuah situs. Oke teman-teman kita seketika saja masuk ke Langkah yang pertama-tama.
Pastikan teman-teman telah men-download file-file bootstrapnya terlebih dahulu di http://getbootstrap.com/getting-started/#download berikutnya setelah teman-teman mengunduh file-file bootstrapnya kita akan membangun file index.html, nah teman-teman dapat menyimpan script yang terdapat dibawah ini dengan nama index.html, di file bootstrap yang telah teman-teman unduh sebelumnya
<!DOCTYPE html>
<html lang=en>
<head>
<meta charset=utf-8>
<meta http-equiv=X-UA-Compatible content=IE=edge>
<meta name=viewport content=width=device-width, initial-scale=1>
<title>Cara Merancang Auto Pop Up Memiliki tampilan yang dinamis Menggunakan Bootstrap</title>
<!-- CSS-->
<link href=css/bootstrap.min.css rel=stylesheet>
</head>
<body>
<div id=modal class=modal fade tabindex=-1 role=dialog>
<div class=modal-dialog role=document>
<div class=modal-content>
<div class=modal-header>
<button type=button class=close data-dismiss=modal aria-label=Close><span aria-hidden=true>times;</span></button>
<h4 class=modal-title>Cara Merancang Auto Pop Up Memiliki tampilan yang dinamis Menggunakan Bootstrap</h4>
</div>
<div class=modal-body>
<p>One fine bodyhellip;</p>
<img src=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhXtYXvxq64FH-bJGcaL21PjdYtp1AawiQ7anOMbumkX9tVMSCmhKy-asJEVLfHkEOVYfJ8xbmXE_GeZxQ34cPS0KSngNiE9tgCJWtdR06OzzQyPiT3GuNm7LNS06wCUk8_3BBXTO1Ig/s1600/Workshop+Gratis+Bersama+DUMET+School.jpg alt= adalah sebuah framework HTML dan CSS yang digunakan bagi membangun situs menjadi resp Cara Merancang Auto Pop Up Memiliki tampilan yang dinamis Menggunakan Bootstrap class=img-responsive>
</div>
<div class=modal-footer>
<button type=button class=btn btn-default data-dismiss=modal>Close</button>
<button type=button class=btn btn-primary>Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<p>
text
</p>
<script src=https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js></script>
<script src=js/bootstrap.min.js></script>
<script>
$('#modal').modal('show');
</script>
</body>
</html>
Di file index.html terdapat sebuah tag link <link href=”…” rel=”stylesheet”> yang berfungsi bagi mengkonesikan file CSS yang terdapat di folder bootstrap yang telah kita unduh, dan <script src=”…”></script> bagi file JavaScriptnya.
Di file index.html kita menambah sebuah script <script> $(‘#myModal’).modal(‘show’); </script> yang berfungsi bagi menjalankan auto pop up nya.
Bila kita jalankan di browser karenanya akan terlihat hasilnya seperti dibawah ini
Nah bagai mana teman-teman lumayan gampang bukan Cara Merancang Auto Pop Up Memiliki tampilan yang dinamis Menggunakan Bootstrap, demikianlah dulu panduan saya kali ini mengenai Cara Merancang Auto Pop Up Memiliki tampilan yang dinamis Menggunakan Bootstrap.
Semoga bermanfaat
Terimakasih.
Sumber https://kursuswebsite.org
