Bootstrap響應(yīng)式Web開發(fā)（第2版）第1章 初識(shí)Bootstrap

第1章初識(shí)Bootstrap《Bootstrap響應(yīng)式Web開發(fā)（第2版）》學(xué)習(xí)目標(biāo)/Target了解Bootstrap的概念，能夠說出什么是Bootstrap熟悉Bootstrap的特點(diǎn)，能夠歸納Bootstrap的特點(diǎn)熟悉Bootstrap的組成，能夠歸納Bootstrap的組成部分了解PC端瀏覽器，能夠列舉常見的PC端瀏覽器了解移動(dòng)端瀏覽器，能夠列舉常見的移動(dòng)端瀏覽器學(xué)習(xí)目標(biāo)/Target掌握VisualStudioCode編輯器的下載和安裝方法，能夠獨(dú)立完成VisualStudio

Code編輯器的下載和安裝掌握中文擴(kuò)展包的安裝，能夠在VisualStudioCode編輯器中安裝中文擴(kuò)展包

掌握VisualStudioCode編輯器的使用方法，能夠在項(xiàng)目中創(chuàng)建HTML5文檔了解移動(dòng)Web開發(fā)的主流方案，能夠說出兩種主流的移動(dòng)Web開發(fā)方案章節(jié)概述/Summary近年來，隨著移動(dòng)互聯(lián)網(wǎng)的持續(xù)發(fā)展，不斷涌現(xiàn)出各種移動(dòng)設(shè)備，這些設(shè)備的屏幕尺寸多種多樣，而網(wǎng)頁需要根據(jù)用戶使用的具體設(shè)備進(jìn)行適配，以確保用戶具有最佳的瀏覽體驗(yàn)。為了解決網(wǎng)頁在不同設(shè)備中的適配問題，Bootstrap應(yīng)運(yùn)而生。為了使讀者對Bootstrap有一個(gè)初步的認(rèn)識(shí)，本章將對Bootstrap、瀏覽器、Visual

Studio

Code編輯器、移動(dòng)Web開發(fā)的主流方案等內(nèi)容進(jìn)行詳細(xì)講解。目錄/Contents1.11.2Bootstrap瀏覽器1.31.4VisualStudioCode編輯器移動(dòng)Web開發(fā)的主流方案Bootstrap1.11.1.1Bootstrap概述

先定一個(gè)小目標(biāo)！了解Bootstrap的概念，能夠說出什么是Bootstrap1.1.1Bootstrap概述什么是Bootstrap？1.1.1Bootstrap概述Bootstrap是一款開源的前端UI框架，用于構(gòu)建響應(yīng)式、移動(dòng)設(shè)備優(yōu)先的項(xiàng)目，因其具有學(xué)習(xí)成本低、上手容易等優(yōu)勢，深受開發(fā)者的歡迎。Bootstrap提供一套CSS樣式和JavaScript插件，可以幫助開發(fā)者快速搭建具有統(tǒng)一外觀的響應(yīng)式頁面。1.1.1Bootstrap概述1.x版本初始版本，具有基本的CSS樣式，為開發(fā)者提供一些常用的組件和布局工具。2.x版本將響應(yīng)式功能添加到整個(gè)框架中。3.x版本重寫了整個(gè)框架，并將“移動(dòng)設(shè)備優(yōu)先”這一理念深刻地融入整個(gè)框架中。5.x版本通過盡量少的代碼來改進(jìn)4.x版本。此外，5.x版本放棄了對老舊瀏覽器的支持，僅支持較新的瀏覽器，而且不再依賴jQuery。4.x版本再次重寫了框架，其有兩個(gè)架構(gòu)方面的關(guān)鍵改變，一個(gè)是使用Sass編寫代碼，另一個(gè)是采用彈性盒布局。Bootstrap于2011年8月在GitHub上首次發(fā)布，一經(jīng)發(fā)布就頗受歡迎。Bootstrap的發(fā)展經(jīng)歷了如下5個(gè)大版本。1.1.2Bootstrap的特點(diǎn)

