Advertisement
  1. Web Design
  2. Jade

Baking Bootstrap Snippets dengan Jade

by
Read Time:25 minsLanguages:

Indonesian (Bahasa Indonesia) translation by Sap (you can also view the original English article)

Final product imageFinal product imageFinal product image
What You'll Be Creating

Boleh dibilang kekuatan terbesar kerangka kerja Bootstrap Twitter yang populer adalah ia memberi Anda satu set lengkap CSS dan JavaScript yang berfungsi penuh di luar kotak.

Kode pra-selesai ini menyediakan hampir semua hal yang Anda inginkan di suatu situs, dari tipografi hingga kontrol tata letak hingga puluhan "komponen" seperti navbars, tombol, panel, kotak peringatan, dan banyak lagi.

Karena Anda akan menghabiskan sedikit waktu untuk menulis CSS dan JavaScript untuk situs Bootstrap, pengembangan menjadi hampir seluruhnya tentang memproduksi HTML. Dengan demikian, jika Anda dapat menemukan cara untuk membuat produksi HTML Anda secepat dan semulus mungkin, seluruh alur kerja Bootstrap Anda dapat menjadi sangat efisien.

Menjadikan HTML Lebih Kuat

Salah satu alat paling efektif yang dapat Anda gunakan untuk memperkuat produksi HTML Anda adalah Jade, bahasa template sumber terbuka yang benar-benar gratis untuk digunakan.

Jade mungkin berada di bawah panji “bahasa templating” tetapi jangan biarkan hal itu membuat Anda berpikir Anda harus bekerja dengan “templates” untuk memanfaatkan manfaatnya. Ini juga berfungsi dalam dua cara tambahan yang dapat sangat berguna untuk semua jenis produksi HTML:

  • Sebagai alat singkat HTML yang akan memungkinkan Anda untuk secara dramatis mengurangi jumlah kode yang perlu Anda tulis.
  • Sebagai "preprocessor" untuk HTML yang bekerja seperti preprosesor CSS, menambahkan kemampuan untuk menggunakan logika dan membuat "mixins": blok kode yang dapat digunakan kembali yang menjaga alur kerja Anda DRY.

Jika Anda menggunakan HTML, dan terutama jika Anda sangat fokus pada HTML seperti Anda saat menggunakan Bootstrap, Anda mungkin menemukan bahwa setelah Anda mencoba Jade Anda tidak akan pernah membangun proyek lain tanpanya.

Jade Powered Bootstrap Snippets

Dalam tutorial ini, kami akan menggunakan Jade untuk menghasilkan beberapa komponen paling menonjol dari kerangka Bootstrap.

Raw HTML ke Jade

Untuk setiap komponen, pertama-tama kita akan melihat HTML mentah yang diperlukan dan kemudian merebusnya menjadi kode Jade. Anda akan langsung membandingkan keduanya, melihat pengurangan jumlah kode yang diperlukan, dan gaya pemformatan Jade yang baru dan bersih.

Harap perhatikan bahwa kami akan berfokus pada cuplikan Jade itu sendiri, daripada melihat bagaimana Jade bekerja. Namun demikian, hal utama yang harus diperhatikan dalam contoh kode yang akan Anda lihat di bawah adalah bahwa setiap tingkat indentasi tab di Jade menciptakan tingkat elemen yang bersarang di HTML yang dihasilkan.

Misalnya lekukan berikut di Jade:

akan mengkompilasi untuk memberikan bersarang berikut dalam HTML:

Untuk mempelajari lebih mengenai bagaimana cara kerja jade lihat di free introductory lessons dari rangkaian pelajaran baruku Top-Speed HTML Development With Jade.

Jade Mixins

Jade mixins merupakan blok kode dapat digunakan kembali. Jika Anda memiliki beberapa kode yang Anda tahu perlu untuk ditempatkan berulang kali Anda dapat menentukan di bawah mixin. Kemudian setiap kali Anda menggunakan mixin itu akan mengeluarkan kode untuk Anda secara otomatis.

Misalnya, berikut mixin bernama "artikel":

dapat digunakan berkali-kali dalam dokumen seperti ini:

dan akan mengkompilasi ke HTML ini:

