Pengenalan Twitter Bootstrap

Berawal dari iseng-iseng mencari informasi tentang bagaimana cara untuk mempermudah dan mempercepat kita dalam mendesain sebuah tampilan website (front-end) dengan tampilan yang simple tapi tetap bisa dikatakan elegan. Dengan begitu dalam mendevelop desain sebuah web aplikasi atau suatu website pages tidak akan memakan waktu yang lama. 

Setelah menjelajahi Mbah Google, saya menemukan beberapa frontend framewok yang salah satunya adalah Twitter Bootstrap. Dari beberapa frontend framewok yang saya dapatkan, Twitter Bootstrap ini bisa dibilang memiliki rating yang sangat baik, mungkin karna segi tampilan yang baik, kemudahan menggunakan nya dan juga Dokumentasi yang disediakan oleh pihak Twitter Bootstrap sangat lengkap dan mudah dipahami. 

Membuat Menu Collapse di Dalam Menu Dropdown Bootstrap 3

Versi paling baru untuk Twitter Bootstrap sekarang yaitu Twitter Bootstrap v3.2.0 atau bisa disebut bootstrap 3, seperti yang kita ketahui bootstrap sudah beberapa kali melakukan perbaikan bugs dan penggantian dari segi design. Walaupun bootstrap memiliki banyak fitur yang berguna namun bootstrap masih ada beberapa kekurangan, maksud saya "kekurangan" itu jika kita menginginkan untuk menggabungkan 2 fitur atau lebih sekaligus akan mengalami crash (crash disini maksud saya tidak akan bekerja akan terjadi konflik/conflict).

Perkenalan Glyphicon Bootstrap dan Cara Mudah Menggunakannya

Beryukurlah, Sekarang Bootstrap versi terbaru (Bootstrap 3) dengan segala kemudahanya memberikan fasilitas icon bawaan yang di sebut “Glyphicon”.

Cara Membuat Tab dengan Bootstrap

Asalamualaikum..

Bagi yang seorang yang belum paham betul JQuery seperti saya, membuat Tab adalah pekerjaan yang cukup sulit..

Tapi Syukurlah, Karena Bootstrap memberikan banyak kemudahan dalam bisang Web Design diantaranya kemudahan untuk membuat Tab..

Cara Menampilkan Icon dari Bootstrap 3

Dalam membuat website, tentu tidak akan lepas dari icon-icon yang mempercantik info text, tombol dan navigasi. Jika kita membuat icon dari awal atau mengedit dari file image, tentu hal ini sangat memakan banyak waktu. Bootstrap sebagai CSS framework yang sekarang sedang populer, memudahkan para desainer web untuk menambahkan icon yang telah tersedia pada Bootstrap. Bukankah lebih cepat menggunakan yang telah ada? Apalagi simbol yang telah kita buat sendiri atau dari hasil editan bermakna sama dari icon Bootstrap.

Responsive Layout dengan Bootstrap bagian 2

sebagai lanjutan dari tutorial Membuat Layout Responsive dengan Container Bootstrap, kali ini kita akan mencoba membuat layout responsive dengan grid sistem. Kalau di tutorial sebelumnya itu adalah dasar untuk membuat lebar layout website yang otomatis responsive, kali ini kita akan bermain dengan grid yang menyesuaikan diri untuk ukuran layar yang berbeda-beda.

Membuat Responsive Layout dengan CSS Media Query

Sebelumnya, kalo ada yang mau nanya "layout responsive itu kayak gimana sih?" nggak usah jauh-jauh.. kecilkan lebar browser anda, dan lihat perubahan layout website JagoCoding yang tetap rapi ini. Itulah yang dinamakan CSS Responsive.

Di tutorial kali ini kita akan belajar membuat layout tersebut dengan bantuan CSS Media Query. Dari segi teknik pun CSS Media Query ini nggak terlalu ribet dipelajari kok, cuma kelemahan teknik ini adalah jadi sedikit lebih makan waktu, karena kita seolah membuat CSS untuk beberapa halaman.

Membuat Layout Responsive dengan Container Bootstrap bagian 1

Salam jagocoding~ sebagai lanjutan dari tutorial saya sebelumnya Membuat Responsive Layout dengan CSS Media Query, kali ini kita masih akan belajar layout responsive juga, tapi dengan bantuan Bootstrap. Peran bootstrap disini bukan untuk menggantikan CSS Media Query, tapi untuk membantu mempermudah, dan sebagai pelengkap layout responsive. Yang penasaran langsung simak aja yok~

Bootstrap : Membuat Display Produk dalam Layout Box 4 Kolom

Selamat pagi Sobat sekalian, saat ini kita banyak menemukan toko online bertebaran di Internet. Saya sering memperhatikan bagaimana produk-produk tersebut di tampilkan dengan format layout yang berbeda-beda. Tahukan Sobat, layout untuk display suatu produk memiliki peran penting agar suatu produk terlihat menarik, dan pengunjung ikut mencari tahu isi detail produk tersebut. Kali ini saya akan memberikan satu referensi terkait display produk dengan menggunakan Layout Box 4 Kolom dengan menggunakan Bootstrap. Versi Bootstrap yang saya pakai adalah yang terbaru yaitu versi 3.3.4. Oke langsung saja..

Bootstrap : Membuat modal

Modal atau di sebut juga pop up, sekarang sangat banyak di gunakan di website-website karena sangat memudahkan pengguna. Dengan adanya modal dalam suatu website maka akan menghemat tempat, karena tidak perlu pindah ke halaman selanjutnya, tetapi memunculkan isi konten berbentuk pop-up. Selamat mencoba .

Framework CSS Bootstrap telah menyediakan fitur modal, modal pada Bootstrap mempunyai beberapa ukuran. Ukuran dari modal tersebut dapat di gunakan sesuai kebutuhan. Ukuran modal pada Bootstrap ada yang large, small dan standar (medium).  Dan ingat sebelum melanjutkan tutorial ini harus telah memiliki framework CSS Bootstrap dan juga telah menyusun struktur foldernya.

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.

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.

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.