Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Bootstrap
Webdesign

Melangkah keluar dengan Bootstrap dari Twitter

by
Length:LongLanguages:

Malay (Melayu) translation by Uwais Al Qarni (you can also view the original English article)

Twitter memperkenalkan Bootstrap baru-baru ini, perpustakaan gaya CSS yang bertujuan untuk pemaju aplikasi web yang memerlukan bantuan reka bentuk.Toolkit ini meliputi segala-galanya dari susun atur grid ke butang dan modal, dan berfungsi dalam hampir semua pelayar moden, sepanjang jalan kembali ke IE7.

Mari lihat apa yang boleh kita lakukan dengannya ...

Bootstrap juga dipertingkatkan melalui Less preprocessor, yang menambah beberapa sebab tambahan untuk menggunakan Bootstrap, walaupun kami akan mengecualikan Fungsi kurang dari skop tutorial ini , agar mudah.

Bootstrap termasuk sedikit dokumentasi, tetapi tiada siapa yang benar-benar menerangkan bagaimana menggunakan toolkit ini (tetapi hanya terdapat satu halaman demo besar untuk anda menyiasat diri anda).  Oleh itu, dalam artikel ini, kami akan membuka satu demi satu halaman Bootstrap sampel dan menganalisis cara mengulangi elemen Bootstrap termasuk. Dalam contoh kami, kami juga akan mencipta contoh laman web yang dibina sepenuhnya dengan Bootstrap.


Apa yang Dilindungi?

Kami akan melihat perkara berikut (gunakan pautan untuk melompat ke bahagian yang berlainan):


Sistem Grid

Grid adalah sebahagian daripada banyak reka bentuk web. Sama seperti perancang bandar sedang merekabentuk grid, pereka web juga boleh menyelaraskan unsur-unsur sedemikian rupa. Bootstrap termasuk sistem grid yang mempunyai lebar 940px, dibungkus dalam kelas container .  Terdapat enam belas kelas lajur yang berbeza bersama-sama, dengan setiap lebar menambah secara kumulatif 60px apabila bilangannya meningkat, bermula dari 40 piksel. Sebagai contoh, kelas span1 mempunyai lebar 40px, manakala kelas span3 mempunyai lebar 160px.

Seperti yang ditunjukkan dalam imej di atas, kita boleh menggunakan kombinasi kelas yang berbeza untuk membuat lebar total bersamaan dengan 940 piksel, termasuk margin 20px yang ditambah kepada setiap kelas. Sebagai contoh, penggunaan empat kelas div.span4 akan diterjemahkan, yang bermaksud 220 +20 + 220 + 20 + 220 + 20 + 220 yang, selepas kita mengeluarkan kalkulator, sama dengan 940 piksel penuh.  Dengan membungkus semua ini dalam kelas row - row , Bootstrap menyumbang margin dua puluh piksel dalam lajur terakhir dengan memindahkan semua dua puluh piksel kembali.

Kod di atas akan menghasilkan satu set lajur CSS yang sama rata yang memaparkan beberapa kandungan minimum.  Pasti, kami boleh bertukar beberapa kelas ini atau menambah / tolak tag untuk membuat susun atur yang berbeza. Ciri lain dari toolkit Bootstrap ialah keupayaan untuk melangkau lajur dengan mengkompensasi.  kelas offset, sekali lagi, bernombor 1-16 di mana lebar mereka mengikuti corak yang sama, walaupun sekarang termasuk tambahan 40 piksel untuk mengimbangi margin kiri dan kanan lajur.  Sebagai contoh, kita boleh mengambil contoh di atas, tetapi padamkan medan tengah dengan menambah kelas offset5 hingga tag akhir. Sebagai contoh:

Ia agak mudah untuk memanipulasi ini dengan hanya beberapa nombor yang perlu diubah, dan imej pada awal bahagian ini harus digunakan sebagai panduan untuk beberapa struktur yang disyorkan.


Typography

