Bab 1: Pengenalan pertama kepada kemahiran Bootstrap_javascript

Mata pembelajaran:

1. Gambaran Keseluruhan Bootstrap

2.Ciri Bootstrap

3.Struktur Bootstrap

4. Cipta halaman pertama

5. Pelbagai persediaan untuk belajar

Dalam pelajaran ini, kami terutamanya memahami sejarah, ciri, kegunaan Boostrap dan sebab kami memilih Boostrap untuk membangunkan projek web kami.

1. Gambaran Keseluruhan Bootstrap

Bootstrap ialah rangka kerja sumber terbuka berdasarkan HTML, CSS dan JavaScript yang dibangunkan oleh dua jurutera teknikal daripada Twitter (Weibo terbesar di dunia). Kod rangka kerja adalah ringkas dan cantik dari segi visual, dan boleh digunakan untuk membina keperluan halaman web dengan cepat dan mudah berdasarkan PC dan peranti mudah alih.

Pada Jun 2010, jurutera dalam Twitter berusaha menyelesaikan masalah kerjasama dan penyatuan dalam tugas pembangunan bahagian hadapan. Selepas melalui pelbagai pilihan, Bootstrap akhirnya dimuktamadkan dan dikeluarkan pada Ogos 2011. Selepas jangka masa yang panjang untuk menaik taraf berulang, ia telah dibangunkan daripada projek didorong CSS awal menjadi rangka kerja sumber terbuka bahagian hadapan web pelbagai fungsi dengan banyak pemalam dan ikon JavaScript terbina dalam.

Bahagian terpenting Bootstrap ialah reka letak responsifnya, yang boleh serasi dengan akses halaman pada PC, PAD dan telefon mudah alih.

Muat turun dan tunjuk cara Bootstrap:

Tapak web rasmi terjemahan dokumen domestik: http://www.bootcss.com

Laman web rasmi Kelab Web Laicheng: http://www.ycku.com

2. Ciri Bootstrap

Bootstrap sangat popular kerana fungsi dan cirinya yang sangat berguna. Ciri fungsi teras utama adalah seperti berikut:

(1). Peranti silang, penyemak imbas silang

Serasi dengan semua penyemak imbas moden, termasuk IE7 dan 8 yang lebih dikritik. Sudah tentu, kursus ini tidak lagi menganggap pelayar di bawah IE9.

(2). Reka letak responsif

Bukan sahaja ia boleh menyokong paparan pelbagai resolusi pada bahagian PC, tetapi ia juga menyokong paparan pensuisan responsif pada PAD mudah alih, telefon mudah alih dan skrin lain.

(3) Komponen komprehensif disediakan

Bootstrap menyediakan komponen yang sangat praktikal, termasuk: navigasi, label, bar alat, butang dan satu siri komponen, yang mudah untuk dipanggil oleh pembangun.

(4) pemalam jQuery terbina dalam

Bootstrap menyediakan banyak pemalam jquery praktikal, yang memudahkan pembangun melaksanakan pelbagai kesan khas biasa di Web.

(5). Sokong HTML5, CSS3

Teg semantik HTML5 dan atribut CSS3 disokong dengan baik.

(6). Sokong gaya KURANG dinamik

LESS menggunakan pengekodan bercampur dengan pembolehubah, sarang dan operasi untuk menulis CSS yang lebih pantas dan lebih fleksibel. Ia boleh dibangunkan dengan baik dengan Bootstrap.

3. Struktur Bootstrap

Pertama sekali, jika anda ingin memahami struktur dokumen Boostrap, anda perlu memuat turunnya secara tempatan dari laman web rasmi. Alamat muat turun Bootstrap adalah seperti berikut:

Alamat muat turun Bootstrap: http://v3.bootcss.com/ (pilih persekitaran pengeluaran, v3.3.4)

Selepas penyahmampatan, direktori akan mempunyai struktur berikut:

bootstrap/
├── css/
│├── bootstrap.css
│├── bootstrap.css.map
│├── bootstrap.min.css
│├── bootstrap-theme.css
│├── bootstrap-theme.css.map
│└── bootstrap-theme.min.css
├── js/
│├── bootstrap.js
│└── bootstrap.min.js
└── fon/
├── glyphicons-halflings-regular.eot
├── glyphicons-halflings-regular.svg
├── glyphicons-halflings-regular.ttf
├── glyphicons-halflings-regular.woff
└── glyphicons-halflings-regular.woff2

terutamanya dibahagikan kepada tiga direktori teras: css (gaya), js (skrip) dan fon (font).

1.css Terdapat empat fail dengan akhiran css dalam direktori Yang mengandungi perkataan min adalah versi mampat Ini biasanya digunakan; kod; dan fail dengan akhiran peta ialah Fail ialah jadual pemetaan kod sumber css, digunakan dalam beberapa alatan penyemak imbas tertentu.

Direktori 2.js mengandungi dua fail, iaitu fail js yang tidak dimampatkan dan dimampatkan.

Direktori 3.fonts mengandungi fail fon dengan imbuhan yang berbeza.

4. Buat halaman pertama anda

Kami mencipta halaman HTML5, mengimport fail teras Bootstrap, dan kemudian menguji sama ada ia dipaparkan seperti biasa.

//第一个 Bootstrap
<!DOCTYPE html>
<html lang="zh-cn">
<head>
　　<meta charset="UTF-8">
　　<title>Bootstrap 介绍</title>
　　<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
　　<button class="btn btn-info">Bootstrap</button>
　　<script src="js/jquery.min.js"></script>
　　<script src="js/bootstrap.min.js"></script>
</body>
</html> 

5. Verschiedene Vorbereitungen für das Studium

1. Entwicklungstools: Wir verwenden Sublime Text3 als Entwicklungstool für Bootstrap und haben das Emmet-Codegenerierungs-Plug-in installiert

2. Testtools, zusätzlich zu herkömmlichen modernen Browsern, das zweite ist ein mobiles Testtool. Wir verwenden Opera Mobile Emulator und das mobile Webtesttool.

3. Die erforderliche Grundlage ist zumindest die Grundlage des HTML5-Kurses. Bootstrap verfügt über viele integrierte jQuery-Plug-ins, obwohl es viel einfacher zu verwenden ist als jQuery oder JS selbst, wenn Sie über die Grundlagen verfügen jQuery- und JS-Kurse, dann werden das Lernen und das Verständnis tiefer sein;

4. Kursauflösung: Für Grundkurse verwenden wir 1024 x 768 zur Aufzeichnung, aber einige spezielle Teile, wie z. B. Responsive- und Projektkurse, erfordern eine hochauflösende Aufzeichnung und werden mit 1440 x 900 aufgezeichnet.

Das Obige ist das relevante Wissen über das Bootstrap-Framework, das Ihnen der Herausgeber vorgestellt hat. Ich hoffe, es wird Ihnen hilfreich sein!