Pengenalan Dasar Bootstrap untuk Pemula

Ingin cepat membuat jaringan?

Ingin kode HTML yang konsisten?

Ingin membuat tampilan web yang responsif dan bagus?

Gunakan bootloader!

Bootstrap saat ini merupakan framework paling populer dalam pengembangan Web.

Berkat Bootstrap, kita bisa membuat jaringan lebih cepat. Tidak perlu repot dengan kode CSS. Karena semuanya disediakan oleh Bootstrap.

Ayo mulai..

 

Apa itu Bootstrap?

Bootstrap adalah kerangka kerja CSS.

Hanya dengan cara ini?

Ya!

Jika Anda ingin lebih lama:

Bootstrap adalah kerangka kerja CSS sumber terbuka dan gratis. Jika sebelumnya Anda pernah membuat website yang tidak menggunakan framework CSS…

Anda harus memiliki pengalaman membuat kode CSS Anda sendiri dari awal.

Melelahkan sekali. .

Inilah sebabnya mengapa Bootstrap hadir untuk membantu kami.

Untuk pemahaman yang lebih baik, mari kita bahas sejarahnya terlebih dahulu:

 

Sejarah dan Versi Bootstrap

Bootstrap awalnya disebut cetak biru Twitter. Karena pertama kali dikembangkan di Twitter oleh Mark Otto dan Jacob Thornton.

Tujuan awalnya adalah untuk menjaga konsistensi alat internal Twitter. Namun, inkonsistensi tersebut membuat kode tersebut sulit untuk dipelihara (maintenance).

Mulai dari masalah:

Mark Otto dan sekelompok kecil pemrogram mulai merancang dan membuat alat internal yang disebut Cetak Biru Twitter.

Oh ya, Hacker Week adalah hackathon untuk tim pengembang Twitter.

Bootstrap 2 dan 3

Versi ini mendukung responsive web design, yaitu layout yang dapat disesuaikan dengan ukuran perangkat yang digunakan.

Selain itu, Bootstrap 3 dirilis pada 19 Agustus 2013. Metode mobile-first berarti tampilan di perangkat seluler diprioritaskan. Oleh karena itu, jika Anda menggunakan kelas bootstrap pada suatu elemen, kelas tersebut akan terlebih dahulu menggunakan kelas tersebut pada tampilan seluler.

Bootstrap 4

Pada 29 Oktober 2014, Bootstrap 4 dirilis, dan versi finalnya dirilis pada 18 Januari 2018. Versi final mengacu pada versi tanpa pengembangan lebih lanjut.

Beberapa perubahan dalam versi ini:

  • Penulisan ulang kode utama;
  • Gunakan Sass, bukan Less;
  • Menambahkan CSS kanonik;
  • Menghapus dukungan untuk IE8, IE9 dan iOS6;
  • Mendukung Kotak Fleksibel CSS
  • Dan banyak lagi (harap baca catatan rilis).

Bootstrap 5 Beta

Bootstrap 5 resmi merilis versi Alpha pada 16 Juni 2020. Versi Beta selanjutnya akan dirilis pada 7 Desember 2020.

Beberapa perubahan di Bootstrap 5:

  • Hapus jQuery;
  • Menulis ulang sistem grid;
  • Situs dokumentasi bootstrap dimigrasikan dari Jekyll ke Hugo;
  • Menghapus dukungan untuk IE10 dan IE11;
  • Menambahkan banyak ikon SVG;
  • Dan banyak lagi (harap baca catatan rilis).

Jadi versi mana yang akan kita pelajari dalam tutorial ini?

Pada tutorial kali ini kita akan mempelajari edisi ke-5, tentunya akan saya update ketika versi terbaru sudah keluar.

Oke lanjut sekarang..

Persiapan untuk Belajar Bootstrap

Sebelum Anda mulai belajar Bootstrap, Anda harus terlebih dahulu menyiapkan peralatan dan prasyaratnya.

Untuk prasyaratnya, Anda setidaknya harus memahami CSS dan Javascript.

mengapa?

Karena kita akan menggunakan kelas Bootstrap secara luas nanti, jika Anda tidak mengerti CSS, mungkin sulit untuk memahaminya.

Jadi untuk Javascript, Anda hanya dapat memahami dasar-dasarnya, karena tidak banyak digunakan dalam tutorial ini…kecuali beberapa komponen.

Jadi, kita memerlukan beberapa alat untuk mulai belajar Bootstrap:

 

  1. Teks Editor

Kami akan menggunakan editor teks untuk menulis kode. Selama Anda tahu cara menggunakannya, Anda dapat menggunakan editor teks apa pun.

Dalam tutorial ini, kita akan menggunakan editor teks Visual Studio Code atau VS Code.

  1. Web Browser

Kita akan menggunakan web browser untuk melihat hasil dari kode yang kita tulis. Anda juga dapat menggunakan browser web apa pun dengan bebas.

Tapi jangan pake IE.. soalnya udah lama hehe

Dalam tutorial ini, kita akan menggunakan Google Chrome dan Firefox di browser web.

  1. Bootstrap

Nah, untuk Bootstrap sendiri…

Kita bisa mendownloadnya menggunakan CDN atau package manager seperti NPM, atau mendownloadnya secara manual.

tenang..

Pada langkah selanjutnya, kita akan belajar bagaimana:

Gunakan Bootstrap dalam HTML

Seperti yang saya katakan sebelumnya…

.. Kita bisa menggunakan Bootstrap dengan banyak cara.

  1. Gunakan CDN;
  2. Unduhan manual;
  3. Unduh dengan manajer paket;

Mari kita coba satu per satu:

 

  1. Menggunakan Bootstrap dengan CDN

Cara ini termasuk cara yang paling mudah bagi pemula yang baru belajar Bootstrap.

Kita hanya perlu menyalin link CDN Bootstrap dan memasukkannya ke dalam kode HTML.

Oh ya, bagi yang belum tahu apa itu CDN:

CDN adalah singkatan dari Content Delivery Network, sejenis server di seluruh dunia, yang digunakan untuk mengirimkan konten dengan cepat dengan cara terbaik.

Baca Juga : rekomendasi laptop harga 7-8 jutaan

Gambar di sebelah kanan adalah server CDN.

Apakah kamu mengerti?

OK silahkan!

Buat folder baru bernama learn-bootstrap dan buka dengan VS Code.

Klik pada file dan pilih untuk membuka folder.

Sumber : https://warung-it.com/

Leave a Reply

Your email address will not be published. Required fields are marked *