Salah satu perkara yang berjalan melalui hampir semua elemen yang ditunjukkan dalam tutorial ini adalah tipografi.  Bootstrap dilengkapi dengan semua tanda tipografi yang anda hendak tetapkan, semuanya dari tag <address> hingga <h1> dan hierarki tajuk keseluruhan.  Sejujurnya, ini adalah item "Pembangunan Web 101" yang mungkin anda sudah tahu, jadi saya tidak akan membuang masa menjelaskan cara. Ini cukup asas.

Adalah penting untuk ambil perhatian bahawa Bootstrap mengambil kira tag yang lebih tua dan sekarang sudah lama, jadi anda tidak perlu bimbang tentang menggunakan CMS yang menggunakannya, atau untuk pelanggan yang tidak mengetahui sebarang alternatif.

Memetik

Di mana Bootstrap perlu sedikit lebih jelas ialah apabila anda menggunakan tag <blockquote> .  Anda boleh menggunakan tag anda sendiri untuk memaparkan petikan yang menarik, dengan sempadan kelabu tebal di sebelah kiri. Walau bagaimanapun, ia boleh diperbaiki dengan meletakkan tag lain di dalamnya untuk mengaitkan sebut harga.  Apabila menambah atribut, bungkus teks yang dipetik anda dalam tag <p> , dan sumber dalam tag <small> dan Bootstrap akan diisih secara automatik dan meletakkan dash di depan sumber.

Anda akan berakhir dengan hasil yang serupa dengan imej di bawah, bergantung pada kandungan yang anda masukkan antara perenggan dan tag kecil.

Senarai

Senarai adalah spektrum tipografi lain yang dibincangkan dalam Bootstrap, dan dilengkapi dengan empat gaya siri yang berbeza: senarai bullet, senarai bulleted yang tersenarai, senarai yang diperintahkan dan glosari.  Sekali lagi, ini tidak terlalu sukar untuk digunakan kerana ia tidak menyimpang dari standard HTML. Kerana senarai boleh dibina dengan cara yang berbeza, berikut ringkasan cara menggunakannya dalam gaya Bootstrap.

Kod di bawah adalah senarai tidak teratur asas dan bulleted yang akan menghasilkan sesuatu yang serupa dengan contoh pertama dalam imej di bawah. Tukar keluar untuk mendapatkan senarai yang diperintahkan, kerana pada contoh kedua.

Jika anda menambah kelas yang tidak unstyled ke senarai yang tidak disusun, item senarai yang tidak disusun tidak akan dibajak, atau diperintahkan. Mereka hanya akan kelihatan seperti baris biasa, manakala item bersarang akan mempunyai peluru ke kiri.

Menambah senarai deskripsi yang dilakukan dengan cara yang sama seperti yang anda harapkan di luar Bootstrap, dan menghasilkan sampel seperti gambar terakhir dalam imej di atas.


Jadual-jadual

Bootstrap adalah toolkit yang bertujuan sebahagiannya di pereka web baru, jadi tidak perlu pergi tanpa mengatakan bahawa perkara-perkara ini tidak dimaksudkan untuk susun atur. Sebaliknya, jadual digunakan untuk data jadual, dan Bootstrap melakukan tugas yang baik untuk mencantikkan data jadual anda dengan gaya, tanpa memerlukan kelas tambahan atau atribut. Contohnya, kita dapat melihat sekumpulan HTML biasa yang akan menghasilkan jadual.

Kod di atas mencipta jadual dalam imej di bawah, seperti yang digunakan dalam contoh rasmi Twitter. Ia mempunyai tiga baris kandungan dan tajuk dalam empat lajur, dan cukup standard.  Dengan sedikit manipulasi (menggaru, tiada manipulasi) pada penciptaan jadual piawai, Bootstrap secara automatik menggunakan gaya.

Dalam kes ini, perkara yang paling penting untuk diingat adalah meletakkan tag dengan betul. Gaya tidak digunakan jika anda tidak membalut baris tajuk anda dalam tag <thead> , sebagai contoh.

