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

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

2、ootstrap？移動(dòng)設(shè)備優(yōu)先?？蚣馨素灤┯谡麄€(gè)庫的移動(dòng)設(shè)備優(yōu)先的樣式。瀏覽器支持。所有的主流瀏覽器都支持。容易上手。只要你具備HTML、CSS、JS基礎(chǔ)知識(shí)，就可以開始學(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專門構(gòu)建了自己的免費(fèi)CDN加

3、速服務(wù)?；趪鴥?nèi)云廠商的CDN服務(wù)，訪問速度更快、加速效果更明顯、沒有速度和帶寬限制、永久免費(fèi)。Bootstrap中文網(wǎng)還對大量的前端開源工具庫提供了CDN加速服務(wù)，請進(jìn)入BootCDN(http://www.bootcdn.cn)主頁查看更多可用的工具庫。什么是CDN加速服務(wù)？CDN的全稱是ContentDeliveryNetwork，即內(nèi)容分發(fā)網(wǎng)絡(luò)。其基本思路是盡可能避開互聯(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類型定義必須是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文檔類型Bootstrap使用到的某些HTM

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

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

到

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

7、性的文本賦予標(biāo)題的樣式。在標(biāo)題內(nèi)還可以包含標(biāo)簽或賦予.small類的元素，可以用來標(biāo)記副標(biāo)題。頁面主體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著重文本：斜體文本：文本對齊class=“text-left”文本左對齊class=“text-right”文本右對齊class=“text-center”文本中對齊class=“text-justify”文本兩端對齊class=“text-