bootstrap入門教程

bootstrap入門教程

ID:18737956

大小:1.76 MB

頁數(shù):45頁

時間:2018-09-22

bootstrap入門教程_第1頁
bootstrap入門教程_第2頁
bootstrap入門教程_第3頁
bootstrap入門教程_第4頁
bootstrap入門教程_第5頁
資源描述:

《bootstrap入門教程》由會員上傳分享,免費在線閱讀,更多相關內容在行業(yè)資料-天天文庫。

1、本作品由VentLam創(chuàng)作,采用知識共享署名-非商業(yè)性使用-相同方式共享2.5中國大陸許可協(xié)議進行許可。BootStrap入門教程(一)2011年,twitter的“一小撮”工程師為了提高他們內部的分析和管理能力,用業(yè)余時間為他們的產品構建了一套易用、優(yōu)雅、靈活、可擴展的前端工具集--BootStrap。Bootstrap由MARKOTTO和JacobThornton所設計和建立,在github上開源之后,迅速成為該站上最多人watch&fork的項目。大量工程師踴躍為該項目貢獻代碼,社區(qū)驚人地活躍,代碼版本進化非??焖伲俜轿臋n質量極其高(可以說是優(yōu)雅),

2、同時涌現(xiàn)了許多基于Bootstrap建設的網站:界面清新、簡潔;要素排版利落大方。如下圖所示:https://kippt.com/http://www.fleetio.com/GitHub上這樣介紹bootstrap:簡單靈活可用于架構流行的用戶界面和交互接口的html,css,javascript工具集?;趆tml5、css3的bootstrap,具有大量的誘人特性:友好的學習曲線,卓越的兼容性,響應式設計,12列格網,樣式向導文檔,自定義JQuery插件,完整的類庫,基于Less等。本系列教程遵循官方文檔結構來介紹bootstrap,包括手腳架(Sca

3、ffolding),基礎CSS,組件,javascript插件,使用LESS與自定義.本文主要介紹Bootstrap的基礎布局--Scaffolding.Bootstrap建立了一個響應式的12列格網布局系統(tǒng),它引入了fixed和fluid-with兩種布局方式。我們從全局樣式(GlobalStyle),格網系統(tǒng)(GridSystem),流式格網(FluidgridSystem),自定義(Customing),布局(Layouts),響應式設計(ResponsiveDesign)這六五個方面深入講解Boostrap的scaffolding.1全局樣式(Glo

4、balStyle).Bootstrap要求html5的文件類型,所以必須在每個使用bootstrap頁面的開頭都引用:...1同時,它通過Bootstrap.less文件來設置全局的排版和連接顯示風格.其中去掉了Body的margin,使用@baseFontFamily,@baseFontSize,@linkColor等變量來控制基本排版。2格網系統(tǒng)(GridSystem).默認的Bootstrap格網系統(tǒng)提供一個寬達940像素的,12列的格網。這意味著你頁面默認寬度是940px,最小的

5、單元要素寬度是940/12px.Bootstrap能夠使得你的網頁可以更好地適應多種終端設備(平板電腦,智能手機等)。默認格網系統(tǒng)直觀概念如圖1-1所示:圖1-1默認格網系統(tǒng)(DefaultGridSystem)以下簡單的代碼則是實現(xiàn)圖1-1中,第三列的寬度為4和寬度為8的兩個div....

...
2.2偏移列.有時候,頁面要素前面需要一些空白,bootstrap提供了偏移列來實現(xiàn),如圖1-2所示:圖1-2偏移列(Offs

6、etcolumns)以下代碼實現(xiàn)了是實現(xiàn)圖1-2中,第一列的寬度為4和偏移度為4寬度為4的兩個div....

...2.3嵌套列.嵌套列是容許用戶實現(xiàn)更復雜的頁面要素布局。在bootstrap中實現(xiàn)嵌套列非常簡單,只需要在原有的div中加入.row和相應的長度的span*div即可。如圖1-3所示:圖1-3嵌套列(Nestingcolumns)以下代碼實現(xiàn)了是實現(xiàn)圖1-3中,第一層的寬度為12和第二層兩個寬度

7、為6的兩個div.Level1ofcolumnLevel2Level2嵌套的div長度之和不能大于它的父div,否則會溢出疊加。各位可以試試將第一層的div長度改為其他值,看看效果。1流式格網系統(tǒng)(Fluidgridsystem).它使用%,而不是固定的px,來確定頁面要素的寬度.只需要簡單的將.row改成.row-fluid,

8、就可以將fixed行改為fluid.如圖1-4所示:

當前文檔最多預覽五頁,下載文檔查看全文

此文檔下載收益歸作者所有

當前文檔最多預覽五頁,下載文檔查看全文
溫馨提示:
1. 部分包含數(shù)學公式或PPT動畫的文件,查看預覽時可能會顯示錯亂或異常,文件下載后無此問題,請放心下載。
2. 本文檔由用戶上傳,版權歸屬用戶,天天文庫負責整理代發(fā)布。如果您對本文檔版權有爭議請及時聯(lián)系客服。
3. 下載前請仔細閱讀文檔內容,確認文檔內容符合您的需求后進行下載,若出現(xiàn)內容與標題不符可向本站投訴處理。
4. 下載文檔時可能由于網絡波動等原因無法下載或下載錯誤,付費完成后未能成功下載的用戶請聯(lián)系客服處理。