Setelah mengonversi komponen Bootstrap dari HTML mentah menjadi Jade, kita akan menyatukannya lebih jauh ke dalam campuran Jade. Kita tidak akan menggunakan mixin untuk benar-benar semuanya, hanya di mana pun menggunakannya akan menghemat banyak waktu, upaya, dan duplikasi kode.

Selain itu, bahkan saat kami menggunakan mixin, kami masih akan menyertakan contoh kode Jade langsung untuk komponen yang dipermasalahkan. Dengan cara ini Anda akan melihat bagaimana proses pergi dari HTML ke Jade ke mixin terungkap.

Mendapatkan Setup untuk menggunakan Jade

Hal pertama yang perlu Anda lakukan adalah menyiapkan diri untuk bekerja dengan Jade. Anda akan menginginkan lingkungan pengkodean untuk bekerja di plus kompilasi otomatis kode Jade Anda ke dalam HTML.

Mampirlah ke "Top Speed Pengembangan HTML dengan Jade" saja dan menonton pelajaran kedua di kursus, Quick and Easy Setup. Gratis, dan akan membawa Anda melalui semua yang perlu Anda ketahui untuk menyiapkan dan siap menggunakan Jade.

Untuk tutorial ini, saya sarankan memilih metode dalam video yang mencakup menggunakan Sublime Text 3 dan Prepros.

Setelah selesai menonton video itu dan mengikuti langkah-langkahnya, Anda siap memulai proyek Bootstrap Anda.

Pembuatan Dokumen Dasar

Anda harus berada pada titik ini memiliki file bernama "index.jade" siap untuk dikerjakan. Jika ada kode apa pun dalam file saat ini, silakan hapus sehingga benar-benar kosong.

Kami akan mulai dengan membuat dasar-dasar dokumen HTML utama proyek Bootstrap Anda, menambahkan tag penting dan memuat di file CSS & JavaScript Bootstrap yang diperlukan ditambah jQuery.

Kami akan memanfaatkan Bootstrap CDN dan Google API untuk memuat di setiap file yang diperlukan ini agar Anda tidak perlu mengunduhnya:

Seperti yang disebutkan di atas, HTML untuk setiap elemen yang kami buat akan ditampilkan, tetapi itu murni untuk tujuan demonstrasi, jadi Anda dapat membandingkannya dengan mitra Jade-nya.

Anda tidak perlu menggunakan kode HTML mentah apa pun yang Anda lihat dengan cara apa pun. Sebaliknya, Anda dapat fokus pada bagian Jade yang ditandai Konversi ke Jade dan Add_____ Mixins.

HTML Mentah

Kode berikut menyiapkan elemen dasar doctype, htmlheadtitle, meta, dan elemen body. Selain itu, memuat di file CSS & JavaScript Bootstrap plus jQuery, dan membuat elemen div dengan kelas .container menerapkannya bahwa semua komponen yang kami buat akan ditempatkan di dalamnya.

Mengkonversi ke Jade

Di bawah ini, kami memiliki Jade setara dengan HTML mentah yang Anda lihat di bagian atas. Salin dan tempelkan kode ini ke "index.jade" Anda file dan simpan.

Setelah kompilasi selesai (secara otomatis melalui Prepros), buka "index.html" file yang telah dibuat. Di dalam, Anda harus melihat kecocokan persis dengan HTML mentah di atas.

Meskipun kami tidak membuat mixin apa pun sebagai bagian dari tahap ini, apa yang akan kami lakukan adalah meletakkan dasar untuk campuran yang akan dibuat nanti.

Persiapan untuk Menambah Mixin

Buat file bernama "mixins.jade" di folder yang sama file Jade Anda yang ada disimpan. Semua mixin yang kita buat nanti akan ditulis ke dalam file ini.

Di bagian atas "index.jade" Anda file tambahkan baris ini:

Baris ini akan mengimpor file mixins Anda, membuat mixin yang akan ditulis di dalamnya tersedia ke "index.jade" Anda file.

Kami sekarang siap untuk beralih ke penambahan dalam komponen Bootstrap.

Catatan: Semua kode untuk komponen Bootstrap selanjutnya harus ditambahkan di dalam div kelas .container.

Navbar Component