Secara lalai, jadual bukan zebra-striped, di mana warna alternatif boleh mengisi latar belakang setiap baris. Ini mudah untuk diaktifkan, tetapi hanya dengan menambahkan kelas zebra-striped ke tag <table>  tanpa manipulasi baris atau bahagian individu.

Akhirnya, dengan penambahan sekeping kecil jQuery, tetapi tiada perubahan kepada HTML selain menambah sortTableExample sebagai ID tag <table> , anda boleh menambah fungsi pengurutan apabila tajuk lajur diklik.  Fungsi ini memerlukan jQuery Tablesorter 2.0 plugin, yang boleh dimuat turun secara percuma . Seperti yang mungkin anda fikirkan, anda juga perlu memanggil jQuery untuk berfungsi.


Borang dan Butang

Kebanyakan perkara yang kami telah dibincangkan agak mudah, di mana Bootstrap akan menggunakan gaya untuk kod anda dengan sedikit atau tiada perubahan daripada biasa. Mengetepikan perkara-perkara ini, kita kini boleh meneruskan beberapa perkara yang memerlukan sedikit penjelasan dan panduan sedikit lagi.

Borang

Untuk bentuk, terdapat banyak gaya yang berbeza yang boleh anda gunakan, jadi kami akan melihat setiap satu secara berasingan. Anda kemudian boleh menggunakan kombinasi ini antara satu sama lain, dan memanipulasi mereka dengan pengetahuan sedia ada bentuk HTML lama.

Mula-mula, perhatikan bahawa keseluruhan borang anda harus dibungkus dengan tag <form> , tetapi anda mungkin sudah tahu. Bootstrap juga mengesyorkan bahawa anda membungkus elemen anda dalam tag <fieldset> dengan tag <legend>

Secara amnya, tetapan borang anda tidak sepatutnya berbeza daripada kod di atas. Satu-satunya pilihan lain Bootstrap menyediakan adalah untuk memilih bentuk yang disusun, di mana label berada di atas medan, dan bukan di sebelah kiri. .  Itu boleh dicapai dengan menambah kelas form-stacked tag <form>  .

Input teks

Untuk memulakan skop medan borang kami, kami akan melihat input medan biasa dengan label. Coretan kod di bawah pada dasarnya adalah <label> dan <input> dibungkus dalam tag <div> dengan kelas clearfix untuk memastikan jarak yang betul.  Di samping itu, medan sebenar dibalut dengan  <div> sekali lagi dengan input kelas, sekali lagi, untuk memastikan jarak yang betul.

Untuk tutorial ini, saya akan mengabaikan beberapa amalan yang harus digunakan dalam kod anda. Sebagai contoh, setiap penyertaan mesti mempunyai ID, terikat pada label melalui atribut "untuk", dan anda biasanya mahu nama medan input anda untuk mengendalikannya semasa memproses data anda.  Kami melihat secara khusus cara menggunakan gaya Bootstrap di sini, jadi jenis atribut tersebut tidak dimasukkan dalam contoh saya untuk mencuba dan menyimpannya semudah mungkin. Walau bagaimanapun, walaupun digunakan bersama dengan Bootstrap, tugas itu tidak boleh dilupakan.

Dengan menambahkan kelas xlarge kepada <input>, medan borang diluaskan.

Kita boleh mematikan input dengan cara yang normal, dengan menambahkan atribut yang sesuai, seperti ditunjukkan dalam contoh di bawah. Gaya Bootstrap ditambah kepada kelas disabled , yang mesti ditambah untuk menunjukkan secara visual bahawa pengguna tidak dapat berinteraksi dengan medan tersebut dengan melepaskannya.

Sedangkan pendekatan berkulit kelabu bagi kawasan kurang upaya dicapai dengan menggunakan tag <input>, yang boleh diedit. Sebaliknya, Bootstrap menggunakan mudah <span> yang boleh digunakan bersama dengan input tersembunyi.  Medan ini digunakan untuk maklumat yang pengguna tidak dapat mengedit, seperti tarikh dikutip secara automatik atau alamat IP.

