uts desain web
Nama :sefania rouk
Nim:18110514
Cara Menggunakan Bootstrap
1. Membuat Tabel Dengan Bootstrap
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”.
- “.table”: class yang digunakan untuk membuat dan mendefinisikan tabel biasa/standar. Class ini hanya menambahkan lapisan yang kecil dan pembatas secara horizontal. Class ini menggunakan baris kode <table class=”table”>.
- “.table-stripped”: class yang digunakan untuk membuat table dengan gaya yang zebra. Jadi warna setiap baris berselang seling. Class ini menggunakan baris kode <table class=”table table-sripped”>.
- “.table-bordered”: merupakan class yang digunakan untuk menampilkan border di dalam table. Jadi keseluruhan table akan dipasang sebuah border. Class ini menggunakan baris kode <table class=”table table-bordered”>.
- “.table-hover”: dapat Anda manfaatkan untuk memberikan efek hover pada sebuah row. Efek ini akan berjalan ketika Anda meletakkan mouse di row yang diberikan class ini. Class ini menggunakan baris kode <table class=”table 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.
2. Mengatur Tampilan Gambar Dengan Bootstrap
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-responsive”: class ini memungkinkan Anda membuat gambar yang dapat dibuka di berbagai macam resolusi layar. Class .img-responsive membuka ukuran gambar dapat menyesuaikan dengan ukuran elemen inti. Anda dapat melihat efeknya ketika melakukan resize pada browser.
| <img src=”kantor-niagahoster.png” class=”img-responsive” alt=”Logo Niagahoster”> |
- “.img-rounded”: ketika Anda ingin membuat gambar dengan sisi melengkung, gunakan class ini, maka Anda akan memiliki gambar yang melengkung di bagian sisinya.
| <img src=”kantor-niagahoster.png” class=”rounded” alt=”Logo Niagahoster”> |
- ”.img-circle”: terkadang ingin gambar yang berbentuk lingkaran, gunakan class ini dan gambar akan tampil dengan bentuk yang melingkar.
| <img src=”kantor-niagahoster.png” class=”rounded-circle” alt=”Logo Niagahoster”> |
- ”.img-thumbnail”: class ini digunakan untuk membuat gambar thumbnail dengan Bootstrap.
| <img src=”kantor-niagahoster.png” class=”img-thumbnail” alt=”Logo Niagahoster”> |
3. Membuat Pesan Peringatan (Alert) Dengan Bootstrap
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.
- .alert-success: Class alert box ini dapat digunakan untuk mengindikasikan aksi sukses atau positif.
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”>.
- .alert-info: Class alert box ini dapat mengindikasikan informasi yang netral.
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”>.
- .alert-warning: Class alert box ini dapat untuk mengindikasikan pesan warning dan mungkin butuh perbaikan.
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”>.
- .alert-danger: Class alert box ini dapat mengindikasikan pesan penting dan kemungkinan efek buruk.
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 solvingpun dapat dilakukan dengan cepat.
4. Membuat Tombol Dengan Bootstrap
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> |
- .btn: Class ini untuk membuat tombol standar warna abu kehitaman.
- .btn-default: Class ini untuk membuat tombol default berwarna abu.
- .btn-primary: Class ini digunakan untuk membuat tombol warna biru. Biasanya digunakan untuk tombol login dan masuk ke dalam menu tertentu.
- .btn-success: Class ini digunakan untuk membuat tombol ketika berhasil menginputkan sesuatu atau memproses suatu program.
- .btn-info: Class ini digunakan untuk membuat tombol warna biru muda.
- .btn-warning: Class ini digunakan untuk membuat tombol warning dengan warna kuning.
- .btn-danger: Class ini digunakan untuk membuat tombol warning warna merah tua.
- .btn-link: Selain tombol persegi, Bootstrap juga menyediakan tombol untuk link. Anda bisa menggunakan class ini.
5. Membuat Panel Dengan Bootstrap
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”
- .panel-default: Class ini digunakan untuk membuat sebuah panel dengan warna biasa (abu).
| <div class=”panel panel-default”> <div class=”panel-heading”>Panel dengan class panel-default</div> <div class=”panel-body”>Isi Konten</div> </div> |
- .panel-primary: Class ini digunakan untuk membuat panel dengan warna biru tua.
| <div class=”panel panel-primary”> <div class=”panel-heading”>Panel dengan class panel-primary</div> <div class=”panel-body”>Isi Konten</div> </div> |
- .panel-success: Class ini digunakan untuk membuat panel dengan dengan warna atas hijau.
| <div class=”panel panel-success”> <div class=”panel-heading”>Panel dengan class panel-success</div> <div class=”panel-body”>Isi Konten</div> </div> |
- .panel-info: Class ini digunakan untuk membuat panel dengan warna header biru muda.
| <div class=”panel panel-info”> <div class=”panel-heading”>Panel dengan class panel-info class</div> <div class=”panel-body”>Isi Konten</div> </div> |
- .panel-warning: Class ini digunakan untuk membuat panel dengan warna header kuning muda.
| <div class=”panel panel-info”> <div class=”panel-heading”>Panel dengan class panel-info class</div> <div class=”panel-body”>Isi Konten</div> </div> |
- .panel-danger: Class ini digunakan untuk membuat panel dengan warna merah muda,
| <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.
Hasilnya dari browser.
