() translation by (you can also view the original English article)
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:
1 |
main
|
2 |
div
|
3 |
p
|
akan mengkompilasi untuk memberikan bersarang berikut dalam HTML:
1 |
<main> |
2 |
<div> |
3 |
<p></p> |
4 |
</div> |
5 |
</main> |
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":
1 |
mixin article(title) |
2 |
.article |
3 |
.article-wrapper |
4 |
h1= title |
5 |
block
|
dapat digunakan berkali-kali dalam dokumen seperti ini:
1 |
+article('Hello world') |
2 |
p This is my |
3 |
p Amazing article |
4 |
|
5 |
+article('Another article') |
6 |
p I just used a mixin |
7 |
p instead of retyping code |
dan akan mengkompilasi ke HTML ini:
1 |
<div class="article"> |
2 |
<div class="article-wrapper"> |
3 |
<h1>Hello world</h1> |
4 |
<p>This is my</p> |
5 |
<p>Amazing article</p> |
6 |
</div> |
7 |
</div> |
8 |
<div class="article">
|
9 |
<div class="article-wrapper">
|
10 |
<h1>Another article</h1> |
11 |
<p>I just used a mixin</p> |
12 |
<p>instead of retyping code</p> |
13 |
</div> |
14 |
</div> |
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, html, head, title, 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.
1 |
<!DOCTYPE html>
|
2 |
<html lang="en"> |
3 |
<head>
|
4 |
<title>Baking Bootstrap Snippets with Jade</title> |
5 |
<meta charset="utf-8"> |
6 |
<meta http-equiv="X-UA-Compatible" content="IE=edge"> |
7 |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
8 |
<meta name="description" content="Baking Bootstrap Snippets with Jade"> |
9 |
<link href="//maxcdn.bootstrapcdn.com/bootswatch/3.3.0/flatly/bootstrap.min.css" rel="stylesheet"> |
10 |
</head>
|
11 |
<body style="padding-bottom:10rem;"> |
12 |
<div class="container"></div> |
13 |
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> |
14 |
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> |
15 |
</body>
|
16 |
</html>
|
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.
1 |
doctype |
2 |
html( lang="en" ) |
3 |
head |
4 |
title Baking Bootstrap Snippets with Jade |
5 |
meta( charset='utf-8' ) |
6 |
meta( http-equiv='X-UA-Compatible', content='IE=edge' ) |
7 |
meta( name='viewport', content='width=device-width, initial-scale=1.0' ) |
8 |
meta( name='description', content='Baking Bootstrap Snippets with Jade' ) |
9 |
//- Bootswatch Theme |
10 |
link(href="//maxcdn.bootstrapcdn.com/bootswatch/3.3.0/flatly/bootstrap.min.css", rel="stylesheet") |
11 |
|
12 |
body(style="padding-bottom:10rem;") |
13 |
.container |
14 |
|
15 |
script( src='//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js' ) |
16 |
script( src='//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js' ) |
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:
1 |
include mixins |
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:
1 |
<nav role="navigation" class="navbar navbar-default"> |
2 |
<div class="navbar-header"> |
3 |
<button type="button" data-toggle="collapse" data-target="#navbar-inverse" aria-expanded="false" aria-controls="navbar" class="navbar-toggle collapsed"> |
4 |
<span class="sr-only">Toggle navigation</span> |
5 |
<span class="icon-bar"></span> |
6 |
<span class="icon-bar"></span> |
7 |
<span class="icon-bar"></span> |
8 |
</button>
|
9 |
<a href="#" class="navbar-brand">Project name</a> |
10 |
</div>
|
11 |
<div id="navbar-inverse" class="collapse navbar-collapse"> |
12 |
<ul class="nav navbar-nav"> |
13 |
<li class="active"><a href="#">Home</a></li> |
14 |
<li><a href="#about">About</a></li> |
15 |
<li><a href="#contact">Contact</a></li> |
16 |
<li class="dropdown"> |
17 |
<a href="#" data-toggle="dropdown" role="button" aria-expanded="false" class="dropdown-toggle">Dropdown <span class="caret"></span></a> |
18 |
<ul role="menu" class="dropdown-menu"> |
19 |
<li><a href="#">Action</a></li> |
20 |
<li><a href="#">Another action</a></li> |
21 |
<li><a href="#">Something else here</a></li> |
22 |
<li class="divider"></li> |
23 |
<li class="dropdown-header">Nav header</li> |
24 |
<li><a href="#">Separated link</a></li> |
25 |
<li><a href="#">One more separated link</a></li> |
26 |
</ul>
|
27 |
</li>
|
28 |
</ul>
|
29 |
</div>
|
30 |
</nav>
|
Mengkonversi ke Jade
Dipecah menjadi format Jade, komponen navbar kami terlihat seperti ini:
1 |
nav.navbar.navbar-default( role="navigation" ) |
2 |
.navbar-header |
3 |
button.navbar-toggle.collapsed( type="button", data-toggle="collapse", data-target="#navbar-inverse", aria-expanded="false", aria-controls="navbar") |
4 |
span.sr-only Toggle navigation |
5 |
span.icon-bar |
6 |
span.icon-bar |
7 |
span.icon-bar |
8 |
a.navbar-brand(href="#") Project name |
9 |
|
10 |
#navbar-inverse.collapse.navbar-collapse
|
11 |
ul.nav.navbar-nav |
12 |
li.active: a( href="#") Home |
13 |
li: a( href="#about" ) About |
14 |
li: a( href="#contact" ) Contact |
15 |
li.dropdown |
16 |
a.dropdown-toggle( href="#", data-toggle="dropdown", role="button", aria-expanded="false" ) Dropdown |
17 |
span.caret |
18 |
ul.dropdown-menu( role="menu" ) |
19 |
li: a( href="#" ) Action |
20 |
li: a( href="#" ) Another action |
21 |
li: a( href="#" ) Something else here |
22 |
li.divider |
23 |
li.dropdown-header Nav header |
24 |
li: a( href="#" ) Separated link |
25 |
li: a( href="#" ) One more separated link |
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:
1 |
//- Navbar mixins |
2 |
mixin nav(name, id, style) |
3 |
- var style = (typeof style === 'undefined') ? "default" : style |
4 |
nav( role="navigation", class=["navbar", "navbar-" + style] ) |
5 |
.navbar-header |
6 |
button.navbar-toggle.collapsed( type="button", data-toggle="collapse", data-target="#" + id, aria-expanded="false", aria-controls="navbar") |
7 |
span.sr-only Toggle navigation |
8 |
span.icon-bar |
9 |
span.icon-bar |
10 |
span.icon-bar |
11 |
a.navbar-brand(href="#")= name |
12 |
|
13 |
.collapse.navbar-collapse( id=id ) |
14 |
ul.nav.navbar-nav |
15 |
block
|
16 |
|
17 |
mixin nav_item(href, active) |
18 |
li(class=active): a( href=href ) |
19 |
block
|
20 |
|
21 |
mixin nav_item_dropdown(href, active) |
22 |
li(class=["dropdown", active]) |
23 |
a.dropdown-toggle( href=href, data-toggle="dropdown", role="button", aria-expanded="false" )= attributes.label |
24 |
span.caret |
25 |
ul.dropdown-menu( role="menu" ) |
26 |
block
|
27 |
|
28 |
mixin nav_divider |
29 |
li.divider |
30 |
|
31 |
mixin nav_header |
32 |
li.dropdown-header |
33 |
block
|
34 |
|
35 |
//- End navbar mixins |
Dalam kode Jade di atas, kami telah membuat lima campuran berbeda:
-
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.
-
nav_item- menggunakan ini untuk menambah item menu individu yang bersarang di bawahnavmixin -
nav_item_dropdown- gunakan untuk menempatkan item nav dengan menu tarik turun bersarang di dalamnya -
nav_divider- gunakan untuk menempatkan pembagi bersarang di bawah campuran menunav_item_dropdown -
nav_header- gunakan untuk menempatkan header di dalam menu tarik-turun, setelahnav_dividermixin
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:
1 |
+nav("Project name", "dropdown_menu") |
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:
1 |
+nav("Project name", "dropdown_menu", "inverse") |
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:
1 |
+nav("Project name", "dropdown_menu") |
2 |
+nav_item( "index.html", "active" ) Home |
3 |
+nav_item( "about.html" ) About |
4 |
+nav_item( "contact.html" ) Contact |
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:
1 |
+nav("Project name", "dropdown_menu") |
2 |
+nav_item( "index.html", "active" ) Home |
3 |
+nav_item( "about.html" ) About |
4 |
+nav_item( "contact.html" ) Contact |
5 |
+nav_item_dropdown( "#" )( label="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:
1 |
+nav("Project name", "dropdown_menu") |
2 |
+nav_item( "index.html", "active" ) Home |
3 |
+nav_item( "about.html" ) About |
4 |
+nav_item( "contact.html" ) Contact |
5 |
+nav_item_dropdown( "#" )( label="Dropdown") |
6 |
+nav_item( "#" ) Action |
7 |
+nav_item( "#" ) Another action |
8 |
+nav_item( "#" ) Something else here |
9 |
+nav_divider |
10 |
+nav_header Nav header |
11 |
+nav_item( "#" ) Separated link |
12 |
+nav_item( "#" ) One more separated link |
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:
1 |
<div class="row"> |
2 |
<div class="col-md-4 col-sm-6 col-xs-12"> |
3 |
</div> |
4 |
<div class="col-md-4 col-sm-6 col-xs-12"> |
5 |
</div> |
6 |
<div class="col-md-4 col-sm-6 col-xs-12"> |
7 |
</div> |
8 |
</div> |
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:
1 |
.row |
2 |
.col-md-4.col-sm-6.col-xs-12 |
3 |
.col-md-4.col-sm-6.col-xs-12 |
4 |
.col-md-4.col-sm-6.col-xs-12 |
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:
1 |
<div class="panel panel-default"> |
2 |
<div class="panel-heading">Panel Heading</div> |
3 |
<div class="panel-body">We are a fairly small, flexible design studio that designs for print and web. We work flexibly with clients to fulfil their design needs. Whether you need to create a brand from scratch, including marketing materials and a beautiful and functional website or whether you are looking for a design refresh we are confident you will be pleased with the results.</div> |
4 |
</div>
|
Mengkonversi ke Jade
Mengubahnya menjadi Jade membuatnya menjadi lebih ringan lagi:
1 |
.panel.panel-default |
2 |
.panel-heading Panel Heading |
3 |
.panel-body We are a fairly small, flexible design studio that designs for print and web. We work flexibly with clients to fulfil their design needs. Whether you need to create a brand from scratch, including marketing materials and a beautiful and functional website or whether you are looking for a design refresh we are confident you will be pleased with the results. |
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:
1 |
//- Panel mixin |
2 |
mixin panel(heading, style) |
3 |
- var style = (typeof style === 'undefined') ? "default" : style |
4 |
div( class=["panel", "panel-" + style] ) |
5 |
.panel-heading= heading |
6 |
.panel-body |
7 |
block
|
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:
1 |
+panel("Panel Heading") We are a fairly small, flexible design studio that designs for print and web. We work flexibly with clients to fulfil their design needs. Whether you need to create a brand from scratch, including marketing materials and a beautiful and functional website or whether you are looking for a design refresh we are confident you will be pleased with the results. |
Bootstrap menawarkan beberapa gaya panel yang berbeda. Untuk mengubah gaya panel lainnya, lulus dengan gaya nama sebagai argumen kedua seperti:
1 |
+panel("Panel Heading", "success") |
1 |
+panel("Panel Heading", "primary") |
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
1 |
<a href="#" class="btn btn-default">Default</a> |
2 |
|
3 |
<a href="link.htm" class="btn btn-primary">Primary</a> |
4 |
|
5 |
<a href="#" class="btn btn-success">Success</a> |
6 |
|
7 |
<a href="#" class="btn btn-info">Info</a> |
8 |
|
9 |
<a href="#" class="btn btn-warning">Warning</a> |
10 |
|
11 |
<a href="#" class="btn btn-danger">Danger</a> |
Mengkonversi ke Jade
1 |
a.btn.btn-default Default |
2 |
|
3 |
a.btn.btn-primary( href="link.htm" ) Primary |
4 |
|
5 |
a.btn.btn-success Success |
6 |
|
7 |
a.btn.btn-info Info |
8 |
|
9 |
a.btn.btn-warning Warning |
10 |
|
11 |
a.btn.btn-danger Danger |
Tambahkan Tombol Mixin
1 |
//- Button mixin |
2 |
mixin button(style, href, size) |
3 |
- var style = (typeof style === 'undefined') ? "default" : style |
4 |
- var href = (typeof href === 'undefined') ? "#" : href |
5 |
case size |
6 |
when "large" |
7 |
- size = "btn-lg" |
8 |
when "small" |
9 |
- size = "btn-sm" |
10 |
when "mini" |
11 |
- size = "btn-xs" |
12 |
|
13 |
a( class=["btn", "btn-" + style, size], href=href ) |
14 |
block
|
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:
1 |
+button Default |
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:
1 |
+button("primary", "link.htm") Primary |
Ukuran tombol juga dapat diubah dengan melewatkan "besar", "kecil", atau "mini" sebagai argumen ketiga:
1 |
+button("success", "success.html", "large") Success |
2 |
|
3 |
+button("info", "info.html", "small") Info |
4 |
|
5 |
+button("warning", "warning.html", "mini") Warning |
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
1 |
<div class="alert alert-dismissable alert-warning"> |
2 |
<button type="button" data-dismiss="alert" class="close">×</button>Warning! Warning! |
3 |
</div>
|
4 |
<div class="alert alert-dismissable alert-danger"> |
5 |
<button type="button" data-dismiss="alert" class="close">×</button>Danger Will Robinson! |
6 |
</div>
|
7 |
<div class="alert alert-dismissable alert-success"> |
8 |
<button type="button" data-dismiss="alert" class="close">×</button>You succeeded :-) |
9 |
</div>
|
10 |
<div class="alert alert-dismissable alert-info"> |
11 |
<button type="button" data-dismiss="alert" class="close">×</button>Some information for you |
12 |
</div>
|
Mengkonversi ke Jade
1 |
.alert.alert-dismissable.alert-warning |
2 |
button.close( type="button", data-dismiss="alert" ) × |
3 |
| Warning! Warning! |
4 |
.alert.alert-dismissable.alert-danger |
5 |
button.close( type="button", data-dismiss="alert" ) × |
6 |
| Danger Will Robinson! |
7 |
.alert.alert-dismissable.alert-success |
8 |
button.close( type="button", data-dismiss="alert" ) × |
9 |
| You succeeded :-) |
10 |
.alert.alert-dismissable.alert-info |
11 |
button.close( type="button", data-dismiss="alert" ) × |
12 |
| Some information for you |
Tambahkan Alert Mixin
Tambahkan kode berikut ke "mixins.jade" Anda file:
1 |
//- Alert mixin |
2 |
mixin alert(style) |
3 |
div( class=["alert", "alert-dismissable", "alert-" + style] ) |
4 |
button.close( type="button", data-dismiss="alert" ) × |
5 |
block
|
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:
1 |
+alert("warning") Warning! Warning!
|
2 |
+alert("danger") Danger Will Robinson!
|
3 |
+alert("success") You succeeded :-)
|
4 |
+alert("info") Some information for you
|
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
1 |
<div class="jumbotron"> |
2 |
<h1>Hello, world!</h1> |
3 |
<p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p> |
4 |
<p><a class="btn btn-primary btn-lg">Learn more</a></p> |
5 |
</div>
|
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:
1 |
.jumbotron |
2 |
h1 Hello, world! |
3 |
p This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information. |
4 |
p: +button("primary", "more.htm", "large") Learn more |
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
1 |
<ul class="list-group"> |
2 |
<li class="list-group-item active">Cras justo odio</li> |
3 |
<li class="list-group-item">Dapibus ac facilisis in</li> |
4 |
<li class="list-group-item">Morbi leo risus</li> |
5 |
<li class="list-group-item">Dapibus ac facilisis in</li> |
6 |
<li class="list-group-item">Morbi leo risus</li> |
7 |
<li class="list-group-item">Dapibus ac facilisis in</li> |
8 |
</ul>
|
Jenis: Link
1 |
<div class="list-group"> |
2 |
<a href="#" class="list-group-item active"> |
3 |
<h4 class="list-group-item-heading">List group item heading</h4> |
4 |
<p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p> |
5 |
</a>
|
6 |
<a href="#" class="list-group-item"> |
7 |
<h4 class="list-group-item-heading">List group item heading</h4> |
8 |
<p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p> |
9 |
</a>
|
10 |
<a href="#" class="list-group-item"> |
11 |
<h4 class="list-group-item-heading">List group item heading</h4> |
12 |
<p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p> |
13 |
</a>
|
14 |
</div>
|
Jenis: Default
1 |
<div class="list-group"> |
2 |
<div href="#" class="list-group-item"> |
3 |
<h4 class="list-group-item-heading">List group item heading</h4> |
4 |
<p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p> |
5 |
</div>
|
6 |
<div href="#" class="list-group-item"> |
7 |
<h4 class="list-group-item-heading">List group item heading</h4> |
8 |
<p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p> |
9 |
</div>
|
10 |
<div href="#" class="list-group-item"> |
11 |
<h4 class="list-group-item-heading">List group item heading</h4> |
12 |
<p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p> |
13 |
</div>
|
14 |
</div>
|
Mengkonversi ke Jade
Dikonversi menjadi Jade lurus, masing-masing jenis grup daftar adalah sebagai berikut:
Jenis: Daftar
1 |
ul.list-group |
2 |
li.list-group-item.active Cras justo odio |
3 |
li.list-group-item Dapibus ac facilisis in |
4 |
li.list-group-item Morbi leo risus |
5 |
li.list-group-item Dapibus ac facilisis in |
6 |
li.list-group-item Morbi leo risus |
7 |
li.list-group-item Dapibus ac facilisis in |
Jenis: Link
1 |
.list-group |
2 |
a.list-group-item.active( href="#" ) |
3 |
h4.list-group-item-heading List group item heading |
4 |
p.list-group-item-text Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit. |
5 |
a.list-group-item( href="#" ) |
6 |
h4.list-group-item-heading List group item heading |
7 |
p.list-group-item-text Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit. |
8 |
a.list-group-item( href="#" ) |
9 |
h4.list-group-item-heading List group item heading |
10 |
p.list-group-item-text Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit. |
Jenis: Default
1 |
.list-group |
2 |
.list-group-item( href="#" ) |
3 |
h4.list-group-item-heading List group item heading |
4 |
p.list-group-item-text Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit. |
5 |
.list-group-item( href="#" ) |
6 |
h4.list-group-item-heading List group item heading |
7 |
p.list-group-item-text Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit. |
8 |
.list-group-item( href="#" ) |
9 |
h4.list-group-item-heading List group item heading |
10 |
p.list-group-item-text Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit. |
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:
1 |
//- List group mixins |
2 |
- var groupType |
3 |
|
4 |
mixin listGroup(type) |
5 |
- groupType = type |
6 |
case groupType |
7 |
when 'list' |
8 |
ul.list-group |
9 |
block
|
10 |
default
|
11 |
.list-group |
12 |
block
|
13 |
|
14 |
mixin listItem(arg1, arg2) |
15 |
case groupType |
16 |
when 'list' |
17 |
li( class=["list-group-item", arg1] ) |
18 |
block
|
19 |
when 'links' |
20 |
a( href=arg1, class=["list-group-item", arg2] ) |
21 |
block
|
22 |
default
|
23 |
.list-group-item( class=["list-group-item", arg1] ) |
24 |
block
|
25 |
|
26 |
mixin listHeading |
27 |
h4.list-group-item-heading |
28 |
block
|
29 |
|
30 |
mixin listText |
31 |
.list-group-item-text |
32 |
block
|
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:
1 |
+listGroup("list") |
2 |
+listItem("active") Cras justo odio |
3 |
+listItem Dapibus ac facilisis in |
4 |
+listItem Morbi leo risus |
5 |
+listItem Dapibus ac facilisis in |
6 |
+listItem Morbi leo risus |
7 |
+listItem Dapibus ac facilisis in |
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:
1 |
+listGroup("links") |
2 |
+listItem("link1.html", "active") |
3 |
+listHeading List group item heading |
4 |
+listText Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit. |
5 |
+listItem("link2.html") |
6 |
+listHeading List group item heading |
7 |
+listText Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit. |
8 |
+listItem("link3.html") |
9 |
+listHeading List group item heading |
10 |
+listText Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit. |
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:
1 |
+listGroup |
2 |
+listItem |
3 |
+listHeading List group item heading |
4 |
+listText Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit. |
5 |
+listItem |
6 |
+listHeading List group item heading |
7 |
+listText Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit. |
8 |
+listItem |
9 |
+listHeading List group item heading |
10 |
+listText Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit. |
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:
1 |
link(href="//maxcdn.bootstrapcdn.com/bootswatch/3.3.0/flatly/bootstrap.min.css", rel="stylesheet") |
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:
1 |
mixin bootswatch(theme) |
2 |
link(href="//maxcdn.bootstrapcdn.com/bootswatch/3.3.0/" + theme + "/bootstrap.min.css", rel="stylesheet") |
Gunakan Bootswatch Mixin
Di dokumen utama Anda, ganti baris yang menautkan dalam stylesheet Bootswatch dengan ini:
1 |
+bootswatch("flatly")
|
Sekarang untuk mengganti tema lain, ganti saja kata flatly dengan judul tema baru. Misalnya, untuk beralih ke tema tema Superhero:
1 |
+bootswatch("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
