Cara menggunakan bootstrap untuk mendesign front end page kalian

 Kembali lagi bersama sayaaaaaaa, yang akhit- akhir ini aktif membuat blog. Untuk kalian yang baru coba membaca bisa melihat blog aku sebelumnya loh. Siapa tau bisa membantu kalian untuk mengerti beberapa hal yang baru. Nahh , pada kali ini aku ingin menjelaskan bagaimana cara kalian menggunakan bootstrap untuk mempermudah kalian gituu. Sebelumnya, tahukah kalian apa si bootstrap itu?


<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

Bootstrap adalah framework open-source khusus front end yang awalnya dibuat oleh Mark Otto dan Jacob Thornton untuk mempermudah dan mempercepat pengembangan web di front end.

Bootstrap memiliki semua jenis HTML dan template desain berbasis CSS untuk berbagai fungsi dan komponen, seperti navigasi, sistem grid, carousel gambar, dan tombol (button).

Framework ini memang menghemat waktu developer karena tidak perlu mengelola template berkali-kali. Namun, fungsi utama dari Bootstrap adalah untuk membuat situs yang responsif. Interface website akan bekerja secara optimal di semua ukuran layar baik di layar smartphone maupun layar komputer/laptop.

Developer tak perlu lagi mendesain situs khusus untuk perangkat tertentu. Trafik dan jangkauan audiens versi desktop tidak akan hilang dan tetap diarahkan ke website versi mobile.

User dan komunitas Bootstrap semakin berkembang. Developer dan designer website bisa bertukar informasi dan juga berdikusi mengenai patch framework terbaru.

Nah kalian sekarang sudah tahu kan apa itu boostrap. Nah gimana si cara kita pakai boostrap ini untuk mempermudah kita mendesign frontend kita?

Nah ada sesuatu yang disebut CDN (Content Delivery Network) intinya pada bagian ini kita menggunakan bootstrap tapi secara online jadi butuh koneksi internet 

<!-- Latest compiled and minified CSS -->

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

Kalian tinggal menambahkan format diatas untuk menambah semua format bootstrap yang umumnya udah ada. Contohnya bisa diliat dibawah ini ya

Nah sebenarnya setelah kita memasukkan script diatas tujuannya buat apa si? kok bootstrapnya belom jalan? Nah disini teman teman harus ke boostrap.com terlebih dahulu untuk mengetahui kalian pengen edit tampilan website kalian seperti apa si? jika seperti contoh kalian butuh tombol kalian jadi warna merah karna itu bersifat jawaban tidak 
Nah bisa diliat seperti pada gambar tinggal kalian masukkan class tersebut, maka boostrap kalian akan terimplementasi . Bisa diliat di link https://getbootstrap.com/docs/5.1/components/buttons/ . Gampang kan? Jadi apapun yg kalian butuhkan pada tampilan website kalian tidak perlu kalian buat dr 0. Tinggal kalian cari di https://getbootstrap.com/docs/5.1/getting-started/introduction/. dan kalian cari apa yang kalian butuhkan selesai deh. Sekian dari saya hari ini. Terimakasih sudah membaca blog saya yang saya buat sisimpel ini. Semoga terbantu ya teman teman




Daftar Pustaka

https://www.hostinger.co.id/tutorial/apa-itu-bootstrap\

https://www.petanikode.com/bootstrap-dasar/

Komentar

Posting Komentar

Postingan populer dari blog ini

Jenis Sprint Retrospective

Gambar
Hai, hai selamat datang kembali ke blogg aku. Bagi yang baru baca salam kenal ya . Topik yang hari ini aku bawakan mengenai Sprint Retrospective. mumpung di hari libur ini dan aku amat sangat gabut jadi kepikiran deh untuk menulis blog hari ini, sekaligus untuk melegakan penat di kepala karna kebanyakan ngoding lol (canda gais). Yuk kita mulai aja ya Seperti yang kalian tahu Sprint Retrospective termasuk ke dalam cara pengembangan aplikasi dengan menggunakan teknik Scrum. Aku jelasin singkat dulu sebelumnya apa aja sih sebenarnya teknik pengembangan metodologi scrum ini 1. Initiate Tahap ini adalah tahap awal pada pengembangan  software . Pada tahap ini, biasanya akan disusun tim serta  project vision . 2. Plan and Estimate Pada tahap ini, dilakukan perencanaan untuk memulai  sprint . Menyusun  tasklist  berdasarkan  user story  serta menyusun  backlog . 3. Implement Eksekusi. Yap, perencanaan yang telah disusun di tahap sebelumnya mulai dieksekus...
Baca selengkapnya