apa itu framework Bootstrap ? Cara membuat website dengan Bootstrap

 

Hai, Kali ini saya akan membahas mengenai salah satu Framework yang cukup terkenal dikalangan dunia web developer khususnya bagian front end

pada kesempatan ini saya memberikan tutorial cara membuat website dengan framework Bootstrap  

Tenang, Jika kamu tak terlalu faham atau Pemula dunia website tak perlu bingung mengenai " ah saya ga bisa ngoding apalagi bikin website yang cakep."

gak perlu bersedih lagi kawan, Karena pada artikel ini memberikan tata cara lengkap dari awal sampai akhir, Mulai dari Cara menggunakan sampai cara pengaplikasiannya ke website kalian.

Baca Juga : Kumpulan Framework css terbaik dalam pembuatan website

Sebelum terjun lebih jauh nih, Kamu perlu tau apa sih framework Bootstrap itu ? dan kenapa harus Framework yang satu ini ?, Saya akan menjelaskan nya.

Simak artikel berikut.

Apa itu framework Bootstrap ?

Framework Bootstrap adalah sebuah projek open source yang digunakan untuk mempermudah mendesain sebuah tampilan website. Framework tersebut berbasis html, CSS dan javascript

 dalam beberapa kasus, style dalam web bergantung pada css dan tentunya penggunaan Framework yang tepat dapat mempercepat pembuatan tampilan yang ciamik dengan framework

Framework Bootstrap dirilis pada 19 Agustus 2011 yang dikembangkan oleh Bootstrap Core team dengan perancang awal bernama Mark Otto, versi stabil 5.1.2 / 5 Oktober 2021 dan memiliki Lisensi MIT (Lisensi Apache 2.0 sebelum Bootstrap v3.1.0)

Jika kalian sudah mengenal Framework Bootstrap, kita akan menuju ke instalasi atau pemasangan framework.

Cara menggunakan framework Bootstrap

Pertama, Kita memerlukan beberapa perlengkapan seperti web hosting dan domain jika ingin langsung di aplikasikan ke web dan langsung di online kan atau menggunakan XAMPP atau web server lokal untuk dijalankan di localhost

Instalasi

Kita akan menambahkan Projects Bootstrap tersebut ke projects website kita, Ada beberapa metode, silahkan pilih sesuai kebutuhan.

1. CDN Jsdelivr

Pemilihan instalasi satu ini sangat cocok untuk orang yang memerlukan cdn untuk optimasi Pagespeed mereka. Dikarenakan teknologi CDN yang akan mengambil sumber daya di data center terdekat. Tentunya ini berpengaruh positif terhadap pengguna cpu dan server.

Jika kalian memilih instalasi metode ini, Silahkan pastekan tag pemanggilan js dan css Bootstrap cdn dibawah ke source code website mu.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

Peletakan kode di atas bebas, Baik itu didalam tag head atau body terserah. Namun, direkomendasikan peletakan css di dalam tag head dan js di dalam tag body paling bawah sendiri 

2. NPM 

Kamu dapat menginstal framework Bootstrap dalam node.js juga loh. Jika ingin menginstal Bootstrap langsung dari Cpanel, pastikan paket hosting yang kamu beli support terminal. 

Namun, Tak perlu khawatir kamu juga bisa menginstal menggunakan metode ini dengan terminal perangkat kamu, Baca panduan Dibawah ini.

$ npm install bootstrap

jika kamu menggunakan terminal dari Cpanel langsung, maka bisa langsung pastekan command di atas dan selesai.

Namun, Apa jadinya jika paket hosting mu belum ada terminal nya ? Tenang kamu bisa ikuti panduan ini 

1. Buka terminal (contohnya seperti termux atau command prompt kalau di windows, atau pakai command di Linux)
2. buat folder installB dengan command mkdir installB 
3. Masuk ke folder tersebut dengan command cd installB 
4. Pastekan command instalasi Bootstrap seperti command di Cpanel di atas (npm install bootstrap), lalu tekan enter
5. ketik mv installB /sdcard  
6. setelah menekan enter, pergi ke file manager lalu upload seluruh file dan folder yang ada di folder instalB ke hosting/Folder root localhost
7. selesai.

Lalu bagaimana cara memanggil file Bootstrap tersebut ? Kalian bisa menambahkan tag pemanggil script dan css eksternal seperti <script> dan <link>

contoh jika saya memanggil nya dalam 1 folder bersama index.html/php :

<link href='bootstrap@5.1.3/dist/css/bootstrap.min.css' rel='stylesheet'/>

<script src='bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js' type='text/javascript'/>

 Ok lanjut ke cara yang selanjutnya.

3. Yarn

sama seperti npm. kamu dapat menginstal package Bootstrap di application web seperti yarn, Untuk tata caranya silahkan lihat lagi dan ikuti seperti instalasi di npm

pastekan teks dibawah ke terminal 

$ yarn add Bootstrap

4. Ruby Gems

selain npm dan yarn, kamu dapat menginstal framework Bootstrap dalam Project ruby mu. Kamu dapat memasukkan kode dibawah kedalam projects kalian

gem 'bootstrap', '~> 5.1.3'

 kode di atas menginstal Bootstrap versi stabil atau terbaru yaitu v5.1.3, kamu dapat mengganti sesuai selera, tapi saya sarankan versi yang terbaru saja.

5. Composer

management Sass dan javascript lebih mudah dengan menginstalnya via composer.

tata cara sama saja dengan npm dan yarn di atas, untuk command nya sebagai berikut

composer require twbs/bootstrap:5.1.3

6. NuGet ( .NET )

.NET atau dibaca dotnet adalah sebuah platform  software development yang dikembangkan oleh Microsoft. Karena saya kali ini berfokus kepada instalasi framework Bootstrap jadi saya tidak akan membahas nya lebih dalam, lagipula kalian juga ga akan nyari hal mengenai .net di artikel ini.

Selain menggunakan metode instalasi di atas kalian bisa menginstal di software development yang satu ini di projects kalian, untuk kode nya 

PM> Install-Package bootstrap 

PM>  Install-Package bootstrap.sass

itulah beberapa metode penginstalan framework Bootstrap. sekaligus untuk menjawab request mengenai Apa itu Framework Bootstrap, Cara membuat website dengan framework Bootstrap, untuk selanjutnya akan saya buat kan artikel mengenai cara membuat website sederhana dengan Bootstrap. nantikan update nya dan...

sekian, sampai jumpa