search

Cara menggunakan tutorial bootstrap 5 pdf

Ngày đăng: 13/10/2022
Trả lời: 0
Lượt xem: 129

Download Ebook belajar HTML & CSS dasar untuk pemula gratis.

Ebook ini di buat oleh Diki Alfarabi Hadi, Founder dari www.malasngoding.com. yang aktif menulis tutorial pemrograman di www.malasngoding.com. ebook ini bisa di download oleh teman-teman yang baru mulai belajar HTML dan CSS dasar tapi tidak tahu mau memulai belajar dari mana. materi pembelajaran sudah di susun secara sistematis dan di dukung contoh gambar.

Show

DOWNLOAD

TUTORIAL FRAMEWORK BOOTSTRAP BAHASA INDONESIA Assalamualaikum wr wb. . Alhamdulillah akhirnya bisa berbagi sedikit pengetahuan, puji sukur kehadirat alloh SWT yg telah memberikan kesehatan dan ilmu yang begitu banyak yg tidak bisa kita pungkiri. Ebook ini saya persembahkan untuk ibu saya yang selalu sabar dan tak pernah letih mengurus dan mendorong saya untuk menjadi orang yang sukses ( meskipun sekarang belum sukses :p ). Semoga ebook ini berguna bagi para newbi yang sedang ingin belajar framework bootstrap ( kalau master ga usah baca yah hehe ). Sebagai sesama front end developer, saya akui bahwa framework seperti bootstrap ini sangat di butuhkan untuk masa masa sekarang ini, sebagai bukti akhir2 ini banyak loker front end developer dengan syarat salah satunya harus bisa framework. Kenapa harus memakai framework ?? ahhh pasti kalian sudah tau betapa bergunanya framework ketika sedang mendesain website.

UNTUK SIAPA EBOOK INI Ebook ini tentu untuk web desainer lebih tepatnya front end developer, ( masa ia untuk arsitek ) sudah ahh jangan becanda mulu. LISENSI EBOOK INI Silahkan jika bermanfaat di sebarluaskan dengan catatan “ tidak mengubah isi dari sebagian ataupun keseluruhan di ebook ini” mohon jangan menjadi plagiat copyright :D. Silahkan share dengan menyertakan link atau tidak mengubah isi sama sekali termasuk tentang penulis.

Selamat belajar 1

Ebook bootstrap bahasa indonesia | www.bungloon.com

TENTANG PENULIS Oia. . . sebelum belajar ada baiknya kalau kita kenalan yuck . .

Nama saya ABD HANNAN biasa di panggil justin bieber ehh salah maksudnya HANNAN, saya tinggal nya di wilayah jawa timur, tepatnya di kecamatan tambelangan kabupaten sampang madura. Kerjaan saya pengangguran hehe. . saya kerja freelance sebagai front end developer dan juga membuka jasa pembuatan website, oia. . saya juga bersedia loh kerja remote full time ataupun freelance sebagai front end developer, jadi jika saya di butuhkan untuk menyelesaikan proyek anda silahkan kontak saya yah. . ( promosi :p ). Ebook ini sangat jauh dari kata sempurna, saya sangat terbuka jika ada KRITIK, SARAN ataupun pertanyaan mengenai ebook ini yang kurang di mengerti ataupun ada kesalahan. Silahkan feel free kontak saya melalui kontak di bawah ini. Email: [email protected] Facebook: www.facebook.com/hfatir1

TERIMA KASIH ATAS PERHATIANNYA DAN SELAMAT MENIKMATI

2

Ebook bootstrap bahasa indonesia | www.bungloon.com

1. Persiapan Langkah pertama untuk memulai adalah men download file framework bootstrap, download dimana di situs resminya di www.getbootstrap.com . dan langkah kedua adalah download jquery, download di situs resminya di www.jquery.com . yang sudah melakukan ini sebelumnya silahkan step ini di skipp aja. Langkah selanjutnya ialah menaruh file bootstrap dan jquery tadi di dalam folder. Jadi silahkan buat folder di ( saya disini mengunakan xampp ) silahkan disesuaikan saja ya dengan yang anda pakai. Buat folder baru di c:/xampp/htdocs/ dan kasih nama “belajar” . jadi urutannya jadi c:/xampp/htdocs/belajar Pada defaultnya susunan file bootstrap seperti ini .

Silahkan kalian pindah pindah / copy semua file ini kedalam folder “ belajar “ yang sudah di buat tadi. Dan untuk file jquery yang sudah di download tadi silahkan pindah juga kedalam folder “ js “ bawaan bootstrap tersebut dan rename menjadi “ jquery.js “ agar memudahkan pemanggilan nantinya, pada defaultnya nama jquery masih ada embel embel di belakangnya sesuai dengan versi yang anda download, jadi lebih baik rename aja menjadi “ jquery.js “ taruh di dalam folder /belajar/js/jquery.js .

3

Ebook bootstrap bahasa indonesia | www.bungloon.com

2. Memulai Silahkan buat file baru dengan editor kesayangan kalian ( disini saya menggunakan sublimetext2 free version ) simpan di folder c:/xampp/htdocs/belajar beri nama index.html jadi c:/xampp/htdocs/belajar/index.html

Oia . . di ebook ini saya tidak akan mejelaskan layaknya guru, saya hanya akan memberi tau contoh cara membuat ini itu nya dan dengan sedikit penjelasan, jadi silahkan di oprek oprek sendiri yah sesuai kebutuhan. Langkah pertama ialah membuat code awalan seperti biasa, silahkan ketikan kode di bawah ini.

belajar bootstrap

Penjelasan : jadi standard dokumen pertama adalah seperti code di atas, please jangan buka karna tidak akan ada apa apa nya melainkan hanya ada title. Perhatikan code ini

code di atas adalah code agar desain kita responsive. Dan perlu di perhatikan pemanggilan bootstrap.js harus sesudah pemanggilan jquery.js , jadi jangan 4

Ebook bootstrap bahasa indonesia | www.bungloon.com

sekali kali memanggil file bootstrap.js terlebih dahulu sebelum jquery.js kalau javascript bootstrap ingin berjalan.

