Poin -poin penting untuk belajar:
1.BootStrap Tinjauan
2.BootStrap Fitur
3.Bootsstrap Struktur
4. Buat halaman pertama
5. Berbagai persiapan untuk belajar
Dalam pelajaran ini, kami terutama belajar tentang sejarah Boostrap, fitur, penggunaan, dan mengapa Boostrap dipilih untuk mengembangkan proyek web kami.
satu. Tinjauan Bootstrap
Bootstrap adalah kerangka kerja open source berdasarkan HTML, CSS, dan JavaScript yang dikembangkan oleh dua insinyur teknis dari Twitter (Weibo terbesar di dunia). Kode kerangka kerja sederhana dan indah secara visual, dan dapat digunakan untuk dengan cepat dan hanya membangun persyaratan halaman web berdasarkan PC dan perangkat seluler.
Pada Juni 2010, insinyur di dalam Twitter memecahkan masalah kolaborasi dan penyatuan dalam tugas pengembangan front-end. Setelah berbagai solusi, Bootstrap akhirnya dikonfirmasi dan dirilis pada Agustus 2011. Setelah periode iterasi dan peningkatan yang lama, proyek asli yang digerakkan oleh CSS telah berkembang menjadi kerangka kerja open source dengan front-end web multi-fungsional dengan banyak plug-in dan ikon JavaScript yang dibangun.
Bagian terpenting dari Bootstrap adalah tata letaknya yang responsif, yang dapat kompatibel dengan akses halaman pada PC, PAD dan ponsel.
Unduh dan demonstrasi bootstrap:
Situs resmi terjemahan dokumen domestik: http://www.bootcss.com
Situs resmi Piaocheng Web Club: http://www.ycku.com
dua. Fitur Bootstrap
Bootstrap sangat populer berkat fitur dan fitur yang sangat praktis. Fungsi inti utama adalah sebagai berikut:
(1). Cross-Device, Cross-Browser
Ini kompatibel dengan semua browser modern, termasuk IE7 dan 8 yang lebih dikritik, tentu saja, kursus ini tidak lagi menganggap browser di bawah IE9.
(2). Tata letak responsif
Ini tidak hanya dapat mendukung tampilan di berbagai resolusi di sisi PC, tetapi juga mendukung tampilan switching responsif dari pad seluler, ponsel, dan layar lainnya.
(3). Komponen komprehensif disediakan
Bootstrap menyediakan komponen yang sangat praktis, termasuk: navigasi, label, toolbar, tombol, dan komponen lainnya, yang nyaman untuk dihubungi pengembang.
(4). Plug-in jQuery bawaan
Bootstrap menyediakan banyak plug-in jQuery praktis, yang memfasilitasi pengembang untuk menerapkan berbagai efek khusus umum di web.
(5). Dukung HTML5 dan CSS3
Tag semantik HTML5 dan properti CSS3 didukung dengan baik.
(6). Mendukung gaya yang kurang dinamis
Kurang menggunakan variabel, bersarang, dan operasi untuk menulis CSS yang lebih cepat dan lebih fleksibel. Ini bekerja dengan baik dengan bootstrap.
tiga. Struktur Bootstrap
Pertama -tama, jika Anda ingin memahami struktur dokumen Boostrap, Anda perlu mengunduhnya secara lokal di situs web resmi. Alamat unduhan bootstrap adalah sebagai berikut:
Alamat Unduh Bootstrap: http://v3.bootcss.com/ (Pilih Lingkungan Produksi, v3.3.4)
Setelah dekompresi, direktori menyajikan struktur seperti ini:
Bootstrap/
├── CSS/
│├── bootstrap.css
│├── bootstrap.css.map
│├── bootstrap.min.css
│├── Bootstrap-Theme.css
│├── Bootstrap-Heme.css.map
│└── bootstrap-teme.min.css
├── JS/
│├─ "bootstrap.js
│└── bootstrap.min.js
└── font/
├── glyphicons-halflings-regular.eot
├── glyphicons-halflings-regular.svg
├── glyphicons-halflings-regular.ttf
├── Glyphicons-Halflings-Regular.woff
└── Glyphics-Halflings-Regular.woff2
Ini terutama dibagi menjadi tiga direktori inti: CSS (gaya), JS (skrip), dan font (font).
1. Ada empat file dengan sufiks CSS di direktori CSS. Yang berisi kata min adalah versi terkompresi, yang umumnya digunakan; Yang tidak mengandung file tanpa kompresi, dan Anda dapat belajar memahami kode CSS; Sementara file dengan akhiran peta adalah tabel pemetaan kode sumber CSS, yang digunakan dalam beberapa alat browser tertentu.
2.JS Directory berisi dua file, yang tidak terkompresi dan terkompresi file JS.
3. Direktori Font berisi file font dengan sufiks yang berbeda.
Empat. Buat halaman pertama
Kami membuat halaman HTML5, memperkenalkan file inti bootstrap, dan kemudian menguji apakah itu ditampilkan secara normal.
// bootstrap pertama <! Doctype html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <itement> PENDAHULUAN BOOTStrap </title> <tautan rel = "stylesheet" href = "CSS/bootstrap src = "js/jQuery.min.js"> </script> <script src = "js/bootstrap.min.js"> </script> </body> </html>
lima. Berbagai persiapan untuk belajar
1. Alat Pengembangan. Kami menggunakan Sublime Text3 sebagai alat pengembangan untuk bootstrap dan menginstal plug-in generasi kode Emmet;
2. Alat uji, selain browser modern konvensional, kedua sebagai alat pengujian seluler. Kami menggunakan Emulator Seluler Opera dan alat pengujian web seluler Chrome.
3. Fondasi yang diperlukan setidaknya merupakan fondasi kursus HTML5 Musim 1. Bootstrap memiliki banyak plug-in jQuery.
4. Resolusi Kursus: Kursus Dasar, kami menggunakan 1024 x 768 untuk merekam, tetapi beberapa bagian khusus, seperti kursus responsif dan proyek, memerlukan perekaman resolusi tinggi, dan akan menggunakan 1440 x 900 untuk merekam.
Di atas adalah pengetahuan yang relevan dari kerangka bootstrap yang diperkenalkan kepada Anda oleh editor. Saya harap ini akan membantu Anda!