Komponen Bootstrap pertama yang akan kami sembunyikan untuk Jade adalah navbar component, termasuk bagian pencitraan merek (item pertama pada bilah), item menu tingkat atas, menu tarik-turun berisi header pembagi dan tarik-turun, serta tombol beralih untuk memperluas menu ketika formatnya diciutkan pada tampilan lebar yang lebih kecil.

HTML Mentah

HTML mentah yang biasanya harus Anda gunakan untuk komponen navbar yang digambarkan di atas adalah:

Mengkonversi ke Jade

Dipecah menjadi format Jade, komponen navbar kami terlihat seperti ini:

Tambahkan Navbar Mixins

Meskipun versi Jade dari komponen navbar lebih ringkas dan lebih mudah dilihat daripada HTML mentah, kita masih bisa melakukan perbaikan yang lebih besar dengan mengesampingkan sebagian besar kode ke dalam mixin.

Tambahkan kode berikut untuk "mixins.jade" Anda file:

Dalam kode Jade di atas, kami telah membuat lima campuran berbeda:

  1. nav - gunakan mixin ini untuk menginisialisasi komponen navbar dan elemen induknya, atur gaya visualnya ke "default" atau "inverse", dan setel teks yang akan muncul di bagian pencitraan merek.
  2. nav_item - menggunakan ini untuk menambah item menu individu yang bersarang di bawah nav mixin
  3. nav_item_dropdown - gunakan untuk menempatkan item nav dengan menu tarik turun bersarang di dalamnya
  4. nav_divider - gunakan untuk menempatkan pembagi bersarang di bawah campuran menu nav_item_dropdown
  5. nav_header - gunakan untuk menempatkan header di dalam menu tarik-turun, setelah nav_divider mixin

Itu mungkin tidak masuk akal segera, tetapi baca terus untuk melihat bagaimana campuran ini digunakan dalam tindakan dan semuanya harus menjadi jelas.

Menggunakan Navbar Mixins

Dengan mixbar navbar kami siap digunakan, menempatkan komponen navbar kini menjadi jauh lebih sederhana.

Tempat "nav" mixin

Mulailah dengan menempatkan nav mixin untuk menginisialisasi menu secara keseluruhan seperti:

Di antara tanda kurung yang melekat pada nav mixin, Anda melewatkan dua bagian informasi, yang disebut argumen, masing-masing dibungkus dalam tanda kutip. Yang pertama menetapkan teks yang akan muncul di bagian branding pada komponen nav. Yang kedua menetapkan ID unik untuk komponen nav.

Setelah dikompilasi, Anda akan melihat ini ketika melihat file HTML Anda di browser:

Invers Navbar warna

Untuk mengubah warna komponen navbar dari default ke inverse tambahkan argumen ketiga seperti:

Ini akan mengubah warna navbar Anda agar terlihat seperti ini:

Tempat Item Nav

Selanjutnya, kami akan menggunakan mixin nav_item kami untuk menambahkan tiga tautan menu tingkat atas kami:

Perhatikan bahwa setiap instance dari mixin nav_item adalah tab yang diindentasi oleh satu level lebih banyak daripada nav mixin. Ini menetapkan setiap nav_item menjadi anak dari nav mixin.

Dalam hal ini argumen pertama dilewatkan, contoh. "Index.html", setel tautan yang akan diterapkan ke item menu. Argumen kedua (dan opsional) menambahkan kelas active yang menyoroti item menu.

Setelah kompilasi komponen navbar Anda seharusnya sekarang terlihat seperti ini:

Menempatkan NAB Item dengan Dropdown Menu

Kita sekarang dapat melanjutkan dan menambahkan item menu lain dengan menu drop-down yang ditempatkan di dalam, menggunakan mixin nav_item_dropdown:

Ini menambahkan item baru dengan panah yang menunjukkan menu anak ada, dan pembungkus untuk menu anak itu sendiri:

Tempatkan Item Nav Dropdown

Menu tarik-turun baru kami belum memiliki item apa pun di dalamnya, jadi di sini kita dapat kembali menggunakan mixin nav_item kami untuk menambahkan beberapa.

Sementara kami melakukannya, kami akan menggunakan mixin nav_divider kami untuk menambahkan garis pemisah di dalam tarik-turun, dan nav_header kami untuk menambahkan beberapa teks tajuk tepat di bawahnya.