3. Container Container di bootstrap ada dua class, pertama .container container ini lebarnya tidak full kedua .container-fluid . container ini lebar nya full langsung ke code nya aja yah biar faham, saya juga bingung jelasinnya :p. Bootstrap Example <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/bootstrap.css" /> <script src="js/jquery.js"> <script src="js/bootstrap.js"> </head> <body> <div class="container"> <h2>halaman pertama belajar bootstrap</h2> <p>hallo. . ini adalah halaman pertamaku menggunakan bootstrap</p> </div> </body> </html><br /> <br /> Coba code di atas modifikasi, yaitu class="container"> ubah mejadi class="container-fluid"> .<br /> <br /> Sudah tau bedanya ?<br /> <br /> 5<br /> <br /> Ebook bootstrap bahasa indonesia | www.bungloon.com<br /> <br /> 4. Column bootstrap Ini adalah hal penting dan hal yang sangat berguna dari framwork bootsrap itu sendiri. Bootstrap menggunakan sampai dengan 12 column . yaitu column 3 , column 4 , column 6 , column 8 , column 12 . Itu sih sudah standard lebar lebar yang biasanya kita gunakan saat desain website. Sebenarnya bisa saja kita gunakan column 1 , column 2 dst jika di butuhkan. Contoh lengkapnya seperti ini: span 1<br /> <br /> span 1<br /> <br /> span 1<br /> <br /> span 1<br /> <br /> span 1<br /> <br /> span 4<br /> <br /> span 1<br /> <br /> span 1<br /> <br /> span 1<br /> <br /> span 1<br /> <br /> span 1<br /> <br /> span 4<br /> <br /> span 4<br /> <br /> span 1<br /> <br /> span 4 span 8<br /> <br /> span 6<br /> <br /> span 6 span 12<br /> <br /> Jadi bisa kita simpulkan, jika di dalam web kita menginginkan ada konten dan sidebar, kita bisa gunakan column 8 untuk konten, dan column 4 untuk sidebar. Bisa di pahami kan ? gunakan sesuai kebutuhan aja, struktur Kodenya seperti ini. <div class="row"> <div class="col-*-*"></div> </div> <div class="row"> <div class="col-*-*"></div> <div class="col-*-*"></div> <div class="col-*-*"></div> </div> 6<br /> <br /> Ebook bootstrap bahasa indonesia | www.bungloon.com<br /> <br /> span 1<br /> <br /> <div class="row"> ... </div><br /> <br /> Class row memungkinkan kita menyusun column menjadi rowspan / kebawah, Column di bootstrap itu sendiri ada beberapa , ada extra small, small, medium dan large. Implementasinya seperti ini. <div> <br /> class=”col-xs-4”> class=”col-sm-4”> class=”col-md-4”> class=”col-lg-4”><br /> <br /> column column column column<br /> <br /> extra small </div> small </div> medium </div> large </div><br /> <br /> Di antara column empat di atas lebarnya sama, perbedaannya di hal responsive desain. Jadi jika di device ekstra small, gunakan “ xs “ jika di device small, maka gunakan “ sm “ dan seterusnya sesuai kebutuhan, Bisa juga anda gunakan semua, contohnya <div class="”col-xs-4" col-sm-4 col-md-4 col-lg-4”> </div> Untuk menggunakan column column di bootstrap cukup memanggil seperti di atas, misal column 4 <div class="”col-md-4”"> artikel dsb disini </div> misal column 8 <div class="”col-md-8”"> artikel dsb disini </div> dan seterusnya sesuai kebutuhan . biar ga bingung akan saya kasih contohnya silahkan di praktekan. <html lang="en"> <head> <title>Bootstrap Example <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/bootstrap.css" /> <script src="js/jquery.js"> <script src="js/bootstrap.js"> </head> <body> <div class="container"> 7<br /> <br /> Ebook bootstrap bahasa indonesia | www.bungloon.com<br /> <br /> <div class="”col-md-8”"> <h2>ini adalah konten pertama</h2> <p>hallo. . ini adalah isi konten bootstrap ini adalah isi konten bootstrap ini adalah isi konten bootstrap ini adalah isi konten bootstrap ini adalah isi konten bootstrap ini adalah isi konten bootstrap ini adalah isi konten bootstrap ini adalah isi konten bootstrap ini adalah isi konten bootstrap ini adalah isi konten bootstrap ini adalah isi konten bootstrap </p> </div> <div class="”col-md-4”"> ini adalah sidebar pertama ini adalah sidebar pertama ini adalah sidebar pertama ini adalah sidebar pertama ini adalah sidebar pertama ini adalah sidebar pertama </div><br /> <br /> ku ku ku ku ku ku<br /> <br /> </div> </body> </html><br /> <br /> Bisa di pahami ? jika belum faham, sayang sekali saya sudah malas mebahas column di bootstrap ini. Rasanya saya ingin melanjutkan saja. . :D<br /> <br /> 5. Text / typography Teks di bootstrap , pada defaultnya ukuran secara global di bootstrap ialah 14px . kita mulai dari heading yah. Lihat ilustrasinya di bawah ini <h2> sampai <h6><br /> <br /> h2 Bootstrap heading (36px) h2 Bootstrap heading (30px) 8<br /> <br /> Ebook bootstrap bahasa indonesia | www.bungloon.com<br /> <br /> h3 Bootstrap heading (24px) h4 Bootstrap heading (18px) h5 Bootstrap heading (14px) h6 Bootstrap heading (12px)<br /> <br /> bagaimana dengan <p> / paragraph ? di bootstrap paragraph font-size nya adalah 10px. Tag <mark> memungkinkan kita membuat teks highlight, ketik code ini<br /> <br /> <body> <div class="container"> <h2>Highlight Text</h2> <p>Use the mark element to <mark>highlight text.</p> </div> </body><br /> <br /> Tag <abbr rel="nofollow"> memungkinkan kita menulis dengan style footer . <abbr rel="nofollow"> pencipta lagu kebangsaan </abbr> <blockquote> Untuk menulis quote. Contohnya seperti ini<br /> <br /> <div class="container"> <h2>Blockquotes</h2> <p>The blockquote element is used to present content from another source:</p> <blockquote> <p>indonesia merdeka sejak tahun 1995, sampai sekarang masih saja belum merdeka dari kemiskinan , kapan indonesia ini akan merdeka sesungguhnya ahhh sudahlah. . .</p> <footer>From hannan semprull</footer> 9<br /> <br /> Ebook bootstrap bahasa indonesia | www.bungloon.com<br /> <br /> </blockquote> </div><br /> <br /> Untuk menampilkan quote rata kanan silahkan tambahkan class .blockquotereverse<br /> <br /> Di <blockquote class="”blockquote-reverse”"><br /> <br /> <dl> Coffee - black hot drink Milk - white cold drink<br /> <br /> Code nya : <div class="container"> <h2>Description Lists</h2> <p>The dl element indicates a description list:</p> <dl> <dt>Coffee</dt> <dd>- black hot drink</dd> <dt>Milk</dt> <dd>- white cold drink</dd> </dl> </div><br /> <br /> <code> Kita bisa menggunakan tag <code> jika kita ingin menulis teks code di web kita. <kbd> gunakan ctrl + p untuk print buku kamu. Tag <kbd> memungkinkan kita mebuat teks seperti contoh di atas<br /> <br /> WARNA TEKS DI BOOTSTRAP 10<br /> <br /> Ebook bootstrap bahasa indonesia | www.bungloon.com<br /> <br /> Di bootstrap ada beberapa class untuk warna teks kita. .text-muted, .text-primary, .text-success, .text-info,.text-warning, and .textdanger<br /> <br /> This text is muted. This text is important. This text indicates success. This text represents some information. This text represents a warning. This text represents danger.<br /> <br /> Penggunaannya seperti ini. <p class="”text-danger”"> This text represents danger.</p> Dan begitu juga lainnya<br /> <br /> BACKGROUND DI BOOTSTRAP Ada beberap warna background di bootstrap yg tersedia, kita tinggal memanggil class nya sama seperti warna teks, hanya saja beda nama awalnya, jika untuk text kita menggunakan .text-success Tapi jika warna background, kita gunakan .bg-primary, .bg-success, bg-info, bg-warning, and .bg-danger<br /> <br /> This text is important. This text indicates success. This text represents some information. This text represents a warning. This text represents danger.<br /> <br /> Mudah bukan ??<br /> <br /> BEBERAPA CLASS TYPOGRAPHY DI BOOTSTRAP .lead<br /> <br /> Untuk teks stand out .small<br /> <br /> Untuk teks kecil .text-left<br /> <br /> 11<br /> <br /> Ebook bootstrap bahasa indonesia | www.bungloon.com<br /> <br /> Untuk teks align kiri / rata kiri .text-center<br /> <br /> Untuk teks align tengah / rata tengah .text-right<br /> <br /> Untuk teks aligh kanan / rata kanan .text-justify<br /> <br /> Untuk teks justify / rata kanan kiri .text-nowrap<br /> <br /> Untuk teks no wrapp / tanpa enter. .text-lowercase<br /> <br /> Untuk teks huruf kecil semua .text-uppercase<br /> <br /> Untuk teks huruf besar semua .text-capitalize<br /> <br /> Untuk teks capital / huruf depannya besar semua .list-unstyled<br /> <br /> Untuk me remove list untuk tag <ul> atau <ol> seperti list-style dsb .list-inline<br /> <br /> Untuk list agar inline contoh code nya : <p>The class .list-inline places all list items on a single line:</p> <ul class="list-inline"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul><br /> <br /> Sebenarnya masih banyak lagi, hanya saja saya sudah merasa malas menjelaskan semua. 12<br /> <br /> Ebook bootstrap bahasa indonesia | www.bungloon.com<br /> <br /> Jadi kita lanjut aja<br /> <br /> 6. Bootstrap table Tabel di bootstrap, paling mendasar adalah hanya memanggil satu class .table contoh implementasinya seperti ini. <table class="table"> <thead> <tr> <th>Firstname</th> <th>Lastname</th> <th>Email</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>Doe</td> <td><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="aec4c1c6c0eecbd6cfc3dec2cb80cdc1c3">[email protected]</a></td> </tr> <tr> <td>Mary</td> <td>Moe</td> 13<br /> <br /> Ebook bootstrap bahasa indonesia | www.bungloon.com<br /> <br /> <td><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8fe2eefdf6cfeaf7eee2ffe3eaa1ece0e2">[email protected]</a></td> </tr> <tr> <td>July</td> <td>Dooley</td> <td><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e58f90899ca5809d8488958980cb868a88">[email protected]</a></td> </tr> </tbody> </table><br /> <br /> Hasilnya :<br /> <br /> contoh Firstname<br /> <br /> Lastname<br /> <br /> Email<br /> <br /> John<br /> <br /> Doe<br /> <br /> <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e68c898e88a6839e878b968a83c885898b">[email protected]</a><br /> <br /> Mary<br /> <br /> Moe<br /> <br /> <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c4a9a5b6bd84a1bca5a9b4a8a1eaa7aba9">[email protected]</a><br /> <br /> July<br /> <br /> Dooley<br /> <br /> <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="49233c2530092c31282439252c672a2624">[email protected]</a><br /> <br /> Ada class lagi untuk table di bootstrap, yaitu untuk tables stripped seperti zebra. Anda tinggal menambah class .table-stripped setelah class .table . implementasinya beigini. <table class="table table-striped"> Ada lagi, jika anda ingin table nya ber border seperti ini<br /> <br /> contoh<br /> <br /> 14<br /> <br /> Ebook bootstrap bahasa indonesia | www.bungloon.com<br /> <br /> Firstname<br /> <br /> Lastname<br /> <br /> Email<br /> <br /> John<br /> <br /> Doe<br /> <br /> <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="deb4b1b6b09ebba6bfb3aeb2bbf0bdb1b3">[email protected]</a><br /> <br /> Mary<br /> <br /> Moe<br /> <br /> <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="523f33202b12372a333f223e377c313d3f">[email protected]</a><br /> <br /> July<br /> <br /> Dooley<br /> <br /> <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b2d8c7decbf2d7cad3dfc2ded79cd1dddf">[email protected]</a><br /> <br /> Tinggal ubah class .table-stripped tadi dengan class .table-bordered . implementasinya seperti ini. <table class="table table-bordered"> Ada lagi . .! bagaimana jika kita ingin table kita memiliki efek hover ?? jadi ketika cursor ada di atas table, maka warna table ada perubahan, bootstrap menyediakan itu qo, Caranya juga sama, , tinggal mengubah class yang tadi .table-bordered menjadi class .table-hover . dan lihat hasilnya . . . Oia. . untuk .table-hover ini bisa di gunakan berbarengan dengan .tablebordered maupun .table-stripped . implementasinya begini. <table class="table table-bordered table-hover"> Mudah sekali bukan ?? coba bayangkan jika kita membuat nya manual sendiri dari awal ?? butuh waktu berapa lama agar sebagus itu ? belum lagi hal responsive nya ? jadi tidak heran kalau front end developer di tuntut bisa framework. :D . Oia ada lagi satu class untuk table yaitu class .table-codensed silahkan dicoba sendiri dan gunakan sesuai kebutuhan.<br /> <br /> WARNA TABLE. Bagaimana jika kita ingin memberi background untuk table nya ? seperti contoh ini misalnya .<br /> <br /> 15<br /> <br /> Ebook bootstrap bahasa indonesia | www.bungloon.com<br /> <br /> Contoh table berwarna Firstname<br /> <br /> Lastname<br /> <br /> Email<br /> <br /> John<br /> <br /> Doe<br /> <br /> <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="91fbfef9ffd1f4e9f0fce1fdf4bff2fefc">[email protected]</a><br /> <br /> Mary<br /> <br /> Moe<br /> <br /> <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="94f9f5e6edd4f1ecf5f9e4f8f1baf7fbf9">[email protected]</a><br /> <br /> July<br /> <br /> Dooley<br /> <br /> <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="09637c6570496c71686479656c276a6664">[email protected]</a><br /> <br /> Bootstrap menyediakan hal tersebut, tapi sayang nya tidak untuk semua warna, yakni sama dengan warna teks di atas. Apa saja ? ini dia .active<br /> <br /> .success<br /> <br /> .info<br /> <br /> .warning<br /> <br /> .danger<br /> <br /> Implementasinya seperti ini. <div class="container"> <h2>Contextual Classes</h2> <p>Contextual classes can be used to color table rows or table cells. The classes that can be used are: .active, .success, .info, .warning, and .danger.</p> <table class="table"> <thead> <tr> <th>Firstname</th> <th>Lastname</th> <th>Email</th> </tr> </thead><br /> <br /> 16<br /> <br /> Ebook bootstrap bahasa indonesia | www.bungloon.com<br /> <br /> <tbody> <tr class="success"> <td>John</td> <td>Doe</td> <td><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3953565157795c41585449555c175a5654">[email protected]</a></td> </tr> <tr class="danger"> <td>Mary</td> <td>Moe</td> <td><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a1ccc0d3d8e1c4d9c0ccd1cdc48fc2cecc">[email protected]</a></td> </tr> <tr class="info"> <td>July</td> <td>Dooley</td> <td><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9cf6e9f0e5dcf9e4fdf1ecf0f9b2fff3f1">[email protected]</a></td> </tr> </tbody> </table> </div><br /> <br /> Perhatikan class yang saya beri warna biru . jadi untuk memberi warna background table, adalah dengan memberi class tersebut di tag <tr>. Bisa di pahami ? jika belum, sayang sekali saya sudah tidak mood lagi untuk membahas table di bootstrap, Rasanya ingin melanjutkan saja.<br /> <br /> 7. BOOTSTRAP IMAGES 17<br /> <br /> Ebook bootstrap bahasa indonesia | www.bungloon.com<br /> <br /> Bagaimana dengan gambar ? bootstrap juga menyediakan class untuk gambar, setau saya ada tiga class untuk gambar. Apa saja ? ini dia contohnya<br /> <br /> I.<br /> <br /> ROUNDED IMAGES<br /> <br /> Pertama adalah rounded images, contohnya seperti gambar pertama di atas, caranya cukup mudah, hanya tinggal menambah class .img-rounded implementasi nya begini. Pertama coba buat folder baru di folder “ belajar” kasih nama “ img “ lalu masukkan satu gambar apa saja, dan kasih nama “ gambar1.jpg “. Lalu ketik code di bawah ini. <div class="imgBox"><img alt="Cara menggunakan tutorial bootstrap 5 pdf" data-orgimg="https://sg.cdnki.com/cara-menggunakan-tutorial-bootstrap-5-pdf---aW1nL2dhbWJhcjEuanBn.webp" ></img></div><br /> <br /> II.<br /> <br /> CIRCLE IMAGES<br /> <br /> Yang kedua adalah circle images / gambar bundar seperti contoh nomor dua di atas, caranya sama dengan di atas hanya mengganti class nya saja dengan class .img-circle , implementasinya begini, kita tetap memakai gambar yang pertama saja ya. <div class="imgBox"><img alt="Cara menggunakan tutorial bootstrap 5 pdf" data-orgimg="https://sg.cdnki.com/cara-menggunakan-tutorial-bootstrap-5-pdf---aW1nL2dhbWJhcjEuanBn.webp" ></img></div><br /> <br /> III.<br /> <br /> THUMBNAIL IMAGES<br /> <br /> Yang ketiga thumbnail images , seperti contoh nomor tiga di atas, caranya pun sama hanya mengganti class nya saja dengan class .img-thumbnail , implementasinya begini, kita tetap memakai gambar pertama. <div class="imgBox"><img alt="Cara menggunakan tutorial bootstrap 5 pdf" data-orgimg="https://sg.cdnki.com/cara-menggunakan-tutorial-bootstrap-5-pdf---aW1nL2dhbWJhcjEuanBn.webp" ></img></div><br /> <br /> 18<br /> <br /> Ebook bootstrap bahasa indonesia | www.bungloon.com<br /> <br /> Cukup mudah bukan ?? oia bagaimana agar gambar gambar yang kita masukkan di web kita menjadi responsive ? bootstrap menyediakan itu, kita tinggal menaruh class nya di gambar tersebut, apa class nya ? ini dia. .img-responsive nah dengan class tersebut maka gambar kita akan menjadi responsive, implementasinya begini. <div class="imgBox"><img alt="Cara menggunakan tutorial bootstrap 5 pdf" data-orgimg="https://sg.cdnki.com/cara-menggunakan-tutorial-bootstrap-5-pdf---aW1nL2dhbWJhcjEuanBn.webp" ></img></div><br /> <br /> Sudah bisa di mengerti ? jika belum, sayang sekali saya sudah lelah membahas images di bootstrap, jadi terpaksa saya mau lanjutkan.<br /> <br /> 8. JUMBOTRON Jumbotron di bootstrap adalah . . . apa ya. . saya juga bingung sebenarnya untuk apa hehe, tapi kurang lebih contoh nya seperti ini.<br /> <br /> Ya seperti itu contoh nya, entah sebenarnya untuk apa, sejauh ini saya belum pernah memakai nya. Cara menggunakan nya, kita tinggal menambah class .jumbotron di <div> , implementasinya begini. <html lang="en"> 19<br /> <br /> Ebook bootstrap bahasa indonesia | www.bungloon.com<br /> <br /> <head> <title>Bootstrap Example <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/bootstrap.css" /> <script src="js/jquery.js"> <script src="js/bootstrap.js"> </head> <body> <div class="container"> <div class="jumbotron"> <h2>Bootstrap Tutorial</h2> <p>Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile-first projects on the web.</p> </div> <p>This is some text.</p> <p>This is another text.</p> </div> <script data-cfasync="false"></script></body> </html><br /> <br /> 9. BOOTSTRAP BUTTON Button di bootstrap ada beberapa gaya yang siap kita gunakan, di antaranya adalah .<br /> <br /> 20<br /> <br /> Ebook bootstrap bahasa indonesia | www.bungloon.com<br /> <br /> Saya sudah menyertakan nama nama class nya di bawahnya. Implementasinya begini. <button> <br /> type="button" type="button" type="button" type="button" type="button" type="button" type="button"<br /> <br /> class="btn class="btn class="btn class="btn class="btn class="btn class="btn<br /> <br /> btn-default">Default</button> btn-primary">Primary btn-success">Success btn-info">Info btn-warning">Warning btn-danger">Danger btn-link">Link<br /> <br /> Silahkan gunakan sesuai kebutuhan. Button tersebut juga bisa di gunakan di tag a ataupun tag input . implemantasinya begini. <a href="#" class="btn btn-info" role="button" rel="nofollow">Link Button</a> <button type="button" class="btn btn-info">Button</button> <input type="button" class="btn btn-info" value="Input Button" /> <input type="submit" class="btn btn-info" value="Submit Button" /><br /> <br /> UKURAN BUTTON Bagaiamana jika kita ingin mengubah ukuran button tersebut ? pada defaultnya, ukurannya akan mengikuti tulisan di dalamnya, tapi bisa juga kita mengubah ukuran tersebut dengan cara .<br /> <br /> Dengan cara menambah class class di atas, bisa di pahami contoh di atas ?? oke implementasinya begini. <button> <br /> 21<br /> <br /> type="button" type="button" type="button" type="button"<br /> <br /> class="btn class="btn class="btn class="btn<br /> <br /> btn-primary btn-primary btn-primary btn-primary<br /> <br /> btn-lg">Large</button> btn-md">Medium btn-sm">Small btn-xs">XSmall<br /> <br /> Ebook bootstrap bahasa indonesia | www.bungloon.com<br /> <br /> BUTTON BLOCK Apa itu button block di bootstrap ? contohnya seperti ini<br /> <br /> Caranya tinggal memasang class .btn-block di button nya. Implementasinya begini. <button type="button" class="btn btn-primary btn-block">Button 1</button><br /> <br /> ACTIVE DAN DISSABLE BUTTON Dengan bootstrap kita bisa membuat button menjadi active ataupun dissable / tidak bisa di klik. Contohnya seperti ini .<br /> <br /> Untuk button active kita tinggal memasang class .active dan untuk button dissable kita tinggal memasang class .dissable di button kita, implementasinya begini. <button type="button" class="btn btn-primary active">Active Primary</button> <button type="button" class="btn btn-primary disabled">Disabled Primary</button><br /> <br /> BUTTON GROUPS Bootstrap juga menyediakan button group, contohnya seperti ini.<br /> <br /> Bagimana cara membuat nya ? implementasi nya begini 22<br /> <br /> Ebook bootstrap bahasa indonesia | www.bungloon.com<br /> <br /> <div class="btn-group"> <button type="button" class="btn btn-primary">Apple</button> <button type="button" class="btn btn-primary">Samsung</button> <button type="button" class="btn btn-primary">Sony</button> </div><br /> <br /> Cukup mudah dan simple tapi hasilnya wow kan ? Jika anda ingin mengubah ukuran button group tersebut , cukup memanggil class .btn-group-xs/sm/md/lg implementasinya begini. <div class="btn-group btn-group-lg"> <button type="button" class="btn btn-primary">Apple</button> <button type="button" class="btn btn-primary">Samsung</button> <button type="button" class="btn btn-primary">Sony</button> </div><br /> <br /> Contoh di atas ukuranya besar yaitu .btn-group-lg jika ingin medium atau kecil atau ekstra kecil, maka cukup ubah parameter terahirnya.<br /> <br /> VERTIKAL BUTTON GROUP Vertikal button group ialah seperti contoh di bawah ini.<br /> <br /> Cukup gunakan class .btn-group-vertical . implementasinya begini. <div class="btn-group-vertical"> <button type="button" class="btn btn-primary">Apple</button> <button type="button" class="btn btn-primary">Samsung</button> <button type="button" class="btn btn-primary">Sony</button> </div><br /> <br /> Cukup mudah bukan ? gunakan sesuai kebutuhan kamu.<br /> <br /> NESTING BUTTON GROUP & DROPDOWN MENU<br /> <br /> 23<br /> <br /> Ebook bootstrap bahasa indonesia | www.bungloon.com<br /> <br /> Bagaimana kalau ingin membuat nesting button group dan dropdown menu ? disini saya akan jelaskan. Silahkan ketik kode di bawah ini. <div class="btn-group"> <button type="button" class="btn btn-primary">Apple</button> <button type="button" class="btn btn-primary">Samsung</button> <div class="btn-group"> <button type="button" class="btn btn-primary dropdown-toggle" datatoggle="dropdown"> Sony <span class="caret"></button> <ul class="dropdown-menu" role="menu"> <li><a href="#" rel="nofollow">Tablet</a></li> <li><a href="#" rel="nofollow">Smartphone</a></li> </ul> </div> </div><br /> <br /> Bagaimana ? simple bukan ? bisa di pahami ? jika belum maka terpaksa saya harus melanjutkan, Oia untuk membuat menu dan dropdown menu dengan bootstrap, akan saya jelaskan di bab selanjutnya.<br /> <br /> 10. GLYPHICON BOOTSTRAP Glyphicon adalah icon yang biasa kita gunakan, misal seperti ikon facebokk, twitter, google+ dll. . biasanya kita membuat ikon menggunakan img.png . namun dengan bootstrap kita bisa menggunakan icon icon populer dan yang sering kita gunakan. Seperti contoh dibawah ini icon di bootstrap.<br /> <br /> - Icone email - Icon print - Icon pencarian - Icon download Implementasi dan penggunaanya seperti ini. <p>Envelope icon: <span class="glyphicon glyphiconenvelope"></p> <p>Envelope icon as a link: 24<br /> <br /> Ebook bootstrap bahasa indonesia | www.bungloon.com<br /> <br /> <a href="#" rel="nofollow"><span class="glyphicon glyphicon-envelope"></a> </p> <p>Search icon: <span class="glyphicon glyphicon-search"></p> <p>Search icon on a button: <button type="button" class="btn btn-default"> <span class="glyphicon glyphicon-search"> Search </button> </p> <p>Search icon on a styled button: <button type="button" class="btn btn-info"> <span class="glyphicon glyphicon-search"> Search </button> </p> <p>Print icon: <span class="glyphicon glyphicon-print"></p> <p>Print icon on a styled link button: <a href="#" class="btn btn-success btn-lg" rel="nofollow"> <span class="glyphicon glyphicon-print"> Print </a> </p><br /> <br /> Cukup mudah bukan ? itu hanya beberapa icon saja. Sebenarnya masih banyak sekali icon icon yang tersedia, namun jika saya tulis semua disini, ebook nya pasti ketebalan karna icon, jadi silahkan cari aja di google dengan keyword “ icon bootstrap” . cara pemanggilannya sama seperti di atas, yakni tinggal mengganti parameter belakangnya dengan nama icon yang ingin kita gunakan. Cukup di mengerti ? jika tidak, sayang sekali saya sudah lelah membahas icon ini.<br /> <br /> 11. BADGES Apa itu badges ? badges di bootstrap adalah seperti contoh ini.<br /> <br /> Contoh implementasinya seperti ini. <a href="#" rel="nofollow">News <span class="badge">5</a><br /> <a href="#" rel="nofollow">Comments <span class="badge">10</a><br /> <a href="#" rel="nofollow">Updates <span class="badge">2</a> 25<br /> <br /> Ebook bootstrap bahasa indonesia | www.bungloon.com<br /> <br /> Badges juga bisa di gabungkan dengan button seperti ini.<br /> <br /> Implementasinya begini. <button type="button" class="btn btnprimary">Primary <spanclass="badge">7</button><br /> <br /> cukup mudah dan bermanfaat bukan ? pertanyaannya kapan badges ini akan di pakai ? ya itu terserah anda, biasa nya di gunakan untuk menampilkan banyak nya komentar di artikel atau pun tanggal atau apa aja terserah anda.<br /> <br /> 12. BOOTSTRAP PROGRESSBAR Progressbar di bootstrap seperti ini.<br /> <br /> Mungkin bisa anda gunakan untuk tampilan download atau menampilkan skill atau apa lah terserah kebutuhan anda. Implementasinya begini. <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%"> </div> </div><br /> <br /> Mudah ? off course PROGRESSBAR DENGA LABEL<br /> <br /> Implementasinya begini. <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%"> 70% </div> </div><br /> <br /> WARNA PROGRESSBAR 26<br /> <br /> Ebook bootstrap bahasa indonesia | www.bungloon.com<br /> <br /> Bagaimana jika kita ingin meberi warna yang lain ? ya tinggal menambah class ini.    <br /> <br /> .progress-bar-success .progress-bar-info .progress-bar-warning .progress-bar-danger<br /> <br /> Contohnya seperti ini.<br /> <br /> Implementasinya begini. <div class="progress"> <div class="progress-bar progress-barsuccess" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%"> 40% Complete (success) </div> </div> <div class="progress"> <div class="progress-bar progress-bar-info" role="progressbar" ariavaluenow="50" aria-valuemin="0" aria-valuemax="100" style="width:50%"> 50% Complete (info) </div> </div> <div class="progress"> <div class="progress-bar progress-barwarning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width:60%"> 60% Complete (warning) </div> </div> <div class="progress"> <div class="progress-bar progress-bardanger" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%"> 70% Complete (danger) </div> </div> 27<br /> <br /> Ebook bootstrap bahasa indonesia | www.bungloon.com<br /> <br /> Cukup mudah bukan ? silahkan lihat dan pahami class class di atas, jangan asal kopas, biar cepat bisa.<br /> <br /> STRIPPED PROGRESSBAR Stripped proggresbar adalah ada efek efek belang belangnya . Contoh nya seperti ini.<br /> <br /> Implementasinya seperti ini. <div class="progress"> <div class="progress-bar progress-bar-success progress-barstriped" role="progressbar" aria-valuenow="40" aria-valuemin="0" ariavaluemax="100" style="width:40%"> 40% Complete (success) </div> </div> <div class="progress"> <div class="progress-bar progress-bar-info progress-barstriped" role="progressbar" aria-valuenow="50" aria-valuemin="0" ariavaluemax="100" style="width:50%"> 50% Complete (info) </div> </div> <div class="progress"> <div class="progress-bar progress-bar-warning progress-barstriped" role="progressbar" aria-valuenow="60" aria-valuemin="0" ariavaluemax="100" style="width:60%"> 60% Complete (warning) </div> </div> <div class="progress"> 28<br /> <br /> Ebook bootstrap bahasa indonesia | www.bungloon.com<br /> <br /> <div class="progress-bar progress-bar-danger progress-barstriped" role="progressbar" aria-valuenow="70" aria-valuemin="0" ariavaluemax="100" style="width:70%"> 70% Complete (danger) </div> </div><br /> <br /> Mudah ya ?? iya banget, Oia untuk mengubah nilai di progressbar itu sendiri cukup mengganti tag ini aria-valuenow="70" aria-valuemin="0" ariavaluemax="100"style="width:70%"><br /> <br /> disesuaikan dengan kebutuhan. ANIMASI PROGRESSBAR Bagaimana jika kita ingin membuat progressbar itu seperti berjalan ? caranya cukup mudah, cukup memanggil class .active . implementasinya begini. <div class="progress"> <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="40" aria-valuemin="0" ariavaluemax="100" style="width:40%"> 40% </div> </div><br /> <br /> Cukup mudah bukan.<br /> <br /> STACKED PROGRESSBAR Stacked progressbar contohnya seperti ini.<br /> <br /> Implementasi dan cara penggunaannya seperti ini. <div class="progress"> <div class="progress-bar progress-barsuccess" role="progressbar" style="width:40%"> Free Space </div> <div class="progress-bar progress-barwarning" role="progressbar" style="width:10%"> Warning </div> <div class="progress-bar progress-bar29<br /> <br /> Ebook bootstrap bahasa indonesia | www.bungloon.com<br /> <br /> danger" role="progressbar" style="width:20%"> Danger </div> </div><br /> <br /> Cukup mudah bukan. Jika belum paham silahkan baca ulang lagi dan lagi, karna saya sudah malas membahas progressbar.<br /> <br /> 13. BOOTSTRAP PAGINATION Pagination adalah seperti ini.<br /> <br /> Biasanya di gunakan. . ya untuk pagination lah, masa untuk kontent :v . biasanya digunakan untuk artikel selanjutnya atau sebelumnya atau lain sebagainya. Implementasi dan penggunaannya seperti ini. <ul class="pagination"> <li><a href="#" rel="nofollow">1</a></li> <li><a href="#" rel="nofollow">2</a></li> <li><a href="#" rel="nofollow">3</a></li> <li><a href="#" rel="nofollow">4</a></li> <li><a href="#" rel="nofollow">5</a></li> </ul><br /> <br /> Jadi cukup memanggil class .pagination di tag <ul> . ACTIVE STATE PAGINATION Bagaimana jika kita ingin memberi pagination itu active di salah satu pagination, seperti ini .<br /> <br /> Bisanya hal seperti ini dilakukan untuk memberi tanda page di urutan berapa sekarang berada. Imp-lementasinya adalah seperti ini. <ul class="pagination"> <li><a href="#" rel="nofollow">1</a></li> <li class="active"><a href="#" rel="nofollow">2</a></li> <li><a href="#" rel="nofollow">3</a></li> 30<br /> <br /> Ebook bootstrap bahasa indonesia | www.bungloon.com<br /> <br /> <li><a href="#" rel="nofollow">4</a></li> <li><a href="#" rel="nofollow">5</a></li> </ul><br /> <br /> Jadi kita tinggal memberi class .active di tag <li> yang akan di aktifkan . contoh </li><li class="”active”"> hannan gaul </li> . Mudah yah ? DISABBLE PAGINATION Disabble pagination memungkinkan salah satu atau beberapa pagination dissable / tidak bisa di klick. Contohnya seperti ini.<br /> <br /> Implementasinya seperti ini. <ul class="pagination"> <li><a href="#" rel="nofollow">1</a></li> <li><a href="#" rel="nofollow">2</a></li> <li><a href="#" rel="nofollow">3</a></li> <li class="disabled"><a href="#" rel="nofollow">4</a></li> <li><a href="#" rel="nofollow">5</a></li> </ul><br /> <br /> Jadi kita tinggal memanggil class .disabled di tag <li> sama seperti class .active.<br /> <br /> SIZE PAGINATION Bagaiamana jika kita ingin mengubah ukuran pagination seperti contoh ini.<br /> <br /> Cukup muda, kita tinggal memanggil class .pagination-lg atau .pagination-md sesuai yang kita butuhkan. Implementasinya begini. <ul class="pagination pagination-lg"> <li><a href="#" rel="nofollow">1</a></li> <li><a href="#" rel="nofollow">2</a></li> <li><a href="#" rel="nofollow">3</a></li> <li><a href="#" rel="nofollow">4</a></li> <li><a href="#" rel="nofollow">5</a></li> </ul> <ul class="pagination pagination-sm"> 31<br /> <br /> Ebook bootstrap bahasa indonesia | www.bungloon.com<br /> <br /> <li><a rel="nofollow"><a rel="nofollow"><a rel="nofollow"><a rel="nofollow"><a ul rel="nofollow"><br /> <br /> href="#">1</a></a></a></a></a></li> href="#">2</ul></li> href="#">3 href="#">4 href="#">5<br /> <br /> Simple ? right .<br /> <br /> BOOTSTRAP PAGER Apa itu pager di bootstrap ? pager hampir sama dengan pagination. Contohnya seperti ini. <ul class="pager"> <li><a href="#" rel="nofollow">Previous</a></li> <li><a href="#" rel="nofollow">Next</a></li> </ul><br /> <br /> Mudah toh ? Bagaimana jika kita ingin merubah posisinya menjadi di kanan dan di kiri sperti ini .<br /> <br /> Implementasinya begini. <ul class="pager"> <li class="previous"><a href="#" rel="nofollow">Previous</a></li> <li class="next"><a href="#" rel="nofollow">Next</a></li> </ul><br /> <br /> Cukup memanggil class .previous untuk kiri, dan class .next untuk kanan di tag <li> . Bisa di mengerti ? jika tidak silahkan baca ulang lagi, saya tidak mau mejelaskan lagi :p .<br /> <br /> 14. LIST GROUP Apa itu list group ? contoh list group di bootstrap seperti ini.<br /> <br /> 32<br /> <br /> Ebook bootstrap bahasa indonesia | www.bungloon.com<br /> <br /> Implementasinya begini. <ul class="list-group"> <li class="list-group-item">First item</li> <li class="list-group-item">Second item</li> <li class="list-group-item">Third item</li> </ul><br /> <br /> LIST GROUP DENGAN BADGES Coba kita satukan list group dengan badges, contoh nya seperti ini.<br /> <br /> Implementasinya begini. <ul class="list-group"> <li class="list-group-item"><span class="badge">12 New</li> <li class="list-groupitem"><span class="badge">5 Deleted</li> <li class="list-groupitem"><span class="badge">3 Warnings</li> </ul><br /> <br /> ACTIVE DAN LINKED LIST GROUP Bagaimana jika kita ingin memberi active list dan link di dalam nya ? contohnya seperti ini.<br /> <br /> 33<br /> <br /> Ebook bootstrap bahasa indonesia | www.bungloon.com<br /> <br /> Implementasinya begini. <div class="list-group"> <a href="#" class="list-group-item active" rel="nofollow">First item</a> <a href="#" class="list-group-item" rel="nofollow">Second item</a> <a href="#" class="list-group-item" rel="nofollow">Third item</a> </div><br /> <br /> Cukup mudah bukan ?<br /> <br /> WARNA LIST GROUP Contoh warna list group di bootstrap seperti ini.<br /> <br /> Implementasi dan penggunaannya begini. <ul class="list-group"> <li class="list-group-item <li class=" list-group-item ul><br /> <br /> list-group-item-success">First item</li> list-group-item-info">Second item</ul></li> list-group-item-warning">Third item list-group-item-danger">Fourth item<br /> <br /> Cukup mudah bukan ?<br /> <br /> 15. BOOTSTRAP FORM<br /> <br /> 34<br /> <br /> Ebook bootstrap bahasa indonesia | www.bungloon.com<br /> <br /> Kita lanjut ke yang lebih mengasikkan, kenapa mengasikkan ? entahlah, semenjak saya belajar html dan css dulu, hal yang paling mengasikkan ini adalah form hehe. Oke. . . pada default nya semua form entah <input /> , <textarea>, <select>, sama sama memakai class .form-control dan class .form-control ini besarnya seratus persen ( 100% ). Jadi jika ingin form dengan lebar tertentu, harus di bungkus dengan div yang memiliki width yang sesuai keinginan kamu. Semoga bisa di mengerti ya, meskipun saya sendiri tidak mengerti dengan apa yang saya bicarakan :v. Contoh dan implementasi form begini. <form role="form"> <div class="form-group"> <label for="email">Email address:</label> <input type="email" class="form-control" id="email" /> </div> <div class="form-group"> <label for="pwd">Password:</label> <input type="password" class="form-control" id="pwd" /> </div> <div class="checkbox"> <label><input type="checkbox" /> Remember me</label> </div> <button type="submit" class="btn btn-default">Submit</button> </form><br /> <br /> FORM INLINE Bagaimana jika kita ingin membuat form inline / kesamping. Implementasi nya begini. <form class="form-inline" role="form"> <div class="form-group"> <label for="email">Email address:</label> <input type="email" class="form-control" id="email" /> </div> <div class="form-group"> <label for="pwd">Password:</label> <input type="password" class="form-control" id="pwd" /> </div> <div class="checkbox"> <label><input type="checkbox" /> Remember me</label> </div> <button type="submit" class="btn btn-default">Submit</button> </form><br /> <br /> 35<br /> <br /> Ebook bootstrap bahasa indonesia | www.bungloon.com<br /> <br /> FORM HORIZONTAL Implementasi dan contoh form horizontal begini. <form class="form-horizontal" role="form"> <div class="form-group"> <label class="control-label col-sm-2" for="email">Email:</label> <div class="col-sm-10"> <input type="email" class="formcontrol" id="email" placeholder="Enter email" /> </div> </div> <div class="form-group"> <label class="control-label col-sm-2" for="pwd">Password:</label> <div class="col-sm-10"> <input type="password" class="formcontrol" id="pwd" placeholder="Enter password" /> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <div class="checkbox"> <label><input type="checkbox" /> Remember me</label> </div> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <button type="submit" class="btn btn-default">Submit</button> </div> </div> </form><br /> <br /> Disana terdapat class column column di bootstrap, saya tidak mau menjelaskan, karna saya sudah jelaskan di bab column sebelumnya, Oia disana ada class column baru yaitu class .col-sm-offset-2 . oke sedikit penjelasan tentang class ini, class tersebut memungkinkan kita menggeser posisi column nya. Bingung yah ? saya juga bingung hehe. Oke. .untuk mudahnya langsung saja, coba ketik code dibawah ini. <div class="col-sm-offset-2 col-sm-10"> <button type="submit" class="btn btn-default">Submit</button> </div><br /> <br /> Dan coba code ini. <div class="col-sm-10"> <button type="submit" class="btn btn-default">Submit</button> </div> 36<br /> <br /> Ebook bootstrap bahasa indonesia | www.bungloon.com<br /> <br /> Kelihatan bukan bedanya ? Oke kita lanjut ke form, Form ini support untuk tag tag berikut. input textarea checkbox radio select<br /> <br />     <br /> <br /> FORM INPUT Implementasi form input begini. <div class="form-group"> <label for="usr">Name:</label> <input type="text" class="form-control" id="usr" /> </div> <div class="form-group"> <label for="pwd">Password:</label> <input type="password" class="form-control" id="pwd" /> </div><br /> <br /> FORM TEXTAREA Contoh form textarea seperti ini. <div class="form-group"> <label for="comment">Comment:</label> <textarea class="form-control" rows="5" id="comment"></textarea> </div><br /> <br /> BOOTSTRAP CHECKBOX Implementasi checkbox begini. <div class="checkbox"> <label><input type="checkbox" value />Option 1</label> </div> <div class="checkbox"> <label><input type="checkbox" value />Option 2</label> </div> <div class="checkbox disabled"> <label><input type="checkbox" value disabled />Option 3</label> </div><br /> <br /> 37<br /> <br /> Ebook bootstrap bahasa indonesia | www.bungloon.com<br /> <br /> Jika ingin form checkbox nya inline / kepinggir. Gunakan class .checkbox-inline , implementasinya begini. <label class="checkbox-inline"><input type="checkbox" value />Option 1</label> <label class="checkbox-inline"><input type="checkbox" value />Option 2</label> <label class="checkbox-inline"><input type="checkbox" value />Option 3</label><br /> <br /> RADIO BUTTON Implementasi radio button begini. <div class="radio"> <label><input type="radio" name="optradio" />Option 1</label> </div> <div class="radio"> <label><input type="radio" name="optradio" />Option 2</label> </div> <div class="radio disabled"> <label><input type="radio" name="optradio" disabled />Option 3</label> </div><br /> <br /> Mudah ya ?? tentu ia mas bro. Jika ingin radio button nya inline / kepinggir, maka cukup gunakan class .radioinline . Implementasinya begini. <label class="radio-inline"><input type="radio" name="optradio" />Option 1</label> <label class="radio-inline"><input type="radio" name="optradio" />Option 2</label> <label class="radio-inline"><input type="radio" name="optradio" />Option 3</label><br /> <br /> SELECT Contoh select di bootstrap begini. <div class="form-group"> <label for="sel1">Select list:</label> <select class="form-control" id="sel1"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> 38<br /> <br /> Ebook bootstrap bahasa indonesia | www.bungloon.com<br /> <br /> </div><br /> <br /> FORM LAINNYA Form lainnya ini adalah pelengkap leinnya untuk form, saya akan tunjukan codenya saja, silahkan di pahami sendiri. Form lainnya ini seperti, form dissable, form focus, form dengan feedback dll. Contoh nya seperti ini. <form class="form-horizontal" role="form"> <div class="form-group"> <label class="col-sm-2 control-label">Focused</label> <div class="col-sm-10"> <input class="formcontrol" id="focusedInput" type="text" value="Click to focus" /> </div> </div> <div class="form-group"> <label for="inputPassword" class="col-sm-2 controllabel">Disabled</label> <div class="col-sm-10"> <input class="formcontrol" id="disabledInput" type="text" disabled /> </div> </div> <fieldset disabled> <div class="form-group"> <label for="disabledTextInput" class="col-sm-2 controllabel">Fieldset disabled</label> <div class="col-sm-10"> <input type="text" id="disabledTextInput" class="form-control" /> </div> </div> <div class="form-group"> <label for="disabledSelect" class="col-sm-2 controllabel"></label> <div class="col-sm-10"> <select id="disabledSelect" class="form-control"> <option>Disabled select</option> </div> </div> </fieldset> <div class="form-group has-success has-feedback"> <label class="col-sm-2 control-label" for="inputSuccess"> Input with success and icon</label> <div class="col-sm-10"> <input type="text" class="form-control" id="inputSuccess" /> <span class="glyphicon glyphicon-ok form-control39<br /> <br /> Ebook bootstrap bahasa indonesia | www.bungloon.com<br /> <br /> feedback"> </div> </div> <div class="form-group has-warning has-feedback"> <label class="col-sm-2 control-label" for="inputWarning"> Input with warning and icon</label> <div class="col-sm-10"> <input type="text" class="form-control" id="inputWarning" /> <span class="glyphicon glyphicon-warning-sign form-controlfeedback"> </div> </div> <div class="form-group has-error has-feedback"> <label class="col-sm-2 control-label" for="inputError"> Input with error and icon</label> <div class="col-sm-10"> <input type="text" class="form-control" id="inputError" /> <span class="glyphicon glyphicon-remove form-controlfeedback"> </div> </div> </form><br /> <br /> Bagaiman jika membuat nya inline ? Cukup gampang seperti ini. <form class="form-inline" role="form"> <div class="form-group"> <label for="focusedInput">Focused</label> <input class="form-control" id="focusedInput" type="text" /> </div> <div class="form-group"> <label for="inputPassword">Disabled</label> <input class="formcontrol" id="disabledInput" type="text" disabled /> </div> <div class="form-group has-success has-feedback"> <label for="inputSuccess2">Input with success</label> <input type="text" class="form-control" id="inputSuccess2" /> <span class="glyphicon glyphicon-ok form-control-feedback"> </div> <div class="form-group has-warning has-feedback"> <label for="inputWarning2">Input with warning</label> <input type="text" class="form-control" id="inputWarning2" /> <span class="glyphicon glyphicon-warning-sign form-controlfeedback"> </div> <div class="form-group has-error has-feedback"> <label for="inputError2">Input with error</label> <input type="text" class="form-control" id="inputError2" /> <span class="glyphicon glyphicon-remove form-control40<br /> <br /> Ebook bootstrap bahasa indonesia | www.bungloon.com<br /> <br /> feedback"> </div> </form><br /> <br /> Bagaimana ? sangat mudah ya ? bagaimana jika kita membuat nya sendiri dari awal, sangat membutuhkan waktu lama, belum lagi jika nanti ada revisi , atau ada pergantian developer , pasti akan sangat membingungkan. FORM SIZE Bagaimana jika kita ingin mengubah ukuran form ? caranya begini. <form class="form-inline" role="form"> <div class="form-group"> <label for="inputdefault">Default input</label> <input class="form-control" id="inputdefault" type="text" /> </div> <div class="form-group"> <label for="inputlg">input-lg</label> <input class="form-control input-lg" id="inputlg" type="text" /> </div> <div class="form-group"> <label for="inputsm">input-sm</label> <input class="form-control input-sm" id="inputsm" type="text" /> </div> </form><br /> <br /> HORIZONTAL FORM WITH SIZE <form class="form-horizontal" role="form"> <div class="form-group form-group-lg"> <label class="col-sm-2 control-label" for="lg">form-grouplg</label> <div class="col-sm-10"> <input class="form-control" type="text" id="lg" /> </div> </div> <div class="form-group form-group-sm"> <label class="col-sm-2 control-label" for="sm">form-groupsm</label> <div class="col-sm-10"> <input class="form-control" type="text" id="sm" /> </div> </div> </form><br /> <br /> 16. BOOTSTRAP COURSEL / SLIDESHOW<br /> <br /> 41<br /> <br /> Ebook bootstrap bahasa indonesia | www.bungloon.com<br /> <br /> Disini saya akan jelaskan slideshow di bootstrap, harus diperhatikan, slideshow ini butuh file “ bootstrap.js “ dan “ jquery.js “. Karna kita sudah memasukkan nya tadi, jadi kita langsung aja. Pertama kita masukkan gambar gambar yang akan di jadikan slideshow, kita copy tiga gambar kedalam file “ img “ dan kita kasih nama ( silde1.jpg , slide2.jpg , slide3.jpg ). Lalu ketik kode di bawah ini. <div id="myCarousel" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slideto="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> <li data-target="#myCarousel" data-slide-to="3"></li> </ol> <div class="carousel-inner" role="listbox"> <div class="item active"> <div class="imgBox"><img alt="Cara menggunakan tutorial bootstrap 5 pdf" data-orgimg="https://sg.cdnki.com/cara-menggunakan-tutorial-bootstrap-5-pdf---aW1nL3NsaWRlMS5qcGc=.webp" ></img></div> </div> <div class="item"> <div class="imgBox"><img alt="Cara menggunakan tutorial bootstrap 5 pdf" data-orgimg="https://sg.cdnki.com/cara-menggunakan-tutorial-bootstrap-5-pdf---aW1nL3NsaWRlMi5qcGc=.webp" ></img></div> </div> <div class="item"> <div class="imgBox"><img alt="Cara menggunakan tutorial bootstrap 5 pdf" data-orgimg="https://sg.cdnki.com/cara-menggunakan-tutorial-bootstrap-5-pdf---aW1nL3NpbGRlMy5qcGc=.webp" ></img></div> </div><br /> <br /> <a class="left carouselcontrol" href="#myCarousel" role="button" data-slide="prev" rel="nofollow"> <span class="glyphicon glyphicon-chevron-left" ariahidden="true"> <span class="sr-only">Previous </a> <a class="right carouselcontrol" href="#myCarousel" role="button" data-slide="next" rel="nofollow"> <span class="glyphicon glyphicon-chevron-right" ariahidden="true"> <span class="sr-only">Next </a> </div> 42<br /> <br /> Ebook bootstrap bahasa indonesia | www.bungloon.com<br /> <br /> SLIDESHOW DENGAN TEKS Contoh slide show dengan teks seperti ini, tetap gunakan gambar yang sebelumnya. <div id="myCarousel" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slideto="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> <li data-target="#myCarousel" data-slide-to="3"></li> </ol> <div class="carousel-inner" role="listbox"> <div class="item active"> <div class="imgBox"><img alt="Cara menggunakan tutorial bootstrap 5 pdf" data-orgimg="https://sg.cdnki.com/cara-menggunakan-tutorial-bootstrap-5-pdf---aW1nL3NsaWRlMS5qcGc=.webp" ></img></div> <div class="carousel-caption"> <h3>Chania</h3> <p>The atmosphere in Chania has a touch of Florence and Venice.</p> </div> </div> <div class="item"> <div class="imgBox"><img alt="Cara menggunakan tutorial bootstrap 5 pdf" data-orgimg="https://sg.cdnki.com/cara-menggunakan-tutorial-bootstrap-5-pdf---aW1nL3NsaWRlMi5qcGc=.webp" ></img></div> <div class="carousel-caption"> <h3>Chania</h3> <p>The atmosphere in Chania has a touch of Florence and Venice.</p> </div> </div> <div class="item"> <div class="imgBox"><img alt="Cara menggunakan tutorial bootstrap 5 pdf" data-orgimg="https://sg.cdnki.com/cara-menggunakan-tutorial-bootstrap-5-pdf---aW1nL3NsaWRlMy5qcGc=.webp" ></img></div> <div class="carousel-caption"> <h3>Flowers</h3> <p>Beatiful flowers in Kolymbari, Crete.</p> </div> </div><br /> <br /> </div> <a class="left carouselcontrol" href="#myCarousel" role="button" data-slide="prev" rel="nofollow"> <span class="glyphicon glyphicon-chevron-left" ariahidden="true"> 43<br /> <br /> Ebook bootstrap bahasa indonesia | www.bungloon.com<br /> <br /> <span class="sr-only">Previous </a> <a class="right carouselcontrol" href="#myCarousel" role="button" data-slide="next" rel="nofollow"> <span class="glyphicon glyphicon-chevron-right" ariahidden="true"> <span class="sr-only">Next </a> </div><br /> <br /> Cukup mudah bukan ? Pahami kode kode nya, pasti akan mengerti :p .<br /> <br /> 17. BOOTSTRAP MENU Kita sudah sampai ke menu, menu di bootstrap ada dua style, yaitu menu pills dan tabs. Membuat menu basic nya menggunakan tag seperti berikut. <ul> <li><a rel="nofollow"><a rel="nofollow"><a rel="nofollow"><a ul rel="nofollow"><br /> <br /> href="#">Home</a></a></a></a></li> href="#">Menu 1 href="#">Menu 2 href="#">Menu 3<br /> <br /> TABS MENU<br /> <br /> Kita tambahkan class berikut di tag <ul class="nav<br /> <br /> nav-tabs"><br /> <br /> jadi begini,<br /> <br /> <ul class="nav nav-tabs"> <li class="active"><a href="#" rel="nofollow">Home</a></li> <li><a href="#" rel="nofollow">Menu 1</a></li> <li><a href="#" rel="nofollow">Menu 2</a></li> <li><a href="#" rel="nofollow">Menu 3</a></li> </ul><br /> <br /> Nah diatas itu adalah contoh tabs di bootstrap,<br /> <br /> TABS DENGAN DROPDOWN Cara membuat menu tabs dan menu dropdown ? implementasinya begini <ul class="nav nav-tabs"> <li class="active"><a href="#" rel="nofollow">Home</a></li> 44<br /> <br /> Ebook bootstrap bahasa indonesia | www.bungloon.com<br /> <br /> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#" rel="nofollow">Menu 1 <span class="caret"></a> <ul class="dropdown-menu"> <li><a href="#" rel="nofollow">Submenu 1-1</a></li> <li><a href="#" rel="nofollow">Submenu 1-2</a></li> <li><a href="#" rel="nofollow">Submenu 1-3</a></li> </ul> </li> <li><a href="#" rel="nofollow">Menu 2</a></li> <li><a href="#" rel="nofollow">Menu 3</a></li> </ul><br /> <br /> Mudah ya ? jadi untuk membuat menu dropdown di bootstrap adalah semudah itu.<br /> <br /> PILLS MENU Menu pills atau menu seperti biasanya ialah seperti berikut. <ul class="nav nav-pills"> <li class="active"><a href="#" rel="nofollow">Home</a></li> <li><a href="#" rel="nofollow">Menu 1</a></li> <li><a href="#" rel="nofollow">Menu 2</a></li> <li><a href="#" rel="nofollow">Menu 3</a></li> </ul><br /> <br /> Oia, sekedar informasi, di tag <li ada .active nah tersebut di gunakan untuk membuat menu nya menjadi aktif, bebas pakai tag yang mana> <br /> PILLS MENU VERTIKAL Contoh dan implementasi menu pills vertikal dengan bootstrap begini. <div class="col-md-3"> <ul class="nav nav-pills nav-stacked"> <li class="active"><a href="#" rel="nofollow">Home</a></li> <li><a href="#" rel="nofollow">Menu 1</a></li> <li><a href="#" rel="nofollow">Menu 2</a></li> <li><a href="#" rel="nofollow">Menu 3</a></li> </ul> </div><br /> <br /> Mudah ya ? gunakan sesuai kebutuhan saja. PILLS DENGAN DROPDOWN MENU<br /> <br /> 45<br /> <br /> Ebook bootstrap bahasa indonesia | www.bungloon.com<br /> <br /> Di awal sudah ada dropdown menu dengan TABS, lalu bagaiaman jika dengan PILLS ? contoh dan implementasinya begini. <ul class="nav nav-pills nav-stacked"> <li class="active"><a href="#" rel="nofollow">Home</a></li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#" rel="nofollow">Menu 1 <span class="caret"></a> <ul class="dropdown-menu"> <li><a href="#" rel="nofollow">Submenu 1-1</a></li> <li><a href="#" rel="nofollow">Submenu 1-2</a></li> <li><a href="#" rel="nofollow">Submenu 1-3</a></li> </ul> </li> <li><a href="#" rel="nofollow">Menu 2</a></li> <li><a href="#" rel="nofollow">Menu 3</a></li> </ul><br /> <br /> Mudah bukan ??<br /> <br /> 18. NAVIGATION BAR / NAVBAR Navbar ialah menu di header, contohnya seperti ini.<br /> <br /> Bagaimana cara membuat nya ? caranya begini. <body> <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#" rel="nofollow">WebSiteName</a> </div> <div> <ul class="nav navbar-nav"> <li class="active"><a href="#" rel="nofollow">Home</a></li> <li><a href="#" rel="nofollow">Page 1</a></li> <li><a href="#" rel="nofollow">Page 2</a></li> <li><a href="#" rel="nofollow">Page 3</a></li> </ul> </div> </div> </nav> </body><br /> <br /> Navbar di bootstrap ada dua style, yaitu class .navbar-default dan class .navbar-inverse 46<br /> <br /> Ebook bootstrap bahasa indonesia | www.bungloon.com<br /> <br /> Coba code berikut. <nav class="navbar navbar-inverse"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#" rel="nofollow">WebSiteName</a> </div> <div> <ul class="nav navbar-nav"> <li class="active"><a href="#" rel="nofollow">Home</a></li> <li><a href="#" rel="nofollow">Page 1</a></li> <li><a href="#" rel="nofollow">Page 2</a></li> <li><a href="#" rel="nofollow">Page 3</a></li> </ul> </div> </div> </nav><br /> <br /> Sudah tau perbedaannya ? so . . gunakan yang mana saja sesuai kebutuhan dan keinginan.<br /> <br /> FIXED NAVBAR Fixed berarti dia posisinya tetap, ada dua style fixed yaitu top / atas dan buttom / bawah, class nya ini .navbar-fixed-top ( untuk fixed atas ) dan class .navbar-fixed-buttom . coba kita buktikan. Ketik code berikut. <nav class="navbar navbar-inverse navbar-fixed-top"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#" rel="nofollow">WebSiteName</a> </div> <div> <ul class="nav navbar-nav"> <li class="active"><a href="#" rel="nofollow">Home</a></li> <li><a href="#" rel="nofollow">Page 1</a></li> <li><a href="#" rel="nofollow">Page 2</a></li> <li><a href="#" rel="nofollow">Page 3</a></li> </ul> </div> </div> </nav><br /> <br /> Dan coba class .navbar-fixed-buttom <nav class="navbar navbar-inverse navbar-fixed-bottom"> <div class="container-fluid"> 47<br /> <br /> Ebook bootstrap bahasa indonesia | www.bungloon.com<br /> <br /> <div class="navbar-header"> <a class="navbar-brand" href="#" rel="nofollow">WebSiteName</a> </div> <div> <ul class="nav navbar-nav"> <li class="active"><a href="#" rel="nofollow">Home</a></li> <li><a href="#" rel="nofollow">Page 1</a></li> <li><a href="#" rel="nofollow">Page 2</a></li> <li><a href="#" rel="nofollow">Page 3</a></li> </ul> </div> </div> </nav><br /> <br /> NAVBAR DENGAN DROPDOWN MENU Bagaimana kalau kita ingin dropdown menu di menu navbar kita ? Code nya seperti ini. <nav class="navbar navbar-inverse"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#" rel="nofollow">WebSiteName</a> </div> <div> <ul class="nav navbar-nav"> <li class="active"><a href="#" rel="nofollow">Home</a></li> <li class="dropdown"> <a class="dropdown-toggle" datatoggle="dropdown" href="#" rel="nofollow">Page 1 <span class="caret"></a> <ul class="dropdown-menu"> <li><a href="#" rel="nofollow">Page 1-1</a></li> <li><a href="#" rel="nofollow">Page 1-2</a></li> <li><a href="#" rel="nofollow">Page 1-3</a></li> </ul> </li> <li><a href="#" rel="nofollow">Page 2</a></li> <li><a href="#" rel="nofollow">Page 3</a></li> </ul> </div> </div> </nav><br /> <br /> NAVBAR ALIGNED Bagaimana kalau kita ingin menu di navbar yang kita buat berada di kanan / align kana ? kita cukup memenggil class .bavbar-right . implementasinya begini. 48<br /> <br /> Ebook bootstrap bahasa indonesia | www.bungloon.com<br /> <br /> <nav class="navbar navbar-inverse"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#" rel="nofollow">WebSiteName</a> </div> <div> <ul class="nav navbar-nav"> <li class="active"><a href="#" rel="nofollow">Home</a></li> <li><a href="#" rel="nofollow">Page 1</a></li> <li><a href="#" rel="nofollow">Page 2</a></li> <li><a href="#" rel="nofollow">Page 3</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="#" rel="nofollow"><span class="glyphicon glyphiconuser"> Sign Up</a></li> <li><a href="#" rel="nofollow"><span class="glyphicon glyphicon-login">Login</a></li> </ul> </div> </div> </nav><br /> <br /> Perhatikan class .navbar-right di atas. Bagaimana ? keliatan ? mengerti ? jika tidak , lihat dan pahami kode kode nya.<br /> <br /> COLLAPSING NAVBAR MENU Apa itu collapsing navbar menu ? collapsing navbar menu tidak berpengaruh jika di buka di device yang berosolusi besar seperti laptop, notebook dsb, namun akan terlihat ketika di buka di device yang berosulusi kecil atau screen nya kecil seperti handphone dsb. Contoh nya ketika di buka dengan layar kecil akan seperti ini.<br /> <br /> Sebelum di klik<br /> <br /> 49<br /> <br /> Ebook bootstrap bahasa indonesia | www.bungloon.com<br /> <br /> Setelah di klik<br /> <br /> Terlihat bukan ? jadi hal ini di gunakan ketika ingin membuat website yang responsive. Contoh dan implementasinya begini. <nav class="navbar navbar-inverse"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" datatoggle="collapse" data-target="#myNavbar"> <span class="icon-bar"> <span class="icon-bar"> <span class="icon-bar"> </button> <a class="navbar-brand" href="#" rel="nofollow">WebSiteName</a> </div> <div class="collapse navbar-collapse" id="myNavbar"> <ul class="nav navbar-nav"> <li class="active"><a href="#" rel="nofollow">Home</a></li> <li><a href="#" rel="nofollow">Page 1</a></li> <li><a href="#" rel="nofollow">Page 2</a></li> 50<br /> <br /> Ebook bootstrap bahasa indonesia | www.bungloon.com<br /> <br /> <li><a href="#" rel="nofollow">Page 3</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="#" rel="nofollow"><span class="glyphicon glyphiconuser"> Sign Up</a></li> <li><a href="#" rel="nofollow"><span class="glyphicon glyphicon-login">Login</a></li> </ul> </div> </div> </nav><br /> <br /> Cukup mudah. . .<br /> <br /> Oke. . akhir nya kita sudah selesai. Semoga bermanfaat buat agan agan yang sedang belajar web development ( desain website ). untuk update update nya akan saya posting di blog saya di www.bungloon.com silahkan pantau terus atau subscribe disana. Ebook ini sangat sangat jauh dari kata sempurna, saya berharap jika ada kesalahan dalam penulisan ataupun script script nya mohon di maklumi dan di harap melaporkan ke saya untuk di perbaiki. Mohon maaf jika ada kesalahan kata yang kurang berkenan dihati sahabat. Jika ada pertanyaan silahkan kontak saya melalui email atau facebook saya. Email : <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="93fbf2fdfdf2fdbdf2fef1fae0fae6e0d3f4fef2faffbdf0fcfe">[email protected]</a> Facebook : www.facebook.com/hfatir1<br /> <br /> SEKIAN DAN TERIMA KASIH<br /> <br /> 51<br /> <br /> Ebook bootstrap bahasa indonesia | www.bungloon.com<br /> <br /> </li></ul></ul></div> </textarea></ul></div> </tr></table></table></table></ol></ul></kbd></kbd></code></code></dl></blockquote></blockquote></abbr></p></h6></h2></div> </div> </div> </div> </div> <div class="modal fade" id="report" tabindex="-1" role="dialog" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <form role="form" method="post" action="https://adoc.pub/report/tutorial-framework-bootstrap-bahasa-indonesia" style="border:none"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Report "TUTORIAL FRAMEWORK BOOTSTRAP BAHASA INDONESIA"</h4> </div> <div class="modal-body"> <div class="form-group"> <label>Your name</label> <input type="text" name="name" required="required" class="form-control" /> </div> <div class="form-group"> <label>Email</label> <input type="email" name="email" required="required" class="form-control" /> </div> <div class="form-group"> <label>Reason</label> <select name="reason" required="required" class="form-control"> <option value>-Select Reason-</option> <option value="pornographic" selected="selected">Pornographic</option> <option value="defamatory">Defamatory</option> <option value="illegal">Illegal/Unlawful</option> <option value="spam">Spam</option> <option value="others">Other Terms Of Service Violation</option> <option value="copyright">File a copyright complaint</option> </select> </div> <div class="form-group"> <label>Description</label> <textarea name="description" required="required" rows="3" class="form-control" style="border:1px solid #cccccc"></textarea> </div> <div class="form-group"> <div style="display:inline-block"> <div class="g-recaptcha" data-sitekey="6LcEnMcZAAAAAFHzKKgaE-Qh57XzUTzpfRElD4dP"></div> </div> </div> <script data-cfasync="false"></script><script src="https://www.google.com/recaptcha/api.js"></script> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="submit" class="btn btn-primary">Send</button> </div> </form> </div> </div> </div> <script> $(document).ready(function () { var inner_height = $(window).innerHeight() - 250; $('#pdfviewer').css({"height": inner_height + "px"}); }); </script> <footer class="footer" style="margin-top:60px"> <div class="container-fluid"> Copyright © 2022 ADOC.PUB. All rights reserved. <div class="pull-right"> <span><a href="https://adoc.pub/about">About Us</a></span> | <span><a href="https://adoc.pub/privacy">Privacy Policy</a></span> | <span><a href="https://adoc.pub/term">Terms of Service</a></span> | <span><a href="https://adoc.pub/copyright">Copyright</a></span> | <span><a href="https://adoc.pub/contact">Contact Us</a></span> | <span><a href="https://adoc.pub/cookie_policy">Cookie Policy</a></span> </div> </div> </footer> <div class="modal fade" id="login" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <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" on="tap:login.close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="add-note-label">Sign In</h4> </div> <div class="modal-body"> <form action="https://adoc.pub/login" method="post"> <div class="form-group"> <label class="sr-only" for="email">Email</label> <input class="form-input form-control" type="text" name="email" id="email" value placeholder="Email" /> </div> <div class="form-group"> <label class="sr-only" for="password">Password</label> <input class="form-input form-control" type="password" name="password" id="password" value placeholder="Password" /> </div> <div class="form-group"> <div class="checkbox"> <label class="form-checkbox"> <input type="checkbox" name="remember" value="1" /> <i class="form-icon"></i> Remember me </label> <label class="pull-right"><a href="https://adoc.pub/forgot">Forgot password?</a></label> </div> </div> <button class="btn btn-primary btn-block" type="submit">Sign In</button> </form> </div> </div> </div> </div> <script async src="https://www.googletagmanager.com/gtag/js?id=UA-177279549-1"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-177279549-1'); </script> <script src="https://adoc.pub/assets/js/jquery-ui.min.js"></script> <link rel="stylesheet" href="https://adoc.pub/assets/css/jquery-ui.css" /> <script> $(function () { $("#document_search").autocomplete({ source: function (request, response) { $.ajax({ url: "https://adoc.pub/suggest", dataType: "json", data: { term: request.term }, success: function (data) { response(data); } }); }, autoFill: true, select: function( event, ui ) { $(this).val(ui.item.value); $(this).parents("form").submit(); } }); }); </script> <div id="ADOCPUB_cookie_box" style="z-index:99999;border-top:1px solid #fefefe;background:#FFC107;width:100%;position:fixed;padding:5px 15px;text-align:center;left:0;bottom:0"> Our partners will collect data and use cookies for ad personalization and measurement. <a href="https://adoc.pub/cookie_policy" target="_blank">Learn how we and our ad partner Google, collect and use data</a>. <a href="#" class="btn btn-success" onclick="accept_ADOCPUB_cookie_box();return false;">Agree & close</a> </div> <script> function accept_ADOCPUB_cookie_box() { document.cookie = "ADOCPUB_cookie_box_viewed=1;max-age=15768000;path=/"; hide_ADOCPUB_cookie_box(); } function hide_ADOCPUB_cookie_box() { var cb = document.getElementById('ADOCPUB_cookie_box'); if (cb) { cb.parentElement.removeChild(cb); } } (function () { var ADOCPUB_cookie_box_viewed = (function (name) { var matches = document.cookie.match(new RegExp("(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)")); return matches ? decodeURIComponent(matches[1]) : undefined; })('ADOCPUB_cookie_box_viewed'); if (ADOCPUB_cookie_box_viewed) { hide_ADOCPUB_cookie_box(); } })(); </script> </body> </html> </head></html></div></div></div></div></div></div></div></div></body></html></head></html></div></div></div></div></div></div></div></div></body></html></head></html></div></div></div></div></div></div></div></div></head></html></div></DIV></head></html></div></div> </p><div class='paramage'></div> <div class="contenBreak"></div> <h3 id="apa-itu-bootstrap-5">Apa itu Bootstrap 5?</h3> <div class="blockAnswer_acceptedAnswer"><span class="FCUp0c rQMQod">Bootstrap</span> adalah sebuah framework yang paling populer digunakan untuk membuat sebuah website. <span class="FCUp0c rQMQod">Bootstrap</span> membuat front-end developer dapat membuat website dengan cepat, fokus pada responsive mobile, dan membuat website menjadi lebih interaktif tanpa membuat banyak CSS dan JavaScript dari nol.</div> <h3 id="apakah-kelebihan-dari-bootstrap-5">Apakah kelebihan dari bootstrap 5?</h3> <div class="blockAnswer_acceptedAnswer"><span class="FCUp0c rQMQod">Bootstrap 5</span> adalah versi terbaru dari salah satu front-end framework terbaik yang cepat dan ringan. untuk membantu proses pengembangan website. Dengan <span class="FCUp0c rQMQod">Bootstrap</span>, Anda tidak perlu menulis kode CSS yang panjang, karena Anda bisa langsung menggunakan semua elemen yang disediakan <span class="FCUp0c rQMQod">Bootstrap</span>.</div> <h3 id="mengapa-menggunakan-bootstrap">Mengapa menggunakan bootstrap?</h3> <div class="blockAnswer_acceptedAnswer">Tujuan dan fungsi <span class="FCUp0c rQMQod">Bootstrap</span> adalah untuk <span class="FCUp0c rQMQod">membuat</span> website responsive dan mobile-first. Jadi, semua elemen antarmuka website dipastikan bisa bekerja secara optimal di semua ukuran layar, baik desktop maupun perangkat seluler.</div> <h3 id="apa-itu-file-bootstrap">Apa itu file bootstrap?</h3> <div class="blockAnswer_acceptedAnswer"><span class="FCUp0c rQMQod">Bootstrap</span> merupakan framework HTML, CSS, Javascript populer untuk membangun situs web yang responsive. RWD (Responsive Web Design) adalah desain situs yang otomatis akan menyesuaikan diri agar tampil baik di semua perangkat dari ponsel sampai dekstop. <span class="FCUp0c rQMQod">Bootstrap</span> terdiri dari satu set <span class="FCUp0c rQMQod">file</span> css, javascript, dan jquery.</div> </p></div> <div class="readmore_content_exists"><button id="readmore_content"><span class="arrow"><span></span></span>Đọc tiếp</button></div> </td></tr></table> <script async src="/dist/js/lazyhtml.min.js" crossorigin="anonymous"></script> <div class="lazyhtml" data-lazyhtml> <script type="text/lazyhtml"> <div class="youtubeVideo"><h3>Video liên quan</h3> <iframe width="560" height="315" src="https://www.youtube.com/embed/DvfezgoBRzY?controls=0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"allowfullscreen></iframe> </div> </script> </div> <div class="mt-3"> <div class="tags"> <a href="https://lovelyristin.com/tags/kode" class="tag-link">kode</a> <a href="https://lovelyristin.com/tags/bootstrap" class="tag-link">bootstrap</a> <a href="https://lovelyristin.com/tags/Mengapa menggunakan bootstrap?" class="tag-link">Mengapa menggunakan bootstrap?</a> <a href="https://lovelyristin.com/tags/Bootstrap 5 template" class="tag-link">Bootstrap 5 template</a> <a href="https://lovelyristin.com/tags/Navbar Bootstrap 5" class="tag-link">Navbar Bootstrap 5</a> <a href="https://lovelyristin.com/tags/Belajar Bootstrap 3" class="tag-link">Belajar Bootstrap 3</a> </div> </div> <div class="post-tools"> <button data-postid="cara-menggunakan-tutorial-bootstrap-5-pdf" class="btn btn-answerModalBox"><img class="mr-1" alt="Cara menggunakan tutorial bootstrap 5 pdf" src="/dist/images/svg/messages_16.svg">Reply</button> <button data-postid="cara-menggunakan-tutorial-bootstrap-5-pdf" data-vote="up" class="btn btn-doVote"><img class="mr-1" alt="Cara menggunakan tutorial bootstrap 5 pdf" src="/dist/images/svg/face-smile_16.svg">9</button> <button data-postid="cara-menggunakan-tutorial-bootstrap-5-pdf" data-vote="down" class="btn btn-doVote"><img class="mr-1" alt="Cara menggunakan tutorial bootstrap 5 pdf" src="/dist/images/svg/poo_16.svg">0</button> <button class="btn"><img class="mr-1" alt="Cara menggunakan tutorial bootstrap 5 pdf" src="/dist/images/svg/facebook_16.svg"> Chia sẻ</button> </div> </div><!-- end question-post-body --> </div><!-- end question-post-body-wrap --> </div><!-- end question --> <div id="answers_cara-menggunakan-tutorial-bootstrap-5-pdf" class="answers"> </div><!-- end answer-wrap --> <div class="entryFooter"> <div class="footerLinkAds"></div> <div class="footerRelated"><div class="postRelatedWidget"> <h2>Bài Viết Liên Quan</h2> <div class="questions-snippet layoutNews border-top border-top-gray"> <div class="max-width:840px"> <ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="-fb-44+c1-1p-ns" data-ad-client="ca-pub-4987931798153631" data-ad-slot="7655066491"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <div class="media media-card rounded-0 shadow-none mb-0 bg-transparent py-4 px-0 border-bottom border-bottom-gray"> <div class="media-image"> <a href="/cara-menggunakan-save-image-temporary-python"><img src="/dist/images/waiting.svg" width="200px" height="100px" data-orgimg="https://ap.cdnki.com/r_cara-menggunakan-save-image-temporary-python---97e9e331fb733b17e258042cee1da276.webp" alt="Cara menggunakan save image temporary python"></a> </div> <div class="media-body"> <h5 class="mb-2 fw-medium"><a href="/cara-menggunakan-save-image-temporary-python">Cara menggunakan save image temporary python</a></h5> <p class="mb-2 truncate lh-20 fs-15"></p> <div class="media media-card questionTags user-media px-0 border-bottom-0 pb-0"> <div class="tags"> <a href="/tags/kode" class="tag-link">kode</a> <a href="/tags/python" class="tag-link">python</a> </div> </div> </div> </div><!-- end media --> <div class="media media-card rounded-0 shadow-none mb-0 bg-transparent py-4 px-0 border-bottom border-bottom-gray"> <div class="media-image"> <a href="/ekstensi-kode-studio-visual-html-css"><img src="/dist/images/waiting.svg" width="200px" height="100px" data-orgimg="https://ap.cdnki.com/r_ekstensi-kode-studio-visual-html-css---4504b9c86e510924348c86f384d9f5b6.webp" alt="Ekstensi kode studio visual html css"></a> </div> <div class="media-body"> <h5 class="mb-2 fw-medium"><a href="/ekstensi-kode-studio-visual-html-css">Ekstensi kode studio visual html css</a></h5> <p class="mb-2 truncate lh-20 fs-15"></p> <div class="media media-card questionTags user-media px-0 border-bottom-0 pb-0"> <div class="tags"> <a href="/tags/kode" class="tag-link">kode</a> <a href="/tags/html" class="tag-link">html</a> </div> </div> </div> </div><!-- end media --> <div class="media media-card rounded-0 shadow-none mb-0 bg-transparent py-4 px-0 border-bottom border-bottom-gray"> <div class="media-image"> <a href="/https-notfound-php"><img src="/dist/images/waiting.svg" width="200px" height="100px" data-orgimg="https://ap.cdnki.com/r_https-notfound-php---ac8a05b2180c7bf6bc91070e194a2c72.webp" alt="Https notfound PHP"></a> </div> <div class="media-body"> <h5 class="mb-2 fw-medium"><a href="/https-notfound-php">Https notfound PHP</a></h5> <p class="mb-2 truncate lh-20 fs-15"></p> <div class="media media-card questionTags user-media px-0 border-bottom-0 pb-0"> <div class="tags"> </div> </div> </div> </div><!-- end media --> <div class="media media-card rounded-0 shadow-none mb-0 bg-transparent py-4 px-0 border-bottom border-bottom-gray"> <div class="media-image"> <a href="/cara-menggunakan-integer-to-date-python"><img src="/dist/images/waiting.svg" width="200px" height="100px" data-orgimg="https://ap.cdnki.com/r_cara-menggunakan-integer-to-date-python---069902985eee2d1e54ad51c6f9361b3e.webp" alt="Cara menggunakan integer to date python"></a> </div> <div class="media-body"> <h5 class="mb-2 fw-medium"><a href="/cara-menggunakan-integer-to-date-python">Cara menggunakan integer to date python</a></h5> <p class="mb-2 truncate lh-20 fs-15"></p> <div class="media media-card questionTags user-media px-0 border-bottom-0 pb-0"> <div class="tags"> <a href="/tags/kode" class="tag-link">kode</a> <a href="/tags/python" class="tag-link">python</a> </div> </div> </div> </div><!-- end media --> <div class="media media-card rounded-0 shadow-none mb-0 bg-transparent py-4 px-0 border-bottom border-bottom-gray"> <div class="media-image"> <a href="/python-mengganti-karakter-dalam-file-teks"><img src="/dist/images/waiting.svg" width="200px" height="100px" data-orgimg="https://ap.cdnki.com/r_python-mengganti-karakter-dalam-file-teks---3ba7897bb176e8a6616e0eca5a02805f.webp" alt="Python mengganti karakter dalam file teks"></a> </div> <div class="media-body"> <h5 class="mb-2 fw-medium"><a href="/python-mengganti-karakter-dalam-file-teks">Python mengganti karakter dalam file teks</a></h5> <p class="mb-2 truncate lh-20 fs-15"></p> <div class="media media-card questionTags user-media px-0 border-bottom-0 pb-0"> <div class="tags"> <a href="/tags/kode" class="tag-link">kode</a> <a href="/tags/python" class="tag-link">python</a> </div> </div> </div> </div><!-- end media --> <div class="media media-card rounded-0 shadow-none mb-0 bg-transparent py-4 px-0 border-bottom border-bottom-gray"> <div class="media-image"> <a href="/cara-mengecek-nomor-npwp-yang-hilang"><img src="/dist/images/waiting.svg" width="200px" height="100px" data-orgimg="https://ap.cdnki.com/r_cara-mengecek-nomor-npwp-yang-hilang---07291dd6fb1faec4233a811a3449c0ab.webp" alt="Cara mengecek nomor npwp yang hilang"></a> </div> <div class="media-body"> <h5 class="mb-2 fw-medium"><a href="/cara-mengecek-nomor-npwp-yang-hilang">Cara mengecek nomor npwp yang hilang</a></h5> <p class="mb-2 truncate lh-20 fs-15"></p> <div class="media media-card questionTags user-media px-0 border-bottom-0 pb-0"> <div class="tags"> </div> </div> </div> </div><!-- end media --> <div class="media media-card rounded-0 shadow-none mb-0 bg-transparent py-4 px-0 border-bottom border-bottom-gray"> <div class="media-image"> <a href="/bagaimana-anda-membuat-diagram-di-mysql"><img src="/dist/images/waiting.svg" width="200px" height="100px" data-orgimg="https://ap.cdnki.com/r_bagaimana-anda-membuat-diagram-di-mysql---5b69c5fb90ffb8fe428d9196d13f49d1.webp" alt="Bagaimana Anda membuat diagram di mysql?"></a> </div> <div class="media-body"> <h5 class="mb-2 fw-medium"><a href="/bagaimana-anda-membuat-diagram-di-mysql">Bagaimana Anda membuat diagram di mysql?</a></h5> <p class="mb-2 truncate lh-20 fs-15"></p> <div class="media media-card questionTags user-media px-0 border-bottom-0 pb-0"> <div class="tags"> <a href="/tags/kode" class="tag-link">kode</a> <a href="/tags/mysql" class="tag-link">mysql</a> </div> </div> </div> </div><!-- end media --> <div class="media media-card rounded-0 shadow-none mb-0 bg-transparent py-4 px-0 border-bottom border-bottom-gray"> <div class="media-image"> <a href="/cara-menggunakan-contoh-perulangan-while-php"><img src="/dist/images/waiting.svg" width="200px" height="100px" data-orgimg="https://ap.cdnki.com/r_cara-menggunakan-contoh-perulangan-while-php---38636c5c615e076e722429be06ff6296.webp" alt="Cara menggunakan contoh perulangan while php"></a> </div> <div class="media-body"> <h5 class="mb-2 fw-medium"><a href="/cara-menggunakan-contoh-perulangan-while-php">Cara menggunakan contoh perulangan while php</a></h5> <p class="mb-2 truncate lh-20 fs-15"></p> <div class="media media-card questionTags user-media px-0 border-bottom-0 pb-0"> <div class="tags"> <a href="/tags/kode" class="tag-link">kode</a> <a href="/tags/php" class="tag-link">php</a> </div> </div> </div> </div><!-- end media --> <div class="media media-card rounded-0 shadow-none mb-0 bg-transparent py-4 px-0 border-bottom border-bottom-gray"> <div class="media-image"> <a href="/marksheet-code-in-javascript"><img src="/dist/images/waiting.svg" width="200px" height="100px" data-orgimg="https://ap.cdnki.com/r_marksheet-code-in-javascript---a3d7aca0ada3292597fd1017021c636d.webp" alt="Marksheet code in JavaScript"></a> </div> <div class="media-body"> <h5 class="mb-2 fw-medium"><a href="/marksheet-code-in-javascript">Marksheet code in JavaScript</a></h5> <p class="mb-2 truncate lh-20 fs-15"></p> <div class="media media-card questionTags user-media px-0 border-bottom-0 pb-0"> <div class="tags"> </div> </div> </div> </div><!-- end media --> <div class="media media-card rounded-0 shadow-none mb-0 bg-transparent py-4 px-0 border-bottom border-bottom-gray"> <div class="media-image"> <a href="/cara-menggunakan-perintah-dasar-python"><img src="/dist/images/waiting.svg" width="200px" height="100px" data-orgimg="https://ap.cdnki.com/r_cara-menggunakan-perintah-dasar-python---66b7b359890b165b68a5a0efdae62ec4.webp" alt="Cara menggunakan perintah dasar python"></a> </div> <div class="media-body"> <h5 class="mb-2 fw-medium"><a href="/cara-menggunakan-perintah-dasar-python">Cara menggunakan perintah dasar python</a></h5> <p class="mb-2 truncate lh-20 fs-15"></p> <div class="media media-card questionTags user-media px-0 border-bottom-0 pb-0"> <div class="tags"> <a href="/tags/kode" class="tag-link">kode</a> <a href="/tags/python" class="tag-link">python</a> </div> </div> </div> </div><!-- end media --> <div class="max-width:840px"> <ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="-fb-44+c1-1p-ns" data-ad-client="ca-pub-4987931798153631" data-ad-slot="7655066491"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <div class="media media-card rounded-0 shadow-none mb-0 bg-transparent py-4 px-0 border-bottom border-bottom-gray"> <div class="media-image"> <a href="/cara-menggunakan-baris-ungroup-di-excel"><img src="/dist/images/waiting.svg" width="200px" height="100px" data-orgimg="https://ap.cdnki.com/r_cara-menggunakan-baris-ungroup-di-excel---b10aaedb2e3b7350208f6c72a1b03b50.webp" alt="Cara menggunakan baris ungroup di excel"></a> </div> <div class="media-body"> <h5 class="mb-2 fw-medium"><a href="/cara-menggunakan-baris-ungroup-di-excel">Cara menggunakan baris ungroup di excel</a></h5> <p class="mb-2 truncate lh-20 fs-15"></p> <div class="media media-card questionTags user-media px-0 border-bottom-0 pb-0"> <div class="tags"> <a href="/tags/kode" class="tag-link">kode</a> <a href="/tags/excel" class="tag-link">excel</a> </div> </div> </div> </div><!-- end media --> <div class="media media-card rounded-0 shadow-none mb-0 bg-transparent py-4 px-0 border-bottom border-bottom-gray"> <div class="media-image"> <a href="/apakah-bisa-transfer-dari-ovo-ke-gopay"><img src="/dist/images/waiting.svg" width="200px" height="100px" data-orgimg="https://ap.cdnki.com/r_apakah-bisa-transfer-dari-ovo-ke-gopay---b1260b1dd26e08454f5588419c9add89.webp" alt="Apakah bisa transfer dari OVO ke GoPay?"></a> </div> <div class="media-body"> <h5 class="mb-2 fw-medium"><a href="/apakah-bisa-transfer-dari-ovo-ke-gopay">Apakah bisa transfer dari OVO ke GoPay?</a></h5> <p class="mb-2 truncate lh-20 fs-15"></p> <div class="media media-card questionTags user-media px-0 border-bottom-0 pb-0"> <div class="tags"> </div> </div> </div> </div><!-- end media --> <div class="media media-card rounded-0 shadow-none mb-0 bg-transparent py-4 px-0 border-bottom border-bottom-gray"> <div class="media-image"> <a href="/cara-menghapus-squarespace-javascript-yang-tidak-terpakai"><img src="/dist/images/waiting.svg" width="200px" height="100px" data-orgimg="https://ap.cdnki.com/r_cara-menghapus-squarespace-javascript-yang-tidak-terpakai---11331bcb2d1afc447d7b9a7c619007a0.webp" alt="Cara menghapus squarespace javascript yang tidak terpakai"></a> </div> <div class="media-body"> <h5 class="mb-2 fw-medium"><a href="/cara-menghapus-squarespace-javascript-yang-tidak-terpakai">Cara menghapus squarespace javascript yang tidak terpakai</a></h5> <p class="mb-2 truncate lh-20 fs-15"></p> <div class="media media-card questionTags user-media px-0 border-bottom-0 pb-0"> <div class="tags"> <a href="/tags/kode" class="tag-link">kode</a> <a href="/tags/javascript" class="tag-link">javascript</a> </div> </div> </div> </div><!-- end media --> <div class="media media-card rounded-0 shadow-none mb-0 bg-transparent py-4 px-0 border-bottom border-bottom-gray"> <div class="media-image"> <a href="/bagaimana-anda-mengarahkan-ke-halaman-lain-di-html-setelah-mengirimkan"><img src="/dist/images/waiting.svg" width="200px" height="100px" data-orgimg="https://ap.cdnki.com/r_bagaimana-anda-mengarahkan-ke-halaman-lain-di-html-setelah-mengirimkan---ca36615c05b9f7cc959585b36a3e2aa8.webp" alt="Bagaimana Anda mengarahkan ke halaman lain di html setelah mengirimkan?"></a> </div> <div class="media-body"> <h5 class="mb-2 fw-medium"><a href="/bagaimana-anda-mengarahkan-ke-halaman-lain-di-html-setelah-mengirimkan">Bagaimana Anda mengarahkan ke halaman lain di html setelah mengirimkan?</a></h5> <p class="mb-2 truncate lh-20 fs-15"></p> <div class="media media-card questionTags user-media px-0 border-bottom-0 pb-0"> <div class="tags"> <a href="/tags/kode" class="tag-link">kode</a> <a href="/tags/html" class="tag-link">html</a> </div> </div> </div> </div><!-- end media --> <div class="media media-card rounded-0 shadow-none mb-0 bg-transparent py-4 px-0 border-bottom border-bottom-gray"> <div class="media-image"> <a href="/scrape-website-to-excel"><img src="/dist/images/waiting.svg" width="200px" height="100px" data-orgimg="https://ap.cdnki.com/r_scrape-website-to-excel---6ca4b4f38457e2688ec3ebde50891646.webp" alt="Scrape website to Excel"></a> </div> <div class="media-body"> <h5 class="mb-2 fw-medium"><a href="/scrape-website-to-excel">Scrape website to Excel</a></h5> <p class="mb-2 truncate lh-20 fs-15"></p> <div class="media media-card questionTags user-media px-0 border-bottom-0 pb-0"> <div class="tags"> </div> </div> </div> </div><!-- end media --> <div class="media media-card rounded-0 shadow-none mb-0 bg-transparent py-4 px-0 border-bottom border-bottom-gray"> <div class="media-image"> <a href="/cara-menggunakan-php-maxinputvars-not-updating"><img src="/dist/images/waiting.svg" width="200px" height="100px" data-orgimg="https://ap.cdnki.com/r_cara-menggunakan-php-max_input_vars-not-updating---5c19b1213c5ffcd1f97bab464f067680.webp" alt="Cara menggunakan php max_input_vars not updating"></a> </div> <div class="media-body"> <h5 class="mb-2 fw-medium"><a href="/cara-menggunakan-php-maxinputvars-not-updating">Cara menggunakan php max_input_vars not updating</a></h5> <p class="mb-2 truncate lh-20 fs-15"></p> <div class="media media-card questionTags user-media px-0 border-bottom-0 pb-0"> <div class="tags"> <a href="/tags/kode" class="tag-link">kode</a> <a href="/tags/php" class="tag-link">php</a> </div> </div> </div> </div><!-- end media --> <div class="media media-card rounded-0 shadow-none mb-0 bg-transparent py-4 px-0 border-bottom border-bottom-gray"> <div class="media-image"> <a href="/cara-menggunakan-website-forum-php"><img src="/dist/images/waiting.svg" width="200px" height="100px" data-orgimg="https://ap.cdnki.com/r_cara-menggunakan-website-forum-php---1f5e1239a9b21bcd6d64a354ffc344bd.webp" alt="Cara menggunakan website forum php"></a> </div> <div class="media-body"> <h5 class="mb-2 fw-medium"><a href="/cara-menggunakan-website-forum-php">Cara menggunakan website forum php</a></h5> <p class="mb-2 truncate lh-20 fs-15"></p> <div class="media media-card questionTags user-media px-0 border-bottom-0 pb-0"> <div class="tags"> <a href="/tags/kode" class="tag-link">kode</a> <a href="/tags/php" class="tag-link">php</a> </div> </div> </div> </div><!-- end media --> <div class="media media-card rounded-0 shadow-none mb-0 bg-transparent py-4 px-0 border-bottom border-bottom-gray"> <div class="media-image"> <a href="/cara-aktivasi-kartu-brizzi-di-atm-bri"><img src="/dist/images/waiting.svg" width="200px" height="100px" data-orgimg="https://ap.cdnki.com/r_cara-aktivasi-kartu-brizzi-di-atm-bri---dc26841f105c17ee6faeab0662d4f2a2.webp" alt="Cara aktivasi kartu BRIZZI di ATM BRI"></a> </div> <div class="media-body"> <h5 class="mb-2 fw-medium"><a href="/cara-aktivasi-kartu-brizzi-di-atm-bri">Cara aktivasi kartu BRIZZI di ATM BRI</a></h5> <p class="mb-2 truncate lh-20 fs-15"></p> <div class="media media-card questionTags user-media px-0 border-bottom-0 pb-0"> <div class="tags"> </div> </div> </div> </div><!-- end media --> <div class="media media-card rounded-0 shadow-none mb-0 bg-transparent py-4 px-0 border-bottom border-bottom-gray"> <div class="media-image"> <a href="/cara-menggunakan-const-javascript-adalah"><img src="/dist/images/waiting.svg" width="200px" height="100px" data-orgimg="https://ap.cdnki.com/r_cara-menggunakan-const-javascript-adalah---93ab1a45eb6e7b220ec56ea0d0f86fc1.webp" alt="Cara menggunakan const javascript adalah"></a> </div> <div class="media-body"> <h5 class="mb-2 fw-medium"><a href="/cara-menggunakan-const-javascript-adalah">Cara menggunakan const javascript adalah</a></h5> <p class="mb-2 truncate lh-20 fs-15"></p> <div class="media media-card questionTags user-media px-0 border-bottom-0 pb-0"> <div class="tags"> <a href="/tags/kode" class="tag-link">kode</a> <a href="/tags/javascript" class="tag-link">javascript</a> </div> </div> </div> </div><!-- end media --> <div class="media media-card rounded-0 shadow-none mb-0 bg-transparent py-4 px-0 border-bottom border-bottom-gray"> <div class="media-image"> <a href="/cara-menggunakan-mysql-aplikasi-apa"><img src="/dist/images/waiting.svg" width="200px" height="100px" data-orgimg="https://ap.cdnki.com/r_cara-menggunakan-mysql-aplikasi-apa---ae26930fa88b62de5eae83b04685fe68.webp" alt="Cara menggunakan mysql aplikasi apa?"></a> </div> <div class="media-body"> <h5 class="mb-2 fw-medium"><a href="/cara-menggunakan-mysql-aplikasi-apa">Cara menggunakan mysql aplikasi apa?</a></h5> <p class="mb-2 truncate lh-20 fs-15"></p> <div class="media media-card questionTags user-media px-0 border-bottom-0 pb-0"> <div class="tags"> <a href="/tags/kode" class="tag-link">kode</a> <a href="/tags/mysql" class="tag-link">mysql</a> </div> </div> </div> </div><!-- end media --> </div> </div></div> </div> </div> </div><!-- end question-main-bar --> </div><!-- end col-lg-9 --> <div class="postContentRight"> <div class="sidebar"> <div class="card card-item"> <div class="card-body"> <h3 class="fs-17 pb-3">Có thể bạn quan tâm</h3> <div class="divider"><span></span></div> <div class="sidebar-questions pt-3"> <div class="media media-card media--card media--card-2"> <div class="media-body"> <h5><a href="https://lovelyristin.com/google-sheets-difference-between-two-columns">Google Sheets difference between two columns</a></h5> <small class="meta"> <span class="pr-1">1 năm trước</span> <span class="pr-1">. bởi</span> <a href="https://lovelyristin.com/author/RepublicanNetworking" class="author">RepublicanNetworking</a> </small> </div> </div><!-- end media --> <div class="media media-card media--card media--card-2"> <div class="media-body"> <h5><a href="https://lovelyristin.com/cara-mengunduh-kamus-dengan-python">Cara mengunduh kamus dengan python</a></h5> <small class="meta"> <span class="pr-1">1 năm trước</span> <span class="pr-1">. bởi</span> <a href="https://lovelyristin.com/author/ChunkySending" class="author">ChunkySending</a> </small> </div> </div><!-- end media --> <div class="media media-card media--card media--card-2"> <div class="media-body"> <h5><a href="https://lovelyristin.com/apa-perbedaan-list-dan-array-pada-python">Apa perbedaan list dan array pada python?</a></h5> <small class="meta"> <span class="pr-1">1 năm trước</span> <span class="pr-1">. bởi</span> <a href="https://lovelyristin.com/author/DisastrousMaple" class="author">DisastrousMaple</a> </small> </div> </div><!-- end media --> <div class="media media-card media--card media--card-2"> <div class="media-body"> <h5><a href="https://lovelyristin.com/how-do-i-push-data-from-one-excel-workbook-to-another">How do I push data from one Excel workbook to another?</a></h5> <small class="meta"> <span class="pr-1">1 năm trước</span> <span class="pr-1">. bởi</span> <a href="https://lovelyristin.com/author/SorrowfulCountryman" class="author">SorrowfulCountryman</a> </small> </div> </div><!-- end media --> <div class="media media-card media--card media--card-2"> <div class="media-body"> <h5><a href="https://lovelyristin.com/cara-menggunakan-raise-vs-return-python">Cara menggunakan raise vs return python</a></h5> <small class="meta"> <span class="pr-1">1 năm trước</span> <span class="pr-1">. bởi</span> <a href="https://lovelyristin.com/author/SatisfyingInstruction" class="author">SatisfyingInstruction</a> </small> </div> </div><!-- end media --> <div class="media media-card media--card media--card-2"> <div class="media-body"> <h5><a href="https://lovelyristin.com/cara-konfigurasi-mysql-di-xampp">Cara konfigurasi mysql di xampp</a></h5> <small class="meta"> <span class="pr-1">1 năm trước</span> <span class="pr-1">. bởi</span> <a href="https://lovelyristin.com/author/BindingMortality" class="author">BindingMortality</a> </small> </div> </div><!-- end media --> <div class="media media-card media--card media--card-2"> <div class="media-body"> <h5><a href="https://lovelyristin.com/spreadsheet-odoo">Spreadsheet odoo</a></h5> <small class="meta"> <span class="pr-1">1 năm trước</span> <span class="pr-1">. bởi</span> <a href="https://lovelyristin.com/author/LastingMahogany" class="author">LastingMahogany</a> </small> </div> </div><!-- end media --> <div class="media media-card media--card media--card-2"> <div class="media-body"> <h5><a href="https://lovelyristin.com/cara-mengubah-server-phpmyadmin">Cara mengubah server phpmyadmin</a></h5> <small class="meta"> <span class="pr-1">1 năm trước</span> <span class="pr-1">. bởi</span> <a href="https://lovelyristin.com/author/HandmadeWaitress" class="author">HandmadeWaitress</a> </small> </div> </div><!-- end media --> <div class="media media-card media--card media--card-2"> <div class="media-body"> <h5><a href="https://lovelyristin.com/cara-membuat-paragraf-di-css">Cara membuat paragraf di css</a></h5> <small class="meta"> <span class="pr-1">1 năm trước</span> <span class="pr-1">. bởi</span> <a href="https://lovelyristin.com/author/IndeterminateIndicator" class="author">IndeterminateIndicator</a> </small> </div> </div><!-- end media --> <div class="media media-card media--card media--card-2"> <div class="media-body"> <h5><a href="https://lovelyristin.com/cara-menggunakan-perbedaan-laravel-dan-php">Cara menggunakan perbedaan laravel dan php</a></h5> <small class="meta"> <span class="pr-1">1 năm trước</span> <span class="pr-1">. bởi</span> <a href="https://lovelyristin.com/author/TeemingAesthetics" class="author">TeemingAesthetics</a> </small> </div> </div><!-- end media --> </div><!-- end sidebar-questions --> </div> </div><!-- end card --> <div class="card card-item"> <div class="card-body"> <h3 class="fs-17 pb-3">Xem Nhiều</h3> <div class="divider"><span></span></div> <div class="sidebar-questions pt-3"> </div><!-- end sidebar-questions --> </div> </div><!-- end card --> </div><!-- end sidebar --> </div><!-- end col-lg-3 --> </div><!-- end row --> </div><!-- end container --> </section><!-- end question-area --> <!-- ================================ END QUESTION AREA ================================= --> <script>var questionId ='cara-menggunakan-tutorial-bootstrap-5-pdf'</script> <script>var postTime ='2022-10-13T13:46:09.602Z'</script> <script>var siteDomain ='lovelyristin.com'</script> <script type="text/javascript" src="https://lovelyristin.com/dist/js/pages/comment.js"></script> <!-- ================================ END FOOTER AREA ================================= --> <section class="footer-area pt-80px bg-dark position-relative"> <span class="vertical-bar-shape vertical-bar-shape-1"></span> <span class="vertical-bar-shape vertical-bar-shape-2"></span> <span class="vertical-bar-shape vertical-bar-shape-3"></span> <span class="vertical-bar-shape vertical-bar-shape-4"></span> <div class="container"> <div class="row"> <div class="col-lg-3 responsive-column-half"> <div class="footer-item"> <h3 class="fs-18 fw-bold pb-2 text-white">Chúng tôi</h3> <ul class="generic-list-item generic-list-item-hover-underline pt-3 generic-list-item-white"> <li><a href="/about.html">Giới thiệu</a></li> <li><a href="/contact.html">Liên hệ</a></li> <li><a href="/contact.html">Tuyển dụng</a></li> <li><a href="/contact.html">Quảng cáo</a></li> </ul> </div><!-- end footer-item --> </div><!-- end col-lg-3 --> <div class="col-lg-3 responsive-column-half"> <div class="footer-item"> <h3 class="fs-18 fw-bold pb-2 text-white">Điều khoản</h3> <ul class="generic-list-item generic-list-item-hover-underline pt-3 generic-list-item-white"> <li><a href="/privacy-statement.html">Điều khoản hoạt động</a></li> <li><a href="/terms-and-conditions.html">Điều kiện tham gia</a></li> <li><a href="/privacy-statement.html">Quy định cookie</a></li> </ul> </div><!-- end footer-item --> </div><!-- end col-lg-3 --> <div class="col-lg-3 responsive-column-half"> <div class="footer-item"> <h3 class="fs-18 fw-bold pb-2 text-white">Trợ giúp</h3> <ul class="generic-list-item generic-list-item-hover-underline pt-3 generic-list-item-white"> <li><a href="/contact.html">Hướng dẫn</a></li> <li><a href="/contact.html">Loại bỏ câu hỏi</a></li> <li><a href="/contact.html">Liên hệ</a></li> </ul> </div><!-- end footer-item --> </div><!-- end col-lg-3 --> <div class="col-lg-3 responsive-column-half"> <div class="footer-item"> <h3 class="fs-18 fw-bold pb-2 text-white">Mạng xã hội</h3> <ul class="generic-list-item generic-list-item-hover-underline pt-3 generic-list-item-white"> <li><a href="#"><i class="fab fa-facebook-f mr-1"></i> Facebook</a></li> <li><a href="#"><i class="fab fa-twitter mr-1"></i> Twitter</a></li> <li><a href="#"><i class="fab fa-linkedin mr-1"></i> LinkedIn</a></li> <li><a href="#"><i class="fab fa-instagram mr-1"></i> Instagram</a></li> </ul> </div><!-- end footer-item --> </div><!-- end col-lg-3 --> </div><!-- end row --> </div><!-- end container --> <hr class="border-top-gray my-5"> <div class="container"> <div class="row align-items-center pb-4 copyright-wrap"> <div class="col-6"> <a href="//www.dmca.com/Protection/Status.aspx?ID=33e5dca6-f8c5-4c6f-b8e6-a247229d2953" title="DMCA.com Protection Status" class="dmca-badge"> <img src ="https://images.dmca.com/Badges/dmca_protected_sml_120am.png?ID=33e5dca6-f8c5-4c6f-b8e6-a247229d2953" width="123px" height="21px" alt="DMCA.com Protection Status" /></a> <script src="https://images.dmca.com/Badges/DMCABadgeHelper.min.js"> </script> </div> <!-- end col-lg-6 --><div class="col-6"> <div class="copyright-desc text-right fs-14"> <div>Bản quyền © 2021 <a href="https://lovelyristin.com"></a> Inc.</div> </div> </div><!-- end col-lg-6 --> </div><!-- end row --> </div><!-- end container --> </section><!-- end footer-area --> <!-- ================================ END FOOTER AREA ================================= --><script> $( document ).ready(function() { setTimeout(showMoreButton, 3000); function showMoreButton(){ let minheight = 1000; minheight = parseInt($("#entryContent").innerHeight())/3; $("#entryContent").css('min-height', minheight).css('max-height', minheight).css('overflow', 'hidden'); $("#readmore_content").click(function(){ $("#entryContent").css('min-height', '').css('max-height', '').css('overflow', ''); $(".readmore_content_exists").css('display', 'none'); }) } }); </script> <!-- template js files --> <!-- start back to top --> <div id="back-to-top" data-toggle="tooltip" data-placement="top" title="Lên đầu trang"> <img alt="" src="/dist/images/svg/arrow-up_20.svg"> </div> <!-- end back to top --> <script src="https://lovelyristin.com/dist/js/bootstrap.bundle.min.js"></script> <script src="https://lovelyristin.com/dist/js/moment.js"></script> <script src="https://lovelyristin.com/dist/js/read-more.min.js"></script> <script src="https://lovelyristin.com/dist/js/main.js?v=6"></script> <!-- Google Tag Manager (noscript) --> <script type="text/javascript"> (function(c,l,a,r,i,t,y){ c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)}; t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i; y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y); })(window, document, "clarity", "script", "jxuz46z39u"); </script> </body> </html>