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

Menambahkan Bootstrap ke Project

Untuk menambahkan Bootstrap ke proyek Anda, Anda dapat menggunakan beberapa cara, tergantung pada preferensi dan kebutuhan proyek Anda. Berikut adalah beberapa cara umum untuk menambahkan Bootstrap ke proyek:

1. Menggunakan CDN (Content Delivery Network):

Anda dapat menggunakan Bootstrap melalui CDN yang disediakan oleh Bootstrap sendiri atau penyedia CDN lainnya. Anda hanya perlu menambahkan tag <link> untuk stylesheet Bootstrap dan <script> untuk file JavaScript Bootstrap ke dalam bagian <head> dari halaman HTML Anda.

Contoh:

<!-- CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>

2. Mengunduh dan Menyimpan Lokal:

Anda juga dapat mengunduh file CSS dan JavaScript Bootstrap dari situs web resminya dan menyimpannya secara lokal dalam proyek Anda. Setelah diunduh, Anda perlu merujuk file CSS dan JavaScript tersebut dalam halaman HTML Anda menggunakan tag <link> dan <script> seperti yang ditunjukkan di atas.

3. Menggunakan Package Manager:

Jika Anda menggunakan alat manajemen paket seperti npm atau yarn, Anda dapat menginstal Bootstrap sebagai dependensi proyek Anda dan mengimpor file CSS dan JavaScript Bootstrap ke dalam proyek Anda menggunakan build tool seperti Webpack atau Parcel.

Contoh menggunakan npm:

npm install bootstrap

Kemudian Anda bisa mengimpor Bootstrap ke dalam proyek Anda:

import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle.min.js';

Pilihlah metode yang paling sesuai dengan kebutuhan dan preferensi pengembangan proyek Anda.

PreviousPengenalan Framework CSS (Bootstrap)NextPenggunaan Utility Classes

Last updated 1 year ago