Senin, 20 Agustus 2018

PENGENALAN BOOTSTRAP

Author:  |   |  2 Comments | 

                               Assalammu'alaikum wr. wb. 

                                   Hasil gambar untuk bootstrap 
A. Pendahuluan
Kali ini saya akan berbagi tentang pengenalan bootstrap. Langsung saja ke pembahasannya.

1. Pengertian
BOOTSTRAP adalah Aplikasi sumber terbuka yang berupa framework atau kerangka kerja untuk membangun website dinamis dengan menggunakan bahasa script CSS. BOOTSTRAP memudahkan developer dan designer untuk membuat sebuah aplikasi web menjadi cepat dan mudah dibandingkan dengan membuatnya dari awal.

2. Latar Belakang
Bootstrap itu dapat diartikan sebagai kumpulan dari fungsi-fungsi/prosedur-prosedur dan class-class untuk tujuan tertentu yang sudah siap digunakan sehingga bisa lebih mempermudah dan mempercepat pekerjaan seorang programer, tanpa harus membuat fungsi atau class dari awal. Oleh karena itu, saya ini belajar bootsrap.

3. Maksud dan Tujuan

  • Mempercepat dan mempermudah pembangunan sebuah aplikasi web.
  • Relatif memudahkan dalam proses maintenance karena sudah ada pola tertentu dalam sebuah framework (dengan syarat programmer mengikuti pola standar yang ada)
  • Umumnya framework menyediakan fasilitas-fasilitas yang umum dipakai sehingga kita tidak perlu membangun dari awal.
  • Lebih bebas dalam pengembangan jika dibandingkan CMS
 B. Alat dan Bahan
 -Laptop
  -Web Browser
 -Sublime text
C. Jangka Waktu Pelaksanaan
   20 menit
D. Pembahasan
Apa Itu Bootstrap?
Bootstrap adalah front-end framework yang Cantik, bagus , mudah digunakan serta cocok untuk semua jenis device (Handphone, tablet PC, Laptop, PC). Bootstrap menyediakan HTML, CSS dan Javascript siap pakai dan mudah untuk dikembangkan.
Dengan Menggunakan Bootstrap, Pengerjaan sebuah project dalam sebuah team menjadi lebih mudah. Mengapa demikian? Karena dengan Bootstrap, penamaan class sudah dibakukan. Seorang desainer hanya tinggal menggunakan nama class tersebut di setiap TAG HTML yang ia gunakan.

Untuk Apa itu bootstrap?

Bootstrap merupakan framework untuk membangun desain web secara responsif. Artinya, tampilan web yang dibuat oleh bootstrap akan menyesuaikan ukuran layar dari browser yang kita gunakan baik di desktop, tablet ataupun mobile device. Fitur ini bisa diaktifkan ataupun dinon-aktifkan sesuai dengan keinginan kita sendiri. Sehingga, kita bisa membuat web untuk tampilan desktop saja dan apabila dirender oleh mobile browser maka tampilan dari web yang kita buat tidak bisa beradaptasi sesuai layar. Dengan bootstrap kita juga bisa membangun web dinamis ataupun statis.

Cara menggunakan Bootstrap

Jika kita telah mempunyai Web HTML dengan coding seperti dibawah ini:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h1>Hello, world!</h1>
<script src="http://code.jquery.com/jquery.js"></script>
</body>
</html>
Untuk merubah agar bisa menggunakan, bootstrap, Anda tinggal menyisipkan di bagian head beberapa baris untuk loading style dan javascript bootstrap sebagai berikut (lihat tambahan di baris 8 dan 9):
<html lang="en"> 
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>
E. Hasil yang Diharapkan
  Bisa lebih paham apa itu bootstrap dan cara kerjanya.
F. Kesimpulan
  Jadi, bootsrap itu merupakan library framework css. Dan bootsrap merupakan salah satu framework dari html,css an javascript yang populer dikalangan developer.
G. Referensi  
http://www.malasngoding.com https://id.wikipedia.org/wiki/PHP_Bootstrap
 
Sekian dan terimakasih.

                             Wassalammu'alaikum wr. wb.

  2 komentar:

Popular Posts

Recent Posts

About Me

Foto saya
Assalamu'alaikum wr.wb Hay perkenalkan nama saya Rizka Mala Alfiana my nick name is Rizka, I from in Jepara. Sekian dan Terimakasih. Wassalamu'alaikum wr.wb

Formulir Kontak

Nama

Email *

Pesan *

Pengikut

Recent

Comment