Bootstrap Dasar : Pengenalan Bootstrap Framework Front end dan cara menggunakannya - OMJUAN.COM - Website Pragraming Learning
News Update
Loading...

10/30/2019

Bootstrap Dasar : Pengenalan Bootstrap Framework Front end dan cara menggunakannya

Pengenalan Boostrap Frameword Front end dan cara menggunakannya - Hallo teman-teman semua apakabar kalian hari ini ?. Masih semangat untuk membuat baris-baris kode yang penuh dengan keseruan dan membingungkan. Jika kalian masih semangat hari ini Omjuan mau membagikan sedikit pengenalan tentang salah satu framework css yang keren. Seperti dari sebagian teman-teman yang kunjungi situs saya mungkin sudah paham tentang Bootstrap ini, namum saya yakin masih banyak juga teman-teman yang belum paham soal Frameword Front end yang satu ini. 

Oleh karena itu pada kesempatan kali ini saya buatkan artikel tentang Frameword Front end  ini, semoga dengan adanya artikel ini. Teman-teman semua bisa paham dengan Apa itu Boostrap. Nah lalu apa saja yang akan kita paham pada artikel kali ini, simak di bawah ini :

  • Apa itu Boostrap Frameword Front end ?
  • Asal-usul Boostrap Frameword Front end ?
  • Bagaimana Cara Menggunakan Frameword Front end  untuk pemula ?

Apa itu Boostrap Frameword Front end ?

Boostrap adalah sebuah Frameword(Kerangka Kerja) Front end(Library) yang bersifat open-source (Gratis). Bisa dibilang Boostra ini kita bebas untuk menggunakannya merancang situs website dan aplikasi web kita. Frameword Front end ini berisikan tentang template desain yang menggunakan HTML dan CSS untuk tipografi, tombol, navigasi, formulis, dan komponen antarmuka lainnya, Dan juga ekstensi Javascript. Tidak seperti Framework yang lainnya, framework yang ini hanya fokus pada perancangan front-end ( Tampilan ) saja.

Asal-usul Boostrap Frameword Front end ?


Boostrap Frameword Front end ini pada awalnya memiliki nama Twitter Blueprint, di kembangkan oleh nirav panchal dan Jacob Thornton di Twitter untuk mendorong konsinstensi di sebuah perangkat internal yang sesuai.

Bagaimana Cara Menggunakan Boostrap Untuk Pemula

Sama halnya seperti Framework yang lain, sebelum kita memulainya kita harus mempersiapkan bahan-bahannya terlebih dahulu. Kita harus mepersiapkan bahan dan juga tools pendukung untuk belajar Boostrap. Oke, langsung saja kita mulai dengan mengikuti langka-langkah dibawah ini :

     1. Kita harus memiliki file distribusi yang telah di sediakan oleh Boostrap
Apabila link download diatas ini mengalami error atau tidak tersedia, teman-teman bisa langsung mengunjungi situs resminya saja di getboostrap.com lalu setelah itu silahkan klik tombol  "Download Bootstrap".

Agar supaya kita bisa menggunakan boostrap, kita harus mendownload dulu resource file atau file distribusi yang telah disedikan oleh boostrap secara gratis di situs resminya. Tombol link telah saya sedikan di atas adalah tombol yang akan secara otomatis mendownload file resmi dari boostrap, yang berisi file css dan javascript. Jika sudah di dwonload, silahkan di extract terlebih dahulu menggunakan winRAR.

   2. Download jQuery Library Agar Bisa Bekerja Offline
Download jQuery (v3.3.1)
Silahkan teman-teman downlod jQuery (v3.3.1) terlebih dahulu melalui link diatas ini, jika sudah terbuka pada halaman baru, silahkan klik kanan lalu klik Save as simpan pada folder download.

Sama halnya seperti Download Bootstrap di atas, jika linknya error kalian bisa langsung saja mengunjungi situs resmi dari jqusery.com tersebut. Lalu kemudian silahklan klik "Download the commpossed, production jQuery 3.3.1".

Untuk menghasilkan boostrap dengan component seperti modal dialog, navigation, bar, dan lain-lain yang membutuhkan boostra Javascript. Boostrap Javascript juga membutuhkan jQuery library agar supaya bisa berjalan dengan normal. Boostrap tidak memberi jQuery pada file yang telah kita download, oleh karena itu kita haru mendownloadnya secara terpisah. Hal ini kita sipakan agar kita bisa bekerja seacar offline. tanpa harus komputer atau laptop kita terkoneksi internet.

  3. Text Editor
Text editor merupakan tempat atau editor yang dimana kita akan melakukan coding padanya. Teks Editor ini sangat penting sekali, jika kita tidak memilik Text Editor ini lalu, lalu bagaimana kita bisa melakukan coding. Oleh sebab itu Text Editor sangat penting.

