HTML5+CSS3+JavaScript+Bootstrap網(wǎng)站開發(fā)技術(shù)（第3版）課件 第7章 Bootstrap概述

第7章Bootstrap概述認(rèn)識Bootstrap1Bootstrap框架結(jié)構(gòu)2應(yīng)用案例3小結(jié)47.1認(rèn)識Bootstrap7.1.1Bootstrap框架介紹基于HTML、CSS、JavaScript等技術(shù)內(nèi)置了大量的頁面樣式、可重用的組件、JS插件可以快速構(gòu)建網(wǎng)站原型，甚至是構(gòu)建企業(yè)級的網(wǎng)站支持響應(yīng)式的布局設(shè)計7.1認(rèn)識Bootstrap7.1.2Bootstrap框架的內(nèi)容全局CSS樣式：基本的HTML元素均可以通過設(shè)置樣式類來得到增強(qiáng)效果，還包括用于布局的柵格系統(tǒng)。組件：包含圖像、下拉菜單、導(dǎo)航、警告框、彈出框等多個可重用的組件。JS插件：包含模態(tài)框、下拉菜單、標(biāo)簽頁、輪播等插件。用戶可以直接引用全部插件，也可以逐個引用插件。定制：用戶可以定制Bootstrap的組件、LESS變量、jQuery插件來得到用戶自定義版本。7.1認(rèn)識Bootstrap7.1.3Bootstrap特點響應(yīng)式布局提供全面的組件和插件支持LESS動態(tài)樣式使用簡單高度可定制性7.1認(rèn)識Bootstrap7.1.4Bootstrap版本Bootstrap1、Bootstrap2、Bootstrap3、Bootstrap4等版本。Bootstrap3.3.7是目前廣泛使用的版本，移動設(shè)備優(yōu)先、增強(qiáng)的柵格系統(tǒng)、扁平化設(shè)計的極簡風(fēng)格等。使用的框架是Bootstrap3.3.7。Bootstrap4是Bootstrap的最新版本7.2Bootstrap框架結(jié)構(gòu)7.2.1Bootstrap框架的下載Bootstrap軟件包類型。DownloadBootstrap從該鏈接下載的內(nèi)容是Bootstap編譯版的文件。Downloadsource從該鏈接下載的是Bootstap框架的源碼DownloadSass從該鏈接下載的是Sass源碼預(yù)編譯包。7.2Bootstrap框架結(jié)構(gòu)7.2.2Bootstrap框架的結(jié)構(gòu)css和js文件夾中是編譯好的CSS和JS(bootstrap.*)文件經(jīng)過壓縮的CSS和JS(bootstrap.min.*)文件fonts文件夾包含了來自Glyphicons的圖標(biāo)字體文件7.2Bootstrap框架結(jié)構(gòu)7.2.3WebStorm開發(fā)環(huán)境WebStorm被稱為“Web前端開發(fā)神器”“最強(qiáng)大的HTML5編輯器”WebStorm開發(fā)Web應(yīng)用第一步是創(chuàng)建項目，默認(rèn)的項目類型是“空項目”，也可以根據(jù)需求選擇創(chuàng)建的項目類型；第二步是創(chuàng)建文件，選擇創(chuàng)建HTML文件、CSS文件或JavaScript文件等。7.2Bootstrap框架結(jié)構(gòu)7.2.4在項目中引入Bootstrap框架使用<script>標(biāo)記引入JavaScript文件使用＜link＞標(biāo)記引入CSS文件Bootstrap的JS效果都是基于jQuery的，如果要使用Bootstrap的JS動態(tài)效果的話，需要先引入jQuery7.3應(yīng)用案例7.3.1在頁面中使用組件路徑導(dǎo)航組件（Breadcrumbs）的使用7.3應(yīng)用案例7.3.2基于Bootstrap文檔示例創(chuàng)建的網(wǎng)頁應(yīng)用了CSS全局樣式和組件來創(chuàng)建網(wǎng)頁。其中，導(dǎo)航條（Navbar）元素的示例應(yīng)用于導(dǎo)航部分巨幕（Jumbotron）元素應(yīng)用于內(nèi)容部分圖片（Images）元素的應(yīng)用柵格系統(tǒng)（GridSystem）的應(yīng)用7.3應(yīng)用案例小結(jié)Bootstrap是一個流行的、用于快速開發(fā)Web應(yīng)用程序的前端框架Bootstrap3.3.7是目前廣泛使用的版本，本書使用的框架是Bootstrap3.3.7使用WebStorm開發(fā)基于Bootstrap的中文網(wǎng)的文檔和示例來搭建一個Web應(yīng)用作業(yè)1.簡答題（1）下載Bootstrap框架時，編譯版的文件和源碼文件在使用時有什么不同？（2）示例7-1和示例7-2在引用Bootstrap框架的代碼上，有所不同，主要區(qū)別在于下面代碼，為什么在示例7-2中未引用下面的代碼？<scriptsrc="../jQuery3/jQuery-3.1.1.mi