《bootstrap入門(mén)學(xué)習(xí)(1)》由會(huì)員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在教育資源-天天文庫(kù)。

1、BootStrap入門(mén)學(xué)習(xí)Part1Bootstrap簡(jiǎn)介什么是Bootstrap？Bootstrap是由Twitter的MarkOtto和JacobThornton兩位設(shè)計(jì)師開(kāi)發(fā)的。Bootstrap是2011年八月在GitHub上發(fā)布的開(kāi)源產(chǎn)品。Bootstrap是一個(gè)用于快速開(kāi)發(fā)Web應(yīng)用程序和網(wǎng)站的前端框架。Bootstrap是基于HTML、CSS、JAVASCRIPT的。Bootstrap簡(jiǎn)潔靈活，使得Web開(kāi)發(fā)更加快捷。Bootstrap可以構(gòu)建出非常優(yōu)雅的前端界面，而且占用資源非常小。為什么使用B

2、ootstrap？移動(dòng)設(shè)備優(yōu)先。框架包含了貫穿于整個(gè)庫(kù)的移動(dòng)設(shè)備優(yōu)先的樣式。瀏覽器支持。所有的主流瀏覽器都支持。容易上手。只要你具備HTML、CSS、JS基礎(chǔ)知識(shí)，就可以開(kāi)始學(xué)習(xí)。響應(yīng)式設(shè)計(jì)。Bootstrap的響應(yīng)式CSS能夠自適應(yīng)于臺(tái)式機(jī)、平板電腦和手機(jī)Bootstrap環(huán)境安裝Bootstrap下載下載的中文地址：http://v3.bootcss.com/Bootstrap環(huán)境安裝使用Bootstrap中文網(wǎng)提供的免費(fèi)CDN加速服務(wù)Bootstrap中文網(wǎng)為Bootstrap專(zhuān)門(mén)構(gòu)建了自己的免費(fèi)CDN加

3、速服務(wù)。基于國(guó)內(nèi)云廠商的CDN服務(wù)，訪問(wèn)速度更快、加速效果更明顯、沒(méi)有速度和帶寬限制、永久免費(fèi)。Bootstrap中文網(wǎng)還對(duì)大量的前端開(kāi)源工具庫(kù)提供了CDN加速服務(wù)，請(qǐng)進(jìn)入BootCDN(http://www.bootcdn.cn)主頁(yè)查看更多可用的工具庫(kù)。什么是CDN加速服務(wù)？CDN的全稱(chēng)是ContentDeliveryNetwork，即內(nèi)容分發(fā)網(wǎng)絡(luò)。其基本思路是盡可能避開(kāi)互聯(lián)網(wǎng)上有可能影響數(shù)據(jù)傳輸速度和穩(wěn)定性的瓶頸和環(huán)節(jié)，使內(nèi)容傳輸?shù)母?、更穩(wěn)定。Bootstrap基本模板Bootstrap模板注意事項(xiàng)Bo

4、otstrap模板必須是基于HTML5文件的。因此DTD類(lèi)型定義必須是HTML5的。Bootstrap文件當(dāng)字符集設(shè)置，也要遵循HTML5的規(guī)范。設(shè)置IE瀏覽器兼容模式(X-UA-Compatible)。設(shè)置模板，適用于所有平臺(tái)(viewport)。引入bootstrap的CSS主文件(bootstrap.min.css)。引入jQuery插件的主文件(jQuery)引入bootstrap的JS主文件(bootstrap.min.js)全局CSS樣式——概述HTML5文檔類(lèi)型Bootstrap使用到的某些HTM

5、L元素和CSS屬性需要將頁(yè)面設(shè)置為HTML5文檔類(lèi)型。在你項(xiàng)目中的每個(gè)頁(yè)面都要參照下面的格式進(jìn)行設(shè)置。移動(dòng)設(shè)備優(yōu)先Bootstrap是移動(dòng)設(shè)備優(yōu)先的。針對(duì)移動(dòng)設(shè)備的樣式融合進(jìn)了框架的每個(gè)角落，而不是增加一個(gè)額外的文件。為了確保適當(dāng)?shù)睦L制和觸屏縮放，需要在之中添加viewport元數(shù)據(jù)標(biāo)簽。全局CSS樣式——概述禁用移動(dòng)設(shè)備上的縮放功能在移動(dòng)設(shè)備瀏覽器上，通過(guò)為視口（viewport）設(shè)置meta屬性為user-scalable=no可以禁用其縮放（zooming）功能。這樣禁用縮放功能后，用戶只能滾

6、動(dòng)屏幕，就能讓你的網(wǎng)站看上去更像原生應(yīng)用的感覺(jué)。布局容器Bootstrap需要為頁(yè)面內(nèi)容和柵格系統(tǒng)包裹一個(gè).container容器。我們提供了兩個(gè)作此用處的類(lèi)。注意，由于padding等屬性的原因，這兩種容器類(lèi)不能互相嵌套。.container類(lèi)用于固定寬度并支持響應(yīng)式布局的容器。.container-fluid類(lèi)用于100%寬度，占據(jù)全部視口（viewport）的容器。CSS全局樣式——排版標(biāo)題HTML中的所有標(biāo)題標(biāo)簽，

到

均可使用。另外，還提供了.h1到.h6類(lèi)，為的是給內(nèi)聯(lián)（inline）屬

7、性的文本賦予標(biāo)題的樣式。在標(biāo)題內(nèi)還可以包含標(biāo)簽或賦予.small類(lèi)的元素，可以用來(lái)標(biāo)記副標(biāo)題。頁(yè)面主體Bootstrap將全局font-size設(shè)置為14px，line-height設(shè)置為1.428。這些屬性直接賦予元素和所有段落元素。另外，

（段落）元素還被設(shè)置了等于1/2行高（即10px）的底部外邊距（margin）。CSS全局樣式——排版內(nèi)聯(lián)文本元素被刪除的文本：HTML5刪除文本、XHTML刪除文本插入的文件：插入文本

8、>下劃線的文本：下劃線文本小號(hào)文本：或.small著重文本：斜體文本：文本對(duì)齊class=“text-left”文本左對(duì)齊class=“text-right”文本右對(duì)齊class=“text-center”文本中對(duì)齊class=“text-justify”文本兩端對(duì)齊class=“text-