Membuat Website dengan Menggunakan HTML

Mempercantik Tampilan Website dengan Menggunakan CSS

Mempercepat Proses Pembuatan Website dengan Bootstrap

Apa itu Bootstrap dan Bagaimana Cara Menggunakannya?

Bootstrap adalah sebuah framework yang dibuat khusus untuk bagian pengembangan front-end website, diciptakan oleh dua orang programmer di twitter, yaitu Mark Otto dan Jacob Thornton pada tahun 2011. Bootstrap digunakan untuk standarisi pekerjaan di lingkungan internal twitter, karena sebelumnya para programmer di twitter menggunakan berbagai macam tool dan library yang mereka kenal dan suka untuk melaksanakan pekerjaan mereka, karena tidak adanya standarisasi akibatnya sulit untuk dikelola.

Bagi Anda yan belum pernah menggunakan boostrap, silahkan kunjungi situs resminya: https://getbootstrap.com

Untuk mengetahuai informasi tentang cara pemakaian Bootstrap klik tombol “Get started“.

Ada dua macam link referensi yang harus disertakan ke dalam dokumen HTML kita, yaitu link dokumen CSS yang harus diletakan tepat sebelum tag penutup </head>:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

dan link untuk dokumen JavaScript-nya yang harus diletakan sebelum tag penutup </body>:

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

Silahkan letakan dua macam link referensi di atas ke dalam file “index.html” Anda, karena kita akan mempraktekannya langsung!

Jika sudah selesai, silahkan simpan dan kemudian lihat hasilnya.

Perhatikan, ada beberapa style yang sudah kita buat dalam dokumen “style.css” kita jadi hilang, khususnya untuk bagian “alertborder-nya menjadi hilang. Mengapa? Karena style yang kita buat tertimpa oleh style dari Bootstrap!

Dalam penyusunan tutorial ini kami sengaja membuat beberapa nama “class” yang sama dengan nama-nama class yang dipakai oleh Bootstrap, dengan tujuan agar materi yang ada dapat terus mengalir saat dipraktekan.

Lihatlah susunan dari link referensi dokumen CSS pada dokumen HTML kita:

<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

Kalau ingin agar style yang Anda buat bisa tetap diterapkan walaupun memiliki class yang sama dengan CSS lainnya, maka Anda harus memindahkan posisinya ke bawah, berikut contohnya:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css">

Jika sudah silahkan simpan dan lihat hasilnya.