Cara Membuat Table Keren Di Blog Dengan Bootstrap

Cara Membuat Table Keren Di Blog Dengan Bootstrap

Bootstrap adalah framework yang dibuat oleh tim Twitter untuk membangun website Twitter itu sendiri. Framework Bootstrap dapat digunakan oleh siapapun karena berstatus opensource dan bisa dimanfaatkan untuk keperluan pembuatan web mulai dari kerangka hingga css yang tentunya harus dikombinasikan dengan berbagai modul lainnya.

Banyak web developer menggunakan Bootstrap sebagai pilihan framework terbaik untuk digunakan sebagai karangka web mereka karena tergolong framework yang user-friendly dan disukai oleh orang-orang. Beberapa contoh website besar yang dibangun menggunakan framework Bootstrap adalah NBA, FOX News, Reuters, Bloomberg dan Walmart.



Selain keperluan web developer membuat kerangka dan desain website, Bootstrap juga bisa digunakan untuk membuat elemen di Blogspot atau web berbasis HTML. Kamu bisa memanggil kode Bootstrap melalui JavaScript yang sudah di sediakan pada situs resmi Bootstrap atau salin kode dibawah ini.



Terapkan kode tersebut pada bagian header template blog kamu, atau letakkan tepat diatas kode <*/head> (hapus tanda bintang).

Jika sudah, maka kamu bisa memanggil elemen Bootstrap di artikel atau halaman. Seluruh elemen bootstrap dapat di panggil seperti Table, Button, Form, Tooltip, dll.

Karena pada artikel ini saya ingin berbagi Cara Membuat Table Keren Di Blog Dengan Bootstrap, jadi saya skip untuk yang lainnya. Tapi jika kamu ingin menerapkan elemen selain table, bisa mengikuti cara ini, tentu dengan kode pemanggilan yang berbeda ya.





Cara Membuat Table Keren Di Blog Dengan Bootstrap



1. Buat artikel atau halaman baru untuk eksperimen. Ubah pengaturan penulisan ke mode HTML.

Mode HTML


2. Panggil elemen Bootstrap dengan kode sebagai berikut pada isi artikel atau halaman :



Kode ini akan menghasilkan table kurang lebihnya seperti ini :

Judul 1 Judul 2 Judul 3
Row 1 Row 2 Row 3
Row 1 Row 2 Row 3
Row 1 Row 2 Row 3


3. Jika sudah, lihat preview artikel atau halaman eksperimennya.


Apabila table muncul sesuai dengan contoh diatas, berarti kamu sudah berhasil menerapkan Table Bootstrap pada blog kamu dan bisa memanggil elemen lain yang kamu butuhkan.



INFO : Untuk mempercantik bentuk table, kamu juga bisa menggunakan warna-warna yang sudah di sediakan dalam Bootstrap itu sendiri, hanya dengan menambahkan beberapa baris kode lagi. Silahkan lihat disini untuk warna yang tersedia.

Contoh Table Bootstrap Lainnya :


Table Spesifikasi HP (bisa juga spesifikasi produk lainnya)

Mi Mix 2 Spesifikasi
Android 7.1 (Nougat)
MIUI 9
Memori RAM 8GB
Dimensi Layar 6-inch
Baterai 3400mAh
Kamera Depan 12MP
Kamera Belakang -
Memori Internal 128GB
Memori Eksternal -



Table Spesifikasi Produk (bisa juga spesifikasi produk lainnya)

No Produk Ketersediaan Harga (pcs)
1 Sabun Ada Rp. 7.000
2 Shampo Ada Rp. 1.000
3 Pasta Gigi Habis Rp. 15.000
4 Sikat Gigi Sisa 2 Rp. 20.000
5 Handuk Ada Rp. 35.000



Table Pros and Cons untuk ulasan prouk singkat.




Keunggulan Kekurangan
Penjelasan mengenai keunggulan sebuah prodak yang di ulas / reviews.
Bisa menggunakan warna background lainnya sesuai yang kamu inginkan.
Penjelasan mengenai kekurangan sebuah prodak yang di ulas / reviews.
Bisa menggunakan warna background lainnya sesuai yang kamu inginkan.


Jika kamu rasa artikel ini bermanfaat dan layak dibaca oleh orang lain, jangan ragu untuk membagikannya kepada teman-teman atau saudara dengan meng-klik tombol sosial media diatas ini.

0 komentar:

Posting Komentar

Artikel Terpopuler



DMCA.com Protection Status