1 Belajar Bootstrap : Pengenalan
Bootstrap adalah framework front-end yang powerful untuk pengembangan web yang lebih cepat dan lebih mudah. Hal ini termasuk template desain berbasis HTML dan CSS untuk membuat komponen antarmuka pengguna yang umum seperti form, button, navigasi, dropdown, alert, modals, tab, accordion, carousel, tooltips, dan sebagainya. Lanjut baca…
2. Belajar Bootstrap : Membuat File Pertama
Dalam tutorial ini kalian akan belajar betapa mudahnya membuat halaman web menggunakan Bootstrap. Tetapi sebelum mulai, pastikan untuk memiliki editor kode dan beberapa pengetahuan HTML dan CSS. Sekarang kita akan membuat template Bootstrap dasar dengan memasukkan Bootstrap CSS dan file JS, serta dependensi JavaScript lainnya seperti jQuery dan Popper.js melalui CDN. Lanjut baca…
3. Belajar Bootstrap : Grid System
Sistem grid Bootstrap menyediakan cara cepat dan nyaman untuk membuat layout web responsif. Versi Bootstrap 4 terbaru memperkenalkan sistem grid flexbox mobile-first baru yang memiliki ketepatan skala hingga 12 kolom sebagai suatu perangkat atau ukuran viewport yang meningkat. Bootstrap 4 mencakup grid class yang telah ditentukan sebelumnya untuk membuat grid layout dengan cepat untuk berbagai jenis perangkat seperti ponsel, tablet, laptop dan desktop, dll. Lanjut baca…
4. Belajar Bootstrap : Fixed Layout
Dengan Bootstrap 4 kalian masih dapat membuat layout halaman web berdasarkan jumlah piksel tetap, namun lebar kontainer bervariasi tergantung pada lebar viewport dan layout responsifnya juga. Proses menciptakan fixed layout namun responsif pada dasarnya dimulai dengan kelas .container. Setelah itu kalian dapat membuat baris dengan kelas .row untuk wrap grup kolom horizontal. Baris harus ditempatkan di dalam .container untuk alignment dan padding yang tepat. Lanjut baca…
5. Belajar Bootstrap : Fluid Layout
Di Bootstrap kalian dapat menggunakan kelas .container-fluid untuk membuat fluid layout untuk memanfaatkan lebar viewport 100% di semua ukuran perangkat (ekstra kecil, kecil, sedang, besar, dan ekstra besar). Kelas .container-fluid hanya menerapkan lebar: 100%, bukan lebar berbeda untuk ukuran viewport yang berbeda. Namun, layout akan tetap responsif dan kalian dapat menggunakan grid class seperti biasa. Lihat tutorial tentang bootstrap grid system untuk mempelajari lebih lanjut tentang grid class. Lanjut baca…
6. Belajar Bootstrap : Responsive Layout
Desain web responsif adalah proses merancang dan membangun situs web untuk memberikan aksesibilitas yang lebih baik dan pengalaman optimal viewing kepada user dengan mengoptimalkannya untuk perangkat yang berbeda. Dengan tren ponsel dan tablet yang semakin berkembang, hampir tidak dapat dihindari untuk mengabaikan pengoptimalan situs untuk perangkat seluler. Desain web responsif adalah alternatif yang lebih disukai dan cara yang efisien untuk menargetkan berbagai perangkat dengan upaya yang jauh lebih sedikit. Lanjut baca…
7. Belajar Bootstrap : Typography
Kalian dapat mendefinisikan semua judul HTML, <h1> hingga <h6> – Dengan cara yang sama seperti kalian mendefinisikan dalam dokumen HTML sederhana. kalian juga dapat menggunakan kelas heading .h1 hingga .h6 pada elemen lain, jika kalian ingin menerapkan style pada teks elemen sama seperti heading. Lanjut baca…
8. Belajar Bootstrap : Tabel
Tabel HTML digunakan untuk menyajikan data dengan cara grid seperti baris dan kolom. Menggunakan Bootstrap kalian dapat meningkatkan tampilan tabel dengan cara yang cepat dan mudah. Kalian dapat membuat tabel dengan basic styling yang memiliki pembagi horizontal dan padding cell kecil (8px secara default), dengan hanya menambahkan kelas Bootstrap .table ke elemen <table>. Lanjut baca…
9. Belajar Bootstrap : List
Pada tutorial kali ini kita akan mempelajari bagaimana cara membuat list dengan bootstrap. Kalian dapat membuat tiga jenis daftar HTML yaitu unordered list, ordered list, dan definition list. Unordered list sendiri merupakan daftar item yang urutannya tidak penting (acak). Daftar item dalam unordered list ditandai dengan bullet. Lanjut baca…
10. Belajar Bootstrap : Form
Form HTML adalah bagian integral dari halaman web dan aplikasi, tetapi membuat form layout atau styling form kontrol secara manual satu per satu menggunakan CSS sering membosankan dan menjemukan. Bootstrap dapat menyederhanakan proses styling dan form alignment kontrol seperti label, input field, selectboxes, text area, tombol, dll. Melalui sekumpulan kelas yang telah ditentukan. Lanjut baca…
11. Belajar Bootstrap : Button
Button adalah bagian integral dari situs web dan aplikasi. Mereka digunakan untuk berbagai keperluan seperti, submit atau mereset form HTML, melakukan tindakan interaktif seperti menunjukkan atau menyembunyikan sesuatu di halaman web dengan mengklik tombol, mengarahkan pengguna ke halaman lain, dan sebagainya. Bootstrap menyediakan cara yang cepat dan mudah untuk membuat dan meng-customize button. Lanjut baca…
12. Belajar Bootstrap : Image
Gambar sangat umum dalam desain web modern. Jadi menata gambar dan menempatkannya dengan benar di halaman web sangat penting untuk meningkatkan user experience. Menggunakan kelas bawaan Bootstrap kalian dapat dengan mudah menata gambar seperti membuat gambar sudut bulat (round corner) atau bundar (circular), atau memberi mereka efek seperti thumbnail. Lanjut baca…
13. Belajar Bootstrap : Card
Bootstrap 4 memperkenalkan kotak (container) konten baru yang fleksibel dan dapat diextend yaitu card component dimana ini sebagai pengganti old panel, wells, dan komponen thumbnail. Ini juga termasuk opsi untuk header dan footer, berbagai konten, warna contextual background, dan opsi tampilan yang bagus. Lanjut baca…
14. Belajar Bootstrap : Navbar
Kalian dapat menggunakan komponen navbar Bootstrap untuk membuat header navigasi responsif untuk situs web atau aplikasi kalian. Navbar responsif ini awalnya gagal pada perangkat yang memiliki viewports kecil seperti ponsel tetapi berkembang ketika pengguna mengklik toggle button. Namun, akan tampil horisontal normal seperti pada perangkat menengah dan besar seperti laptop atau desktop. Lanjut baca…
15. Belajar Bootstrap : Jumbotron
Komponen jumbotron Bootstrap menyediakan cara terbaik untuk menampilkan konten atau informasi utama pada halaman web. Cukup bungkus (wrap) konten unggulan kalian seperti tajuk, deskripsi, dll. Dalam elemen <div> dan terapkan kelas .jumbotron di atasnya. Lanjut baca…
16. Belajar Bootstrap : Membuat Navbar
Navbar merupakan kepanjangan dari Navigation Bar, artinya bar Navigasi. Biasanya digunakan untuk menu navigasi utama dalam sebuah halaman website. Letaknya kebanyakan selalu paling atas, isinya menu yang memberikan informasi tertentu kepada pengunjung website. Lanjut baca…
17. Belajar Bootstrap : Mengenal Bootstrap
Bootstrap adalah sebuah framework yang dibuat untuk mempermudah dalam membuat tampilan sebuah website. Bootstrap ini bisa dibilang seperti template yang sudah jadi dan siap pakai hingga customnya. Jadi, dengan bantuan dari Bootstrap bisa menjadikan pembuatan website lebih efektif dan efisien. Lanjut baca…
18. Belajar Bootstrap : Membuat Scrollspy
Pada kesempatan kali ini kita akan belajar Scrollspy menggunakan Bootstrap 4. Scrollspy itu biasanya digunakan untuk memperbarui tautan secara otomatis dalam daftar navigasi berdasarkan posisi scroll pada suatu halaman. Lanjut baca…
19. Belajar Bootstrap : Penggunaan Popover
Pada tutorial kali ini saya akan mengajarkan bagaimana cara penggunaan Popover pada bootstrap. Popover ini hampir mirip sekali dengan tooltip, yaitu untuk menampilkan pesan yang terdapat judulnya. Lanjut baca…
20. Belajar Bootstrap : Membuat Modal
Membuat Modal dengan Bootstrap – Modal atau yang biasa di sebut pop up pada bootstrap adalah sebuah kotak dialog yang biasanya di gunakan untuk melakukan konfirmasi atas suatu aksi. Lanjut baca…
21. Belajar Bootstrap : Membuat Slide
Dalam bootstrap, terdapat fasilitas untuk membuat silde. Tanpa harus membuat slide dari awal, tentu hal ini dapat memudahkan kita dalam membuat tampilan website. Untuk membuat silde dengan bootstrap, pertama-tama download bootstrap di getbootstrap.com. Lanjut baca…
22. Belajar Bootstrap : Carousel
Teman-teman WebHozz, kali ini kita akan mencoba membuat slider dengan Bootstrap. Baiklah untuk tutorial kali ini kita aka memulainya dengan membuat sebuah file misalnya index.html, sebelumnya kalian harus download terlebih dulu ile mentah bootstrapnya di homepagenya. Lanjut baca…
23. Belajar Bootstrap : Dropdown
Pada tutorial kali ini kita akan mencoba membuat dropdown, tetapi menggunakan framework css, yaitu Bootstrap. Langkah pertama adalah kalian harus mengunduh file bootstrap, setelah itu kalian letakkan di folder latihan kalian. Lanjut baca…
24. Belajar Bootstrap : Menambahkan efek Tooltip ketika Cursor Diarahkan Pada Button
Pada tutorial kali ini kita akan mempelajari bagaimana memvariasikan button ketika cursor diarahkan maka akan muncul efek tooltip, button ini dibuat menggunakan CSS Bootstrap & javascript Bootstrap. Lanjut baca…
25. Belajar Bootstrap : Membuat Form input data
Bootstrap adalah CSS Framework untuk membangun Website dengan lebih cepat, serta Responsive untuk berbagi resolusi, baik Desktop, Tablet, dan Smartphone. Dengan berbagai fitur-fitur yang lengka serta tampilan yang menarik, kita dapat membangun layout Website lebih cepat. Lanjut baca…
26. Belajar Bootstrap : Membuat Slideshow dan Section
Sahabat Webhozz dimanapun berada, pada kesempatan kali ini kita akan belajar langsung untuk membuat sebuah halaman website. Tentunya kita juga menggunakan Bootstrap. Seperti pada postingan sebelumnya, kita membutuhkan instalasi Bootstrapnya terlebih dahulu. Lanjut baca…