先定一個(gè)小目標(biāo)！熟悉Bootstrap的特點(diǎn)，能夠歸納Bootstrap的特點(diǎn)1.1.2Bootstrap的特點(diǎn)移動(dòng)設(shè)備優(yōu)先Bootstrap的默認(rèn)樣式針對移動(dòng)設(shè)備進(jìn)行了優(yōu)化。Bootstrap的特點(diǎn)瀏覽器支持Bootstrap支持主流的瀏覽器，包括PC端瀏覽器和移動(dòng)端瀏覽器。學(xué)習(xí)成本低、容易上手只需具備HTML、CSS和JavaScript的基礎(chǔ)知識(shí)，即可學(xué)習(xí)Bootstrap。響應(yīng)式設(shè)計(jì)Bootstrap支持響應(yīng)式設(shè)計(jì)?？焖匍_發(fā)Bootstrap提供了大量的樣式和組件，可以快速構(gòu)建出美觀的頁面。方便定制Bootstrap具有高定制性，開發(fā)者可以根據(jù)項(xiàng)目需求和設(shè)計(jì)要求，選擇需要的組件和樣式進(jìn)行自定義。1.1.3Bootstrap的組成

先定一個(gè)小目標(biāo)！熟悉Bootstrap的組成，能夠歸納Bootstrap的組成部分1.1.3Bootstrap的組成Bootstrap提供了包含柵格系統(tǒng)、布局容器等基礎(chǔ)元素的樣式。除此之外，Bootstrap還提供了大量的CSS樣式類。CSS樣式提供了一系列常用的布局組件，例如按鈕、下拉菜單、分頁導(dǎo)航、警告框等組件。布局組件Bootstrap提供了一系列能實(shí)現(xiàn)交互功能的JavaScript插件。JavaScript插件Bootstrap擁有開源的圖標(biāo)庫。圖標(biāo)文件使用SVG格式，幾乎可在任何屏幕尺寸下保持清晰度和質(zhì)量。圖標(biāo)庫Bootstrap的組成瀏覽器1.21.2.1PC端瀏覽器

先定一個(gè)小目標(biāo)！了解PC端瀏覽器，能夠列舉常見的PC端瀏覽器1.2.1PC端瀏覽器什么是PC端瀏覽器？1.2.1PC端瀏覽器PC端瀏覽器是指運(yùn)行在個(gè)人計(jì)算機(jī)（PersonalComputer，簡稱PC）上的瀏覽器，是計(jì)算機(jī)用戶通過互聯(lián)網(wǎng)訪問Web頁面、在線應(yīng)用程序和其他資源的主要方式。1.2.1PC端瀏覽器常見的PC端瀏覽器：谷歌（Google）公司的Chrome瀏覽器。微軟（Microsoft）公司的InternetExplorer（IE）和Edge瀏覽器。謀智（Mozilla）公司的Firefox瀏覽器。蘋果（Apple）公司的Safari瀏覽器。1.2.1PC端瀏覽器不同的PC端瀏覽器具有不同的特點(diǎn)，用戶可以根據(jù)個(gè)人習(xí)慣選擇使用。本書推薦使用Chrome瀏覽器。1.2.1PC端瀏覽器Chrome瀏覽器的主要優(yōu)勢如下。高速瀏覽：Chrome瀏覽器內(nèi)置了強(qiáng)大的JavaScriptV8引擎，使其在網(wǎng)頁加載和執(zhí)行速度方面表現(xiàn)出色。安全性：Chrome瀏覽器具有較高的安全性，提供黑名單和惡意軟件防護(hù)等功能。擴(kuò)展生態(tài)系統(tǒng)：Chrome瀏覽器擁有豐富的擴(kuò)展庫，用戶可以根據(jù)自己的需求選擇并使用各種功能強(qiáng)大的擴(kuò)展程序，添加瀏覽器的功能和完善個(gè)性化體驗(yàn)?？缙脚_(tái)同步：Chrome瀏覽器支持跨設(shè)備的同步功能，用戶可以將書簽、歷史記錄、密碼等數(shù)據(jù)在不同設(shè)備間同步。開發(fā)者工具：Chrome瀏覽器提供強(qiáng)大的開發(fā)者工具，方便開發(fā)者完成調(diào)試、性能優(yōu)化和網(wǎng)頁設(shè)計(jì)等工作。1.2.2移動(dòng)端瀏覽器

先定一個(gè)小目標(biāo)！了解移動(dòng)端瀏覽器，能夠列舉常見的移動(dòng)端瀏覽器什么是移動(dòng)端瀏覽器？1.2.2移動(dòng)端瀏覽器移動(dòng)端瀏覽器是移動(dòng)設(shè)備上用于訪問Web頁面、在線應(yīng)用程序和其他資源的瀏覽器。1.2.2移動(dòng)端瀏覽器常見的移動(dòng)端瀏覽器：Android系統(tǒng)內(nèi)置的Android瀏覽器。iOS系統(tǒng)的Safari瀏覽器。UC瀏覽器。QQ瀏覽器。百度瀏覽器?！?.2.2移動(dòng)端瀏覽器VisualStudioCode編輯器1.31.3.1下載和安裝VisualStudioCode編輯器