Penambahan ini akan melengkapi kode komponen navbar kami:

Kode ini dikompilasi menjadi komponen navbar yang berfungsi penuh dalam HTML, dan terlihat seperti ini:

Lihatlah kembali pada 30 baris asli HTML mentah untuk komponen navbar dan pertimbangkan berapa banyak bangunan menu yang lebih cepat dapat menjadi (setelah mixins dapat digunakan kembali tanpa dapat dibatalkan) ketika berayun menjadi 12 garis pendek Jade sebagai gantinya.

Kotak: Tiga Kolom Contoh

Bootstrap dilengkapi dengan sistem grid dua belas kolom yang dibangun dan sekumpulan kelas terkait yang memungkinkan Anda untuk menentukan berapa banyak lebar kolom elemen harus pada berbagai ukuran layar seperti medium (md), kecil (sm), dan ekstra kecil (xs ).

Anda dapat membaca secara lengkap cara kerja sistem grid ini di http://getbootstrap.com/css/#grid

Gambar di bawah ini adalah tiga panel di dalam div yang memulai 4 kolom lebar masing-masing pada ukuran "sedang" atau lebih besar, runtuh ke enam kolom masing-masing pada ukuran "kecil", dan 12 kolom masing-masing pada ukuran "ekstra kecil".

HTML Mentah

HTML mentah yang diperlukan untuk ketiga kolom ini adalah sebagai berikut:

Kita mulai dengan membuat div dengan row kelas, kemudian bersarang di dalamnya adalah tiga layout divs yang akan menahan panel yang digambarkan di atas.

Setiap div memiliki pengaturan col-md-4 kelas itu menjadi empat kolom lebar pada ukuran sedang atau lebih tinggi. Berikutnya adalah pengaturan kelas col-sm-6 menjadi enam kolom lebar pada ukuran kecil, dan akhirnya kelas col-xs-12 menyetelnya ke dua belas kolom lebar pada ukuran ekstra kecil.

Mengkonversi ke Jade

Dalam kode Jade kita dapat melewati semua pembukaan dan penutupan divs dan hanya langsung mengetik kelas yang diperlukan seperti:

Komponen panel

Sekarang mari buat komponen panel yang Anda lihat gambar di bagian sebelumnya:

HTML Mentah

HTML mentah untuk komponen panel sebenarnya cukup ringan dibandingkan dengan komponen navbar. Kami hanya memiliki tiga pembungkus, dengan total empat kelas yang diperlukan untuk menambahkan gaya yang benar:

Mengkonversi ke Jade

Mengubahnya menjadi Jade membuatnya menjadi lebih ringan lagi:

Menambahkan Panel Mixin

Alasan kami membuat mix untuk komponen ini adalah untuk menyelamatkan Anda harus mengingat semua empat nama kelas atau bagaimana setiap div yang diperlukan harus membungkus satu sama lain.

Tambahkan kode berikut untuk Anda "mixins.jade" file:

Menggunakan Panel Mixin

Untuk menempatkan komponen panel sekarang hanya menggunakan panel mixin, meneruskan teks yang ingin Anda gunakan di pos sebagai argumen. Kemudian, ketik konten panel Anda setelah mixin dipanggil, mengikuti spasi:

Bootstrap menawarkan beberapa gaya panel yang berbeda. Untuk mengubah gaya panel lainnya, lulus dengan gaya nama sebagai argumen kedua seperti:

Tombol

Selanjutnya kita akan melihat pembuatan contoh tombol Bootstrap.

Seperti komponen panel dari bagian terakhir, HTML mentah sudah cukup ringan untuk tombol, namun dengan menciptakan mixins kita menghilangkan kebutuhan untuk mengingat salah satu sintaks yang diperlukan untuk menggunakan mereka.

HTML Mentah

Mengkonversi ke Jade

Tambahkan Tombol Mixin

Serta menentukan gaya apa yang akan dimiliki tombol, mixin ini juga menerapkan tautan dan memungkinkan ukuran tombol untuk diubah.

Gunakan tombol Mixin

Dalam bentuk yang paling sederhana, Button mixin ini dapat digunakan seperti itu, dengan teks muncul pada tombol yang ditempatkan setelah mixin, mengikuti spasi:

