Pengenalan Bootstrap

PENGENALAN BOOTSTRAP

Pengertian Bootstrap

    Bootstrap adalah framework open-source dan gratis yang digunakan untuk membuat situs web dan aplikasi web, Bootstrap menggunakan HTML, CSS, dan JavaScript untuk menyederhanakan proses pembuatan situs web. Dengan Bootstrap, pengembang dapat membuat situs web yang responsif dan seluler, serta meningkatkan tampilan dan nuansa visual situs web.

Keuntungan Menggunakan Bootstrap

  • Bootstrap memiliki fitur-fitur yang mudah dipelajari, serta banyak tutorial dan forum online.
  • Bootstrap dapat menyesuaikan tampilan situs web dengan baik di berbagai perangkat.
  • Bootstrap memiliki komunitas pengembang yang besar dan aktif, sehingga Anda dapat menemukan banyak sumber daya jika mengalami masalah.

Praktek menggunakan Bootstrap

1. Membuat Hello World

    Buka website Bootstrap dan copy kode yang disediakan

    Paste kode nya di vs code

    perbandingan jika tidak di link dengan bootstrap

2. Container

    Dalam Bootstrap, container adalah elemen tata letak yang berfungsi untuk memuat, melapisi, dan menyelaraskan konten di dalamnya. Container merupakan blok penyusun fundamental Bootstrap yang diperlukan saat menggunakan sistem grid default.

Bootstrap memiliki dua kelas kontainer, yaitu: 
Kelas .container: Menyediakan kontainer dengan lebar tetap yang responsif
Kelas .container-fluid: Menyediakan kontainer dengan lebar penuh, yang mencakup seluruh lebar viewport

contoh .container:

contoh .container-fluid:

3. Accordion

    Accordion Bootstrap adalah komponen yang berfungsi untuk mengatur konten dalam panel yang dapat diciutkan. Komponen ini berguna untuk menghemat ruang dengan cara menampilkan atau menyembunyikan informasi yang diinginkan pengguna.

contoh:


4. Alert

    Alert adalah komponen yang memungkinkan pengguna untuk menampilkan pesan peringatan di situs web. Pesan peringatan ini dapat memberikan informasi umpan balik kontekstual untuk operasi pengguna umum.

contoh:

5. Badge

    Badge Bootstrap adalah komponen yang digunakan untuk membuat label dan perhitungan kecil. Badge dapat digunakan untuk menampilkan angka dalam bentuk label, dan dapat diterapkan pada berbagai elemen HTML, seperti tombol, heading, dan table.

contoh:

6. Carousel

    Carousel Bootstrap 5 adalah komponen yang berfungsi untuk menampilkan gambar atau slide secara bergantian. Komponen ini dapat digunakan untuk menampilkan berbagai konten secara interaktif dan menarik secara visual.

contoh:

7. Dropdown

    Dropdown Bootstrap adalah menu tarik-turun yang dapat diubah-ubah dan menampilkan daftar tautan. Dropdown Bootstrap dibuat interaktif dengan plugin JavaScript dropdown Bootstrap yang disertakan.

contoh:

8. Navbar

    Navbar atau navigation bar adalah komponen yang berisi menu navigasi pada sebuah situs web atau aplikasi. Navbar biasanya terletak di bagian atas halaman, dan berisi tautan atau tombol yang mengarah ke halaman lain.

contoh:

Komentar

Posting Komentar

Postingan populer dari blog ini

Belajar HTML Dasar Part 5 - Pembahasan Link, Relative dan Absolute URL, Bookmark di HTML

Gambar
Pembahasan Link, Relative dan Absolute URL, Bookmark di HTML Pengetian Link Link dalam HTML adalah bagian dari web development yang berfungsi untuk menghubungkan satu halaman dengan halaman lain atau ke website lain. Link HTML juga dikenal sebagai hyperlink, link HTML dapat berupa teks, gambar, atau elemen HTML lainnya. Tag a Untuk membuat link HTML, Anda bisa membungkus teks atau konten lain di dalam elemen <a> dan menggunakan atribut href yang berisi lokasi tujuan link tersebut, Tag a juga memiliki attribute target yang digunakan sebagai target jendela Web Browser, kita bisa gunakan nilai target=”_self”, artinya halaman akan ditampilkan di halaman yang sama, ini adalah bawaan default, kemudian target=”_blank”, artinya halaman akan ditampilkan di jendela baru di Browser, Tag a juga memiliki attribute title, untuk menuliskan judul yang keluar ketika mouse berada di atas Link tersebut Absolute URL Saat kita menulis halaman tujuan dari href di Link, kita bisa menggunakan absolute U...
Baca selengkapnya

CSS Dasar

Gambar
 CSS DASAR      CSS adalah singkatan dari Cascading Style Sheets yang merupakan bahasa pemrograman yang digunakan untuk mengatur tampilan dan format website.      CSS memiliki beberapa fungsi, di antaranya: Membuat tampilan website lebih menarik, Memisahkan konten dari tampilan visual website, Membuat tampilan website rapi dan optimal di berbagai ukuran layar, Memudahkan pengelolaan kode, Mempercepat loading halaman web. Inline CSS Inline CSS adalah metode menambahkan CSS langsung ke dalam elemen HTML Contoh: Internal CSS Berbeda dengan inline CSS yang diterapkan di elemen individu, internal CSS ditempatkan di dalam tag < style > yang berada di bagian < head > dari dokumen HTML Contoh: Eksternal CSS External CSS adalah metode di mana kamu menyimpan semua CSS rule dalam sebuah file terpisah dengan ekstensi .css dan menghubungkannya dengan halaman HTML menggunakan elemen < link > yang berapada di <head> contoh: Komment di CSS K...
Baca selengkapnya

Belajar Flex Box di HTML

Gambar
 Belajar Flex Box di HTML Pengertian Flexbox      Flexbox adalah sebuah konsep layout atau mode pengaturan dalam CSS yang digunakan untuk mengatur elemen atau container beserta item di dalamnya pada halaman web, Flexbox memungkinkan pengaturan layout, posisi, dan tampilan dari suatu konten yang ukurannya belum diketahui atau bernilai dinamis, nama Flexbox diambil dari kata flexibel yang berarti mudah diatur, disesuaikan, dan ditukar-tukar. Latihan 1. Flex Wrap     Buat file latihanflexbox.html dan style.css     Hasil untuk flex-wrap : wrap     tampilan akan turun kebawah jika jendela diperkecil      Hasil untuk  flex-wrap : nowrap           Dengan nowrap, semua item flex akan mencoba untuk menyesuaikan diri dalam satu baris atau kolom. Jika ruang tidak cukup, item-item akan mengecil dan menyesuaikan diri.      Hasil untuk  flex-wrap : wrap-reverse      ...
Baca selengkapnya