先定一個(gè)小目標(biāo)！掌握VisualStudioCode編輯器的下載和安裝，能夠獨(dú)立完成VisualStudioCode編輯器的下載和安裝1.3.1下載和安裝VisualStudioCode編輯器VisualStudioCode（VSCode）編輯器是由微軟公司推出的一款免費(fèi)的、開源的代碼編輯器，一經(jīng)推出便受到開發(fā)者的歡迎。對于前端開發(fā)者來說，一個(gè)強(qiáng)大的編輯器可以使開發(fā)變得簡單、便捷、高效。1.3.1下載和安裝VisualStudioCode編輯器VSCode編輯器具有以下特點(diǎn)。輕巧快速。占用系統(tǒng)資源較少。功能強(qiáng)大。具備智能代碼補(bǔ)全、語法高亮顯示、自定義快捷鍵和代碼匹配等功能。支持跨平臺(tái)?？稍赪indows、Linux和macOS操作系統(tǒng)上運(yùn)行。界面的設(shè)計(jì)人性化。例如，可以快速查找文件并直接進(jìn)行開發(fā)，可以分屏顯示代碼，可以自定義主題顏色，還可以快速查看打開的項(xiàng)目文件和查看項(xiàng)目文件結(jié)構(gòu)。豐富的擴(kuò)展資源。開發(fā)者可根據(jù)需要自行下載和安裝擴(kuò)展包。多語言支持。支持多種語言和文件格式的代碼編寫，如HTML、CSS、JavaScript、JSON、TypeScript等。1.3.1下載和安裝VisualStudioCode編輯器步驟1打開瀏覽器，登錄VSCode編輯器的官方網(wǎng)站，如下圖所示。步驟3步驟4步驟2講解如何下載和安裝VSCode編輯器1.3.1下載和安裝VisualStudioCode編輯器步驟1步驟3步驟4步驟2講解如何下載和安裝VSCode編輯器在VSCode編輯器的官方網(wǎng)站中，單擊“DownloadforWindows”按鈕，會(huì)跳轉(zhuǎn)到一個(gè)新頁面，該頁面會(huì)自動(dòng)識(shí)別當(dāng)前的操作系統(tǒng)并下載相應(yīng)的安裝包。如果需要下載其他操作系統(tǒng)的安裝包，可以單擊“DownloadforWindows”按鈕右側(cè)的箭頭“”打開下拉菜單，即可看到其他操作系統(tǒng)下安裝包的下載選項(xiàng)。1.3.1下載和安裝VisualStudioCode編輯器步驟1步驟3步驟4步驟2講解如何下載和安裝VSCode編輯器1.3.1下載和安裝VisualStudioCode編輯器講解如何下載和安裝VSCode編輯器步驟3步驟4步驟2步驟1下載好VSCode編輯器的安裝包后，在下載目錄中找到該安裝包，如下圖所示。1.3.1下載和安裝VisualStudioCode編輯器講解如何下載和安裝VSCode編輯器步驟3步驟4步驟2步驟1雙擊安裝包的圖標(biāo)，啟動(dòng)安裝程序，然后按照程序的提示進(jìn)行操作，直到安裝完成。1.3.1下載和安裝VisualStudioCode編輯器VSCode編輯器安裝成功后，啟動(dòng)該編輯器，即可進(jìn)入VSCode編輯器的初始界面，如下圖所示。1.3.2安裝中文擴(kuò)展包

先定一個(gè)小目標(biāo)！掌握中文擴(kuò)展包的安裝方法，能夠在VisualStudioCode編輯器中安裝中文擴(kuò)展包1.3.2安裝中文擴(kuò)展包VSCode編輯器安裝完成后，默認(rèn)的界面語言是英文。如果要切換為中文，首先單擊編輯器左側(cè)邊欄中的””圖標(biāo)按鈕進(jìn)入擴(kuò)展界面，然后在搜索框中輸入關(guān)鍵詞“Chinese”找到中文擴(kuò)展包，單擊“Install”按鈕進(jìn)行安裝，如下圖所示。1.3.2安裝中文擴(kuò)展包安裝成功后，需要重新啟動(dòng)VSCode編輯器，中文擴(kuò)展包才會(huì)生效。重新啟動(dòng)VSCode編輯器后，VSCode編輯器的中文界面如下圖所示。1.3.3使用VisualStudioCode編輯器