Ini akan menghasilkan sebuah tombol di ukuran default, dengan default gambar dan # ditetapkan sebagai tautan tujuan.

Gaya tombol dapat disetel dengan meneruskan nama gaya baru sebagai argumen pertama, dan tujuan tautan dapat dilewatkan sebagai argumen kedua:

Ukuran tombol juga dapat diubah dengan melewatkan "besar", "kecil", atau "mini" sebagai argumen ketiga:

Komponen Alert

Alert components sangat mirip dengan tombol Bootstrap, tetapi lebih sederhana karena mereka tidak perlu memiliki tujuan tautan yang diterapkan pada mereka dan mereka tidak datang dalam berbagai ukuran.

Menuliskan tanda dalam HTML mentah bisa sedikit rumit karena Anda harus mengingat semua kelas terkait bersama dengan cara menambahkan tombol dengan simbol "x" di dalamnya yang memungkinkan peringatan ditutup.

Kami akan menggabungkan campuran sehingga Anda tidak perlu mengingat semua itu. Pada gilirannya, menempatkan lansiran menjadi mudah.

HTML Mentah

Mengkonversi ke Jade

Tambahkan Alert Mixin

Tambahkan kode berikut ke "mixins.jade" Anda file:

Gunakan Alert Mixin

Untuk menempatkan lansiran, Anda sekarang dapat menggunakan mixin alert, meneruskan gaya lansiran sebagai argumen, lalu mengetik konten teks dari lansiran segera setelah spasi:

Komponen Jumbotron

Jumbotron adalah salah satu komponen Bootstrap yang paling dikenal.

Dalam hal ini kami tidak akan membuat mixin untuknya, karena menempatkan komponen Jumbotron sama cepatnya dengan menggunakan kode Jade. Ini berfungsi sebagai contoh yang baik untuk menunjukkan bahwa meskipun mixins menjadi fantastis, Anda tidak selalu membutuhkannya jika mereka tidak akan menghemat waktu Anda yang signifikan.

HTML Mentah

Mengkonversi ke Jade, memasukkan tombol Mixin

Menempatkan Jumbotron di Jade benar-benar hanya masalah mengetik .Jumbotron pada satu baris kemudian bersarang konten Anda di dalam baris berikutnya.

Dalam kode di bawah ini, memeriksa bagaimana kita juga telah menggunakan tombol mixin kita buat sebelumnya, menampilkan bagaimana Anda dapat mulai untuk mencampur dan mencocokkan elemen-elemen ini bersama-sama:

Daftar grup komponen

Bootstrap menyediakan beberapa jenis komponen daftar grup yang berbeda. Kami akan menghasilkan tiga dari jenis grup daftar tersebut, sebagai berikut.

1 "Daftar" jenis, memproduksi ul elemen dengan unsur-unsur li anak

2. "Link" jenis, memproduksi serangkaian teks terhubung item

3. "Default" jenis, menghasilkan teks tidak tertaut item

HTML Mentah

Seperti pada beberapa komponen yang kami bahas di atas, HTML untuk grup daftar tidak terlalu rumit. Namun, kami masih dapat membuat produksi mereka lebih efisien dengan membuat serangkaian mixins yang mengurangi jumlah kode yang perlu Anda tulis.

HTML mentah untuk setiap jenis grup daftar adalah sebagai berikut:

Jenis: Daftar

Jenis: Link

Jenis: Default

Mengkonversi ke Jade

Dikonversi menjadi Jade lurus, masing-masing jenis grup daftar adalah sebagai berikut:

Jenis: Daftar

Jenis: Link

Jenis: Default

Tambahkan daftar kelompok Mixins

Seperti yang kami lakukan dengan mixbin komponen nav, kami akan membuat beberapa grup daftar campuran yang dapat disatukan untuk membuat berbagai jenis grup daftar kami.

Tambahkan yang berikut ini ke "mixins.jade" Anda file:

Mixin pertama, listGroup, merupakan salah satu dari ketiga jenis grup daftar kami dan dapat menerima argumen yang menentukan jenis grup daftar yang akan dihasilkan. Ini akan menampilkan elemen ul hanya jika jenis daftar ditentukan saat dipanggil.

Mixin kedua, listItem, menampilkan item daftar individu. Jika daftar jenis ditentukan maka akan mengeluarkan setiap item di dalam li tag, dan jika jenis tautan ditentukan maka akan mengeluarkan setiap item sebagai tautan.

