Pengaplikasian Bootstrap - Cara Menggunakan Bootstrap - Menggunakan Komponen pre-existing

bootstrap, merupakan framework HTML, CSS dan Javascript yang dikhususkan untuk front-end website yang sekarang ini populer pada kalangan web devloper. booststrap menyediakan kumpulan komponen calss class interface dasar dengan tampilan menarik, bukan hanya itu bootstrap juga menyediakan grid yang dapat digunakan untuk mengatur layout tampilan website.

bootstrap pada awalnya diberi nama twitter blueprint, dikembangkan oleh mark otto dan jacob thornton di twitter. dirilis pada 19 agustus 2011 sebagai proyek sumber terbuka, bootstrap sekarang telah banyak mengalami perkembangan, sekarang terah rilis sampai pada versi 4. tentusaja dalam pembuatan dan pengembangan aplikasi website mimin lebih merekomendasikan menggunakan framework ini, karena dengan menggunakan framework bootstrap kita sebagai devloper atau pengembang aplikasi maupun sistem informasi website tidaklah membangun  dari 0 atau dari awal, karena sudah disediakan code code css yang siap pakai untuk mengatur interface, menghemat waktu dan ringan digunakan karena dalam bootstrap sudah dibuat dengan tersetruktur.

disamping dari kemudahan yang telah mimin sampaikan pada framework ini, sebagai devloper juga harus mengenal dan mempelajari pembuatan dan penggunaan CSS, karena tidak menutup kemungkinan sewaktu - waktu walau menggunakan framework, diperlukannya CSS yang dibuat sendiri oleh devloper.

Instalasi Bootstrap

instalasi bootstrap dapat dilakukan dengan beberapa cara diantaranya sebagai berikut

  • bootstrapCDN, merupakan jaringan pengiringan publik, yang memungkinkan untuk memuat CSS, JavaScript dan gambar dari server secara jarak jauh. untuk menggunakan bootsrtapCDN dapat dengan cara menambahkan tag berikut yang diletakkan pada bagian tag head

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>

  • Install dengan bower
    • bower install bootstrap
  • install dengan npm
npm install bootstrap@3

  • install dengan composer
composer require twbs/bootstrap

sumber : https://getbootstrap.com/docs/3.4/getting-started/

dari cara yang telah disebutkan, dapat juga melalui secara offline, dengan cara unduh bootstrap terlebih dahulu, untuk mendapatkan bootstrap, dapat mendowd pada website resmi pada https://getbootstrap.com/.

ekstrak file yang telah diunduh kemudian masukkan kepada aplikasi web yang akan digunakan bootstraps, 

mimin disini memuat file pada folder bootstrap, pada localhost. untuk pengaplikasiannya, buat sebuah file dengan ekstensi .html atau .php, mimin pada kasus ini membuat dengan file dokumen index.php



 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
<head>
	<title>contoh</title>
	<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript" src="js/bootstrap.js"></script>
</head>
<body>
	<h1>Contoh Penggunaan Bootstraps</h1>
	<button class="btn btn-danger">Button</button>
	<button class="btn btn-warning">Button</button>
	<button class="btn btn-success">Button</button>
	<button class="btn btn-info">Button</button>
</body>
</html>

mula mula pada bagian head load terlebih dahulu komponen komponen bootstrap, bootstrap.css, jquery.js dan bootstrap.js, atau sesuai kebutuhan. untuk lebih banyak mengenai penggunaan komponen bootstrap ini dapat mengunjungi https://getbootstrap.com/docs/4.5/getting-started/introduction/ untuk versi 4.5, selain itu juga anda dapat memilih versi bootstrap yang dinginkan, dengan klik allversion. tentusaja untuk sekaran ini orang - orang telah beralih pada versi 4, mimin sarankan untuk menggunakan versi 4. walau daalm penggunaan kurang lebih sama, namun ada perbedaan dengan versi sebelumnya.

Komentar

Posting Komentar

Postingan populer dari blog ini

Membuat Aplikasi Hitung Nilai Rata - Rata Sederhana Tanpa Database dengan PHP

Gambar
    pada kesempatan kali ini mimin akan membagikan cara membuat Aplikasi sederhana menghitung nilai rata - rata, dengan bahasa PHP tanpa menggunakan database. aplikasi dengan ketentuan berikut : inputan nilai berdasarkan banyaknya matapelajaran yang diambil. mata pelajaran yang diambil maksimal hanya 12. hasil dari program berupa nama, banyaknya mapel dan nilainya, nilai dan grade nilai seperti berikut :  jika mendapatkan nilai lebih dari sama dengan 80 grade A  jika mendapatkan nilai lebih dari sama dengan 70 grade B  jika mendapatkan nilai lebih dari sama dengan 50 grade C  jika mendapatkan nilai lebih dari sama dengan 40 grade D  jika mendapatkan nilai dibawah 40 grade E   Pembahasan : buat folder baru untuk aplikasi yang akan dibut, mimin disini membuat dengan nama folder "hitung_nilai". buat tiga buah file dengan ekstensi .php. index.php, input.php dan output.php. code index.php : <!DOCTYPE html> <html lang="en"> <head> <m
Baca selengkapnya

Cara Membuat Aplikasi Data Siswa Menggunakan Array Push Dengan Bahasa PHP

Gambar
pada kesempatan kali ini mimin akan membahas mengenai pengaplikasian array push pada sebuah program sederhana "aplikasi data siswa". menggunakan bahasa PHP native. mengenai array push, array_push() adalah sebuah fungsi ada pada PHP yang digunakan untuk menambahkan data array. dengan fungsi ini dapat menambahkan satu atau lebih menambahkan nilai array. postingan berikutnya kita akan membahas lebih jauh mengenai array push. sekelas junior atau pemula dalam webdevloper wajib menguasai hal ini, karena selain termuat dalam materi array juga berguna dalam pemprograman tingkat lanjut. kali ini mimin memberikan sebuah contoh program sederhana yang biasanya dibahas atau bahkan dijadikan tugas kepada mereka yang sedang belajar junior pemprograman PHP, mimin memberikan sebuah contoh dengan studikasus inputkan data siswa dengan ketentuan. data yang diinputkan berupa nama, alamat, tempat lahir, tanggal lahir, jenis kelamin dan jurusan. nama, alamat, tempat lahir merupakan input type text.
Baca selengkapnya

Cara Memasaukkan Kode PHP kedalam HTML - Belajar PHP

hai, pada kesempatan kali ini mimin akan membagikan dan membahas mengenai bagaimana cara memasukkan kode PHP kedalam kode HTML.html tanapa php hanya akan menjadi interface saja, namun jika php saja tanapa html akan hanya menjadi sebuah program teks saja tanapa interface, karena pada umumnya agar pengguna dapat berinteraksi terhadap program menggunakan form, sedangkan form tersebut dibuat menggunakan html, dan data pada form tersebut dapat direkam dan dikirimkan dengan kode php, jadi kedua bahasa pemprograman ini saling berhubungan dalam membangun sutu program aplikasi website, jika membangun website dinamis. seperti yang mimin singgung membuat web dinamis dibutuhkannya pengkodean sisi server side dan client side, atau memprogram dengan php sebagai server side dan html sebagai server side, juga dapat dipercantik dengan menambahkan java script. dalam pengkodean pada membangun sebuah projek aplikasi web, biasanya kode html dan php digabung menjadi satu dalam sebuah file dokument php, tent
Baca selengkapnya