HTML5+CSS3網頁設計與制作課件：使用Bootstrap柵格系統快速布局D清單頁面_第1頁
HTML5+CSS3網頁設計與制作課件：使用Bootstrap柵格系統快速布局D清單頁面_第2頁
HTML5+CSS3網頁設計與制作課件：使用Bootstrap柵格系統快速布局D清單頁面_第3頁
HTML5+CSS3網頁設計與制作課件：使用Bootstrap柵格系統快速布局D清單頁面_第4頁
HTML5+CSS3網頁設計與制作課件：使用Bootstrap柵格系統快速布局D清單頁面_第5頁
已閱讀5頁，還剩10頁未讀， 繼續免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

HTML5+CSS3網頁設計與制作使用Bootstrap開源框架快速搭建響應式網頁能夠使用Bootstrap的刪格系統完成頁面的流式布局；能夠根據網頁元素選擇合適的刪格系統樣式以響應不同視口；能夠使用Bootstrap對D清單頁面進行響應式頁面布局。任務目標

使用Bootstrap柵格系統快速布局D清單頁面本次任務要求通過學習Bootstrap的刪格系統知識和流式布局知識，完成D清單頁面的整體布局。完成后的頁面測試效果圖如2-2所示。任務描述

使用Bootstrap柵格系統快速布局頁面圖2-2移動端和電腦端布局測試頁面截圖在學習以下知識技能的基礎上，完成頁面布局框架代碼的編寫，并對布局結果進行測試。需要：Bootstrap的刪格系統知識；Bootstrap的布局容器、行和列等相關知識。根據D清單頁面效果圖使用Bootstrap完成頁面布局，并測試移動端和電腦端的布局效果。任務分析

使用Bootstrap柵格系統快速布局頁面知識與技能準備Bootstrap提供了一套響應式、移動設備優先的流式柵格系統，隨著屏幕或視口（viewport）尺寸的增加，系統會自動分為最多12列，即Bootstrap將頁面的每一行劃分為12列的方式進行頁面布局。知識與技能準備1、刪格系統Bootstrap的刪格參數如下表：表2-2-1Bootstrap刪格參數表知識與技能準備2、布局容器Bootstrap為了保證刪格布局的正常應用，需要使用布局容器（添加.container或.container-fluid類的標簽）來完成頁面布局。其中.container類是用于固定寬度（各視口最大寬度可參考表2-2-1）并支持響應式布局的容器。.container-fluid類是用于100%的寬度，可占據全部視口的容器。由于padding等css屬性的原因，.container和.container-fluid類的標簽不能互相嵌套。知識與技能準備3、rowBootstrap為刪格添加了一個獨立的類.row，以適用我們的先創建行（row），然后在行中創建列（.col-xs-*等Bootstrap刪格類預定的列）的布局，同時通過為.row元素設置負值margin從而抵消了布局容器（.container-fluid和.container類）設置的左右兩邊padding，也就間接保留了“行（row）”所包含的“列（column）”（刪格類.col-xs-*,.col-sm-*,.col-md-*,.col-lg-*）設置的padding值（左右各15px），.row類在Bootstrap的定義如下：“行（row）”必須包含在.container（固定寬度）或.container-fluid（100%寬度）中，以便為其賦予合適的排列（aligment）和內補（padding），通常我們會通過“行（row）”在水平方向創建一組“列（column）”，然后將內容放置于“列（column，刪格類.col-xs-*,.col-sm-*,.col-md-*,.col-lg-*）”內，并且，只有“列（column）”可以作為行（row）”的直接子元素。1234.row{margin-right:-15px;margin-left:-15px;}打開2.2-1素材文件夾中的web_bootstrap文件夾，在已經配置好Bootstrap的index.html頁面編寫一個布局框架頁面，要求如下：（1）采用100%寬度的容器（2）在行（row）中創建一個大桌面視口下是4列、桌面視口下是2列、平板是2列、手機是1列的布局框架。課堂練習的部分代碼可參考如下示例：課堂練習2-2-1創建一個響應式的刪格頁面12345678<divclass="container-fluid"><divclass="row"><divclass="col-lg-3col-md-6col-sm-6">1</div><divclass="col-lg-3col-md-6col-sm-6">2</div><divclass="col-lg-3col-md-6col-sm-6">3</div><divclass="col-lg-3col-md-6col-sm-6">4</div></div></div>知識與技能準備4、列偏移Bootstrap處理定義了刪格，還為刪格的左留白定義了一套“留白刪格”，我們把它叫做列偏移樣式。如使用.col-md-offset-*類可以將列向右側偏移。這些類實際是通過使用*選擇器為當前元素增加了左側的邊距（margin）。打開2.2-1完成的文件，在練習2.2-1的基礎上，在row內的布局框架元素上方增加標題和說明文字，要求如下：（1）標題在任何顯示視口都是獨立的一行顯示（2）說明文字在大桌面視口、桌面視口占頁面的8等分，并居中對齊。課堂練習的部分代碼可參考如下示例：課堂練習2-2-2創建一個“居中”的刪格列12345678910<divclass="container-fluid"><divclass="row"><h2>標題</h2><divclass="col-lg-8col-lg-offset-2col-md-8col-md-offset-2>說明文字</div><divclass="col-lg-3col-md-6col-sm-6">1</div><divclass="col-lg-3col-md-6col-sm-6">2</div><divclass="col-lg-3col-md-6col-sm-6">3</div><divclass="col-lg-3col-md-6col-sm-6">4</div></div></div>任務實施在任務1的基礎上，我們需要完成頁面的基本布局框架，以便在任務三中加入對應內容。通過分析效果圖片，我們不難發現，除了移動視口，其它視口下左右兩邊的內容與瀏覽器都保持著一定的邊界（padding），所以我們可以判斷頁面布局時應該選用固定寬度容器.container。由于container是有左右留白的，針對非白色背景，為了保證有色背景是通欄，需要在其外圍添加一個標簽來包含它，如功能介紹、下載應用、高級會員、聯系我們，這幾個模塊都需要在container的外圍添加一個標簽。由于本任務主要考慮布局，所以以下各步驟的參考代碼并沒有完全包含頁面的所有內容，我們會在后續任務中再進行完善。1、菜單欄因為菜單欄部分是左右結構，使用可以在<body>標簽中編寫左右布局代碼。2、關于關于區域為通欄（沒有分列），故只需要單獨創建一行就可以了。3、應用特征此欄為“品”字形，標題獨立一行，下方為左右結構。在大桌面視口和桌面視口端采用左右5：7的結構，平板和手機端為上下結構（占12列），默認即占12列，故不用編寫，只需要編寫大桌面視口和桌面視口端兩個端口的。任務實施4、下載此欄內容在在大桌面視口和桌面視口端為也是“品”字結構，上面為標題+段落，下面是左中右結構的布局，在平板和手機端不存在左右結構，是垂直排列的標題+段落+垂直的軟件特征介紹。5、會員功能該欄目標題部分與上一欄目類似，下方是表格。6、幫助中心該欄目內容為通欄標題-三列內容-通欄視頻的結構。7、聯系我們欄目內容為左右結構，為了讓右邊的表單靠右，我們對其左右結構的比例做了調

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網頁內容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經權益所有人同意不得將文件中的內容挪作商業或盈利用途。
  • 5. 人人文庫網僅提供信息存儲空間，僅對用戶上傳內容的表現方式做保護處理，對用戶上傳分享的文檔內容本身不做任何修改或編輯，并不能對任何下載內容負責。
  • 6. 下載文件中如有侵權或不適當內容，請與我們聯系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論