Melihat terakhir kami pada input teks gaya adalah untuk menunjukkan bantuan kontekstual apabila terdapat ralat. Ini dilakukan dengan menambah kelas error kepada <div> yang membentuk pembersihan jelas, dan kepada tag <input> itu sendiri.  Menambah tag <span> dengan kelas help-inline di bawahnya menambah mesej bantuan di sebelah kanan.

Jatuh turun pilih

Menu lungsur turun berstruktur dengan cara yang sama, dengan kod yang biasa digunakan, seperti ditunjukkan di bawah.

Kelas xlarge ke medan teks adalah bertentangan dengan kelas medium ke tag <select> Menambah kelas semacam itu ke menu pilihan turun jatuh akan menjadikan lapangan lebih sempit.

Kotak centang

Kotak centang tidak semestinya didirikan di Bootstrap. Toolkit menganjurkannya untuk memastikannya selaras dengan bidang lain, dan melakukannya dengan membuat senarai setiap item kotak centang.  Kod ini cukup jelas, pastikan untuk membungkus kedua-dua teks label dan kotak semak dalam <label> supaya (a) kotak semak melayang ke kiri dan (b) kotak pilihan boleh dipilih dengan mengklik pada label.

Kod ini akan menghasilkan satu kotak semak dengan label di sebelah kanan.Untuk membuat yang tambahan, hanya ulangi senarai item dan kandungannya, kemudian voila, terdapat senarai kotak centang.

Untuk melumpuhkan kotak semak, tambah sahaja ciri yang tidak <label> <input> , dan kelas kurang upaya ke <label>

Di samping itu, terdapat dua jenis kotak pilihan tambahan yang dipasangkan dengan medan teks: kotak pilihan yang disediakan dan dimasukkan. Sekali lagi, ini agak jelas dan sangat serupa dengan medan teks biasa.  Walau bagaimanapun, kali ini anda perlu membungkus kotak semak dalam tag <label> (dengan kelas add-on), dan kelas input-prepen d atau input-append input-prepen bagi ibu bapa <div> .  Kemudian, apa yang tersisa adalah untuk memastikan anda meletakkan label dan medan dengan cara yang betul, bergantung kepada sama ada anda mahu ia ditambah atau ditambah.

Kod di atas adalah untuk kotak pilihan yang ditambahkan, tetapi jika anda mahu dibuat, tiada perubahan.

Input Fail

Fail input sangat mirip dengan medan teks dan kod di bawah cukup jelas. Buat fail input biasa dengan kelas input-file .

Kawasan Teks

Bootstrap gaya terakhir untuk borang adalah kawasan teks. Kawasan teks dicipta dengan cara yang sama seperti medan teks baris tunggal. Seperti membesarkan medan teks, kawasan teks juga mempunyai kelasnya sendiri untuk menjadikannya lebih luas, xxlarge .

Pilihan, anda boleh menambah baris bantuan kecil di bawah medan dengan baris berikut ditambah dengan serta-merta selepas tag <textarea>

Butang

Kini tiba masanya untuk memproses borang kami, dan biasanya kami melakukannya dengan mengklik butang. Nasib baik, Bootstrap termasuk butang dan mereka sangat mudah untuk ditambah.

Butang boleh ditambah melalui tag <a> atau <button> Kedua-dua berkongsi kelas yang sama dan akan kelihatan sama, tetapi anda harus cuba dan menyimpan butang untuk tindakan itu, dan pautan untuk pautan yang baik.Jadi, sebagai contoh, butang akan ditulis seperti ini:

Dan butang yang sama, tetapi dibuat sebagai pautan, akan ditulis seperti ini:

Secara lalai, butang akan muncul dalam gaya kelabu yang terang. Walau bagaimanapun, ini dengan mudah boleh ditukar menjadi salah satu dari empat (biru, biru, hijau dan merah) dengan menggunakan kelas tambahan.

  • primary untuk butang biru yang merupakan tindakan utama (misalnya menghantar borang)
  • Info untuk butang biru lebih cerah, biasanya digunakan untuk mengakses maklumat
  • Success untuk butang hijau, biasanya memberikan isyarat kejayaan
  • danger untuk butang merah, biasanya digunakan untuk tindakan yang tidak boleh diulang atau berbahaya seperti padam

