author Ahmad Muhardian

Cara Membaca Dokumentasi Bootstrap 4 Secara Offline


Bootstrap4 Offline

Biasanya kita membaca dokumentasi Bootstrap dari websitenya langsung.

Namun, apabila tidak ada koneksi internet…

Mau baca di mana?

Untungnya dokumentasi Bootstrap dibuat dengan SSG (Static Site Generator) Jekyll. Sehingga kita bisa me-render ulang di localhost untuk dibaca secara offline.

Bagaimana caranya?

Silahkan disimak…

Persiapkan Alat yang dibutuhkan

Proyek Bootstrap menggunakan banyak alat-alat (tools) seperti SASS, Jekyll, NPM, Bundler, dll.

Agar kita bisa build dokumentasi secara offline, alat-alat tersebut harus dipersiapkan.

Silahkan persiapkan semuanya:

  1. Install Git
  2. Install Ruby
  3. Install Nodejs
  4. Install SASS
  5. Install Bundler

Ketik perintah berikut untuk menginstall Bundler:

sudo gem install bundler

Setelah itu silahkan lanjutkan…

1. Clone Repository Bootstrap

Silahkan ketik perintah berikut untuk clone repositori Bootstrap dari Github:

git clone --depth 1 https://github.com/twbs/bootstrap.git

Setelah itu, pindah ke direktori bootstrap.

cd bootstrap

2. Install Semua Gem yang dibutuhkan

Gem adalah library dan tool yang dibuat dengan Ruby. Silahkan ketik perintah berikut untuk menginstal semua Gem yang dibutuhkan.

sudo bundle install

Tunggulah sampai prosesnya selesai.

Instalasi Gem

3. Install Semua Depedency dari Nodejs

Silahkan ketik perintah berikut untuk menginstall semua depedency.

npm install

Tunggulah sampai prosesnya selesai.

Instalasi depedency dengan NPM

4. Menjalankan Server Jekyll

Dokumentasi Bootstrap dibuat menggunakan Jekyll. Jekyll adalah SGG (Static Site Generator) untuk membuat web statis dari file markdown.

Untuk menjalankan server Jekyll, silahkan ketik perintah berikut:

npm run docs-serve

atau

bundle exec jekyll serve

Maka akan tampil seperti ini:

Menjalankan Server Jekyll

Ini artinya server Jekyll sudah berjalan pada port 9001. Sekarang coba buka http://localhost:9001/.

Dokumentasi Boostrap 4 offline

Selesai 🎉…

Sekarang kita sudah bisa membaca dokumentasi bootstrap dari localhost.

Tunggu dulu…

Bagaimana kalau kita ingin baca tanpa harus menjalankan server Jekyll?

Kita bisa memanfaatkan server Apache2 atau XAMPP yang sudah terinstal di komputer.

Caranya:

Kita harus build atau compile dulu dokumentasi Bootstrap. Lalu ditaruh di dalam /var/www/html atau htdocs.

Namun, sebelum melakukan itu, kita harus ubah dulu baseurl-nya.

Silahkan buka file _config.yml dengan teks editor, lalu ubah baseurl menjadi seperti ini.

Mengubah baseurl bootstrap

Alamat http://localhost/doc/bs4 adalah alamat yang akan saya gunakan di localhost.

Berarti nanti hasil kompilasinya akan saya taruh di dalam:

/var/www/html/doc/bs4

atau

C:\xampp\htdocs\doc\bs4

Berikutnya, silahkan ketik perintah berikut untuk mengkompilasi:

npm run docs-compile

Perintah ini akan melakukan kompilasi dari file markdown ke html.

Kompilasi dokumentasi bootstrap

Hasilnya output-nya bisa dilihat di direktori _gh_pages

Hasil Kompilasi dokumentasi bootstrap

Copy semua file ini ke dalam /var/www/html/doc/bs4.

Hasil Kompilasi dokumentasi bootstrap

Setelah itu buka http://localhost/doc/bs4/, maka hasilnya:

Dokumentasi bootstrap 4 di localhost

Selesai. 🎉

Kapanpun kita butuh dokumentasi Bootstrap 4, kita tinggal buka dari sana.

Jika gagal mengkompilasi, kamu bisa copy dari sini: github.com/petanikode/bootstrap4-offline)

Baca Juga ini

Mencoba Bootstrap 4: Apa saja yang baru di Bootstrap 4?

Mencoba Bootstrap 4: Apa saja yang baru di Bootstrap 4?

Mencoba menggunakan Bootstrap 4 dan ada hadiah template Bootstrap 4 gratis dari Petani Kode

Tips Modifikasi Panel Bootstrap untuk dijadikan Card

Tips Modifikasi Panel Bootstrap untuk dijadikan Card

Seperti yang kita ketahui, istilah card memang sering dipakai pada Material Design. Sedangkan Bootstrap versi 3 tidak memiliki komponen card. Mungkin saja akan ditambahkan pada versi ke-4. Kita tunggu saja. Pada kesempatan ini, kita akan belajar cara modifikasi komponen panel Bootstrap untuk dijadikan Card. Berikut ini tampilan hasil akhir yang akan kita buat: Mempersiapkan Grid LayoutPertama, kita siapkan dulu grid layout dengan empat kolom. <div class="container"> <div class="row"> <div class="col-md-3"> <!

Cara Cepat Modifikasi Navbar Bootstrap

Cara Cepat Modifikasi Navbar Bootstrap

Ada dua jenis warna pilihan navbar yang ditawarkan Bootstrap: Warna putih (navbar-default) dan warna hitam (navbar-inverse). Selain dari dua warna tersebut, kita harus memodifikasinya sendiri. Pada kesempatan ini, saya akan berbagi cara cepat memodifikasi navbar Bootstrap dengan cepat. 1. Menggunakan GeneratorAda sebuah generator canggih yang dibuat oleh Samuel Marchal . Kita dapat menentukan warna navbar bootstrap sesui selera. Kemudian akan diberikan kode CSS, LESS, SCSS, dan SASS yang dapat kita gunakan langsung.

Tutorial Bootstrap: Memahami Fungsi Tag Meta Viewport

Tutorial Bootstrap: Memahami Fungsi Tag Meta Viewport

Tag Meta Viewport adalah tag HTML yang penting bagi Bootstrap untuk membuat halaman web menjadi responsif.

Tutorial Bootstrap: Memahami Sistem Grid untuk membuat Layout

Tutorial Bootstrap: Memahami Sistem Grid untuk membuat Layout

Sistem Grid adalah bagian terpenting yang harus dipahami pada Bootstrap. Apa itu sistem grid? Gimana cara menggunakan sistem grid. Mari kita pelajari!

Tutorial Bootstrap: Pengenalan Dasar Bootstrap untuk Pemula

Tutorial Bootstrap: Pengenalan Dasar Bootstrap untuk Pemula

Pada tutorial ini, kamu akan belajar dasar Bootstrap. Mulai mengenal sejarah bootstrap, hingga mencoba sendiri Bootstrap pada HTML