Pengertian Dan Cara Menggunakan Bootstrap

By | October 27, 2021

Pada tutorial Bootstrap Part 1 ini saya akan dijelaskan tentang Pengertian dan cara menggunakan bootstrap. Bootstrap adalah sebuah library framework CSS yang di buat khusus untuk bagian pengembangan front-end website. bootstrap merupakan salah satu framework HTML, CSS dan javascript yang paling populer di kalangan web developer. pada saat ini hampir semua web developer telah menggunakan bootstrap untuk membuat tampilan front-end menjadi lebih mudah dan sangat cepat. karena anda hanya perlu menambahkan class-class tertentu untuk misalnya membuat tombol, grid, navigasi dan lainnya.

Pengertian Bootstrap

Bootstrap adalah sebuah library framework CSS yang di buat khusus untuk bagian pengembangan front-end website. Bootstrap sendiri telah menyediakan kumpulan komponen class interface dasar yang telah di rancang sedemikian rupa untuk menciptakan tampilan yang menarik, bersih dan ringan. selain komponen class interface, bootstrap juga memiliki fitur grid yang berfungsi untuk mengatur layout pada halaman website yang bisa digunakan dengan sangat mudah dan cepat. dengan menggunakan bootstrap kita juga di beri keleluasaan dalam mengembangkan tampilan website yang menggunakan bootstrap yaitu dengan cara mengubah tampilan bootstrap dengan menambahkan class dan CSS sendiri.

Salah satu contoh website besar yang menggunakan framework bootstrap adalah Twitter, tentu anda sudah familiar dengan twitter bukan ? yap, interface twitter di bangun dengan menggunakan bootstrap. karena sebenarnya bootstrap di kembangkan oleh developer twitter sendiri sehingga bootstrap sering juga di sebut “twitter bootstrap”. Bootstrap berisi kumpulan class yang siap pakai. misalnya anda ingin membuat sebuah tombol dengan cepat, yaitu hanya dengan menambahkan class “btn”.

Pengertian Dan Cara Menggunakan Bootstrap

Kelebihan Menggunakan bootstrap adalah sebagai berikut:

  • Tampilan bootstrap yang sudah cukup modern.
  • Penggunaan bootstrap sangat menghemat waktu.
  • Tampilan bootstrap sudah mendukung segala jenis resolusi, baik itu pc, laptop, tablet dan smartphone.
  • Sangat ringan karena bootstrap di buat dengan sangat terstruktur.
  • Dan masih banyak lagi kelebihan dan kegunaan dari bootstrap yang akan anda temukan sendiri setelah mencoba membangun sebuah aplikasi berbasis web dengan menggunakan bantuan framework css bootstrap.

Sebelum di jelaskan tentang cara menggunakan bootstrap, alangkah lebih baik nya jika anda terlebih dahulu mempelajari CSS dasar. klik di sini untuk membaca tutorial belajar CSS

Cara Menggunakan Bootstrap

Untuk cara menggunaan bootstrap yang pertama kali yang harus anda lakukan adalah melakukan instalasi bootstrap. anda dapat mendownload langsung bootstrap pada website resminya di http://getbootstrap.com.

 

Bootstrap

untuk sampai saat ini bootsrap telah di rilis sampai versi 5. klik di sini untuk mendapatkan bootstrap versi 5. berikut ini adalah struktur isi dari bootstrap setelah anda mendownloadnya.

CSS

JS

Cara Menginstal Bootstrap

Cara menginstall bootstrap ada beberapa cara. anda bisa menginstall bootstrap dengan composer, bower, menggunakan npm, secara offline dan online. berikut ini contoh perintah untuk menginstall bootstrap menggunakan bower.

Menginstal bootstrap menggunakan npm

$ npm install bootstrap

Menginstal bootstrap menggunakan yarn

$ yarn add bootstrap

Mengisntal bootstrap menggunakan Composer

$ composer require twbs/bootstrap:5.1.3

tetapi cara yang paling banyak di gunakan adalah dengan cara offline dan online. tutorial bootstrap dasar.

Cara menginstall bootstrap secara online

anda bisa memilih salah satu dari tiga contoh berikut untuk menginstall bootstrap secara online. syntax berikut bisa anda letakkan pada pada bagian <head> pada halaman HTML anda

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

Cara menginstall boostrap secara offline

