Tampilan Web Elegan dengan Bootstrap (Pengertian dan Cara Instal/Pasang)

Hallo guys, jumpa lagi dengan saya Ngespot admin. Pada postingan kali ini saya akan share tutorial cara memasang atau menginstal Bootstrap di website dengan mudah.

Pertama, Apa itu Bootstrap ?

     Bootstrap adalah sebuah library framework CSS yang dibuat khusus untuk pengembangan front-end sebuah website. Selain komponen class interface, bootstrap juga memiliki grid yang berfungsi untuk mengatur layout pada halaman website. Oleh karena itu Bootstrap juga dikenal sebagai salah satu framework CSS, HTML, Javascript yang menyediakan HTML, CSS dan Javascript siap pakai dan mudah untuk dikembangkan oleh siapapun.

Apa itu back-end dan front-end?

     Front end developer adalah orang yang berperan mengembangkan tampilan situs atau aplikasi melalui HTML, CSS, dan JavaScript.
Sementara, back end adalah orang yang berperan agar situs atau aplikasi dapat bekerja, biasanya berhubungan dengan host dan server.

Kembali ke topic kita mengenai bootstrap,

Apa Kelebihan Bootstrap ?

    Karena Bootstrap ini merupakan sebuah framework atau kerangka kerja, tentunya akan lebih memudahkan kita dalam membuat atau mengembangkan sebuah website. Kelebihan atau keunggulan Bootstrap diantaranya;

• Lebih efisien waktu, seperti yang sudah saya utarakan tadi,ootstrap ini sudah memiliki kode siap pakai. Jadi kita hanya perlu mengaplikasikannya pada web kita sesuai dengan design yang kita inginkan.
• Tampilan elegan, hasil dari tampilan web yang menggunakan Bootstrap sangat rapih dan elegan.
• Dan masih banyak lagi kelebihan dari Bootstrap ini, seperti adanya feature slider pada Bootstrap, custom modal, custom table dan custom navbar.

Lalu Bagaimana Cara memasang Bootstrap  di website?

Cara memasang Bootstrap  di website sangatlah mudah, dan perlu kalian ketahui Bootstrap ini memerlukan library javascript seperti JQUERY dalam main functionnya.

Untuk Memasang Bootstrap pada website atau blog Silahkan copy dan letakan script dibawah ini di atas tag </head>

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

Kemudian letakan script berikut diatas tag </body>

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

Catatan: Script berwarna orange adalah adalah script JQUERY, jika dalam website atau blog kamu sudah ada script jquery, kamu tidak perlu menambahkannya lagi.

Jika sudah silahkan simpan lalu reload halaman website atau blog kamu, dengan begitu Bootstrap sudah terpasang dalam website kamu.

Cara menggunakan bootstrap!

Ok, setelah berhasil memasnag Bootstrap, sekarang kita harus mengetesnya apakah sudah terinstal atau belum. Karena bootstrap ini merupan framework yang sudah memiliki banyak code siap pakai, cara menggunakannya sangat mudah sekali. Kita hanya perlu menggunakannya dalam atribut class pada element yang akan kita atur.
Contohnya seperti ini:

<button>Button biasa </ button>
<button class='btn btn-primary'>Button dengan bootstrap </ button>

Penjelasan:
  btn  adalah class untuk menampilkan tampilan button dari framework bootstrap
  btn-primary juga sama, hanya saja ini untuk menampilkan button dengan warna primary

Semua kode siap pakai bootstrap bias digunakan pada element apapun selama penulisan kodenya benar. Dan untuk list kode siap pakai yang ada pada bootstrap ini bias kamu lihat di website officialnya di: Getbootstrap.com.
Dan berikut ini ada beberapa sample bootstrap yang bias kamu lihat dan pelajari:


Gimana enak dan mudah bukan? Jika ada keluhan atau pendapat mengenai Bootstrap silahkan masukan dikolom komentar ya. Sekian tutorial kali ini mengenai bootstrap, silahkan share jika tutorial ini bermanfaat.