Mengenal Lebih Dalam Apa itu Bootstrap - PenyairCoding (Bergerak & Kemudian Terjadi)
Latest Post
Tunggu...

Selasa, 22 Oktober 2019

Mengenal Lebih Dalam Apa itu Bootstrap

Bootstrap

Apa Itu Bootstrap?


BootstrapApa itu Bootstrap? Boostrap adalah open source framework front end (front end adalah  adalah tampilan sebuah website yang bisa dikunjungi oleh siapa pun melalui internet) yang bebas untuk merancang situs web dan aplikasi web. Framework ini berisikan template desain berbasis HTML dan juga CSS untuk tipografi, formulir, tombol, navigasi dan komponen antarmuka/interface lainnya, serta juga dapat ditambah ekstensi JavaScript (opsional).

Bootstrap awalnya dibuat dan dikembangkan oleh programer twitter, yaitu Mark Octo dan Jacob Thornton pada tahun 2011. Pada saat yang bersamaan para programer di twitter menggunakan berbagai tools dan library untuk melakukan pekerjaan mereka, sehingga tidak ada standarisasi dalam penamaan suatu class. Alhasil sulit untuk dikelola, maka dari itu keduanya membuat suatu tools ataupun framework yang digunakan bersama dilingkukan internal twitter. Dengan kata lain boostrap dibuat pertama kali pada tahun 2011.

Pada januari tahun 2012, Bootstrap merealease Versi 2 yang didalamnya sudah memasukan fitur responsive layout, dan sejak itu penggunaan Bootstrap sangat banyak sekali digunakan sehingga menjadi proyek Github yang sangat banyak di copy.

Agustus 2014 bootstrap merelease versi 3 yang di dalamnya include konsep mobile first yang artinya di dalam pembuatan dan pengembangan mulai dari layar yang terkecil seperti (mobile / handphone/ smartphone) dan secara bertahap pada tampilan yang paling besar.

Pada versi terbaru nya bootstrap merilis versi 4. yang sebelumnya pada tahun 2017 sudah dirilis versi betanya, sebagai penyempurnaan dokumentasi dan menambah beberapa fitur tambahan yang saat ini sedang booming yaitu dengan memberikan tampilan lebih baik bagi para developer , dan tampak lebih stabil dan dengan kata lain versi 2 dan 3 tidak akan ada lagi support atau update dalam penggunaannya.

Cara menggunakan Boostsrap
Dalam cara menggunakan boostrap sobat dapat melakukan secara online dan offline. Jika sobat ingin menjalankan dengan offline sobat dapat langsung download di website resmi nya di sini https://getbootstrap.com/.
Boostsrap

Download kemudian letakan didalam folder root pada web sobat (buat folder baru dalam htdocs kemudian ekstrak hasil download ke dalam folder baru tersebut jika menggunakan XAMPP).

Baca Juga--> Mengenal Atribut HTML

Di tutorial ini penulis menggunakan XAMPP dan didalam folder htdocs penulis membuat folder bootstrap yang dimana hasil download tadi, penulis letakan pada folder tersebut.

Buka folder bootstrap, ekstrak Hasil download kedalam folder bootstrap, kemudian buat file index.html, kemudian copy script/kode dibawah ini didalam file index.html.

 <!DOCTYPE html><html lang="en"><head>  <title>Contoh Bootstrap</title>  
 <meta charset="utf-8″>  <meta name= "viewport content"="width=device-width, initial-scale=1"> 
 <link rel="stylesheet" href="bootstrap-4.3.1-dist/css/bootstrap.min.css"/></head>
 <body>
 <div class="jumbotron text-center">  
  <h1>Halaman Bootstrap Pertama</h1>  
  <p>Ubah ukuran halaman responsif ini untuk melihat efeknya!</p> </div>  
 <div class="container">  
 <div class="row">    
 <div class="col-sm-4">      
  <h3>Kolom 1</h3>      
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit…
  </p>      
  <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris…</p>    
  </div>    
  <div class="col-sm-4">      
   <h3>Kolom 2</h3>      
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit…</p>      
   <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris…</p>    
  </div>    
  <div class="col-sm-4">      
  <h3>Kolom 3</h3>              
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit…</p>      
  <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris…</p>    
  </div>  
 </div>
</div>
</body>
</html>
Maka jika di lihat akan terbentuk seperti pada gambar dibawah ini:
Bootstrap
<link rel="stylesheet" href="bootstrap-4.3.1-dist/css/bootstrap.min.css"/>  
Perhatikan kode baris diatas, bootstrap-4.3.1-dist adalah nama folder hasil ekstrak, css merupakan nama sub folder dalam folder bootstrap-4.3.1-dist dan bootstrap.min.css adalah nama file yang dipanggil dalam file index.html.

Running index.html pada web browser, maka hasilnya akan sama seperti gambar dibawah ini.
Bootstrap
Dengan demikian sobat berhasil menginstal bootstrap pada halaman awal index.html secara offline.
Kemudian bagaimana cara install secara online?
Ubah script/kode dibawah ini:
<link rel="stylesheet" href="bootstrap-4.3.1-dist/css/bootstrap.min.css"/>  
Menjadi:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"/> 

Jalankan file index.html pada browser kemudian lihat hasilnya, maka akan sama seperti tampilan offline dengan catatan sobat harus terkoneksi dengan internet.

Sekian tutorial singkat ini, semoga membantu dan bermanfaat.
Terus belajar and good luck ...

    Choose :
  • OR
    To comment
3 komentar:
Write comments
  1. agar tabel dapat responsive di postingan blog , tutorial nya ada tidak bro ...

    BalasHapus
  2. terima kasih sudah berkomentar, silahkan sobat kunjungi link ini Membuat Tabel Responsive Pada Blog

    BalasHapus
  3. Terima Kasih Infonya

    BalasHapus