Kita juga boleh mengubah saiz butang dari lalai. Untuk memperbesarnya, tambah kelas large atau kurangkannya dengan kelas small .

Akhir sekali, untuk mematikan butang, semua yang perlu kita lakukan ialah menambah kelas disabled dan, dalam hal butang tindakan, atur atribut yang kurang upaya.

atau


Navigasi

Bootstrap termasuk bar navigasi tetap yang menyerupai satu di laman Twitter.Bar terdiri daripada tiga bahagian, tajuk pautan, item menu dalam bar carian, dibungkus dalam beberapa tag <div> tidak perlu.

Dalam kod di bawah, anda akan melihat tag <h3> memegang tajuk. Ia cukup mudah untuk mengubah suai ini dan menambah pautan dan teks anda sendiri.

Berikut adalah item menu, yang hanya item senarai yang tidak dikelaskan dengan pautan. Ia cukup mudah untuk menduplikasi item ini kerana ia tidak memerlukan gaya Bootstrap khusus, selain kelas active pada pautan semasa.

Senarai terakhir adalah untuk menu lungsur turun. Ia mengandungi satu senarai item, dengan satu lagi senarai bersarang yang terdapat di pointer hover.  Baris ketiga kod di bawah adalah senarai item yang muncul secara berterusan dalam bar navigasi, manakala senarai bermula pada baris 4 adalah item hover.

Seperti yang anda perhatikan, menambah item senarai kosong dengan kelas divider akan menambah pembahagi ke menu lungsur turun.

Pada masa penggunaan, topbar anda akan kelihatan seperti ini, diposisikan tepat di bahagian atas halaman anda.

Perhatikan bahawa anda ingin mengimbangi bar tinggi 40 piksel di bahagian atas halaman anda, jika tidak, ia akan bertindih dengan elemen pertama pada halaman anda.


Tab dan Pil

Tab dan pil sangat mudah dibuat, kerana ia hanya senarai panjang biasa.Sudah tentu, mereka tidak berfungsi - Bootstrap adalah mengenai gaya.  Cukup buat senarai anda dengan kelas tabs untuk antara muka tab, atau pills kelas untuk pil tab. Seperti dalam anak panah navigasi di bahagian sebelumnya, menambah kelas active ke senarai item akan menyerlahkannya.

Untuk penukar tab, gunakan sesuatu yang serupa dengan ini:

Untuk menggunakan pil sebaliknya, gantikan baris atas untuk yang berikut.


Penomboran

Kami kini beralih ke penomboran, yang tidak berfungsi (seperti tab dan pil), tetapi masih digayakan dalam Bootstrap. Bootstrap mengendalikan butang pagination pada tab yang sama, dalam senarai kali ini dibalut dengan kategori <div> pagination . Setiap item senarai boleh mempunyai nombor yang dipautkan kepadanya (atau ellipsis), tanpa mengira item pertama dan terakhir yang dipelihara untuk sambungan terdahulu / seterusnya. Ia mempunyai kelas <prev> dan next .

Di samping itu, sebarang butang boleh dilumpuhkan dengan menambahkan kelas yang disabled , dan pautan aktif diserlahkan dengan kelas active .Seperti:


Mesej Isyarat dan Ralat

Bar isyarat visual sangat mirip dengan butang, walaupun ia dibuat secara berbeza. Setiap mesej ralat adalah tag <div> dengan kelas alert-message . Terdapat empat jenis mesej yang berbeza, masing-masing dengan kelas yang sesuai yang juga perlu ditambah:

  • warning untuk bar kuning
  • error untuk bar merah
  • success bar hijau
  • info untuk bar biru

Mesej peringatan kemudian ditulis seperti berikut, hanya memilih satu kelas amaran / kesilapan / kejayaan / maklumat.

Hanya untuk maklumat, barisan kedua kod di atas menambahkan "×" di sebelah kanan mesej perubahan, yang boleh dikaitkan dengan tindakan memadam mesej tersebut.

