Kami berusaha menyediakan website yang berguna untuk pengetahuan para pembaca, panduan singkat dan sederhana ini semoga menjadi jalan bagi kalian yang mengalami kesulitan dalam membuat blog di dunia maya, kami mengambil sumber dari blog Panduan Blog Online.com seandainya kalian berkenan langsung mengunjungi website tersebut, selamat menikmati!
Bootstrap, framework paling populer di dunia. Fungsi Bootstrap untuk mengembangkan website dengan desain yang responsive dan mobile-first. Hampir setiap website yang tersebar di internet menggunakan Bootstrap sebagai komponennya. Ini membuktikan bahwa Bootstrap dipercaya dan diterima oleh banyak pengembang. Ini adalah salah satu alasan mengapa Anda harus belajar Bootstrap.
Anda pasti tau Twitter –sosial media buatan Jack Dorsey yang sangat terkenal. Twitter menyuguhkan tampilan sederhana bernuansa modern, dan tetap nyaman dilihat. Sosial media ini menjadi awal perkembangan Bootstrap, sebelum tersebar di seluruh dunia.
Tema yang ada di WordPress, Joomla, dan CMS lain kebanyakan menggunakan Bootstrap sebagai framework untuk mengatur tampilannya. Tentunya ini akan membuat tema menjadi lebih menarik dan indah.
Anda pun bisa membuat website yang menarik seperti Twitter dan puluhan situs terkenal lainnya. Artikel ini akan membahas cara menggunakan Bootstrap 4 dengan mudah. Harapannya Anda bisa memulai mengembangkan website yang tak kalah menarik menggunakan Bootstrap.
Baca juga: Download Template Bootstrap Gratis Untuk Website Anda
Bootstrap adalah framework CSS yang dikhususkan untuk pengembangan front-end website. Framework ini mempunyai nama asli Twitter Blueprint. Ada kata ‘Twitter’ karena pada awalnya dikembangkan untuk sosial media Twitter yang sangat terkenal saat ini dengan pengguna hampir 326 juta orang. Sebelum Bootstrap muncul, sudah ada framework lain yang tersedia. Hanya saja tingkat konsistensi dalam proses pengembangan buruk. Selain itu juga butuh biaya perawatan mahal.
Berdasarkan permasalahan ini, akhirnya para pengembang menemukan Bootstrap. Berbeda dengan framework sebelumnya, Bootstrap dikenal konsisten dan lebih sederhana.
Bootstrap adalah salah saatu frameework yang memungkinkan developer dapat mengembangkan website dengan mudah dan cepat. Developer hanya perlu memanggil class tertentu untuk membuat tombol, panel, tabel, pesan peringatan, dan lain sebagainya.
Di bawah ini adalah screenshot dari repositori Bootstrap di GitHub.
Bootstrap terdiri dari beberapa file. File pada Bootstrap berisi kumpulan baris kode tersusun dari CSS dan JavaScript yang berbentuk class. Jadi ketika Anda menggunakan Bootstrap untuk mengembangkan website, membuat satu tombol tidak perlu menyusun beberapa baris kode karena tinggal memanggil salah satu class saja.
Bootstrap sampai dengan saat ini masih memperbarui sistemnya. Tidak hanya berhenti di angka 3, tapi sudah masuk ke versi 4.
Pada versi 4 ini ada beberapa pembaharuan lebih banyak berhubungan dengan tema. Contohnya saja perubahan tampilan styling, warna, fonts, dan lain sebagainya.
Perubahan yang terjadi antara lain:
Bootstrap menyediakan ukuran font global (default). Bootstrap 3 menggunakan ukuran font 14px, sedangkan pada Bootstrap 4 diganti dengan ukuran yang lebih besar, yaitu 16px.
Jadi, ketika menggunakan Bootstrap 3 dan diperbarui menjadi 4, tulisan akan terlihat lebih besar dibandingkan dengan sebelumnya. Jadi ketika beralih dari Bootstrap 3 ke 4, Anda perlu menyesuaikannya lagi ukuran pixel menjadi lebih kecil supaya sesuai dengan ukuran sebelumnya.
Selain itu, font bawaan pun diganti. Bootstrap 4 menggunakan font fallback Helvetica Neue, Arial, dan Sans-Serif menggantikan Bootstrap 3 yang sebelumnya menggunakan font Helvetica Neue, Sans-Serif, Helvetica, dan Arial.
Bootstrap 4 tidak memerlukan lagi col- pada setiap class grid. Ini berbeda dengan Bootstrap 3 yang sebelumnya menggunakan col- di depan, misalnya ketika menggunakan class “col-md-offset-3” untuk membatasi kolom.
Bootstrap 4 menambah satu sistem grid menjadi 5, yaitu col-sm, col-md, col-lg, col-xl, dan col-*. berbeda dengan Bootstrap 3 yang hanya menggunakan 4 sistem grid.
Bootstrap 4 menghilangkan col-xs dan diwakilkan oleh col-sm untuk perangkat super kecil (extra small) atau menggunakan col-* untuk mendefinisikan “semua perangkat” tanpa harus menentukannya.
Jadi kesimpulannya, penggunaan baris kode Bootstrap 4 lebih ringkas dibandingkan dengan Bootstrap 3.
Bootstrap 4 mendukung gaya untuk header atau judul tabel –yang sebelumnya di Bootstrap 3 tidak didukung. Selain mendukung gaya header, Bootstrap 4 juga dapat memberikan warna tabel header menjadi gelap (.thead-dark) atau terang (.thead-light).
Di Bootstrap 4 untuk membuat table responsive langsung di dalam tag <table>. Berbeda dengan Bootstrap 3 yang perlu menambahkan class .table-responsive di dalam tag <div>. Selain itu, di Bootstrap 4 bisa menentukan warna tabel menjadi gelap dengan menggunakan .table-dark.
Cara install Bootstrap ada beberapa opsi pilihan. Anda bisa menginstall Bootstrap dengan composer, bower, atau npm. Selain itu Bootstrap juga dapat diinstall secara offline dan online.
Namun sebelum Anda menerapkan cara menggunakan bootstrap offline, akan lebih baik jika menyiapkan terlebih dahulu project Bootstrap dan ini tergantung dari lingkungan development yang digunakan.
Sebagai contoh, cara install Bootstrap 4 dengan npm dan bower akan lebih cocok ketika Anda ingin mengembangkan website dengan menggunakan NodeJs.
Pada proses instalasi, kebanyakan developers menggunakan cara manual dan offline untuk menambahkan Bootstrap ke dalam project mereka.
Supaya lebih jelas, berikut ini beberapa opsi untuk menambahkan atau cara install Bootstrap 4 di dalam project Anda.
Proses instalasi Bootstrap secara offline ini ini memudahkan Anda dalam proses pengembangan. Website tidak perlu mengambil file (resource) dari website lain, tapi langsung dari penyimpanan utama.
Tambahkan folder baru ke dalam folder root web server Anda. Jika menggunakan Linux, cukup ketik perintah di bawah ini.
| $ mkdir website-bs4 |
Kemudian download Bootstrap dari website resminya.
Setelah proses download selesai, Anda akan mendapatkan file zip dengan beberapa folder di dalamnya.
Di dalam folder ini terdapat beberapa file yang terkumpul ke dalam beberapa assets dan menyediakan beberapa fungsi dan class di dalamnya. File zip ini nantinya perlu Anda ekstrak terlebih dahulu ke dalam folder project supaya dapat digunakan.
Setelah Anda memindahkan file zip tadi ke dalam folder project, ekstrak file tersebut di dalamnya. Anda akan melihat susunan direktori seperti di bawah ini:
| bootstrap/└── dist/ ├── css/ │ ├── bootstrap-grid.css │ ├── bootstrap-grid.css.map │ ├── bootstrap-grid.min.css │ ├── bootstrap-grid.min.css.map │ ├── bootstrap-reboot.css │ ├── bootstrap-reboot.css.map │ ├── bootstrap-reboot.min.css │ ├── bootstrap-reboot.min.css.map │ ├── bootstrap.css │ ├── bootstrap.css.map │ ├── bootstrap.min.css │ └── bootstrap.min.css.map └── js/ ├── bootstrap.bundle.js ├── bootstrap.bundle.js.map ├── bootstrap.bundle.min.js ├── bootstrap.bundle.min.js.map ├── bootstrap.js ├── bootstrap.js.map ├── bootstrap.min.js └── bootstrap.min.js.map |
Supaya Anda bisa menggunakan Bootstrap dan membuat halaman website, buka teks editor dan buat file index.html. Di dalam file index.html isikan beberapa baris kode, tapi jangan lupa untuk memanggil file Bootstrap dan library lainnya.
Sebagai contoh, di bawah ini adalah tampilan sederhana menggunakan Bootstrap dan beberapa library lain.
| <!DOCTYPE html><html lang=”en”><head> <title>Bootstrap Example</title> <meta charset=”utf-8″> <meta name=”viewport” content=”width=device-width, initial-scale=1″> <script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js”></script> <link rel=”stylesheet” href=”css/bootstrap.min.css” /> <link rel=”stylesheet” href=”css/bootstrap.min.css”></head><body> <div class=”jumbotron text-center”> <h1>Halaman Bootstrap Pertama</h1> <p>Resize this responsive page to see the effect!</p> </div> <div class=”container”> <div class=”row”> <div class=”col-sm-4″> <h3>Kolom 1</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit…</p> <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris…</p> </div> <div class=”col-sm-4″> <h3>Kolom 2</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit…</p> <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris…</p> </div> <div class=”col-sm-4″> <h3>Kolom 3</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit…</p> <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris…</p> </div> </div></div></body></html> |
Baris kode di atas tidak hanya memanggil file bootstrap.min.css yang berada di folder css melalui baris:
| <link rel=”stylesheet” href=”css/bootstrap.min.css” /> |
Sampai di sini Anda sudah dapat menggunakan Bootstrap untuk mengembangkan website.
Selain melakukan ekstrak manual ke dalam project, Anda bisa memanggil Bootstrap secara online (menggunakan CDN). Namun ada kekurangannya, ketika Anda memanggil secara online tentunya akan mengurangi tingkat kecepatan website.
| <script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js”></script> |
Perintah di atas akan mengambil file Bootstrap dan menyalinnya ke dalam website supaya dapat digunakan oleh class atau fungsi lain.
Bootstrap memberikan Anda kemudahan untuk membuat tabel tanpa harus mengetikkan berbaris-baris kode program. Anda hanya perlu memanggil class-class yang sudah ada di dalam file Bootstrap.
Untuk menggunakan class dengan kombinasi class lainnya, gunakan class table ditambah dengan class lain. Contoh penggunaannya seperti di bawah ini:
| # untuk membuat tabel stripped <table class=”table table-stripped”> Atau # untuk membuat tabel hovel<table class=”table table-hover”> |
Di dalam file Bootstrap sudah terdapat beberapa class yang didesain untuk kebutuhan pembuatan tabel, antara lain “.table”, “.table-striped”, “.table-bordered”, dan “.table-hover”.
Selain kumpulan class untuk mendesain table, terdapat beberapa class pewarnaan row tabel dan data menggunakan Bootstrap, yaitu “.success”, “.danger”, “.info”. “.warning”, dan “.active”.
Untuk menggunakan class ini, selipkan di antara tag tr, seperti ini:
| … <tr class=”info”> <td>Info</td> <td>Khafid</td> <td>july@example.com</td> </tr>… |
Menggunakan kumpulan class ini, Anda dapat mendesain tabel yang menarik dan mudah dibaca oleh pengunjung website.
Anda dapat menggunakan baris kode di bawah ini untuk mencoba menampilkan tabel dengan Bootstrap di browser.
Anda juga dapat mendesain gambar menggunakan Bootstrap. Membuat gambar yang responsive, berbentuk round, lingkaran, dan juga thumbnail sangat mudah menggunakan framework ini.
Class “.img-responsive”, “.img-rounded”, ”img-circle”, dan ”img-thumbnail” adalah kumpulan class yang digunakan untuk memanipulasi gambar di Bootstrap. Kembangkan desain yang maksimal dan hadirkan gambar menarik di website Anda.
| <img src=”kantor-niagahoster.png” class=”img-responsive” alt=”Logo Panduan Blog Online”> |
| <img src=”kantor-niagahoster.png” class=”rounded” alt=”Logo Panduan Blog Online”> |
| <img src=”kantor-niagahoster.png” class=”rounded-circle” alt=”Logo Panduan Blog Online”> |
| <img src=”kantor-niagahoster.png” class=”img-thumbnail” alt=”Logo Panduan Blog Online”> |
Bootstrap menyediakan class khusus untuk menampilkan alert dengan sangat sederhana dan mudah. Bagaimana tidak, Anda tinggal memanggil sebuah class di Bootstrap menggunakan satu perintah saja.
Supaya tampilan alert dapat muncul, cukup panggil class “alert” untuk mendefinisikan tampilan alert di Bootstrap. Supaya tampilannya lebih bervariasi, tambahkan class lain.
Untuk membuat class ini caranya cukup mudah. Cukup buat tag <div> dengan isi peringatan yang ingin dibuat. Kemudian di tag pembuka <div> buat class alert untuk mendeklarasikan alert, berikut contohnya:
| …<div class=”container”> <h2>Alerts</h2> <div class=”alert alert-success”> <strong>Success!</strong> Alert box ini dapat digunakan untuk mengindikasikan aksi sukses atau positif. </div> <div class=”alert alert-info”> <strong>Info!</strong> Alrt box ini dapat mengindikasikan informasi yang netral. </div> <div class=”alert alert-warning”> <strong>Warning!</strong> Alert box ini dapat untuk mengindikasikan pesan warning dan mungkin butuh perbaikan. </div> <div class=”alert alert-danger”> <strong>Danger!</strong> Alert box ini dapat mengindikasikan pesan penting dan kemungkinan efek buruk. </div></div>… |
Terdapat beberapa pilihan class untuk menampilkan pesan peringatan di Bootstrap, seperti “.alert-success”, “.alert-info”, “.alert-warning”, atau “.alert-danger”. Kumpulan class ini akan membuat tampilan alert Anda lebih bervariasi.
Anda dapat memanfaatkan class ini ketika ada input yang berhasil. Misalnya ketika pengguna selesai mengisikan data dan mengirimkannya.
Untuk menggunakan class ini cukup masukkan kode <div class=”alert alert-success”>.
Class ini dapat Anda gunakan ketika ingin memberikan informasi tambahan kepada pengguna. Misalnya memberikan informasi kegunaan tombol atau fungsi tertentu dan cara penggunaannya.
Untuk menggunakan class ini cukup masukkan kode <div class=”alert alert-info”>.
Class ini dapat Anda gunakan ketika ingin memberikan informasi yang sedikit mendesak atau penting. Misalnya ketika terjadi error pada suatu konfigurasi atau kesalahan pada saat pengisian data.
Untuk menggunakan class ini cukup masukkan kode <div class=”alert alert-warning”>.
Class ini dapat Anda gunakan ketika terjadi suatu yang sangat serius. Misalnya ketika terjadi permasalahan pada server atau konfigurasi keamanan yang gagal. Penggunaan alert yang sesuai akan memberikan user experience yang menarik.
Untuk menggunakan class ini cukup masukkan kode <div class=”alert alert-danger”>.
Pengguna tidak akan kesulitan menemukan error yang terjadi sehingga problem solving pun dapat dilakukan dengan cepat.
Tombol adalah komponen yang umum dan sering digunakan untuk membuat website. Inilah yang membuat Bootstrap juga menyediakan class untuk membuat tombol yang menarik. Anda tinggal memanggil salah satu class tombol dan tombol yang indah dapat Anda tampilkan di halaman website.
Supaya Anda bisa menggunakan tombol di dalam website, cukup panggil class “btn”. Selain itu, Anda bisa menambahkan class lain untuk memberikan variasi tombol di dalamnya.
Terdapat banyak variasi tombol yang disediakan oleh Bootstrap, seperti “.btn”, “.btn-default”, “.btn-primary”, “.btn-success”, “.btn-info”, “.btn-warning”, “.btn-danger”, dan “.btn-link”.
Contoh penggunaan skrip seperti di bawah ini:
| <div class=”container”> <h2>Button Styles</h2> <button type=”button” class=”btn”>Basic</button> <button type=”button” class=”btn btn-default”>Default</button> <button type=”button” class=”btn btn-primary”>Primary</button> <button type=”button” class=”btn btn-success”>Success</button> <button type=”button” class=”btn btn-info”>Info</button> <button type=”button” class=”btn btn-warning”>Warning</button> <button type=”button” class=”btn btn-danger”>Danger</button> <button type=”button” class=”btn btn-link”>Link</button> </div> |
Contoh terakhir penggunaan Bootstrap adalah membuat panel. Panel adalah sebuah garis yang terbentuk dari garis dan padding.
Di Bootstrap, sebuah panel terdiri dari tiga bagian; header, body, dan footer. Header berada di bagian atas. Body di bagian tengah atau inti. Sedangkan footer di bagian bawah.
Untuk membuat panel dengan header, body, dan footer harus dideklarasikan terlebih dahulu menggunakan kode seperti di bawah ini.
| <div class=”panel panel-default”> <div class=”panel-heading”>Panel Heading</div> <div class=”panel-body”>Panel Content</div> <div class=”panel-footer”>Panel Footer</div> </div> |
Terdapat banyak variasi panel yang dapat dibuat menggunakan Bootstrap, seperti “.panel-default”, “.panel-primary”, “.panel-success”, “.panel-info”, “.panel-warning”, dan “.panel-danger”
| <div class=”panel panel-default”> <div class=”panel-heading”>Panel dengan class panel-default</div> <div class=”panel-body”>Isi Konten</div> </div> |
| <div class=”panel panel-primary”> <div class=”panel-heading”>Panel dengan class panel-primary</div> <div class=”panel-body”>Isi Konten</div> </div> |
| <div class=”panel panel-success”> <div class=”panel-heading”>Panel dengan class panel-success</div> <div class=”panel-body”>Isi Konten</div> </div> |
| <div class=”panel panel-info”> <div class=”panel-heading”>Panel dengan class panel-info class</div> <div class=”panel-body”>Isi Konten</div> </div> |
| <div class=”panel panel-info”> <div class=”panel-heading”>Panel dengan class panel-info class</div> <div class=”panel-body”>Isi Konten</div> </div> |
| <div class=”panel panel-danger”> <div class=”panel-heading”>Panel dengan class panel-danger class</div> <div class=”panel-body”>Isi Konten</div> </div> |
Lima bagian di atas adalah contoh cara menggunakan Bootstrap. Selain itu masih banyak class lain yang dapat Anda gunakan untuk membuat Bootstrap, seperti BS Dropdowns Collapse, Tabs/Pills, Navbar, Forms, Carousel, Modal, Tooltip, Popover, Scrollspy, dan masih banyak yang lainnya.
Kumpulan class yang sangat lengkap membuat Bootstrap pantas menjadi framework front end yang paling populer saat ini. Class-class yang tersedia terbukti dapat membuat website lebih menarik. Tidak hanya itu, Bootstrap memudahkan pengembang untuk membuat tombol, panel, alert, dan lain sebagainya hanya dengan satu perintah saja.
Baca juga:
Demikian tutorial menggunakan Bootstrap. Semoga panduan cara menggunakan Bootstrap 4 ini bermanfaat untuk Anda. Pada penerapannya terkadang ada kendala yang mungkin saja muncul. Jangan sungkan untuk mendiskusikannya melalui kolom komentar yang tersedia di bawah.
Jika Anda menyukai artikel dari kami dan tidak ingin melewatkan informasi dari kami. Silakan isi kolom subscribe untuk mendapatkan informasi terbaru dari kami.
Source:niagahoster.com
No comments:
Post a Comment