{"id":143,"date":"2025-12-22T05:32:25","date_gmt":"2025-12-22T05:32:25","guid":{"rendered":"http:\/\/localhost\/2026\/?p=143"},"modified":"2026-06-25T14:13:24","modified_gmt":"2026-06-25T07:13:24","slug":"bab-2-instalasi-bootstrap","status":"publish","type":"post","link":"https:\/\/www.bisasoftware.id\/2026\/bab-2-instalasi-bootstrap\/","title":{"rendered":"BAB 2 – INSTALASI DAN PERSIAPAN BOOTSTRAP"},"content":{"rendered":"\n

Tujuan Pembelajaran<\/p>\n\n\n\n

Peserta mampu:<\/p>\n\n\n\n

    \n
  1. Menginstal Bootstrap menggunakan CDN.<\/li>\n\n\n\n
  2. Menginstal Bootstrap secara offline.<\/li>\n\n\n\n
  3. Menjalankan proyek Bootstrap pertama.<\/li>\n<\/ol>\n\n\n\n
    \n\n\n\n

    A. Metode Instalasi Bootstrap<\/h1>\n\n\n\n

    Terdapat dua metode:<\/p>\n\n\n\n

    1. CDN (Online)<\/h3>\n\n\n\n

    2. Download (Offline)<\/h3>\n\n\n\n
    \n\n\n\n

    B. Instalasi Menggunakan CDN<\/h1>\n\n\n\n

    Buat file:<\/p>\n\n\n\n

    index.html<\/code><\/pre>\n\n\n\n
    Kemudian isi dengan:<\/p>\n\n\n\n
    <!DOCTYPE html>
    <html>
    <head>
        <title>Belajar Bootstrap<\/title>

        <link href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.3\/dist\/css\/bootstrap.min.css\" rel=\"stylesheet\">

    <\/head>
    <body>

    <\/body>
    <\/html><\/code><\/pre>\n\n\n\n
    \n\n\n\n
    C. Menambahkan JavaScript Bootstrap<\/h1>\n\n\n\n
    Tambahkan sebelum tag:<\/p>\n\n\n\n
    <\/body><\/code><\/pre>\n\n\n\n
    <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.3\/dist\/js\/bootstrap.bundle.min.js\"><\/script><\/code><\/pre>\n\n\n\n
    \n\n\n\n
    D. Instalasi Offline<\/h1>\n\n\n\n
      \n
    1. Download Bootstrap.<\/li>\n\n\n\n
    2. Ekstrak file.<\/li>\n\n\n\n
    3. Salin folder bootstrap ke project.<\/li>\n<\/ol>\n\n\n\n
      Struktur:<\/p>\n\n\n\n
      project\/
      \u2502
      \u251c\u2500\u2500 bootstrap\/
      \u2502
      \u251c\u2500\u2500 css\/
      \u2502
      \u251c\u2500\u2500 js\/
      \u2502
      \u2514\u2500\u2500 index.html<\/code><\/pre>\n\n\n\n
      \n\n\n\n
      E. Menghubungkan Bootstrap Offline<\/h1>\n\n\n\n
      <link rel=\"stylesheet\"
      href=\"bootstrap\/css\/bootstrap.min.css\"><\/code><\/pre>\n\n\n\n
      <script src=\"bootstrap\/js\/bootstrap.bundle.min.js\"><\/script><\/code><\/pre>\n\n\n\n
      \n\n\n\n
      Praktik 2<\/h1>\n\n\n\n
      Menampilkan Tulisan Bootstrap Pertama<\/h2>\n\n\n\n
      <!DOCTYPE html>
      <html>
      <head>

      <link href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.3\/dist\/css\/bootstrap.min.css\" rel=\"stylesheet\">

      <\/head>
      <body>

      <h1>Hello Bootstrap 5<\/h1>

      <\/body>
      <\/html><\/code><\/pre>\n\n\n\n
      Simpan dan jalankan pada browser.<\/p>\n\n\n\n
      \n\n\n\n
      Praktik 3<\/h1>\n\n\n\n
      Tombol Pertama Bootstrap<\/h2>\n\n\n\n
      <button class=\"btn btn-primary\">
          Klik Saya
      <\/button><\/code><\/pre>\n\n\n\n
      Hasil:<\/p>\n\n\n\n
      Tombol berwarna biru.<\/p>\n\n\n\n
      \n\n\n\n
      Latihan Bab 2<\/h1>\n\n\n\n
        \n
      1. Apa itu CDN?<\/li>\n\n\n\n
      2. Kapan sebaiknya menggunakan CDN?<\/li>\n\n\n\n
      3. Apa keuntungan instalasi offline?<\/li>\n\n\n\n
      4. Apa fungsi bootstrap.bundle.min.js?<\/li>\n\n\n\n
      5. Mengapa Bootstrap membutuhkan file CSS?<\/li>\n<\/ol>\n\n\n\n
        \n\n\n\n
        Tugas Praktik Bab 2<\/h1>\n\n\n\n
        Buat halaman sederhana yang berisi:<\/p>\n\n\n\n
          \n
        • Judul Website<\/li>\n\n\n\n
        • 3 Tombol Bootstrap<\/li>\n\n\n\n
        • Paragraf deskripsi<\/li>\n<\/ul>\n\n\n\n
          Gunakan:<\/p>\n\n\n\n
          btn-primary
          btn-success
          btn-danger<\/p>\n\n\n\n
          <\/p>\n","protected":false},"excerpt":{"rendered":"
          Tujuan Pembelajaran Peserta mampu: A. Metode Instalasi Bootstrap Terdapat dua metode: 1. CDN (Online) 2. Download (Offline) B. Instalasi Menggunakan…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_kadence_starter_templates_imported_post":false,"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"categories":[20],"tags":[35],"class_list":["post-143","post","type-post","status-publish","format-standard","hentry","category-tutorial-bootstrap","tag-tutorial-bootstrap"],"_links":{"self":[{"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/posts\/143","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/comments?post=143"}],"version-history":[{"count":4,"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/posts\/143\/revisions"}],"predecessor-version":[{"id":622,"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/posts\/143\/revisions\/622"}],"wp:attachment":[{"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/media?parent=143"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/categories?post=143"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/tags?post=143"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}