Makluman juga tidak perlu satu urusan talian. Sekiranya mesej anda melebihi baris, cukup tambah kelas block-message kepada kod yang akan digunakan untuk satu baris, sementara masih menggunakan jenis kelas yang berbeza.

Mesej ini juga dapat memegang butang, berguna jika amaran perlu diselesaikan dengan pilihan. Sekiranya anda menyemak semula bahagian pada butang itu, anda akan tahu cara menambahnya. Pastikan anda menggunakan versi kecil, dengan menambahkan kelas small ke butang itu sendiri, dan bungkusnya dengan tag <div> dengan kelas alert-actions .


Modal

Modal boleh berguna untuk memaparkan maklumat dalam senario tertentu, biasanya digunakan untuk memasukkan data seperti maklumat pengguna, atau pos.  Modal Bootstrap agak mudah, dan dibahagikan kepada tiga bahagian; kepala, badan dan kaki. Mula-mula, kita mulakan dengan membuka modal tag <div>, dan meletakkannya dengan beberapa gaya dalam talian yang perlu Bootstrap.

Di dalam tag, kami meletakkan tiga bahagian, yang pertama adalah tajuk.Pengepala mempunyai kelas modal-header dan hanya mengandungi dua baris, tag <h3> untuk tajuk, dan (opsyenal) dipautkan "×" yang boleh disesuaikan untuk menutup popover.

Seterusnya, kami mempunyai kandungan utama. Ia sangat mudah, hanya <div> dengan kelas modal-body , dan kandungan anda di dalamnya. Seperti:

Akhir sekali, kami mempunyai kaki modal (<div> yang lain  , kali ini dengan kelas modal-footer ) yang umumnya terdiri daripada butang untuk mengambil tindakan. Ini dihasilkan dengan cara yang sama seperti semua butang lain yang telah kami buat dengan Bootstrap, jadi tiada penjelasan tambahan diperlukan.

Okay, saya berbohong. Ini bukan langkah terakhir. Kami masih perlu menutup asal <div>.

Letakkan semua bahagian ini bersama-sama secara keseluruhan, dan anda mendapat tingkap modal yang cukup bagus. Malangnya, kerana saya terus mengingatkan anda, Bootstrap benar-benar mengendalikan gaya di sini; Modal tidak akan kelihatan seolah-olah muncul.  Ia akan mengagumkan jika Bootstrap diperluaskan untuk mempunyai beberapa fungsi selain daripada CSS, tetapi untuk sekarang anda perlu menjana atau menggunakan sumber anda sendiri


Pemikiran Akhir

Gambar di atas menunjukkan reka bentuk akhir kami. Ia terdiri daripada semua unsur yang telah kami buat dalam tutorial ini ( terdapat demo berasingan untuk elemen bentuk ), semuanya di dalam skop Bootstrap.  Mudah-mudahan artikel ini berguna untuk anda, terutamanya kerana sukar bagi sesetengah orang untuk menerangkan halaman contoh yang disertakan (yang bertindak sebagai satu-satunya dokumentasi termasuk dalam muat turun).

Saya suka Bootstrap. Sekiranya anda baru dalam pembangunan web, ia menyediakan banyak elemen untuk digunakan, walaupun laman web anda mungkin berakhir dengan banyak unsur-unsur Twitter-ish bersama-sama. Walau bagaimanapun, kesederhanaan dan kemudahan penggunaan terlalu sukar untuk diabaikan jika anda tidak mahu / tidak boleh menulis sendiri. Saya tidak sabar untuk mencuba dan menggunakan beberapa item dalam projek baru.


Sumber Tambahan

Menggunakan Kurang CSS, BluePrint dan WP untuk Wptuts+ Aliran Kerja yang lebih cepat  
Petua Pantas: Jangan Ketik Ungkapan Vendor Sekali lagi Nettuts + 
Bootstrap Dari Twitter Adalah Web Dreamer Web Designer Baru 
Templat Bootstrap di WorldWideThemes.net

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.