2 Cara Mudah Install Bootstrap, Install Offline dan Online

Bagi Anda yang bergelut di dunia pemrograman, wajib hukumnya untuk mengetahui cara mudah install Bootstrap. Bootstrap sendiri merupakan framework yang banyak digunakan oleh website besar di Internet. Hal ini dikarenakan Bootstrap memungkinkan Anda untuk mengembangkan website dengan desain yang responsi dan dapat disesuaikan dengan perangkat mobile.

Cara Mudah Install Bootstrap Secara Offline

Bootstrap memiliki sejumlah file yang berisi kumplan baris kode tersusun dari CSS. Hal ini mempermudah pengguna dalam mengembangkan websitenya. Untuk membuat satu tombol, Anda tak perlu menyusun kode sendiri. Sebab Anda tinggal memanggil salah satu class pada Bootstrap.

Karena terdiri dari beberapa versi, sebaiknya Anda memilih versi yang paling pas untuk kebutuhan Anda.

Artikel kali ini akan mengulas tentang cara mudah install Bootstrap 4 yang dapat diinstall secara online maupun offline. Selain itu, Anda dapat menginstall framework ini dengan bower, composer, ataupun npm.

Untuk menginstall bootstrap secara offline, langkah pertama yang perlu anda lakukan adalah mendownload file bootsrap melalui website getbootstrap.com

Cara Mudah Install Bootstrap

Kemudian klik tombol download yang ditunjuk sama tanda panah merah, maka Anda akan diarahkan ke laman download versi bootstrap terbaru.

Kemudian, pilih tombol download yang ada panah merah untuk mendownload file bootstrap versi terbaru. Nah, setelah mendownload file tersebut dalam bentuk zip. Ekstrak file tersebut dalam folder baru. Nantinya, kalian akan menemukan seperti ini.

Langkah 1: Buat direktori baru

Untuk menginstal Bootstrap secara offline, Anda perlu membuat direktori baru pada folder root web server sebelum mengunduhnya di situs resmi. Setelah Bootstrap terunduh dalam bentuk file zip, ekstraklah file tersebut pada folder project agar dapat digunakan.

Langkah 2: Buat File Index.html

Cara menggunakan Bootsrtap selanjutnya adalah membuat halaman website. Caranya dengan membuka teks editor dan buatlah file index.html. Pada file tersebut, isikan beberapa kode dan panggil file Bootstrap dan library lainnya.

Nah, jangan lupa file tersebut disimpan dalam bentuk html yaa. Jadi nantinya, di folder boot strap minimal ada 2 folder dan 1 file yaitu file css, js dan file html

Cara Mudah Install Bootstrap Secara Online

Selain secara offline, Anda bisa menginstall Bootstrap secara online. Caranya pun terbilang mudah, cukup hanya dengan menuliskan alamat server yang menyimpan library bootstrap. Namun, disini anda harus selalu terkoneksi dengan internet (online). 

Ada 3 cara mudah install Bootstrap secara online menggunakan bower, npm dan juga composer.

Install dengan Bower

Anda juga dapat menginstall dan mengelola Kurang Bootstrap, CSS, JavaScript, dan font menggunakan Bower:

$ bower install bootstrap

Install dengan npm

Anda juga dapat menginstal Bootstrap menggunakan npm:

$ npm install bootstrap@3

require(‘bootstrap’) akan memuat semua plugin jQuery Bootstrap ke objek jQuery. Modul bootstrap itu sendiri tidak mengekspor apapun. Anda dapat memuat secara manual plugin jQuery Bootstrap satu per satu dengan memuat file /js/*.js di bawah direktori level atas paket.

package.json Bootstrap berisi beberapa metadata tambahan di bawah kunci berikut:

  • less – jalur ke file sumber Less utama Bootstrap
  • style – jalur ke CSS non-minified Bootstrap yang telah dikompilasi sebelumnya menggunakan pengaturan default (tanpa penyesuaian)

Install dengan Composer

Anda juga dapat menginstal dan mengelola Kurang Bootstrap, CSS, JavaScript, dan font menggunakan Composer:

$ composer require twbs/bootstrap

Autoprefixer diperlukan untuk Less/Sass

Bootstrap menggunakan Autoprefixer untuk menangani prefiks vendor CSS. Jika Anda mengompilasi Bootstrap dari sumber Less/Sass dan tidak menggunakan Gruntfile Bootstrap, Anda harus mengintegrasikan Autoprefixer ke dalam proses pembuatan Anda sendiri.

Jika Anda menggunakan Bootstrap yang telah dikompilasi atau menggunakan Gruntfile Bootstrap, Anda tidak perlu khawatir tentang ini karena Autoprefixer sudah terintegrasi ke dalam Gruntfile kami.

Memulai Menggunakan Bootstrap

3 Cara mudah menggunakan bootstrap bagi pemula yang baru belajar. Mari kita ikutan langkah-langkah dibawah ini:

Buat Tabel dengan Bootstrap

Buatlah tabel dengan memanggil clas yang ada di dalam file Bootstrap. Dengan begitu, Anda dapat mendesain tabel dengan tampilan yang menarik tanpa harus membuat kode sendiri.

Mengatur Tampilan Gambar dengan Bootstrap

Selanjutnya, atur tampilan website Anda. Mulai dari membuat gabar, thumbnail, dan lain sebagainya. Untuk membuat gambar yang menarik pada website, Anda hanya perlu memanggil class yang ada di file Bootstrap.

Membuat Pesan Peringatan dengan Bootstrap

Sama seperti langkah sebelumnya, untuk membuat pesan pun Anda tak perlu menyusun kode sendiri. Sebab tersedia class khusus untuk menampilkan pesan peringatan pada Bootstrap. Untuk memunculkannya, Anda hanya perlu memanggil class “alert”. Anda bisa menambahkan class lainnya untuk membuat tampilan pesan peringatan lebih bervariasi.

Kesimpulan

Itulah cara mudah install Bootsrap secara offline maupun online. Berkat caranya yang mudah, tak mengherankan jika banyak developer yang menggunakan framework ini. Untuk pengembangan aplikasi android, Anda bisa mencari tutorial Android Studio.

Tinggalkan komentar