Mixin ketiga, listHeading, output judul h4 tingkat ketika bersarang di dalam daftar item, dan dimaksudkan untuk digunakan dengan dan link default daftar kelompok jenis.

Dan akhirnya mixin keempat, listText, output teks yang akan disertakan dalam daftar item, dan juga dimaksudkan untuk digunakan dengan dan link default daftar kelompok jenis.

Gunakan daftar kelompok Mixins

Jenis: Daftar

Untuk membuat daftar listGroup Grup menggunakan listGroup mixin dengan list melewati sebagai argumen, dan mixins listItem seperti yang terlihat dalam kode berikut:

Untuk mengatur salah satu item daftar agar memiliki gaya aktif, berikan kata aktif sebagai argumen, sesuai baris kedua dalam contoh kode di atas.

Jenis: Link

Untuk membuat grup daftar jenis tautan, gunakan lagi campuran listGroup, tetapi kali ini lewati links kata sebagai argumen.

Anda juga masih menggunakan listItem mixin, namun ini sekarang akan menghasilkan tautan sehingga Anda harus menyertakan argumen setiap kali menetapkan tujuan untuk tautan yang akan dituju. Jika Anda menetapkan item daftar terkait harus active gaya, kali ini melewati kata "aktif" sebagai argumen kedua Anda.

Bersarang di dalam setiap listItem mixin Anda dapat menggunakan listHeading dan listText mixins untuk mengatur heading dan teks biasa untuk setiap item:

Jenis: Default

Grup daftar jenis default adalah apa yang Anda dapatkan ketika Anda tidak memberikan argumen sama sekali melalui mixin listGroup. Ini digunakan dengan cara yang hampir sama dengan grup daftar jenis tautan, dengan perbedaan yang Anda tidak perlu melewatkan tujuan tautan apa pun saat menggunakan listItem mixin:

Tema Bootswatch

Dalam semua contoh yang telah Anda lihat sejauh ini, kami telah menggunakan tema Flatly dari Bootswatch, dimuat melalui Bootstrap CDN dengan kode ini di bagian kepala:

Campuran terakhir yang akan kami tambahkan ke dalam proyek kami adalah mixbin “Bootswatch”.

Mixin ini akan membuatnya sangat mudah untuk beralih tema, dan juga untuk memperbarui URL stylesheet Anda nanti jika perlu. Mixin ini akan sangat mudah untuk beralih tema, dan juga untuk menambah gaya URL Anda kemudian jika perlu.

Tambahkan Bootswatch Mixin

Tambahkan kode berikut ke "mixins.jade" Anda file:

Gunakan Bootswatch Mixin

Di dokumen utama Anda, ganti baris yang menautkan dalam stylesheet Bootswatch dengan ini:

Sekarang untuk mengganti tema lain, ganti saja kata flatly dengan judul tema baru. Misalnya, untuk beralih ke tema tema Superhero:

Ini akan langsung mengubah tema situs Anda menjadi seperti ini:

Pengemasan

Saya harap Anda bersenang-senang menempatkan semua potongan Jade ini untuk bekerja di proyek Bootstrap Anda, dan itu menghemat banyak waktu dalam prosesnya.

Jika ada yang ingin Anda lakukan berbeda dalam proyek Bootstrap Anda sendiri, keindahan mixin Jade adalah Anda dapat menulis dan menyesuaikannya dengan cara apa pun yang Anda pilih.

Giok adalah bahasa yang sangat kuat, namun itu adalah bahasa intuitif bahwa Anda dapat mengambil dan mulai menggunakan untuk praktis efek cukup cepat.

Bacaan lebih lanjut

  • Saya mengundang Anda untuk melihat kursus saya Top Speed HTML Development With Jade, di mana saya memandu Anda melalui semua yang Anda butuhkan untuk mendapatkan dasar-dasar dan beberapa elemen yang paling berguna dari Jade di bawah ikat pinggang Anda hanya dalam waktu lebih dari dua jam.
  • Untuk lebih di Jade check out situs resmi di http://jade-lang.com
  • Dan untuk lebih lanjut tentang Bootstrap mengunjungi http://getbootstrap.com
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.