Pada tutorial ke 19 kali ini, masih membahas mengenai bootstrap yaitu tentang sebuah komponen yang belakangan ini sangat banyaj digunakan pada website – website modern. Komponen ini adalah Modal. Modal yang dimaksud ini bukan modal dalam artian keuangan tetapi modal dalam bootstrap adalah sebuah komponen yang berbentuk pesan pop up yang akan ditampilkan melayang/menutupi komponen website lainnya. Saya yakin teman – teman telah banyak menemui komponen satu ini, biasanya komponen ini digunakan untuk menampilkan notifikasi. Tetapi kegunaannya bukan hanya itu saja, kita dapat kombinasikan dengan mrnambahkan form atau tabel didalamnya. Singkat nya kita dapat menggabungkan modal bootstrap ini dengan komponen lainnya sesuai keperluan dari tampilan website yang sedang kita buat. Section Artikel Dasar Modal BootstrapPerhatikan program dibawah: <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Modal Example</h2> <!-- Button to Open the Modal --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal"> Open modal </button> <!-- The Modal --> <div class="modal" id="myModal"> <div class="modal-dialog"> <div class="modal-content"> <!-- Modal Header --> <div class="modal-header"> <h4 class="modal-title">Modal Heading</h4> <button type="button" class="close" data-dismiss="modal">×</button> </div> <!-- Modal body --> <div class="modal-body"> Modal body.. </div> <!-- Modal footer --> <div class="modal-footer"> <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button> </div> </div> </div> </div> </div> </body> </html> Penjelasan: Untuk membuat modal terdapat 2 komponen penting yaitu pemicu dan aksi. Dalam contoh diatas saya menggunakan button untuk pemicu dan aksinya adalah menampilkan modal.
AnimasiUntuk membuat animasi modal teman – teman dapat membuat sendiri dengan javascript, tetapi secara default terdapat class <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Modal Kecil</h2> <!-- Button to Open the Modal --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal"> Buka modal </button> <!-- The Modal --> <div class="modal fade" id="myModal"> <div class="modal-dialog modal-sm"> <div class="modal-content"> <!-- Modal Header --> <div class="modal-header"> <h4 class="modal-title">Modal Heading</h4> <button type="button" class="close" data-dismiss="modal">×</button> </div> <!-- Modal body --> <div class="modal-body"> Modal body.. </div> <!-- Modal footer --> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> </div> </div> </div> </div> </div> <div class="container"> <h2>Modal Besar</h2> <!-- Button to Open the Modal --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal1"> Buka modal </button> <!-- The Modal --> <div class="modal fade" id="myModal1"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <!-- Modal Header --> <div class="modal-header"> <h4 class="modal-title">Modal Heading</h4> <button type="button" class="close" data-dismiss="modal">×</button> </div> <!-- Modal body --> <div class="modal-body"> Modal body.. </div> <!-- Modal footer --> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> </div> </div> </div> </div> </div> <div class="container"> <h2>Modal Extra Besar</h2> <!-- Button to Open the Modal --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal2"> Buka modal </button> <!-- The Modal --> <div class="modal fade" id="myModal2"> <div class="modal-dialog modal-xl"> <div class="modal-content"> <!-- Modal Header --> <div class="modal-header"> <h4 class="modal-title">Modal Heading</h4> <button type="button" class="close" data-dismiss="modal">×</button> </div> <!-- Modal body --> <div class="modal-body"> Modal body.. </div> <!-- Modal footer --> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> </div> </div> </div> </div> </div> </body> </html>0 yang digunakan untuk emmberi animasi “fade” atau muncul dan menghilang secara perlahan. Contoh penggunaannya adalah: <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Modal dengan animasi fade</h2> <!-- Button to Open the Modal --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal"> Buka modal </button> <!-- The Modal --> <div class="modal fade" id="myModal"> <div class="modal-dialog"> <div class="modal-content"> <!-- Modal Header --> <div class="modal-header"> <h4 class="modal-title">Modal Heading</h4> <button type="button" class="close" data-dismiss="modal">×</button> </div> <!-- Modal body --> <div class="modal-body"> Modal body.. </div> <!-- Modal footer --> <div class="modal-footer"> <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button> </div> </div> </div> </div> </div> </body> </html> Ukuran ModalModal bootstrap juga dapat diatur ukurannya yaitu dengan menambahkan class
Tetapi secara default modal akan memiliki ukuran yang medium tanpa memasukkan class ukuran. contoh programnya: <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Modal Kecil</h2> <!-- Button to Open the Modal --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal"> Buka modal </button> <!-- The Modal --> <div class="modal fade" id="myModal"> <div class="modal-dialog modal-sm"> <div class="modal-content"> <!-- Modal Header --> <div class="modal-header"> <h4 class="modal-title">Modal Heading</h4> <button type="button" class="close" data-dismiss="modal">×</button> </div> <!-- Modal body --> <div class="modal-body"> Modal body.. </div> <!-- Modal footer --> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> </div> </div> </div> </div> </div> <div class="container"> <h2>Modal Besar</h2> <!-- Button to Open the Modal --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal1"> Buka modal </button> <!-- The Modal --> <div class="modal fade" id="myModal1"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <!-- Modal Header --> <div class="modal-header"> <h4 class="modal-title">Modal Heading</h4> <button type="button" class="close" data-dismiss="modal">×</button> </div> <!-- Modal body --> <div class="modal-body"> Modal body.. </div> <!-- Modal footer --> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> </div> </div> </div> </div> </div> <div class="container"> <h2>Modal Extra Besar</h2> <!-- Button to Open the Modal --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal2"> Buka modal </button> <!-- The Modal --> <div class="modal fade" id="myModal2"> <div class="modal-dialog modal-xl"> <div class="modal-content"> <!-- Modal Header --> <div class="modal-header"> <h4 class="modal-title">Modal Heading</h4> <button type="button" class="close" data-dismiss="modal">×</button> </div> <!-- Modal body --> <div class="modal-body"> Modal body.. </div> <!-- Modal footer --> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> </div> </div> </div> </div> </div> </body> </html> Modal posisi tengahUntuk menengahkan modal secara horizontal dan vertikal teman – teman bisa menggunakan class <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Modal Kecil</h2> <!-- Button to Open the Modal --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal"> Buka modal </button> <!-- The Modal --> <div class="modal fade" id="myModal"> <div class="modal-dialog modal-sm"> <div class="modal-content"> <!-- Modal Header --> <div class="modal-header"> <h4 class="modal-title">Modal Heading</h4> <button type="button" class="close" data-dismiss="modal">×</button> </div> <!-- Modal body --> <div class="modal-body"> Modal body.. </div> <!-- Modal footer --> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> </div> </div> </div> </div> </div> <div class="container"> <h2>Modal Besar</h2> <!-- Button to Open the Modal --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal1"> Buka modal </button> <!-- The Modal --> <div class="modal fade" id="myModal1"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <!-- Modal Header --> <div class="modal-header"> <h4 class="modal-title">Modal Heading</h4> <button type="button" class="close" data-dismiss="modal">×</button> </div> <!-- Modal body --> <div class="modal-body"> Modal body.. </div> <!-- Modal footer --> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> </div> </div> </div> </div> </div> <div class="container"> <h2>Modal Extra Besar</h2> <!-- Button to Open the Modal --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal2"> Buka modal </button> <!-- The Modal --> <div class="modal fade" id="myModal2"> <div class="modal-dialog modal-xl"> <div class="modal-content"> <!-- Modal Header --> <div class="modal-header"> <h4 class="modal-title">Modal Heading</h4> <button type="button" class="close" data-dismiss="modal">×</button> </div> <!-- Modal body --> <div class="modal-body"> Modal body.. </div> <!-- Modal footer --> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> </div> </div> </div> </div> </div> </body> </html>5. contohnya: <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <!-- Button to Open the Modal --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal"> Buka modal </button> <!-- The Modal --> <div class="modal fade" id="myModal"> <div class="modal-dialog modal-dialog-centered"> <div class="modal-content"> <!-- Modal Header --> <div class="modal-header"> <h4 class="modal-title">Modal Heading</h4> <button type="button" class="close" data-dismiss="modal">×</button> </div> <!-- Modal body --> <div class="modal-body"> Modal body.. </div> <!-- Modal footer --> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> </div> </div> </div> </div> </div> </body> </html> Modal scrollJika didalam modal kita memiliki banyak konten maka secara otomatis scrollbar akan ditambahkan dalam halaman tersebut. Untuk dapat memahami nya dilahkan lihat pada contoh dibawah: <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Modal Scroll Example</h2> <!-- Button to Open the Modal --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal"> Buka modal </button> <!-- The Modal --> <div class="modal" id="myModal"> <div class="modal-dialog"> <div class="modal-content"> <!-- Modal Header --> <div class="modal-header"> <h1 class="modal-title">Modal Heading</h1> <button type="button" class="close" data-dismiss="modal">×</button> </div> <!-- Modal body --> <div class="modal-body"> <p>Perpustakaan Aleksandria di Kota Aleksandria, Mesir merupakan salah satu perpustakaan terbesar dan terpenting pada zaman kuno. Perpustakaan ini merupakan bagian dari sebuah lembaga penelitian yang lebih besar, Mouseion, yang dipersembahkan untuk para Musai (sembilan dewi yang melambangkan seni). Gagasan mengenai sebuah perpustakaan untuk segala bidang di Aleksandria mungkin diusulkan oleh Demetrios dari Faleron (seorang negarawan asal Athena yang menjalani pengasingannya di Aleksandria) kepada Raja Ptolemaios I Soter pada zaman Helenistik.</p> <p>Rancangan untuk mendirikan perpustakaan ini mungkin sudah disusun pada masa raja tersebut, tetapi perpustakaan ini kemungkinan baru dibangun pada masa pemerintahan anaknya, yaitu Ptolemaios II Filadelfos. Berkat dukungan dari raja-raja Wangsa Ptolemaios, perpustakaan ini dengan segera memperoleh banyak sekali gulungan papirus. Tidak diketahui secara pasti berapa jumlah gulungan papirus yang disimpan di perpustakaan ini, tetapi perkiraannya berkisar antara 40.000 hingga 400.000 gulungan.</p> <p>Salah satu alasan Aleksandria dianggap sebagai pusat keilmuan dan pembelajaran adalah keberadaan perpustakaan ini. Banyak cendekiawan terkenal yang bekerja di perpustakaan ini pada abad ketiga dan kedua SM, seperti Zenodotos dari Efesos yang berupaya membakukan naskah puisi-puisi Homeros, Kalimakos yang menulis Pinakes (kadang dianggap sebagai katalog perpustakaan pertama di dunia), Apolonios dari Rodos yang menyusun puisi wiracarita Argonautika, Eratostenes dari Kirene yang menghitung keliling Bumi dengan keakuratan yang hanya meleset sedikit, Aristofanes dari Bizantion yang menciptakan sistem diakritik Yunani dan adalah orang pertama yang membagi naskah-naskah puisi menjadi baris-baris, serta Aristarkos dari Samotrakia yang membuat naskah definitif puisi-puisi Homeros dan menulis ulasan-ulasan panjang untuk puisi-puisi tersebut</p> </div> <!-- Modal footer --> <div class="modal-footer"> <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button> </div> </div> </div> </div> </div> </body> </html> ada kalanya kita hanya ingin yang dapat di scroll ketika konten dalam modal bootstrap banyak adalah modal nya saja, tanpa halaman dibelakangnya ikut. Untuk mewujudkan hal ini kita dapat menggunakan class <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Modal Kecil</h2> <!-- Button to Open the Modal --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal"> Buka modal </button> <!-- The Modal --> <div class="modal fade" id="myModal"> <div class="modal-dialog modal-sm"> <div class="modal-content"> <!-- Modal Header --> <div class="modal-header"> <h4 class="modal-title">Modal Heading</h4> <button type="button" class="close" data-dismiss="modal">×</button> </div> <!-- Modal body --> <div class="modal-body"> Modal body.. </div> <!-- Modal footer --> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> </div> </div> </div> </div> </div> <div class="container"> <h2>Modal Besar</h2> <!-- Button to Open the Modal --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal1"> Buka modal </button> <!-- The Modal --> <div class="modal fade" id="myModal1"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <!-- Modal Header --> <div class="modal-header"> <h4 class="modal-title">Modal Heading</h4> <button type="button" class="close" data-dismiss="modal">×</button> </div> <!-- Modal body --> <div class="modal-body"> Modal body.. </div> <!-- Modal footer --> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> </div> </div> </div> </div> </div> <div class="container"> <h2>Modal Extra Besar</h2> <!-- Button to Open the Modal --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal2"> Buka modal </button> <!-- The Modal --> <div class="modal fade" id="myModal2"> <div class="modal-dialog modal-xl"> <div class="modal-content"> <!-- Modal Header --> <div class="modal-header"> <h4 class="modal-title">Modal Heading</h4> <button type="button" class="close" data-dismiss="modal">×</button> </div> <!-- Modal body --> <div class="modal-body"> Modal body.. </div> <!-- Modal footer --> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> </div> </div> </div> </div> </div> </body> </html>6 contohnya: <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Modal Scroll Example</h2> <p>Use the .modal-dialog-scrollable class to enable scrolling inside the modal.</p> <!-- Button to Open the Modal --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal"> Open modal </button> <!-- The Modal --> <div class="modal" id="myModal"> <div class="modal-dialog modal-dialog-scrollable"> <div class="modal-content"> <!-- Modal Header --> <div class="modal-header"> <h1 class="modal-title">Modal Heading</h1> <button type="button" class="close" data-dismiss="modal">×</button> </div> <!-- Modal body --> <div class="modal-body"> <h3>Text bisa di scrol</h3> <p>Perpustakaan Aleksandria di Kota Aleksandria, Mesir merupakan salah satu perpustakaan terbesar dan terpenting pada zaman kuno. Perpustakaan ini merupakan bagian dari sebuah lembaga penelitian yang lebih besar, Mouseion, yang dipersembahkan untuk para Musai (sembilan dewi yang melambangkan seni). Gagasan mengenai sebuah perpustakaan untuk segala bidang di Aleksandria mungkin diusulkan oleh Demetrios dari Faleron (seorang negarawan asal Athena yang menjalani pengasingannya di Aleksandria) kepada Raja Ptolemaios I Soter pada zaman Helenistik.</p> <p>Rancangan untuk mendirikan perpustakaan ini mungkin sudah disusun pada masa raja tersebut, tetapi perpustakaan ini kemungkinan baru dibangun pada masa pemerintahan anaknya, yaitu Ptolemaios II Filadelfos. Berkat dukungan dari raja-raja Wangsa Ptolemaios, perpustakaan ini dengan segera memperoleh banyak sekali gulungan papirus. Tidak diketahui secara pasti berapa jumlah gulungan papirus yang disimpan di perpustakaan ini, tetapi perkiraannya berkisar antara 40.000 hingga 400.000 gulungan.</p> <p>Salah satu alasan Aleksandria dianggap sebagai pusat keilmuan dan pembelajaran adalah keberadaan perpustakaan ini. Banyak cendekiawan terkenal yang bekerja di perpustakaan ini pada abad ketiga dan kedua SM, seperti Zenodotos dari Efesos yang berupaya membakukan naskah puisi-puisi Homeros, Kalimakos yang menulis Pinakes (kadang dianggap sebagai katalog perpustakaan pertama di dunia), Apolonios dari Rodos yang menyusun puisi wiracarita Argonautika, Eratostenes dari Kirene yang menghitung keliling Bumi dengan keakuratan yang hanya meleset sedikit, Aristofanes dari Bizantion yang menciptakan sistem diakritik Yunani dan adalah orang pertama yang membagi naskah-naskah puisi menjadi baris-baris, serta Aristarkos dari Samotrakia yang membuat naskah definitif puisi-puisi Homeros dan menulis ulasan-ulasan panjang untuk puisi-puisi tersebut</p> </div> <!-- Modal footer --> <div class="modal-footer"> <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button> </div> </div> </div> </div> </div> </body> </html> Sekian penjelasan mengenai dasar dari modal bootstrap, teman teman bisa mengembangkan sendiri sesuai kebutuhan dari website teman – teman. Terima kasih |