Indonesian (Bahasa Indonesia) translation by ⚡ Rova Rindrata (you can also view the original English article)
Dan akhirnya kita sampai pada tutorial terakhir dari seri ini, yang akan menunjukkan Anda bagaimana membuat set warna kustom.
Jika Anda ingat kembali di awal, ketika kita melalui perubahan utama, saya menyebutkan bahwa para penulis BS telah memberikan file tambahan untuk membuat BS3 tampak seperti BS2, daripada menggunakan tampilannya yang datar.
Sepanjang seri ini, kita telah menggunakan tampilan datar BS3 standar, tetapi jika Anda men-download versi JavaScript prebuilt BS3 dari situs Bootstrap, Anda akan menemukan sebuah file baru di dalam arsip yang Anda download yaitu bootstrap-theme.css.
Jika Anda manyisipkan file ini ke dalam proyek Anda segera setelah Anda memasukkan berkas bootstrap.css utama, Anda akan mendapatkan bahwa meskipun Anda sedang menggunakan BS3 baru, tampilan dan nuansa aplikasi Anda masih menyerupai BS2.
Para penulis menyadari bahwa salah satu hambatan utama untuk adopsi BS3 dalam aplikasi baru adalah ketidakmampuan untuk mengubah style secara khusus, walaupun dengan mudah.
Jika Anda menggunakan LESS, atau bahkan Sass (seperti BS3 sekarang memiliki Sass), maka ini bukan masalah. Anda cukup membuka sumber LESS, ubah variabel dan Mixins yang diperlukan, dan jalankan melalui kompilator LESS untuk mendapatkan script CSS Anda yang baru.
Sayangnya, tidak semua orang menggunakan LESS; pada kenyataannya, banyak pengembang dan desainer hanya memiliki kemampuan untuk men-download dan menyertakan file pra-kompilasi CSS dan JavaScript yang lama, sehingga cara yang lebih baik harus ditemukan.
Perubahan pertama adalah membuka seluruh sumber LESS di halaman kustomisasi secara langsung pada situs utama Bootstrap, tapi ini bukan hal baru; Anda bisa menggunakan halaman ini sebelumnya secara terbatas. Namun, dengan BS3, alat kustomisasi LESS telah direkonstruksi secara lengkap, dan sekarang Anda dapat mendefinisikan kembali segala sesuatu yang digunakan BS3, dari ukuran font dan tipografi, ukuran grid, memicu poin, dan menetapkan warna dasar kontekstual.
Bahkan, sekarang tidak ada yang tidak bisa diubah sebelum Anda memutuskan untuk men-download CSS baru yang telah Anda sesuaikan, sebagaimana ditunjukkan gambar berikut:
Karena ukuran tipis dari alat tersebut, mustahil untuk menampilkan seluruhnya pada tutorial ini, tapi ini cukup mudah untuk diakses. Cukup pergi ke situs Bootstrap dan klik Customize pada menu bar bagian atas. Anda juga akan menemukan bahwa Anda memiliki banyak pilihan lain, seperti plugin JavaScript dan toolkit untuk disertakan, komponen yang akan disertakan, dan style dasar yang tidak Anda inginkan.
Misalnya, jika Anda hanya ingin menggunakan sistem grid, dan bukan yang lain, maka Anda hanya cukup memilih sistem grid saja, dan hapus semua komponen lainnya.
Situs BS3 akan menghasilkan kode yang dibutuhkan untuk disisipkan saja, bukan yang lainnya. Ini adalah keuntungan bagi orang-orang yang mengeluh bahwa semua situs Bootstrap terlihat sama, yang berarti bahwa situs Anda benar-benar tidak harus terlihat sama seperti yang lainnya—Anda hanya menggunakan bagian yang Anda butuhkan, dan menggunakan milik Anda sendiri untuk segalanya.
Ada dua cara lainnya untuk menyesuaikan kebutuhan Anda. Yang pertama adalah mengambil CSS style sheet tambahan 'bootstrap-theme', membuat salinan, dan kemudian mengubah style yang cocok menurut Anda. Hal ini tidak semudah menggunakan alat-alat kustomisasi, tetapi juga tidak sulit sebagai alternatif.
Sebagian besar nama kelas dan pengaturan yang ingin Anda ubah sebagai personalisasi Anda di BS3 sudah dipisahkan pada tema BS2, sehingga cara tercepat untuk mencoba adalah dengan mengumpulkan halaman prototype dengan kontrol utama dan unsur-unsur yang ingin Anda ubah, dan kemudian sisipkan dalam salinan tema BS2.
Jika Anda menggunakan Node dan sesuatu seperti Bower, maka akan menjadi lebih mudah, karena Anda dapat memuat ulang secara langsung, kemudian hanya perlu melihat halaman sampel Anda berubah hampir seketika saat Anda men-tweak lembar tema kustom versi Anda.
Cara kedua sedikit lebih dalam, dan seperti yang dijelaskan dalam dokumentasi BS3, datang dalam dua cara: kustomisasi ringan dan penyesuaian yang berat.
Contoh kustomisasi ringan adalah menambahkan class kontekstual warna pada elemen tombol. Misalnya, jika Anda ingin menambahkan btn-sky bersamaan dengan btn-info, btn-primary, class-class lain, Anda harus menetapkan satu style sheet yang memegang aturan berikut:
1 |
.btn-sky, .btn-sky:hover, .btn-sky:active |
2 |
{
|
3 |
color: #000000; |
4 |
text-shadow: 0 -1px 0 rgba(0, 0, 0, 2); |
5 |
background-color: #AAD4FF; |
6 |
border: 1px solid black; |
7 |
}
|
8 |
|
9 |
.btn-sky
|
10 |
{
|
11 |
background-repeat: repeat-x; |
12 |
background-image: linear-gradient(top, #00FFFF 0%, #FFFF00 100%); |
13 |
}
|
14 |
|
15 |
.btn-sky:hover |
16 |
{
|
17 |
background-position: 0 -10px; |
18 |
}
|
Ketika ditambahkan dan dihubungkan dengan benar, maka akan terlihat seperti ini:
Ketika digunakan dengan tag tombol normal dengan cara berikut:
1 |
<button class="btn btn-sky">My Sky Button</button> |
Bagian tersulit dari menggunakan metode ini adalah melalui basis CSS style sheet untuk menemukan nama-nama yang ingin Anda timpa; hal ini tidak benar-benar sulit, hanya bertele-tele.
Setelah Anda memiliki satu seperti tombol di atas, atau Anda menemukan dan menyalin alert, panel, list atau class lain, maka Anda dapat dengan mudah membuat template yang dapat digunakan kembali setiap kali Anda ingin menambahkan sebuah class custom jenis tersebut.
Kustomisasi berat tidak banyak berbeda dari kustomisasi ringan; perbedaan utama adalah bahwa Anda mengganti seluruh kelas.
Jadi, misalnya, Anda menemukan semua kelas yang berkaitan dengan btn, salin itu, modifikasi mereka dan masukkan secara terpisah.
Arsitektur baru di dalam kerangka BS3 sekarang berarti bahwa sekali Anda mengetahui target selector, dan saudara-saudaranya, menciptakan penimpaan itu mudah. Seperti yang telah saya tunjukkan, file bootstrap-theme sudah berisi banyak tentang apa yang mungkin ingin Anda ubah, dan jika itu bukanlah suatu pilihan, maka cobalah situs seperti Bootswatch.com:
Banyak yang lain memiliki ribuan tema untuk dipilih, gratis dan berbayar, jadi tidak ada alasan untuk situs Bootstrap Anda terlihat sama seperti orang lain.
Kesimpulan
Saya harap Anda menikmati seri ini dan dapat membantu Anda menjadi seorang pengembang yang lebih baik dalam menggunakan Bootstrap 3. Dalam dunia baru desain web responsif ini, BS3 adalah kerangka yang tidak boleh dianggap enteng—hal itu mewakili banyak penelitian oleh salah satu perusahaan media sosial terbesar yang ada, dan digunakan untuk menjalankan sebagian besar situs public mereka.
Jika Anda ingin menghubungi dan bertanya kepada saya mengenai buku, saya dapat sering ditemukan beraktifitas di Twitter sebagai @shawty_ds. Anda juga dapat sering menemui saya di LinkedIn, atau di grup pengguna Linked.NET (Lidnug) yang saya membantu menjalankan disana.
Sampai lain kali, tetap tenang dan tetap bootstrapping.
Tutorial ini merupakan sebuah bab dari Bootstrap 3 Singkat, eBook gratis dari tim di Syncfusion.
