Breaking News
Categories
  • Alat Berat
  • Anak
  • Android
  • Artikel
  • Atap Baja Ringan
  • Baja Ringan
  • Bootstrap
  • Cars
  • Codeigniter
  • Facebook
  • Fotografer
  • Fotografi
  • Gadgets
  • Health
  • HTML
  • Html Font
  • Html Table
  • informasi
  • Inspirations
  • jQuery
  • Kanopi
  • Lifestyle
  • Nintendo
  • Obat
  • Pariwisata
  • Php
  • Plafon
  • Reviews
  • Sistem Pakar
  • Technology
  • TikTok
  • Trends
  • Uncategorized
  • War
  • whatsapp
  • Windows
  • WordPress
  • Belajar Bootstrap untuk Pemula

    Feb 29 202464 Dilihat

    Belajar bootstrap untuk pemula sebaiknya tahu pengertian bootstrap sendiri. Yang belom tahu apa itu bootstrap jangan kwatir, mari kita bahas pengertian dan kelebihan dari bootstrap sendiri. Bootstrap adalah front-end framework yang mengedapankan tampilan untuk mobile device seperti smartphone dll. Kelebihan bootstrap adalah mempercepat dan mempermudah pengembangan website versi mobile. Bootstrap menyediakan HTML, CSS dan Javascript siap pakai dan mudah untuk dikembangkan dengan mudah.

    Belajar Bootstrap untuk Pemula

    Belajar Bootstrap untuk Pemula

    Apa keunggulan bootstrap?

    Bootstrap merupakan salah satu framework yang digunakan untuk membangun sebuah web secara responsif di mobile phone. Artinya, tampilan web yang dibuat oleh bootstrap akan menyesuaikan ukuran layar dari browser yang digunakan pada smartphone, laptop, tablet, ataupun perangkat keras lainnya yang dapat mengakses halaman web. Selain responsive, bootstrap juga mempunyai fitur yang bisa diaktifkan ataupun dinon-aktifkan sesuai dengan keinginan kita sendiri. Sehingga, kita bisa membuat web untuk tampilan desktop saja dan apabila dirender oleh mobile browser maka tampilan dari web yang kita buat tidak bisa beradaptasi sesuai layar. Dengan bootstrap kita juga bisa membangun web dinamis ataupun statis sesuai kebutuhan perusahaan, profil, informasi, dan lain sebagainya.

    Persiapan menggunakan bootstrap untuk pemula

    Untuk memulai menggunakan Bootstrap, Kita harus mempersiapkan bahan dan tools pendukung untuk melengkapi kegiatan pembuatan web yang baik super cepat. 🙂 . Baiklah langsung saja.

    1. Download file distribusi BootstrapUntuk menggunakan bootstrap, terlebih dahulu Anda harus mendownload resource file atau file distribusi yang disediakan oleh bootstrap di situs resminya getbootstrap.com. Pada halaman tersebut, terdapat tombol Download Bootstrap sebagaimana terlihat pada gambar diatas, langsung saja! klik tombol tersebut. Kemudian pilih lagi Download BootstrapSetelah didownload, kemudian extract menggunakan program seperti 7zip (Gratis) atau winRAR (shareware). Sebetulnya, Anda juga bisa membuka file tersebut dengan aplikasi bawaan windows dengan cara membuka file tersebut, kemudian copy seluruh file dan paste-kan ke folder lain.
    2. Download jQuery Library untuk OfflineUntuk bisa mengaplikasikan bootstrap component seperti modal dialog, navigation bar dan lainnya yang membutuhkan boostrap JS, Bootstrap JS juga membutuhkan jQuery library agar bisa berjalan normal. Bootstrap tidak menyertakan jQuery di dalam file download-nya untuk itu, kita harus mendownloadnya secara terpisah. Hal ini dilakukan agar kita bisa bekerja dan menggunakannya secara offline (tanpa koneksi internet). Silahkan download jQuery library dengan menuju situs resmi jQuery Download, pilih jQuery 1.x kemudian, download dengan mengklik link Download the compressed, production jQuery 1.11.1
    3. Install code editorCode editor penting sekali untuk memanipulasi file yang akan kita kembangkan khususnya file HTML, CSS dan Javascript sebagaimana file tersebut terdapat pada bootstrap. Anda juga bisa menggunakan Cobalah Editor dari kami yang dibuat untuk tes atau uji coba kode. Jangan pernah menggunakan Word processor (Microsoft Word, dll) ataupun notepad untuk memanipulasi file-file tersebut. Karena aplikasi tersebut tidak cocok dan terdapat banyak kekurangan yang akan membingungkan kita sendiri nantinya.Ada banyak sekali code editor yang tersebar di internet yang dapat kita gunakan baik yang gratis maupun yang berbayar. Sebagai pemula, mungkin kita bisa memulai dengan menggunakan Notepad++. Aplikasi ini gratis dan banyak digunakan oleh developer. Download aplikasi Notepad++

    Memulai Belajar Bootstrap

    Setelah semua dipersiapkan saatnya memulai untuk belajar bootstrap. Baik, ikuti tahap-tahapnya berikut ini:

    1. Buat Folder BaruBuatlah folder baru, beri nama misalkan “Belajar_Bootstrap”.
    2. Copy seluruh file Bootstrap ke dalam Folder Baru TersebutCopy folder cssfonts dan js yang ada pada Bootstrap yang telah kita download tadi, ke dalam folder baru tersebut (Belajar_Bootstrap)
    3. Copy file jQuery ke dalam folder jsCopy dan Gabungkan file jquery-1.11.1.min.js yang telah kita download kedalam folder js punya bootstrap tadi, hal ini dilakukan untuk mempermudah proses pembelajaran.
    4. Buat file htmlBuat file baru dengan notepadd++ kemudian copy code snippet yang saya sediakan dibawah ini, kemudian save dan berilah nama seperti: index.html atau default.html dan simpanlah file tersebut ke folder “Belajar_Bootstrap” yang telah dibuat diatas. Berikut kode bootstrap:

    <!DOCTYPE html>
    <html lang=”en”>
    <head>
    <meta charset=”utf-8″>
    <meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
    <meta name=”viewport” content=”width=device-width, initial-scale=1″>
    <title>Bootstrap 3.3.0 Starter Template – by dul.web.id</title>

    <!– Bootstrap –>
    <link href=”css/bootstrap.min.css” rel=”stylesheet”>

    <!– HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries –>
    <!– WARNING: Respond.js doesn’t work if you view the page via file:// –>
    <!–[if lt IE 9]>
    <script src=”https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js”></script>
    <script src=”https://oss.maxcdn.com/respond/1.4.2/respond.min.js”></script>
    <![endif]–>
    </head>
    <body>
    <!– AWAL CONTENT  — hapus dari sini kebawah (sampai AKHIR CONTENT) –>
    <div class=”container”>
    <h1>Apa Kabar Dunia?</h1>
    <!– Small modal –>
    <button class=”btn btn-danger” data-toggle=”modal” data-target=”.bs-example-modal-sm”>Klik Aku</button>

    <div class=”modal fade bs-example-modal-sm” tabindex=”-1″ role=”dialog” aria-labelledby=”mySmallModalLabel” aria-hidden=”true”>
    <div class=”modal-dialog modal-sm”>
    <div class=”modal-content”>

    <div class=”modal-header”>
    <button type=”button” class=”close” data-dismiss=”modal”><span aria-hidden=”true”>×</span><span class=”sr-only”>Close</span></button>
    <h4 class=”modal-title” id=”mySmallModalLabel”>Small modal</h4>
    </div>
    <div class=”modal-body”>
    Hai… salam kenal dari <strong>dul</strong>. Jika dialog ini muncul dan Anda bisa baca tulisan ini berarti Bootstrap berhasil di load dan terintegrasi dengan baik. Selamat Belajar
    </div>
    </div>
    </div>
    </div>
    </div>

    <!– AKHIR CONTENT – dari sini kebawah jgn dihapus –>
    <!– jQuery (necessary for Bootstrap’s JavaScript plugins) –>
    <script src=”js/jquery-1.11.1.min.js”></script>
    <!– Include all compiled plugins (below), or include individual files as needed –>
    <script src=”js/bootstrap.min.js”></script>
    </body>
    </html>

    Uji coba Bootstrap

    Buka file html yang telah dibuat dengan code snippet diatas, buka dengan browser terbaru misalkan Google Chrome atau Firefox, jangan gunakan internet explorer. Jika file Bootstrap.css berhasil diload maka tombol button akan memiliki style ala bootstrap seperti ini:

    Kita coba lagi apakah bootstrap.js berhasil di load dengan cara mengklik tombol

    tersebut. Apabila muncul dialog box, maka bootstrap.js berhasil di load dan siap digunakan sebagai template. Gunakan template ini untuk setiap materi pembelajaran bootstrap dan hapuslah AWAL CONTENT sampai AKHIR CONTENT untuk memulai file baru kosong tanpa konten

    Langkah Selanjutnya pelajar bootstrap?

    Langkah selanjutnya mungkin Anda harus sering-sering mengunjungi situs resmi bootstrap di getbootstrap.com dan mempelajari dokumentasi yang telah disediakan. disini, kami sediakan tutorial bootstrap berbahasa Indonesia secara bertahap. Nantikan Artikel menarik lainnya mengenai Bootstrap.

    Share to

    Perhaps you are interested in other articles.

    Obat Jamur Kulit Paling Ampuh

    10 Merk Obat Jamur Kulit Paling Ampuh di...

    by May 18 2023

    Merk Obat Jamur Kulit Paling Ampuh di Apotik: Jamur kulit adalah masalah yang umum terjadi dan bisa ...

    Cara Mengirim File Besar Lewat Email

    Cara Mengirim File Besar Lewat Email: Ti...

    by May 31 2023

    Cara Mengirim File Besar Lewat Email: Mengirim file melalui email adalah salah satu cara yang umum d...

    iphone news

    iPhone 7 owners duped into drilling hole...

    by Oct 01 2016

    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, to...

    Cara Cek Tagihan Telkomsel

    Cara Cek Tagihan Telkomsel Prabayar dan ...

    by Aug 03 2023

    Cara Cek Tagihan Telkomsel: Dalam era digital saat ini, smartphone telah menjadi kebutuhan utama bag...

    Cara Daftar Registrasi Kartu Telkomsel

    Cara Daftar Registrasi Kartu Telkomsel y...

    by Aug 10 2023

    Cara Daftar Registrasi Kartu Telkomsel: Kartu SIM Telkomsel adalah salah satu operator seluler terbe...

    Antibiotik

    11 Merk Antibiotik yang Aman untuk Ibu M...

    by May 15 2023

    Merk Antibiotik yang Aman untuk Ibu Menyusui dan Anak: infeksi merupakan kondisi yang sering terjadi...

    No comments yet.

    Please write your comment.

    Your email will not be published. Fields marked with an asterisk (*) must be filled.

    *

    *

    Youtube

    Other News

    Cara Agar Orang Tidak Tahu Kita Online di WhatsApp

    Cara Agar Orang Tidak Tahu Kita Online di Whats...


    Cara Agar Orang Tidak Tahu Kita Online di WhatsApp: Sudah menjadi rahasia umum bahwa WhatsApp adalah salah satu aplikasi pesan instan yang palin...

    09 Jun 2023
    Cara Cek No IndiHome Huawei

    8 Cara Cek No IndiHome Huawei yang Benar dan Mu...


    Cara Cek No IndiHome Huawei: IndiHome adalah salah satu penyedia layanan internet populer di Indonesia, dan banyak pengguna mengandalkan perangk...

    09 Aug 2023
    Cara Cek Kesehatan Baterai Realme

    Cara Cek Kesehatan Baterai Realme, Aman dan Val...


    Cara Cek Kesehatan Baterai Realme: Ketika kita berbicara tentang ponsel pintar, salah satu komponen paling penting yang perlu kita perhatikan ad...

    19 Sep 2023
    Cara Registrasi Kartu Indosat Baru

    Cara Registrasi Kartu Indosat Baru: Panduan Len...


    Cara Registrasi Kartu Indosat Baru: Indosat Ooredoo adalah salah satu penyedia layanan telekomunikasi terkemuka di Indonesia. Jika Anda baru saj...

    04 Sep 2023
    Cara Mengganti Nama Facebook

    Cara Mengganti Nama Facebook: Panduan Lengkap d...


    Cara Mengganti Nama Facebook: Facebook adalah salah satu platform media sosial paling populer di dunia, dengan jutaan pengguna yang terhubung sa...

    28 Aug 2023
    back to top