Bagaimana untuk Elemen Halaman Web Asas Kod dengan Bootstrap - dummies

< Selain susun atur yang tulen, Bootstrap juga boleh membuat komponen halaman web yang terdapat di hampir setiap laman web. Idea di sini adalah sama seperti ketika bekerja dengan susun atur - bukannya mencipta semula roda setiap kali dengan merancang butang atau bar alat anda sendiri, lebih baik menggunakan kod prebuilt, yang telah diuji di beberapa pelayar dan peranti.

Contoh berikut menunjukkan bagaimana untuk membuat komponen web yang sama dengan cepat.

Butang merancang

Butang adalah elemen asas pada banyak laman web, tetapi biasanya sukar untuk didirikan dan gaya. Seperti yang ditunjukkan di sini, butang boleh mempunyai pelbagai jenis dan saiz.

Atribut

Awalan Kelas

Keterangan	Jenis butang	btn-defaultbtn-primarybtn-successbtn-danger
	Butang biru dengan kesan hover	Butang hijau dengan kesan hover Butang merah dengan kesan hover Butang butang btn-lgbtn-defaultbtn-sm saiz
Butang butang lalai	Saiz butang kecil	Untuk membuat butang, tulis HTML berikut: Mulakan dengan butang

elemen HTML.

1. Dalam pembukaan butang> tag termasuk
2. type = "button" . Sertakan atribut kelas dengan nilai atribut kelas btn , dan tambah awalan kelas tambahan berdasarkan kesan yang anda mahukan.
3. Untuk menambah gaya tambahan, terus tambah nama kelas ke dalam atribut HTML
4. kelas . Kod berikut menggabungkan kedua-dua jenis butang dan saiz butang: Butang utama besar

Butang lalai besar

Butang Default Default

Butang lalai lalai

Butang lalai kecil

Butang dan saiz butang Bootstrap.

Semak jenis butang tambahan, saiz butang, dan pilihan butang lain.

Navigasi dengan bar alat

halaman web dengan berbilang halaman atau pandangan biasanya mempunyai satu atau lebih bar alat untuk membantu pengguna dengan navigasi. Berikut adalah beberapa pilihan bar alat.

Kod Bootstrap untuk Mencipta Bar Alat Navigasi

Atribut

Awalan Kelas

Keterangan

Jenis Toolbar	nav navs	nav-pil
atau bar alat navigasi padat	Ketik butang jenis jatuh turun	menu jatuh turun Butang atau tab sebagai menu lungsur
Ikon menu jatuh turun turun	Drop-down item menu Untuk membuat bar alat navigasi pill atau pepejal, tulis HTML berikut:	Mulailah senarai tidak teratur menggunakan elemen ul .

Dalam pembukaan

1. tag, masukkan class = "nav nav-pil" .
2. Buat butang menggunakan tag
   . Sertakan kelas = "aktif" dalam satu pembukaan
   • tag untuk menamakan tab mana yang terdapat pada bar alat utama harus dipaparkan sebagai visual yang ditonjolkan apabila tetikus bergerak ke atas butang tersebut.
   • Untuk membuat menu lungsur, sarang senarai tidak teratur. Lihat kod di sebelah "Lagi" dengan awalan kelas "jatuh turun" ,
   • "caret"
   • , dan "dropdown-menu" . Anda boleh memaut ke laman web lain dalam menu lungsur anda dengan menggunakan tag . Kod berikut mencipta bar alat menggunakan Bootstrap:

     Garis masa Perihal Foto

Kawan

• Lebih
• Tempat
• Sukan
• Muzik

• Bootstrap toolbar dengan menu drop-down.

  • Kelas
  • dropdown-toggle
  • dan

data-toggel = "dropdown"

atribut dan nilai berfungsi bersama untuk menambah menu drop-down ke elemen seperti pautan. Semak pilihan bar alat tambahan. Menambah ikon Ikon sering digunakan dengan butang untuk membantu menyampaikan beberapa jenis tindakan. Sebagai contoh, program e-mel anda mungkin menggunakan butang dengan ikon tong sampah untuk memadam e-mel. Ikon dengan cepat menyampaikan tindakan yang dicadangkan kepada pengguna tanpa banyak penjelasan. Ikon ini dipanggil glyph,

dan Glyph Ikon menyediakan glyphs yang digunakan dalam Bootstrap.

Bootstrap menyokong lebih daripada 200 glyphs, yang boleh anda tambahkan ke butang atau bar alat menggunakan tag

. Kod contoh berikut mencipta tiga butang dengan bintang, klip kertas, dan sampah boleh menjadi glyph. Bintang Lampirkan

Sampah Butang Bootstrap dengan ikon.

Semak di sini untuk nama semua glyphs Bootstrap.