Husni Kamal
Crash Team Racing Pro Player (Drift). Blue fire addict. Had beaten Oxide and Emperor Velo XXVII in some time trial track. Tetris Pro Player. Rank #2 in Bandung.

Menambahkan Bootstrap

Proses pengembangan aplikasi berbasis web, biasanya tak luput dari sebuah tampilan, dimana di dalamnya terdapat struktur rangkanya dan juga riasannya. Rangka web, yang umum kita ketahui memakai sebuah bahasa markup yang sangat populer, yaitu HTML. Sedangkan untuk riasannya sendiri biasanya menggunakan CSS.

Dengan semakin pesatnya teknologi, dewasa ini pengembangan aplikasi berbasis web semakin mudah, cepat dan efisien. Salah satunya adalah untuk membuat riasan web, yang jika kita coba kerjakan mulai dari nol, mungkin sangatlah banyak menghabiskan waktu. Salah satu CSS framework yang populer adalah Bootstrap. Bootstrap merupakan salah satu toolkit untuk para web developer yang sangat membantu mempercepat proses pengembangan, khususnya untuk para frontend developer. Mulai dari kemudahan membuat tampilan grid, baris dan beberapa style detail seperti ukuran font dan lain sebagainya, sudah di sediakan oleh si Bootstrap ini.

Instalasi Sederhana

Sebenarnya, untuk instalasinya sendiri sudah sangat jelas, bisa kita baca di dokumentasi yang disediakan oleh bootstrap. Namun, kali ini saya ingin berbagi hal sederhana tentang bagaimana sih, cara instalasi bootstrap untuk project HTML sederhana. Untuk dokumentasi lengkapnya, kita bisa buka laman Bootstrap pada link berikut.

Cara cepat instalasi Bootstrap yang dianjurkan oleh Bootstrap-nya sendiri adalah dengan menggunakan CDN. Kita hanya perlu copy paste code yang tersedia ke dalam project kita. Pertama, kita tambahkan CDN untuk CSS Bootstrapnya,

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

Lalu kita tambahkan juga CDN Javascript-nya,

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

CDN Javascript ini digunakan pada beberapa komponen Bootstrap yang memerlukan fungsi-fungsi Javascript, seperti misalnya transisi, animasi dan lain-lain.

Nah, itu dia cara sederhana untuk instalasi bootstrap pada project HTML. Semoga bermanfaat!

Share

You may also like...

Leave a Reply

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