Dengan meningkatnya jumlah pengguna seluler, arsitektur sistem web tradisional tidak kompatibel dengan penggunaan normal banyak terminal seluler. Di tempat kerja, saya juga akan menemukan bahwa banyak pelanggan sekarang memiliki kebutuhan untuk menggunakan sistem manajemen pada terminal seluler seperti ponsel dan tablet. Jika halaman web respons yang sesuai dikembangkan secara terpisah untuk setiap terminal, ini pasti akan meningkatkan biaya proyek dan tekanan pada pengembang. Pada saat ini, perlu untuk memahami tata letak responsif, yang dilahirkan untuk menyelesaikan masalah multi-terminal. Kali ini kami memperkenalkan bootstrap ringan, open source, dan gratis.
Membangun lingkungan pengembangan
Pertama, unduh paket kode sumber boostrap dari situs web resmi: http://www.bootcss.com/. Untuk mengembangkan proyek sederhana, Anda tidak perlu menambahkan semua CSS, JS, font, dll. Dalam kode sumber. Menurut kebutuhan proyek Anda, Anda dapat menyesuaikan lingkungan yang Anda butuhkan.
File yang diperlukan adalah sebagai berikut: jquery.min.js, bootstrap.min.js, bootstrap.css. Jika Anda perlu menggunakan beberapa gaya font, Anda juga perlu menambahkan file terkait font, seperti yang ditunjukkan pada gambar di bawah ini:
[Catatan] Saat memuat JS, Anda harus terlebih dahulu memuat jquery.min.js, karena di bootstrap.min.js, Anda akan menggunakan metode yang berhubungan dengan jQuery, mis. BooStrap.min.js, tergantung pada jQuery.min.js.
Tes Bootsrap Environment
Tulis indeks file uji.html. Isi file uji adalah sebagai berikut:
<! Doctype html> <html> <head> <title> uji lingkungan boostrap </title> <link rel = "stylesheet" type = "text/css" href = "./ css/bootstrap.css"> <script = "text/javascript" src = ". type = "text/javascript" src = "./ js/bootstrap.min.js"> </script> </head> <body> </body> </html>
Di atas adalah lingkungan pengembangan Bootsrap. Ini sangat sederhana!
Apa yang harus Anda ketahui saat menggunakan Boostrap adalah sistem raster Boostrap. Justru karena sistem grid ini yang membuatnya lebih kompatibel dengan perangkat terminal dengan resolusi yang berbeda.
Situs web resmi sistem grid spesifik memiliki pengantar yang jelas: http://v3.bootcss.com/css/. Gambar situs web resmi berikut ini terletak:
Saat menggunakan Boostrap, kami terutama menggunakan beberapa gaya yang telah didefinisikan di dalamnya. Ini bermanfaat untuk program yang tidak memiliki kemampuan untuk seni, dengan cepat membangun halaman yang cukup bagus.
Ketika benar -benar menggunakan bootstrap, kami sering memeriksa beberapa dokumen bantuan di situs web resmi: http://v3.bootcss.com/css/#tables.
Saya pribadi menyarankan agar Anda secara langsung menyalin kode yang relevan ke halaman web Anda sendiri dalam contoh situs web resmi, dan kemudian membuat modifikasi yang relevan berdasarkan ini. Dengan cara ini, kecepatan pengembangan akan lebih cepat dan keakuratannya akan lebih tinggi.
Demonstrasi beberapa gaya boostrap --- gaya meja.
<! Doctype html> <html> <head> <title> uji lingkungan boostrap </iteme> <tautan rel = "stylesheet" type = "text/css" href = "./ css/bootstrap.css"> <script type = "text/javascript" src = ". type="text/javascript" src="./js/bootstrap.min.js"></script><body> <table> <tr> <td> Test form</td> <td> Test form</td> <td> Test form</td> <td> Test form</td> <td> Test form</td> <td> Test form</td> <td> Test Formulir </td> <td> tes </td> <td> tes </td> </tr> <tr> <td> tes </td> <td> tes </td> <td> tes </td> </test> </test> </td </td> <TD> <TD> <TD> <TD> <TD> <TD> <TD> <TD> <TD> <TD> <TD> <TD> <TD> <TD> <TD> <TD> <TD> <TD> <TD> <TD> <TD> <TD> <TD> <TD> <TD> <TD> <TD> <TD> <TD> <TD> <TD> <TD> <tr> <td>Test</td> <td>Test</td> <td>Test</td> <td>Test</td> <td>Test</td> <td>Test</td> </tr> <tr> <td>Test</td> <td>Test</td> <td>Test</td> <td>Test</td> <td> tes </td> <td> tes </td> <td> tes </td> <td> tes </td> <td> tes </td> <td> tes </td> <td> </td> <td> </td> </td> </Table> </td> <td>
Hasil tampilan halaman web adalah sebagai berikut:
Atribut di kelas diperkenalkan:
1) Tabel ditambah ini sudah memiliki gaya tabel Bootsrap
2) Table-hover menunjukkan bahwa latar belakang baris mouse tabel tetap cerah
3) Tabel berbatasan dengan tabel muncul di perbatasan
4) Garis-garis meja bergaris-garis
[Catatan] Ketika beberapa atribut ditambahkan bersama -sama, ada spasi antara setiap atribut.
2. Tombol
<!-Button-> <a href = "#" role = "Tombol"> tautan </a> <tombol type = "kirim"> Tombol </button> <input type = "tombol" value = "input"> <input type = "kirim" value = out-out (kirimkan </!-Tombol standar-> <tombol type = ""> (gaya default) </kirimkan </Tombol Extra </Tombol Extra </Button </Tombol <Tombol Tombol = "Tombol"> (gaya default) </default </TOUTONS </Tombol Standard> <Standard TYPET = "Tombol"> (gaya default) </outs default " -> <typute type = "Tombol"> (preferensi) primer </button> <!-Menunjukkan tindakan yang berhasil atau positif-> <tombol type = "tombol"> (sukses) Sukses </button> <!-tombol kontekstual untuk pesan peringatan informasi-> <type type = "Tombol"> </Tombol Umum) </duton> <!-Menunjukkan peringatan harus diambil dengan tindakan ini-> </Tombol Umum) </tombol "<! atau tindakan negatif yang berpotensi-> <tombol type = "tombol"> (bahaya) bahaya </button> <!-Deemphasize tombol dengan membuatnya terlihat seperti tautan sambil mempertahankan perilaku tombol-> <typute type = "Tombol"> (tautan) tautan </button>
Hasil halaman web adalah sebagai berikut:
Untuk banyak gaya dan komponen lainnya, disarankan untuk merujuk pada dokumentasi bantuan resmi.
Meringkaskan
Artikel ini adalah panduan, yang secara singkat memperkenalkan untuk apa boostrap dan bagaimana menggunakannya. Tidak ada daftar terperinci dari semua komponen dan gaya, tapi ... baca!
Ini adalah artikel yang sangat ajaib, Anda harus mengklik dan melihat: tutorial pembelajaran bootstrap layak dibagikan dan dikumpulkan
Jika Anda masih ingin belajar secara mendalam, Anda dapat mengklik di sini untuk mempelajari dan melampirkan dua topik menarik kepada Anda: Tutorial Pembelajaran Bootstrap Bootstrap Tutorial Praktis
Saya berharap bahwa mereka yang tertarik pada bootstrap dapat menguji efek dari masing -masing gaya secara manual dan bagaimana menggunakan setiap komponen sendiri, dan benar -benar merasakan kesenangan yang dibawa oleh Bootstrap.