Instalasi bootstrap sangat mudah. Artikel ini adalah ringkasan dari studi saya, yang nyaman untuk pertanyaan dan pembelajaran di masa depan. Pada saat yang sama, saya berharap dapat membantu Anda.
1. Unduh Bootstrap
Anda dapat mengunduh versi terbaru Bootstrap dari http://getboottrap.com/. Saat Anda mengklik tautan ini, Anda akan melihat halaman web seperti ini:
Anda akan melihat dua tombol:
Unduh Bootstrap: Unduh Bootstrap. Klik tombol ini dan Anda dapat mengunduh Versi Terkompresi CSS Bootstrap, JavaScript, dan Font. Dokumen dan file kode sumber asli tidak disertakan.
Unduh Sumber: Unduh kode sumber. Klik tombol ini dan Anda bisa mendapatkan bootstrap terbaru dan kode sumber JavaScript langsung dari.
Jika Anda menggunakan kode sumber yang tidak dikompilasi, Anda perlu mengkompilasi file yang lebih sedikit untuk menghasilkan file CSS yang dapat digunakan kembali. Untuk menyusun lebih sedikit file, bootstrap hanya mendukung Recess, yang merupakan css css berbasis Twitter Less.js.
Untuk pemahaman yang lebih baik dan penggunaan yang lebih mudah, kami akan menggunakan versi bootstrap yang sudah dikompilasi dalam tutorial ini.
Karena file dikompilasi dan dikompresi, Anda tidak perlu memasukkan file independen ini setiap kali dalam pengembangan fungsional independen.
Catatan penelitian ini adalah versi terbaru (Bootstrap 3).
2. Struktur File
1. Bootstrap yang telah dikompilasi
Saat Anda mengunduh versi Bootstrap dan unzip file zip yang dikompilasi, Anda akan melihat file/struktur direktori berikut:
Seperti yang ditunjukkan pada gambar di atas, Anda dapat melihat CSS dan JS yang dikompilasi (Bootstrap.*), Serta CSS dan JS terkompresi yang dikompilasi (Bootstrap.min.*). Ini juga termasuk font glifikon, tema bootstrap opsional.
2. Kode Sumber Bootstrap
Jika Anda mengunduh kode sumber bootstrap, struktur file akan terlihat seperti ini:
File di bawah kurang/, js/ dan font/ adalah kode sumber CSS bootstrap, JS dan font ikon, masing -masing.
Dist/ folder berisi file dan folder yang tercantum di bagian unduhan yang dikompilasi di atas.
Docs-asset/, contoh/, dan semua *.html file adalah dokumen bootstrap.
3. Template html
Template HTML dasar menggunakan bootstrap terlihat seperti ini:
<! Doctype html> <html> <head> <title> template bootstrap </iteme> <meta name = "viewport" content = "width = device-width, skala awal = 1.0"> <!-memperkenalkan bootstrap-> <tautan href = "http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel = "stylesheet"> <!-html shim dan response.js digunakan untuk memungkinkan IE8 untuk mendukung elemen html5 dan media ife, File tidak dapat memiliki efek-> <!-[jika lt yaitu 9]> <script src = "https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"> </script> <skrip src = "https://oss.maxcdn.com/libs/respress.js/1.3.0/respress.min.js"> </scrips> <! [Endif]-> </head> <hod> <h1> halo, world! </h1> <!-JQUERY (JABERY SCRIPTRIPS TOKTRACTRCRIPS TOKUR SCRIPTRIPTS TOKURCRIKS TOPLECRIPTER (JABER DUNIA) src = "https://code.jquery.com/jquery.js"> </script> <!-Termasuk semua plugin yang dikompilasi-> <script src = "js/bootstrap.min.js"> </script> </body> </html>
Di sini Anda dapat melihat jquery.js, bootstrap.min.js dan bootstrap.min.css file yang digunakan untuk membuat file html reguler templat yang menggunakan bootstrap.
Iv. Contoh
Sekarang mari kita coba output "Halo, dunia!" Menggunakan Bootstrap:
<! Doctype html> <html> <head> <title> Coba bootstrap instance online </title> <link href = "http://apps.bdimg.com/libs/boottrap/3.3.0/css/boottrap.min.css" rel = "stylesheet"> src = "http://apps.bdimg.com/libs/jQuery/2.0.0/jquery.min.js"> </script> <skrip src = "http://apps.bdimg.com/libs/bootstrap/3.3.0/js/boottrap.min.min, Dunia! </h1> </body> </html>
<!-File CSS inti bootstrap baru-> <tautan href = "http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.min.css" Rel = "Stylesheet"> <! src = "http://apps.bdimg.com/libs/boottrap/3.3.0/css/bootstrap-theme.min.css"> </script> <!-file jQuery. Pastikan untuk memperkenalkan-> <skrip src = "http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"> <!-File JavaScript inti bootstrap terbaru-> <Script "> <! src = "http://apps.bdimg.com/libs/boottrap/3.3.0/js/boottrap.min.js"> </script>
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
Di atas adalah semua konten artikel ini. Saya berharap ini akan membantu untuk pembelajaran semua orang dan untuk membangun lingkungan instalasi bootstrap dengan benar.