Ada banyak sekali Text Editor yang dapat kalian gunakan, mulai dari Notepad++,  Sublime Text , dan masih banyak text editor yang lain, kalian bisa cari saja di google dengan keyword Text Editor "text editor terbaik". Kalau saya lebih suka dan terbiasa menggunakan Text Editor Sublime Text. Karena banyak sekali syntax-syntax yang telah di sedikan oleh Sublime text untuk memudahkan kita dalam melakukan coding. jika kalian tertarik juga atau ingin mencobanya saya sudah siapkan link download dibawah ini, jika kalian menggunakan OS X dan linux repos kalian bisa langsung download saja ke situs resminya Sublime Text, lalu pilih sesuai dengan Sistem operasi yang kalian gunakan :
Download Sublime Text

  • Mari Kita Memulainya...

Setelah semua bahan-bahan yang tadi telah kita siapkan semua sudah lengkap. mari kita mulai belajar bootstrap. Silahkan ikuti langka-langkah dibawah ini :

1. Buatlah Folder Baru
Alasan kita membuat folder baru adalah agar supaya lebih rapi dan juga tidak berserakan file-file yang telah kita download tadi, buatlah folder dengan nama "Belajar Boostrap".

2. Silahkan Copy semua file Boostrap yang tadi telah kalian Download
Silahkan copy folder js dan css yang ada pada folder Boostrap yang tadi telah kita extract, ke dalam folder "Belajar Boostrap".
3. Silahkan kalian Copy file jQuery ke dalam folder js punya Bootsrap
Silahkan kalian gabungkan file jQuery yang telah kalian download kedalam folder js punya Boostrap. hal tersebut dilalukan agar supaya mempermudah proses pembelajaran kita.

4. Buatlah sebuah file HTML
Silahkan teman-teman buat file (dot)HTML baru didalam Text Editor Sublime Text ( atau text editor yang kalian sukai ) lalu copy code snippet telah saya sediakan dibawah ini, index.html kemudian simpan file tersebut ke dalam folder "Belajar Bootsrap" tadi.
<!doctype html>
<html lang="id">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

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

    <title>Bootstrap Template - by omjuan.com</title>
  </head>
  <body>

    <button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Selamat! Anda Berhasil Setup Bootstrap 4" data-content="Jika popup ini terlihat, Anda berhasil setup dan Siap Belajar Bootstrap">Kliku</button>


    <!-- jQuery dulu, kemudian Popper.js, kemudian Bootstrap.js -->
    <script src="js/jquery-3.3.1.min.js"></script>
    <!-- bootstrap.bundle.min.js sudah include Popper.js -->
    <script src="js/bootstrap.bundle.min.js" ></script>

    <script>
    // Script tambahan disini
    $(function () {

      // contoh
      $('[data-toggle="popover"]').popover();
    })
    </script>
  </body>
</html>

  • Structur File atau Folder

Jika teman-teman sudah mengikuti langkah-langkah diatas, makas file dan juga folder seharusnya mengikuti structur seperti dibawah ini
Belajar_Bootstrap/
├── index.html
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap.min.css.map
│   ├── bootstrap-grid.css
│   ├── bootstrap-grid.css.map
│   ├── bootstrap-grid.min.css
│   └── bootstrap-grid.min.css.map
│   ├── bootstrap-reboot.css
│   ├── bootstrap-reboot.css.map
│   ├── bootstrap-reboot.min.css
│   └── bootstrap-reboot.min.css.map
├── js/
│   ├── bootstrap.bundle.js
│   ├── bootstrap.bundle.js.map
│   ├── bootstrap.bundle.min.js
│   └── bootstrap.bundle.min.js.map
│   └── bootstrap.js
│   └── bootstrap.js.map
│   └── bootstrap.min.js
│   └── bootstrap.min.js.map
│   └── jquery-3.3.1.min.js

Apabila sudah benar, maka selamat kalian sudah bisa belajar Bootstrap pada step berikutnya yang lebih dalam.

Sekian dari saya, kira-kira itu saja sedikit pejelasan yang dapat saya tulis pada artikel kali ini, semoga dengan adanya artikel dapat bermanfaat untuk kalian semua. Terimakasih


Share with your friends

Give us your opinion

Terimakasih telah mengunjungi situs ini. Silahkan berkomentar dengan bijak.Komentar spam atau berisikan link aktif tidak akan di tampilkan. Terimakasih

Notification
This is just an example, you can fill it later with your own note.
Done
Asal SEO Responsive Blogger Template
Pro Version 2 Pro Dark Version Pro Version 1 Pro Version 5 Proversion 4 Pro Version 3
Eclipse Responsive Blogger Template
Pro Version 3 Pro Version 2 Pro Version 1