Pada bagian kelima ini kita akan mengetahui bagaimana caranya untuk mengganti tema bawaan atau default dari tema yang sudah diberikan oleh Bootstrap. Sebelumnya dibagian ketiga, disitu sudah saya sediakan 3 buah CDN dari Boostrap. Sebenarnya cukup memasang CSS dan JS dari javascript dari Bootstrap saja itu sudah cukup, dan untuk
bootstrap-theme.min.css tidak usah kalian pasang juga tidak apa-apa. |
| Cara Mengganti Tema Bawaan Bootstrap. |
Isi dari CDN tersebut hanya berupa CSS untuk mempercantik tampilannya saja, tidak lebih dari itu. Nah, pada bagian inilah kita akan melihat caranya bagaimana caranya untuk mengubah tema bawaan Bootstrap itu.
Saya sendiri bukan penggemar berat tema default Bootstrap, karena tampilannya yang tidak mengikuti tren blog dan situs jaman sekarang, apalagi kalau bukan tren desain datar atau flat. Untuk mengganti temanya pun cukup mudah, tidak perlu mengubah struktur template yang sudah kamu buat pada bagian kedua, kamu hanya mengganti CDN resmi dari Bootstrap yang seperti ini:
<!-- Optional theme -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"/>Dan mengganti dengan salah satu dari tema tidak resmi dibawah ini yang berasal dari situs Bootswatch:
Ingat hanya pilih salah satu dari kode dibawah ini. Dan pilih mana yang paling kamu suka dari 16 tema yang ada. Untuk penempatan tema dibawah ini, taruh saja dibawah kode
<head>, atau kamu bisa lihat di bagian sebelumnya. |
| Macam-macam tema Bootstrap. |
Cerulean:
<link href='https://bootswatch.com/cerulean/bootstrap.min.css' rel='stylesheet'/>Cosmo:
<link href='https://bootswatch.com/cosmo/bootstrap.min.css' rel='stylesheet'/>Cyborg:
<link href='https://bootswatch.com/cyborg/bootstrap.min.css' rel='stylesheet'/>Darkly:
<link href='https://bootswatch.com/darkly/bootstrap.min.css' rel='stylesheet'/>Flatly:
<link href='https://bootswatch.com/flatly/bootstrap.min.css' rel='stylesheet'/>Journal:
<link href='https://bootswatch.com/journal/bootstrap.min.css' rel='stylesheet'/>Lumen:
<link href='https://bootswatch.com/lumen/bootstrap.min.css' rel='stylesheet'/>Paper:
<link href='https://bootswatch.com/paper/bootstrap.min.css' rel='stylesheet'/>Readable:
<link href='https://bootswatch.com/readable/bootstrap.min.css' rel='stylesheet'/>Sandstone:
<link href='https://bootswatch.com/sandstone/bootstrap.min.css' rel='stylesheet'/>Simplex:
<link href='https://bootswatch.com/simplex/bootstrap.min.css' rel='stylesheet'/>Slate:
<link href='https://bootswatch.com/slate/bootstrap.min.css' rel='stylesheet'/>Spacelab:
<link href='https://bootswatch.com/spacelab/bootstrap.min.css' rel='stylesheet'/>Superhero:
<link href='https://bootswatch.com/superhero/bootstrap.min.css' rel='stylesheet'/>United:
<link href='https://bootswatch.com/united/bootstrap.min.css' rel='stylesheet'/>Yeti:
<link href='https://bootswatch.com/yeti/bootstrap.min.css' rel='stylesheet'/>Dari 16 tema yang ada diatas, yang paling saya suka adalah "Cosmo" sperti yang sudah saya katakan didalam thread yang sudah saya buat jauh hari sebelumnya di forum Berosial. Dan ada satu tema yang menurut saya unik, itu adalah tema "Paper", sampai ke radio button dan check box-nya juga di desain habis. Tapi sayangnya saya agak kurang suka dengan efek transisi pada tombol-nya ketika terkena hover.
Dan dari 16 tema yang sudah kasih diatas, tema mana yang paling kamu suka ? kasih komentarnya juga ya dibawah.
Penasaran dengan bagian lainnya ? makanya agar tidak ketinggalan tutorial lainnya tentang Bootstrap, berlanggananlah ke blog Mad Trik ini.
No comments:
Post a Comment