Bootstrap : Nesting Column

Ini melanjutkan tutorial saya tentang RWD (Responsive Web Design) dengan Grid System Bootsrtap. pada tutorial ini membahas tentang fitur pendukung dari grid system yang di sediakan Bootstrap itu sendiri, yaitu Nesting Colomn. Selamat mencoba .

Sebelumnya telah di jelaskan tentang pembuatan kolom-kolom pada Bootstrap berdasarkan grid, disini akan di buat bagaimana cara membuat kolom dalam kolom. Dan ingat sebelum melanjutkan tutorial ini harus telah memiliki framework CSS Bootstrap dan juga telah menyusun struktur foldernya.

Bootstrap : Column Ordering

pada tutorial ini membahas tentang fitur pendukung dari grid system yang di sediakan Bootstrap itu sendiri, yaitu Colomn Ordering. Selamat mencoba .

Sebelumnya telah di jelaskan tentang pembuatan kolom-kolom pada Bootstrap berdasarkan grid, disini akan di buat bagaimana cara membuat kolom yang telah di buat tersebut dapat berpindah atau tukar tempat. Dan ingat sebelum melanjutkan tutorial ini harus telah memiliki framework CSS Bootstrap dan juga telah menyusun struktur foldernya.

RWD (Responsive Web Design) dengan Grid System Bootsrtap

Bootstrap merupkakan Framework CSS yang sedang Booming tahun 2015 ini, karena kemudahan penggunaannya dan yang secara otomatis telah mendukung RWD atau di kenal dengan Responsive Web Design. Grid System merupakan teknik pembuatan Layout, pada framework CSS Bootstrap Grid di bagi 12.

 Grid Option

Grid System Bootstrap dapat bekerja berbagai device yang terbagi 4 device yaitu:

1. Extra Small (col-xs) : Smarthphone < 768px
2. Small (col-sm) : Tablet >= 768px 
3. Medium (col-md) : Desktop >= 992px
4. Large (col-lg) : Large Desktop > =1200px

Bootstrap : Responsive Sidebar

Hai, Berjumpa lagi dengan saya Boy Panjaitan. kali ini saya akan membagikan tutorial tentang CSS lagi.
Pernahkah anda melihat website dengan sidebar yang responsive? responsive disini maksudnya adalah saat pada tampilan
dekstop sidebar akan muncul, namun pada tampilan mobile sidebarnya akan menghilang dan akan muncul tombol untuk
menampilkan sidebarnya.

Untuk tutorial ini kita membutuhkan

• framework Bootstrap (CSS dan JavaScript)
• Offcanvas.css file css tambahan dari bootstrap
• Offcanvas.js file javascript tambahan dari bootstrap

Bootstrap : Membuat modal fullscreen (Layout)

Pada CSS Framework telah tersedia modal, modal yang tersedia pada Bootstrap memiliki beberapa ukuran. Tetapi dari beberapa ukuran tersebut tidak ada ukuran yang full screen, untuk dapat membuat modal Full Screen ada tambahan CSS yang perlu di tambahkan, sehingga akan tercipta ukuran modal Full Screen yang di inginkan.Selamat mencoba .

Dengan adanya modal Bootstrap Full Screen, maka dapat memasukkan content dalam modal dengan lebih banyak karena ruang yang tersedia akan lebih besar , dan dengan adanya modal kita dapat menghemat halaman tidak perlu pindah halaman, cukup dalam halaman yang sama.  Dan ingat sebelum melanjutkan tutorial ini harus telah memiliki framework CSS Bootstrap dan juga telah menyusun struktur foldernya.

Bootstrap : Membuat Scrollspy

Pernah ngga kalian membuka sebuah website lalu ada menu link navigasi yang akan terupdate atau terlihat active ketika kita berada di section tertentu ketika kita scroll? Ini bisa disebut sebagai Scrollspy. Scrollspy biasanya cocok untuk web yang bersifat single page, agar user tau dimana posisi atau section yang sedang dibaca oleh mereka.

Nah Bootstrap ternyata punya tools atau plugin seperti ini. Menggunakan CSS dan Javascript dari Bootstrap, hari ini kita akan mencoba membuat scrollspy. Yeahhhh! Tutorial ini akan memperlihatkan simple way to do Scrollspy, agar kalian tau dengan mudah bagaimana mengimplementasikannya di dokumen web.

Dalam tutorial ini kita akan butuh 2 elemen, elemen pertama yaitu menu navigasi. Dan yang kedua adalah Content (bisa article, section, div). Jadi mari kita mulai.

Buat dokumen HTML baru, dan berikan nama (terserah anda sih) demoscrollspy.html

Button List Group menggunakan Collapse Bootstrap

Button List Group dengan Collapse Bootstrap, merupakan gabungan dari 3 komponen yang ada di fitur Framework CSS Bootstrap. yaitu terdiri dari Button, List Group yang di gabungkan kedalam Collapse Bootstrap. Dengan di gabungkan ke 3 fitur ini dapat mempercantik wesite dan menghemat tempat karena menggunakan collapse. Selamat mencoba.

Button List Group dengan Collapse Bootstrap, ini mirip dengan accordion buttonnya dapat di tampilkan maupun di sembunyikan, dan juga dapat di berisi pengumuman, atau juga dapat di tambahkan konten sesuai kebutuhan kita. Untuk membuatnya kita tidak perlu menambahkan CSS tambahan, tetapi sebaiknya di kustomisasi sendiri . Ini membutuhkan  jquery ( jquery-2.1.3.min.js ) . Dan jangan lupa harus telah memiliki framework CSS Bootstrap dan juga telah menyusun struktur foldernya.