Cara menginstall bootstrap secara offline ini sangat banyak di gunakan oleh pada developer, karena anda dapat bekerja menggunakan bootstrap tanpa harus terkoneksi dengan internet lagi, karena file framework bootstrap sudah terletak pada pc kita sendiri.

setelah anda mendownload framwork css bootstrap kemudian ekstrak pada project anda. di sini saya meletakkannya pada localhost saya dengan alamat http://localhost/pemulungkoding/bootstrap/

kemudian untuk menghubungkan atau menginstall bootstrap buat sebuah file HTML atau PHP yang akan kita hubungkan dengan bootstrap. di sini saya membuat sebuah file dengan nama index.php.

Bootstrap juga memerlukan jquery karena untuk bagian javascript nya bootstrap menggunakan jquery, jadi jangan lupa untuk menambahkan juga file jquery pada folder js bootstrap atau letakkan sesuai keinginan anda asalkan direktori saat menghubungkan file css dan js nanti sesuai. baca juga di sini untuk cara menggunakan jquery.

index.php

<!DOCTYPE html>
<html>

<head>
    <title>Bootstrap Part 1 : Pengertian dan Cara Menggunakan Bootstrap</title>
    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
    <script type="text/javascript" src="bootstrap/js/jquery.js"></script>
    <script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
</head>

<body>
    <h1>Cara Menggunakan Bootstrap | www.pemulungkode.com</h1>
    <button class="btn btn-danger">TOMBOL MERAH</button> <button class="btn btn-primary">TOMBOL BIRU</button>
</body>

</html>

dapat di perhatikan pada contoh cara menghubungkan file bootstrap di atas. untuk menghubungkan file html atau php anda dengan bootstrap.css

<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">

kemudian hubungkan file html atau php anda dengan bootstrap.js dan jquery.js. ingat letakkan jquery.js pada bagian atas karena bootstrap bekerja menggunakan bantuan jquery.

<script type="text/javascript" src="bootstrap/js/jquery.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>

kemudian class “btn” pada element <button> di atas merupakan class bootstrap yang bisa di gunakan untuk membuat tombol. dan “btn-danger” dan “btn-primary” untuk menentukan warna dari tombol yang ingin kita buat.

dan jika di jalankan pada browser maka hasilnya

Pengertian Dan Cara Menggunakan Bootstrap

Sekian lah tutorial belajar bootstrap part 1 : pengertian dan cara menggunakan bootstrap. untuk tutorial bootstrap selanjutnya akan di bahas pada tutorial bootstrap selanjutnya di www.pemulungkode.com.

 

Tutorial Bootstrap Dasar Lainnya :

Bootstrap Part 1 : Pengertian dan Cara Menggunakan Bootstrap
Bootstrap Part 2 : Membuat Table dengan Bootstrap
Bootstrap Part 3 : Tampilan Gambar dengan Bootstrap
Bootstrap Part 4 : Membuat Tombol dengan Bootstrap
Bootstrap Part 5 : Membuat Jumbotron dengan Bootstrap
Bootstrap Part 6 : Membuat Pesan Alert dengan Bootstrap
Bootstrap Part 7 : Cara Membuat Icon dengan Bootstrap
Bootstrap Part 8 : Pagination dan Breadcrumb dengan Bootstrap
Bootstrap Part 9 : Membuat List dengan Bootstrap
Bootstrap Part 10 : Membuat Panel dengan Bootstrap
Bootstrap Part 11 : Membuat Navigasi Tabs dan Pills dengan Bootstrap
Bootstrap Part 12 : Membuat Navigation Bar Bootstrap
Bootstrap Part 13 : Membuat Form dengan Bootstrap
Bootstrap Part 14 : Membuat Carousel dengan Bootstrap
Bootstrap Part 15 : Membuat Modal dengan Bootstrap
Bootstrap Part 16 : Mengenal System Grid Bootstrap

 

2 thoughts on “Pengertian Dan Cara Menggunakan Bootstrap

  1. Pingback: Padu Mulung - Download Aplikasi Gratis dan Premium, Jasa Web design dan Jasa SEO

  2. Pingback: Padu Mulung - Download Aplikasi Gratis dan Premium, Jasa Web design dan Jasa SEO

Leave a Reply

Your email address will not be published. Required fields are marked *