Twitter Bootstrap: Rangka Kerja CSS dan Komponen JavaScript yang mudah dan kuat Penjelasan terperinci

Twitter Bootstrap adalah salah satu rangka kerja CSS yang paling mudah dan mudah digunakan di Internet. Tetapi bukan hanya untuk pemula, dan set komponen JavaScript yang kuat juga popular dengan pereka, mudah digunakan dan integrasi cepat ke dalam projek. Tutorial ini akan menyelam ke dalam beberapa komponen Twitter Bootstrap JavaScript terbaik dan cara menggunakannya.

Mata utama:

• Twitter Bootstrap 3 adalah rangka kerja CSS yang kuat dengan komponen JavaScript yang komprehensif, dan dengan mudah boleh membina templat walaupun anda tidak memahami CSS.
• Komponen JavaScript Bootstrap 3 ditulis berdasarkan jQuery, termasuk modal, dropdown, scrollspy, tab, tooltip, popover dan amaran. Setiap komponen mempunyai ciri -ciri khusus tersendiri dan boleh disesuaikan untuk memenuhi keperluan projek yang berbeza.
• Menggunakan komponen JavaScript ini memerlukan memuat turun bootstrap 3 dari getbootstrap.com, serta penyemak imbas web (disyorkan Google Chrome) dan editor teks (seperti teks Sublime). Untuk memastikan bahawa komponen JavaScript berfungsi dengan betul, bootstrap CSS mesti dimasukkan.
• komponen JavaScript Bootstrap 3 adalah salah satu sebab penting mengapa ia begitu popular. Mereka menyediakan penyelesaian yang mudah untuk pemaju yang tidak memahami CSS dan pereka yang ingin meningkatkan kecekapan reka bentuk.

Dapatkan digunakan:

Pertama, anda perlu memuat turun bootstrap 3 dari getbootstrap.com, sediakan pelayar web (sebaik -baiknya Google Chrome) dan editor teks (saya menggunakan teks luhur). Harus diingat bahawa komponen Javascript Bootstrap ditulis berdasarkan jQuery, jadi jQuery diperlukan untuk menggunakannya. Selepas memuat turun Bootstrap 3, salin kandungan folder dist ke ruang kerja baru. Anda mungkin tertanya -tanya, mengapa anda masih memerlukan folder CSS dan fon untuk belajar JavaScript? Banyak komponen bootstrap JavaScript bergantung kepada CSS untuk berfungsi dengan baik, jadi mereka tidak akan berfungsi dengan betul tanpa CSS bootstrap termasuk. Bootstrap 3 juga membolehkan kami menggunakan setiap modul secara berasingan tanpa memuat turun semua komponen JavaScript. Tutorial ini berakhir dengan cara menggunakan modul sahaja, bukannya termasuk semua komponen. Tutorial ini akan menerangkan komponen JavaScript Bootstrap utama berikut:

1. modal (kotak modal)
2. dropdown (menu drop-down)
3. scrollspy (tatal mendengar)
4. tab (tab)
5. tooltip (tooltip)
6. Popover (popup)
7. amaran (kotak amaran)

Kami akan menerangkan setiap komponen satu demi satu dan melakukan beberapa eksperimen untuk mendapatkan komponen bootstrap 3 JavaScript tersuai. Klik di sini untuk melihat halaman Demo.

modal (kotak modal)

Kotak modal adalah serupa dengan kotak amaran tradisional, tetapi lebih kuat, termasuk tajuk modal, badan modal, footer modal, butang dekat, dan simbol dekat di sudut kanan atas. Ia boleh digunakan dalam banyak aplikasi untuk tingkap pengesahan, seperti sebelum membuat pembayaran atau memadam akaun, dll.

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  啟動演示模態(tài)框
</button>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h4 class="modal-title" id="myModalLabel">模態(tài)標題</h4>
      </div>
      <div class="modal-body">
        <h1>Hello World!</h1>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">關閉</button>
        <button type="button" class="btn btn-primary">保存更改</button>
      </div>
    </div>
  </div>
</div>

Bootstrap Modal mengandungi tiga bahagian: Tajuk, Badan, dan Footer. Anda boleh memutuskan apa yang perlu ditempatkan di setiap bahagian.

(Komponen berikutnya Dropdown, Scrollspy, Tab, Tooltip, Popover, Alert untuk Penjelasan dan Contoh Gambar, Sila tambahkannya mengikut teks asal dan simpan format gambar tidak berubah)

Kesimpulan

Dengan tutorial ini, anda harus lebih memahami bagaimana Twitter Bootstrap dapat membantu kami menulis komponen JavaScript tanpa menulis sebarang kod jQuery. Komponen JavaScript ini adalah salah satu sebab utama mengapa kerangka Bootstrap Twitter begitu popular. Ia bukan sahaja sesuai untuk pemaju yang tidak memahami CSS, tetapi juga membantu pereka meningkatkan kecekapan reka bentuk. Dalam jawatan seterusnya, saya akan menerangkan cara membuat gelangsar menggunakan komponen karusel Twitter Bootstrap 3. Sekiranya anda mempunyai sebarang pertanyaan, sila bebas meninggalkan mesej di bahagian komen. Jika anda baru ke Twitter Bootstrap, sila lawati halaman pengarang saya di SitePoint dan baca tutorial Twitter Bootstrap sebelumnya saya.

(Bahagian FAQ yang disediakan dalam teks asal boleh dipilih secara pseudo-asal seperti yang diperlukan, atau disimpan secara langsung.)

Atas ialah kandungan terperinci Twitter Bootstrap 3 - Komponen JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!