Bootstrap merupakan sebuah framework HTML dan CSS yang digunakan untuk membuat website menjadi responsive, sehingga jika kita mendesign sebuah website, maka website tersebut dapat menyesuaikan dengan ukuran monitor device seperti desktop, tablet, dan ponsel. Dengan menggunakan bootstrap website yang kita miliki menjadi lebih ringan ketika diakses, Karena bootstrap buat lebih terstruktur.  Nah pada tutorial kali ini kita akan menggunakan sebuah framework HTML dan CSS, untuk membuat Auto Pop Up yang kita gunakan menjadi responsive, dan untuk Cara Membuat Auto Pop Up Responsive Menggunakan Bootstrap teman-teman bisa mengikuti step by step yang terdapat dibawah ini.

Seperti yang kita ketahui Auto Pop up merupakan sebuah jendela yang muncul ketika kita membuka sebuah website, dan auto pop up sering kali digunakan untuk membuat iklan-iklan yang terdapat pada sebuah website. Oke teman-teman kita langsung saja masuk ke Langkah yang pertama.

Pastikan teman-teman telah men-download file-file bootstrapnya terlebih dahulu pada http://getbootstrap.com/getting-started/#download berikutnya setelah teman-teman mendownload file-file bootstrapnya kita akan membuat file index.html, nah teman-teman bisa menyimpan script yang terdapat dibawah ini dengan nama index.html, pada file bootstrap yang telah teman-teman download 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 Membuat Auto Pop Up Responsive 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 Membuat Auto Pop Up Responsive Menggunakan Bootstrap</h4>
	      </div>
	      <div class="modal-body">
	        <p>One fine body&hellip;</p>
	      	<img src="http://1.bp.blogspot.com/--mt2hKRd_aE/VSTlo9gEe6I/AAAAAAAAAnI/UnSJwoH-vtg/s1600/Workshop%2BGratis%2BBersama%2BDUMET%2BSchool.jpg" alt="" 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>

Pada file index.html terdapat sebuah tag link <link href=”…” rel=”stylesheet”> yang berfungsi untuk mengkonesikan file CSS yang terdapat pada folder bootstrap yang telah kita download, dan <script src=”…”></script> untuk file JavaScriptnya.

Pada file index.html kita menambah sebuah script <script>  $(‘#myModal’).modal(‘show’); </script> yang berfungsi untuk menjalankan auto pop up nya.

Jika kita jalankan pada browser maka akan terlihat hasilnya seperti dibawah ini

Cara Membuat Auto Pop Up Responsive Menggunakan Bootstrap

Nah bagai mana teman-teman cukup mudah bukan Cara Membuat Auto Pop Up Responsive Menggunakan Bootstrap, sekian dulu tutorial saya kali ini tentang Cara Membuat Auto Pop Up Responsive Menggunakan Bootstrap.

Semoga bermanfaat

Terimakasih.