Modul FrontEnd Web Dasar
  • Pengenalan Penulis
  • Muqadimah
  • Tujuan Pembelajaran
  • Prasyarat Pembelajaran
  • Persiapan & Pendahuluan
    • Tools Yang Dibutuhkan
    • Cara Kerja Internet: Bagaimana Website Sampai ke Pengguna
    • Web Statis & Dinamis
    • Peranan Web Server & Web Browser
    • Anatomi Website (HTML, CSS, JavaScript)
    • Referensi Tambahan
  • Belajar HTML
    • Pengenalan HTML
    • Elemen, Tag, dan Atribut
    • Strukur Dasar HTML
    • Menjalankan File HTML di Browser
    • Semantic HTML
    • Tag Dasar HTML
      • Tag Heading (h1-h6)
      • Tag Paragraf (p)
      • Tag Untuk Pemformatan Teks Dasar
      • Tag Anchor/Link (a)
      • Tag Image (img)
      • Tag List (ul, ol, li)
      • Tag Table (table)
      • Tag Form (form, input, select, textarea)
      • Tag Div
      • Tag Audio & Video
      • iframe
      • Tag Untuk Citation, Quotation dan Definisi
      • Tag Untuk Hasil Kode Komputer
    • Simbol/Karakter Khusus
  • Belajar CSS
    • Pengenalan CSS
    • Menambahkan CSS ke HTML
    • Selektor CSS
    • Properti CSS
      • Teks Formatting
      • Warna dan Background
      • Pengenalan Box Model
      • Box Model: Konten
      • Box Model: Padding dan Margin
      • Box Model: Border
      • Box Shadow
      • Box Sizing
      • Positioning
      • Display
      • Pengenalan Flexbox
      • Flexbox: Properti Pada Container
      • Flexbox: Properti Item
      • Flexbox: Gap
      • Pengenalan Grid
      • Grid: Grid Struktur
      • Grid: Gap
      • Grid: Alignment
      • Grid: Grid Auto Flow
      • Grid: Item Placment
      • Grid: Functions in Grid Layout
    • Media Queries Untuk Responsifitas Pada Website
    • Media Queries: Media Types
    • Media Queries: Media Features
  • Belajar JavaScript
    • Pengenalan JavaScript
    • Menghubungkan JavaScript ke HTML
    • Variable
    • Tipe Data
    • Operator & Ekspresi
    • Perkondisian
    • Perulangan
    • Fungsi
    • Debugging
    • JavaScript BOM (browser Object Model)
      • Pengenalan JavaScript BOM
      • Akses ke Objek Window
      • Akses ke Objek Document
      • Akses Ke Navigator Object
      • Akses ke Screen Object
      • Akses ke Histori Object
    • JavaScript DOM (Document Object Model)
      • Pengenalan JavaScript DOM
      • Menarget Element HTML
      • Menambah, Menghapus, dan Mengedit Element
    • Events Handler
      • Pengenalan Event Handler Untuk Interaktifitas
      • Windows Events
      • Form Events
      • Keyboard Events
      • Clipboard Events
      • Mouse Events
    • Web Storage
      • Pengenalan Web Storage
      • Local Storage
      • Session Storage
  • Framework CSS
    • Pengenalan Framework CSS (Bootstrap)
    • Menambahkan Bootstrap ke Project
    • Penggunaan Utility Classes
    • Penggunaan Komponen Bootstrap
    • Customizing Bootstrap
    • Responsive dengan Bootstrap
  • Belajar Figma Untuk Slicing
    • Pengenalan dan Peran Figma
    • Membuat Desain Website
    • Melakukan Slicing
  • Pengenalan Framework FrontEnd
  • Hosting (Web Statis)
Powered by GitBook
On this page
  1. Framework CSS

Pengenalan Framework CSS (Bootstrap)

PreviousFramework CSSNextMenambahkan Bootstrap ke Project

Last updated 1 year ago

Bootstrap adalah salah satu framework CSS yang paling populer digunakan untuk membangun tata letak responsif dan desain web yang menarik. Berikut adalah beberapa konsep dasar tentang Bootstrap:

Anda dapat mengunjungi situs resmi Bootstrap di untuk mempelajari lebih lanjut tentang framework CSS Bootstrap, termasuk dokumentasi, tutorial, contoh, dan informasi terkait lainnya. Situs ini merupakan sumber utama untuk semua hal terkait Bootstrap, dan Anda akan menemukan banyak sumber daya yang berguna untuk memulai menggunakan framework ini dalam pengembangan web Anda.

Fitur Utama Bootstrap:

  1. Grid System: Bootstrap menyediakan sistem grid responsif yang memungkinkan pengembang untuk membuat tata letak web yang fleksibel dan responsif dengan mudah.

  2. Komponen UI: Bootstrap dilengkapi dengan berbagai komponen UI siap pakai seperti tombol, formulir, kartu, navigasi, dan banyak lagi. Ini memungkinkan pengembang untuk membangun antarmuka pengguna yang konsisten dan menarik dengan cepat.

  3. Responsif: Salah satu keunggulan utama Bootstrap adalah responsif secara alami. Desain yang dibuat dengan Bootstrap akan menyesuaikan diri dengan berbagai ukuran layar, mulai dari desktop hingga perangkat mobile.

  4. Dokumentasi yang Kuat: Bootstrap dilengkapi dengan dokumentasi yang komprehensif dan tutorial yang memandu pengembang dalam menggunakan berbagai fitur dan komponennya dengan mudah.

Menggunakan Bootstrap:

  1. Unduh atau Gunakan CDN: Anda dapat mengunduh Bootstrap dari situs resminya atau menggunakan CDN (Content Delivery Network) untuk menyertakan file CSS dan JavaScript Bootstrap di halaman web Anda.

  2. Menyertakan File CSS dan JavaScript: Pastikan Anda menyertakan file CSS Bootstrap dan file JavaScript Bootstrap di halaman web Anda. Ini dapat dilakukan dengan menambahkan tag <link> untuk file CSS dan tag <script> untuk file JavaScript.

  3. Gunakan Kelas Bootstrap: Bootstrap menggunakan kelas-kelas CSS tertentu untuk menentukan perilaku dan gaya elemen HTML. Anda dapat menggunakan kelas-kelas ini di elemen HTML Anda untuk menerapkan desain dan fungsionalitas Bootstrap.

Contoh Kode Penggunaan Bootstrap:

Menambahkan Tombol Bootstrap:

<button class="btn btn-primary">Klik Saya</button>

Membuat Grid System dengan Bootstrap:

<div class="container">
  <div class="row">
    <div class="col-md-6">
      <p>Kolom 1</p>
    </div>
    <div class="col-md-6">
      <p>Kolom 2</p>
    </div>
  </div>
</div>

Dengan Bootstrap, pengembang dapat dengan cepat dan mudah membuat desain web yang responsif, menarik, dan konsisten dengan menggunakan komponen-komponen dan fitur yang disediakan oleh framework ini.

getbootstrap.com