Belajar instal bootstrap dan membuat tombol warna dengan bootstrap part 1
PENGERTIAN DAN CARA MENGGUNAKAN BOOTSTRAP
Bootstrap
adalah sebuah library framework CSS yang dibuat khusus untuk bagian pengembangan front-end website. Bootstrap juga merupakan salah satu framework HTML, CSS dan javascript yang paling populer di kalangan web developer yang digunakan untuk mengembangkan sebuah website yang responsive. Sehingga halaman website nantinya dapat menyesuaikan sesuai dengan ukuran monitor device (desktop, tablet, ponsel ) yang digunakan pengguna disaat mengakses website website dari browser. Pada mulanya bootstrap bernama "Twitter Blueprint" yang dikembankan oleh Mark Otto dan Jacob Thornton di Twitter sebagai kerangka kerja untuk mendorong konsistensi di alat internal.Dengan menggunakan Bootstrap seorang developer dapat dengan mudah dan cepat dalam membuat front-end sebuah website. Anda hanya perlu memanggil class-class yang diperlukan, misalnya membuat tombol, grid, tabel, navigasi dan lainnya.
CARA MENGGUNAKAN BOOTSTRAP
Untuk menggunakan bootstrap yang pertama kali dilakukan adalah melakukan instalasi bootstrap. Anda
dapat langsung mendownload bootstrap pada website resminya di https://getbootstrap.com/docs/3.3/getting-started/ Setelah anda membuka website tersebut langsung aja anda mengklik tombol download bootstrap tersebut. Lihat lingkaran pada gambar dibawah ini.
 |
| Belajar instal bootstrap dan membuat tombol warna dengan bootstrap part 1 |
Setelah di klik akan langsung muncul simpan berkas langsung aja klik oke. CARA MENGINSTAL BOOTSTRAP Setelah anda mendownload framework css bootstrap kemudian ekstrak pada project anda. Disini saya meletakkannya di Local Disk (C:) ---> www . setelah di ekstrak , anda langsung saja mengganti nama folder nya menjadi yang anda ingingkan , disini saya memberi nama belajar bootstrap . Untuk lebih jelasnya langsung saja lihat gambar dibawah ini
 |
| Belajar instal bootstrap dan membuat tombol warna dengan bootstrap part 1 |
 |
| Belajar instal bootstrap dan membuat tombol warna dengan bootstrap part 1 |
Jika sudah di rename anda langsung aja buka folder tersebut . difolder tersebut akan terdapat 3 folder seperti gambar di bawah ini .
 |
| Belajar instal bootstrap dan membuat tombol warna dengan bootstrap part 1 |
 |
| Belajar instal bootstrap dan membuat tombol warna dengan bootstrap part 1 |
Setelah kita buka project kita/ sampai muncul 3 folder disudut kiri seperti pada gambar diatas, kita langsung saja ngoding untuk memanggil boostrap tersebut , Serta di part 1 ini kita membuat tombol . Ikuti codingan seperti gambar di bawah ini .
 |
| Belajar instal bootstrap dan membuat tombol warna dengan bootstrap part 1 |
atau salin coding berikut ini
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Belajar Bootstrap</title>
<link rel="stylesheet" href="css/bootstrap.css" type="text/css" media="" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
</head>
<body>
<h1> Cara menggunakan Bootstrap Untuk Membuat tombol | https://duniacodeiptek.blogspot.com</h1>
<button class="btn btn-danger">Tombol Merah</button>
<button class="btn btn-success">Tombol Hijau</button>
</body>
</html>
<head>
<title>Belajar Bootstrap</title>
<link rel="stylesheet" href="css/bootstrap.css" type="text/css" media="" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
</head>
<body>
<h1> Cara menggunakan Bootstrap Untuk Membuat tombol | https://duniacodeiptek.blogspot.com</h1>
<button class="btn btn-danger">Tombol Merah</button>
<button class="btn btn-success">Tombol Hijau</button>
</body>
</html>
Setelah di ketik coding nya , lanjut kita save dengan menekan tombol pada keyboard yaitu tombol CTRL + S , atau bias juga dengan mengklik MENU FILE di sudut kiri lalu klik SAVE . Lalu buat nama nya dengan nama “index.html ” atau bias juga “index.php” ,lalu Arahkan simpannya di folder tempat Project anda berada .
Selanjutnya langkah Terakhir kita langsung saja lihat hasil di browser . sebelumnya kita jangan lupa terlebih dahulu kita Aktifkan SERVER OFFLINE nya ,Seperti Xampp, Wamp, DLl . setelah di aktifkan kita langsung saja buka browser yang anda miliki, disini saya menggunakan MOZILLA FIREFOX . Lalu kita ketik di url nya “localhost” tekan enter. Jika sudah terbuka akan terlihat folder “belajar bootstrap” . Langsung saja dibuka dan lihat hasil nya . Untuk lebih jelasnya lihat gambar dibawah ini !
 |
| Belajar instal bootstrap dan membuat tombol warna dengan bootstrap part 1 |
Dan inilah Hasil nya :)
 |
| Belajar instal bootstrap dan membuat tombol warna dengan bootstrap part 1 |
Sekian dari cara instal bootstrap dan membuat tombol warna dengan bootstrap part 1, dan jangan kemana-mana tetep di sini yah dan tunggu tutorial bootstrap part 2 nya :) ....
jangan lupa share ya ke teman-teman agar saling berbagi satu sama lain dan saling membantu juga.
Share ya ----->>>>>
Belum ada Komentar untuk "Belajar instal bootstrap dan membuat tombol warna dengan bootstrap part 1"
Posting Komentar