先定一個(gè)小目標(biāo)！掌握VisualStudioCode編輯器的使用，能夠在項(xiàng)目中創(chuàng)建HTML5文檔1.3.3使用VisualStudioCode編輯器在D:\Bootstrap目錄下創(chuàng)建一個(gè)項(xiàng)目文件夾chapter01，該文件夾用于保存項(xiàng)目中的文件。步驟1步驟3步驟2使用VSCode編輯器開發(fā)項(xiàng)目1.3.3使用VisualStudioCode編輯器使用VSCode編輯器開發(fā)項(xiàng)目在VSCode編輯器的菜單欄中選擇“文件”→“打開文件夾”命令，然后選擇chapter01文件夾。打開文件夾后的界面效果如下圖所示。步驟1步驟3步驟21.3.3使用VisualStudioCode編輯器使用VSCode編輯器開發(fā)項(xiàng)目單擊按鈕①，輸入要?jiǎng)?chuàng)建的文件名稱index.html，即可創(chuàng)建文件。此時(shí)創(chuàng)建的index.html文件是空白的，在該文件中輸入“html:5”，VSCode會(huì)給出智能提示，然后按“Enter”鍵會(huì)自動(dòng)生成一個(gè)HTML5文檔結(jié)構(gòu)。步驟1步驟3步驟21.3.3使用VisualStudioCode編輯器使用VSCode編輯器開發(fā)項(xiàng)目在<body>標(biāo)簽中填寫內(nèi)容“HelloWorld”。步驟1步驟3步驟2<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Document</title></head><body>

HelloWorld</body></html>移動(dòng)Web開發(fā)的主流方案1.41.4.1單獨(dú)制作移動(dòng)端頁面

先定一個(gè)小目標(biāo)！了解單獨(dú)制作移動(dòng)端頁面，能夠說出單獨(dú)制作移動(dòng)端頁面的優(yōu)缺點(diǎn)1.4.1單獨(dú)制作移動(dòng)端頁面在單獨(dú)制作移動(dòng)端頁面時(shí)，通常的做法是保持原有的PC端頁面不變，然后單獨(dú)為移動(dòng)端開發(fā)一套特定的版本。在網(wǎng)站的域名中，常使用“m”（mobile）來表示移動(dòng)端網(wǎng)站。有些網(wǎng)站還會(huì)根據(jù)當(dāng)前訪問設(shè)備智能地進(jìn)行頁面跳轉(zhuǎn)：如果是移動(dòng)設(shè)備，則跳轉(zhuǎn)到移動(dòng)端頁面，如果是PC設(shè)備，則跳轉(zhuǎn)到PC端頁面。1.4.1單獨(dú)制作移動(dòng)端頁面常見的單獨(dú)制作移動(dòng)端頁面的網(wǎng)站，如下圖所示。1.4.1單獨(dú)制作移動(dòng)端頁面單獨(dú)制作移動(dòng)端頁面的方案有如下優(yōu)點(diǎn)。充分考慮平臺(tái)的優(yōu)勢和局限性，為移動(dòng)設(shè)備用戶提供良好的用戶體驗(yàn)。在移動(dòng)設(shè)備上加載速度更快，提升用戶體驗(yàn)。然而，這種方案也存在一些缺點(diǎn)，具體如下。由于需要維護(hù)多個(gè)URL，重定向移動(dòng)端網(wǎng)站可能需要額外的時(shí)間和復(fù)雜的處理。需要對搜索引擎進(jìn)行特殊處理，維護(hù)成本增加。需要針對不同的屏幕尺寸制作不同的頁面，增加了工作量和復(fù)雜性。1.4.2制作響應(yīng)式頁面

先定一個(gè)小目標(biāo)！了解如何制作響應(yīng)式頁面，能夠說出響應(yīng)式頁面的特點(diǎn)1.4.2制作響應(yīng)式頁面響應(yīng)式頁面是指遵循響應(yīng)式設(shè)計(jì)原則開發(fā)的一種網(wǎng)頁，它可以兼容不同的設(shè)備（如PC設(shè)備、移動(dòng)設(shè)備等），使同一個(gè)網(wǎng)頁