第一章Bootstrap概述Bootstrap基礎(chǔ)教程（第3版）（微課版）趙丙秀

目錄CONTENTS12345Bootstrap簡(jiǎn)述為何使用Bootstrap如何使用Bootstrap下載Bootstrap簡(jiǎn)單模板6案例：Bootstrap實(shí)例Bootstrap簡(jiǎn)述Bootstrap框架是一個(gè)基于HTML、CSS、JavaScript的開(kāi)源工具集，用于快速開(kāi)發(fā)Web應(yīng)用程序和網(wǎng)站的前端框架。Bootstrap是全球非常受歡迎的前端框架，用于開(kāi)發(fā)響應(yīng)式、移動(dòng)設(shè)備優(yōu)先的Web項(xiàng)目。2012年1月增加了新樣式、修改了網(wǎng)頁(yè)元素的默認(rèn)樣式、修改上版的錯(cuò)誤。重大改變：添加了響應(yīng)式設(shè)計(jì)特性，采用了更為靈活的12柵格布局。Bootstrap2.02013年3月Bootstrap3.02011年8月Twitter公司推出快速搭建網(wǎng)頁(yè)應(yīng)用的輕量級(jí)前端開(kāi)發(fā)工具，由CSS語(yǔ)言Less編寫(xiě)。Bootstrap1發(fā)布Bootstrap3.0預(yù)覽版本。Bootstrap3最大的變化是移動(dòng)設(shè)備優(yōu)先、扁平化設(shè)計(jì)。Bootstrap簡(jiǎn)述2020年12月2020年12月，發(fā)布Bootstrap5的內(nèi)測(cè)版，2021年5月發(fā)布正式版，目前最新版本5.3.0。重大改變：刪除了對(duì)jQuery的依賴(lài)，增加了CSS的自定義屬性，柵格中增加了新的設(shè)備類(lèi)型。支持從右向左顯示頁(yè)面。Bootstrap52015年8月2018年1月發(fā)布正式版。Bootstrap4重新改寫(xiě)框架，從Less遷移到Sass，支持彈性盒子模型，改進(jìn)柵格系統(tǒng)。目前最新版本：4.6.2.Bootstrap4Bootstrap簡(jiǎn)述為何使用Bootstrap移動(dòng)設(shè)備優(yōu)先。自Bootstrap3起，框架包含了貫穿于整個(gè)庫(kù)的移動(dòng)設(shè)備優(yōu)先的樣式。瀏覽器支持。MicrosoftEdge、Firefox、Google等所有的主流瀏覽器都支持Bootstrap。容易上手。用戶(hù)只需要具備HTML和CSS的基礎(chǔ)知識(shí)即可。響應(yīng)式設(shè)計(jì)。Bootstrap的響應(yīng)式CSS能夠自適應(yīng)于臺(tái)式計(jì)算機(jī)、平板電腦和手機(jī)。它為開(kāi)發(fā)人員創(chuàng)建接口提供了一個(gè)簡(jiǎn)潔統(tǒng)一的解決方案。它包含了功能強(qiáng)大的內(nèi)置組件，易于定制。它還提供了基于Web的定制。它是開(kāi)源的。如何使用Bootstrap用戶(hù)生產(chǎn)環(huán)境的Bootstrap：下載包為編譯并且壓縮后的CSS、JS，不包含文檔和源代碼。Bootstrap源碼：包含Sass、JS的源碼，并且?guī)в形臋n，需要Sass編譯器和一些設(shè)置工作。下載Bootstrap編譯版官方網(wǎng)站：/源碼版下載Bootstrapbootstrap/├──css/│├──bootstrap-grid.css│├──bootstrap-grid.css.map│├──bootstrap-grid.min.css│├──bootstrap-grid.min.css.map│├──bootstrap-grid.rtl.css│├──bootstrap-grid.rtl.css.map│├──bootstrap-grid.rtl.min.css│├──bootstrap-grid.rtl.min.css.map│├──bootstrap-reboot.css│├──bootstrap-reboot.css.map│├──bootstrap-reboot.min.css│├──bootstrap-reboot.min.css.map│├──bootstrap-reboot.rtl.css│├──bootstrap-reboot.rtl.css.map│├──bootstrap-reboot.rtl.min.css│├──bootstrap-reboot.rtl.min.css.map│├──bootstrap-utilities.css│├──bootstrap-utilities.css.map│├──bootstrap-utilities.min.css│├──bootstrap-utilities.min.css.map│├──bootstrap-utilities.rtl.css│├──bootstrap-utilities.rtl.css.map│├──bootstrap-utilities.rtl.min.css│├──bootstrap-utilities.rtl.min.css.map│├──bootstrap.css│├──bootstrap.css.map│├──bootstrap.min.css│├──bootstrap.min.css.map│├──bootstrap.rtl.css│├──bootstrap.rtl.css.map│├──bootstrap.rtl.min.css│└──bootstrap.rtl.min.css.map

bootstrap/

└──js/├──bootstrap.bundle.js├──bootstrap.bundle.js.map├──bootstrap.bundle.min.js├──bootstrap.bundle.min.js.map├──bootstrap.esm.js├──bootstrap.esm.js.map├──bootstrap.esm.min.js├──bootstrap.esm.min.js.map├──bootstrap.js├──bootstrap.js.map├──bootstrap.min.js└──bootstrap.min.js.map每組文件中包含：編譯好的css和js文件編譯并壓縮的css和js文件對(duì)應(yīng)的sourcemaps文件下載BootstrapCSS文件Layout（布局）Content（內(nèi)容）Components（組件）Utilities（工具）bootstrap.cssbootstrap.min.cssIncluded（包含）Included（包含）Included（包含）Included（包含）bootstrap-grid.cssbootstrap-grid.min.css（僅包含柵格系統(tǒng)）Notincluded（不包含）Notincluded（不包含）（僅包含flex工具）bootstrap-reboot.cssbootstrap-reboot.min.cssNotincluded（不包含）（僅包含）Notincluded（不包含）Notincluded（不包含）Bootstrap-utilities.cssBootstrap-utilities.min.cssNotincluded（不包含）Notincluded（不包含）Notincluded（不包含）Included（包含）JSfilesPopperbootstrap.bundle.jsbootstrap.bundle.min.jsIncluded（包含）bootstrap.jsbootstrap.min.jsNotincluded（不包含）bootstrap/├──dist/│├──css/│└──js/├──site/│└──content/│└──docs/│└──5.3/│└──examples/├──js/└──scss/包含了CSS和JS的源碼包含了預(yù)編譯Bootstrap包內(nèi)的所有文件包含了源碼文檔包含了Bootstrap的用法實(shí)例下載Bootstrap下載Bootstrapnpminstallbootstrap@5.3.0簡(jiǎn)單模板簡(jiǎn)單模板開(kāi)發(fā)工具工欲善其事，必先利其器。開(kāi)發(fā)工具開(kāi)發(fā)工具HBuilderX它是DCloud（數(shù)字天堂）推出的一款支持HTML5的Web開(kāi)發(fā)IDE，其自身主體由Java編寫(xiě)。HBuilderX為HTML5設(shè)計(jì)做過(guò)了特殊優(yōu)化，快，是它的最大優(yōu)勢(shì)，通過(guò)完整的語(yǔ)法提示和代碼輸入法、代碼塊等，可以大幅提升HTML、css、js的開(kāi)發(fā)效率。第一個(gè)bootstrap案例谷歌瀏覽器HBuilderX的快捷輸入例子嵌套>