《響應式頁面設計》-項目3bootstrap布局_第1頁
《響應式頁面設計》-項目3bootstrap布局_第2頁
《響應式頁面設計》-項目3bootstrap布局_第3頁
《響應式頁面設計》-項目3bootstrap布局_第4頁
《響應式頁面設計》-項目3bootstrap布局_第5頁
已閱讀5頁，還剩26頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

使用柵格系統(tǒng)進行頁面布局21響應式設計和媒體查詢3使用容器學習目標掌握掌握掌握1、下載、使用bookstrap任務3.1初識bootstrap2、第一個bookstrap示例3、認識視口Bootstrap官方網址：/。建議到Bootstrap中文網中下載bootstrap4進行下載，也就是到中進行下載和學習。3.1.1下載、使用bootstrap對下載的bootstrap進行解壓縮，我們使用css、js這兩個文件夾，解壓后文件夾包含如圖3-2所示的文件。3.1.1下載、使用bootstrap圖3-2預編譯的Bootstrap文件項目中使用bootstrap框架的步驟如下。一般情況在我們的項目中新建一個bootstrap文件夾，將css、js這兩個文件夾放在bootstrap文件夾中。其中.min是壓縮形式，建議初學者使用非壓縮形式。3.1.1下載、使用bootstrap<scriptsrc="bootstrap/js/popper.js"></script>步驟1：在<head>標簽的下方引入bootstrap。<linkrel="stylesheet"type="text/css“href="bootstrap/css/bootstrap.css"/>步驟2：如果需要交互效果，需要引入bootstrap.js，可以放在<head>標簽內，也可以放在<body>內，或者<body>標簽外。<scriptsrc="bootstrap/js/bootstrap.js"></script>步驟3：Bootstrap中的JS插件依賴于jQuery，因此在bootstrap.js之前要引用jQuery，放在bootstrap.js之前。<scriptsrc="bootstrap/js/jquery.js"></script>步驟4：Bootstrap4中的下拉菜單和提示框（tooltip）依賴于第三方Popper.js插件，使用時請確保popper.min.js或者popper.js文件放在bootstrap.js之前，或者使用bootstrap.bundle.min.js、bootstrap.bundle.js文件，因為這兩個文件中包含了Popper.js。3.1.2第一個bootstrap示例通過下面示例1知道我們學習bootstrap就是利用它定義好的樣式，讓開發(fā)變得高效和快速。使用link標簽引入bootstrap.css1）首先table增加一個類<tableclass="table">2）其次為table增加一個類<tableclass="tabletable-bordered">3)然后為table標簽table-striped和table-hover，查看效果<!DOCTYPEhtml><html> <head> <metacharset="utf-8"/> <title></title> <linkrel="stylesheet"type="text/css"href="bootstrap/css/bootstrap.css"/> </head> <body> <tableclass="tabletable-borderedtable-stripedtable-hover"> <tr> <td>前端開發(fā)學習的課程</td> <td>課程的學時</td> <td>課程的學分</td> <td>課程的開設學期</td> </tr> </table> </body></html>

在前面的步驟2中，在瀏覽器中觀察頁面在不同設備尺寸上的顯示情況，我們發(fā)現(xiàn)，當我們點擊手機模擬器，并通過選擇不同的移動設備瀏覽時，網頁中的內容進行了縮小，文字內容出現(xiàn)了看不清楚的現(xiàn)象，怎么解決呢？就是加入視口，如果我們在head標簽中加入了視口，<metaname=“viewport”content="width=device-width,initial-scale=1.0">，網頁內容就清楚的顯示在移動設備上，現(xiàn)在我們對視口進行詳細介紹。3.1.3認識視口在移動設備上進行網頁的開發(fā)，首先要搞明白移動設備上的視口viewport，只有明白了viewport的概念以及弄清楚了跟viewport有關的meta標簽的使用，才能更好地讓我們的網頁適配或響應各種不同分辨率的移動設備通俗地講，移動設備上的視口viewport就是設備的屏幕上能用來顯示我們的網頁的那一塊區(qū)域，在具體一點，就是瀏覽器上(也可能是一個app中的webview)用來顯示網頁的那部分區(qū)域，是瀏覽器顯示頁面內容的屏幕區(qū)域，但視口viewport又不局限于瀏覽器可視區(qū)域的大小，它可能比瀏覽器的可視區(qū)域要大，也可能比瀏覽器的可視區(qū)域要小。3.1.3認識視口在默認情況下，一般來講，移動設備上的視口viewport都是要大于瀏覽器可視區(qū)域的，這是因為考慮到移動設備的分辨率相對于桌面電腦來說都比較小，所以為了能在移動設備上正常顯示那些傳統(tǒng)的為桌面瀏覽器設計的網站，移動設備上的瀏覽器都會把自己默認的視口viewport設為980px或1024px（也可能是其它值，這個是由設備自己決定的），但帶來的后果就是瀏覽器會出現(xiàn)橫向滾動條，因為瀏覽器可視區(qū)域的寬度是比這個默認的viewport的寬度要小的。由此可見在移動設備上視口不再受限于瀏覽器的窗口，而是允許開發(fā)人員自由設置視口的大小，通常瀏覽器會設置一個默認大小的視口，一般這個值的大小會大于屏幕的尺寸，目的是為了能夠正常顯示那些專為PC設計的網頁。下圖3-3列出了一些移動設備上瀏覽器的默認viewport的寬度。從圖中統(tǒng)計，我們得知不同的移動廠商分別設置了一個默認的viewport的值，這個值保證大部分網頁可以正常在移動設備下瀏覽。圖3-3常見默認viewport大小3.1.3認識視口在移動端瀏覽器中，存在著3種視口，分別是布局視口(layoutviewport)、視覺視口(visualviewport)和理想視口(idealviewport)。圖3-4布局視口1.布局視口(layoutviewport)布局視口(layoutviewport)是指網頁的寬度，一般移動端瀏覽器都默認設置了布局視口的寬度，根據(jù)設備的不同，布局視口的默認寬度有可能是768px、980px或1024px等，如圖3-3所示即為布局視口，這個layoutviewport的寬度可以通過document.documentElement.clientWidth來獲取。這個寬度并不適合在手機屏幕中展示。移動端瀏覽器之所以采用這樣的默認設置，是為了解決早期的PC端頁面在手機上顯示的問題。下面通過圖3-4演示什么是布局視口。在圖3-4中，當移動端瀏覽器展示PC端網頁內容時，由于移動端設備屏幕比較小，不能像PC端瀏覽器那樣完美地展示網頁，這正是布局視口存在的問題。這樣的網頁在手機的瀏覽器中會出現(xiàn)左右滾動條，用戶需要左右滑動才能查看完整的一行內容。3.1.3認識視口2.視覺視口(visualviewport)圖3-5演示的是視覺視口布局視口(layoutviewport)的寬度是大于瀏覽器可視區(qū)域的寬度的，所以我們還需要一個viewport來代表瀏覽器可視區(qū)域的大小，這個viewport叫做視覺視口(visualviewport)。視覺視口的寬度可以通過window.innerWidth來獲取，但在Android2,Opreamini和UC8中無法正確獲取。視覺視口是指用戶正在看到的網站的區(qū)域，這個區(qū)域的寬度等同于移動設備的瀏覽器窗口的寬度，指的是瀏覽器可視區(qū)域的寬度。下面通過圖3-5演示什么是視覺視口。需要注意的是，當我們在手機中縮放網頁的時候，操作的是視覺視口，而布局視口仍然保持原來的寬度。3.1.3認識視口圖3-6演示的是理想視口3.理想視口理想視口(idealviewport)并沒有一個固定的尺寸，不同的設備擁有有不同的idealviewport。所有的iphone的idealviewport寬度都是320px，無論它的屏幕寬度是320還是640，也就是說，在iphone中，css中的320px就代表iphone屏幕的寬度。但是安卓設備就比較復雜了，有320px的，有360px的，有384px的等等，關于不同的設備idealviewport的寬度都為多少，可以到

去查看一下，里面收集了眾多設備的理想寬度。移動設備上的視口viewport分為布局視口layoutviewport、視覺視口visualviewport和理想視口idealviewport三類，其中的理想時刻idealviewport是最適合移動設備的視口，理想是扣的寬度等于移動設備的屏幕寬度，只要在css中把某一元素的寬度設為理想視口的寬度(單位用px)，那么這個元素的寬度就是設備屏幕的寬度了，也就是寬度為100%的效果。理想視口的意義在于，無論在何種分辨率的屏幕下，那些針對理想視口而設計的網站，不需要用戶手動縮放，也不需要出現(xiàn)橫向滾動條，都可以完美的呈現(xiàn)給用戶。3.1.3認識視口移動設備默認的視口是布局視口，也就是那個比屏幕要寬的視口，但在進行移動設備網站的開發(fā)時，我們需要的是理想視口。那么怎么才能得到理想視口呢？這就該輪到meta標簽出場了。我們在開發(fā)移動設備的網站時，最常見的的一個動作就是把下面這個東西復制到我們的head標簽中：<metaname="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">該meta標簽的作用是讓當前viewport的寬度等于設備的寬度，同時不允許用戶手動縮放。也許允不允許用戶縮放不同的網站有不同的要求，但讓viewport的寬度等于設備的寬度，這個應該是大家都想要的效果，如果你不這樣的設定的話，那就會使用那個比屏幕寬的默認viewport，也就是說會出現(xiàn)橫向滾動條。這個name為viewport的meta標簽到底有哪些東西呢，又都有什么作用呢？metaviewport標簽首先是由蘋果公司在其safari瀏覽器中引入的，目的就是解決移動設備的viewport問題。后來安卓以及各大瀏覽器廠商也都紛紛效仿，引入對metaviewport的支持，事實也證明這個東西還是非常有用的。3.1.3認識視口屬性名取值描述width正整數(shù)或device-width定義視口的寬度，單位為像素；當值為device-width時表示設置視窗視口的寬度與可見視口寬度相同height正整數(shù)或device-height定義視口的高度，單位為像素，一般不用initial-scale[0.0-10.0]定義初始縮放比例maximum-scale[0.25-10.0]定義最大縮放比例minimum-scale[0.25-10.0]定義最小縮放比例user-scalableyes/no定義是否允許用戶手動縮放頁面，默認值yes屬性content=""中間以逗號分隔，使用參數(shù)如下。表3-1屬性content參數(shù)任務3.2使用容器.container是固體自適應方式，容器會根據(jù)屏幕大小來選擇合適的寬度，用于固定寬度并支持響應式布局，是全自動的。查看bootstrap.css中container的樣式定義以及在不同設備上的寬度，在不同屏幕它的寬度是不一樣的，大于等于斷點值后實施最大寬度。Bootstrap是移動設備優(yōu)先，所以在下面.container的樣式代碼中width:100%，是針對超小屏幕來講的，因為后面經過媒體查詢比如當設備寬度大于等于576px的時候，container的寬度是540px,而并不是某個大于等于576px的某個值。任務3.2使用容器.container{width:100%;padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto;}.代碼把container的左右外邊距（margin-right、margin-left）交由瀏覽器決定，但不管什么設備，margin-right:auto、margin-left:auto，就是居中設置，內邊距（padding）是固定寬度左右各15px。@media(min-width:576px){.container{max-width:540px;}}@media(min-width:768px){.container{max-width:720px;}}@media(min-width:992px){.container{max-width:960px;}}@media(min-width:1200px){.container{max-width:1140px;}}下面看一下.container類和.container-fluid類在不同屏幕上的情況。任務3.2使用容器在屏幕寬度大于576px的情況如圖3-8所示。圖3-8屏幕尺寸大于576px的情況在屏幕寬度大于768px的情況如圖3-9所示。圖3-9屏幕尺寸大于768px的情況下面看一下.container類和.container-fluid類在不同屏幕上的情況。任務3.2使用容器在屏幕寬度大于992px的情況如圖3-10所示圖3-10屏幕尺寸大于992px的情況在屏幕寬度大于1200px的情況如圖3-11所示。圖3-11屏幕尺寸大于1200px的情況三種容器的比較如下圖3-12。。任務3.2使用容器圖3-12三種容器的比較1、引入柵格系統(tǒng)任務3.3使用柵格系統(tǒng)進行頁面布局2、柵格參數(shù)3、列的自動布局4、多種屏幕情況柵格的使用5、柵格的對齊、排列與偏移6、列嵌套Bootstrap提供了一套響應式、移動設備優(yōu)先的流式柵格（網格）系統(tǒng)，隨著屏幕或視口（viewport）尺寸的增加，系統(tǒng)會自動分為12列。本次的任務就是使用柵格（網格）系統(tǒng)對頁面進行布局。Bootstrap是基于移動優(yōu)先的原則開發(fā)的，使用了一系列的媒體查詢（mediaqueries）方法，為我們的布局和界面創(chuàng)建自適應的的分界點。分界點大?。?76px、768px、992px、1200px。3.3.1引入柵格系統(tǒng)柵格系統(tǒng)是用來做什么的呢？它是專門分割網頁當中的寬度的。如果一個網頁它的寬度是900像素，我們要把它分成4等份，每份是1/4，每一份就是225像素，利用我們以前的知識，我們是如何制作的呢？（1）在body寫4個div<div><div>這里有一些文字是網頁內容</div><div>這里有一些文字是網頁內容</div><div>這里有一些文字是網頁內容</div><div>這里有一些文字是網頁內容</div></div>（2）瀏覽查看：4個div垂直堆疊排列，因為是塊元素獨占一行。（3）處理：設置每個塊寬度是25%（4）瀏覽查看：4個div垂直堆疊排列，因為“氣場”在。（5）處理：設置每個塊float：left。（6）打開“開發(fā)者工具”，調整瀏覽器寬度。3.3.1引入柵格系統(tǒng)(7)引入Bootstrap的樣式，然后為每個div增加一個類col-md-3，<divclass="col-md-3">，并且把原來的樣式取消,同時在外層的div增加類row,<divclass="row"><divclass="row"> <divclass="col-md-3">這里有一些文字是網頁內容</div> ……</div>圖3-14屏幕尺寸大于等于768px圖3-15屏幕尺寸小于768px通過前面的講解，我們知道可以為不同的屏幕做不同的柵格劃分，選擇不同的類名：.col-、.col-sm、.col-md、.col-lg、.col-xl,其中col代表column，x：extra(極度的),sm是small的縮寫,md是medium的縮寫，lg是large的縮寫。3.3.2柵格參數(shù)要使用柵格系統(tǒng)，一般是經過如下步驟：1） 添加視口。2）引入bootstrap.min.css（或者bootstrap.css）文件。3）將內容包裹在.container中。4)把每一行寫下div為row的類中。.row{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-right:-15px;margin-left:-15px;}3.3.2柵格參數(shù)通過查看類row，我們發(fā)現(xiàn)它是一個彈性盒布局，樣式為：margin-right:-15px;margin-left:-15px，思考一下為什么會設置一個負值15px作為左右外邊距呢？因為container類是一個容器，在放入其它內容時，左右加上15px內邊距會自然一些，但是，當.container包含柵格時，每個.col-*本身就有左右各15px內邊距，兩邊的.col-*如果再加上.container的15px內邊距，就與其它.container中包含的內容不一致了，所以將柵格包含在一個.row容器中，.row容器使用負外邊距將.container兩邊的內邊距抵消。如何完成如下布局，這是在中等屏幕（>=768px）的顯示情況，如圖3-17所示。3.3.3列的自動布局圖3-17大屏幕（>=768px）的顯示情況分析：將一個頁面分成如圖所示效果，有點像我們學習的表格，共5行，第一行有12列，每列1個柵格，第二行有4列，每列3個柵格，……完成第一行，<divclass="col-md-1">占1份</div>，寫出12個相同的結構，加上一個邊框樣式，.col-md-1{border:solid1pxblack;}?；蛘卟粚懰紪鸥駭?shù)，使用class="col-md"，寫12個相同結構。完成第二行，使用col-md-3，或者col-md，寫4個相同的結構，加上邊框。同樣道理，完成第三行，完成第四行，左邊列占3份，右邊列占9份，完成第五行：左、中、右各站占4份。用柵格系統(tǒng)布局一個網頁，效果如圖3-18所示：網頁頂部有一個LOGO區(qū)域,網頁中間是主體區(qū)，其中左邊欄為內容，右邊欄為導航，網頁下方還有一個頁腳區(qū)域（備注：以中屏幕md為例）。LOGO在第一行，占12個柵格，內容導航在第二行，各占9、3個柵格，頁腳在第三行，占12個柵格。也可以設計成圖3-19所示效果。3.3.3列的自動布局圖3-18用柵格系統(tǒng)布局示意圖使用col-{breakpoint}-auto斷點方法，可以實現(xiàn)根據(jù)內容的自然寬度來對列進行大小調整，實現(xiàn)可變寬度的彈性空間。Bootstrap的柵格系統(tǒng)包括五種寬度的預定義，用于構建復雜的響應布局，可以根據(jù)需要定義在特小.col、小.col-sm-*、中.col-md-*、大.col-lg-*、特大.col-xl-*五種屏幕(設備)下的樣式。3.3.4多種屏幕情況柵格的使用假設只有一行內容，該內容在特小屏幕上占12份,在小屏幕分別占6份，在中等屏幕分別占8份和4份，代碼如何寫?這就類似于設計柵格布局在手機上、平板、桌面如何顯示？其實在超小屏幕下只顯示一部=行內容，第二部分內容不顯示，需要在第二部分使用<divclass=col-smcol-md-4">增加類d-none和d-sm-block，即<divclass=d-noned-sm-blockcol-smcol-md-4">，這兩個類的具體介紹在下面章節(jié)進行。設計如下柵格布局。3.3.4多種屏幕情況柵格的使用1）在中等屏幕上顯示為6張圖片，如圖所示。2）在小屏幕上每行3張圖片，其余圖片換行顯示，如圖所示。3）在超小屏幕上每行顯示2張圖片，其余圖片換行顯示。每行2張圖片，如圖3.3.5柵格的對齊、排列與偏移2．可以使用.offset-*-*進行柵格偏移使用響應式的.offset-*-*柵格偏移方法。第一個星號(*)可以是sm、md、lg、xl，表示屏幕設備類型，第二個星號(*)可以是1到11的數(shù)字。也就是使用.offset-N或.offset-*-N設置列的偏移量，N表示柵格列數(shù)。比如為了在中等屏幕顯示器上使用偏移，請使用.offset-md-*類。這些類會把一個列的左外邊距（margin）增加*列。例如：.offset-md-4是把.col-md-4往右移了四列格。1．柵格的對齊柵格的對齊方式分為垂直對齊和水平對齊，以及當某行寬度不足100%時柵格的對齊方式，與彈性盒的對齊方式相似，具體內容參考章節(jié)“內容對齊與內容排列”。<divclass="container-fluid"><divclass="row"> <divclass="col-md-4bg-success">.col-md-4</div> <divclass="col-md-4offset-md-4bg-warning">.col-md-4.offset-md-4</div></div></div>圖3-26列偏移3.3.5柵格的對齊、排列與偏移3．使用邊界處理類調整元素之間距離，主要涉及諸如.m-*-*、.p-*-*、.m-*、.p-*等實用工具類，第一個星號(*)可以是sm、md、lg、xl，表示屏幕設備類型，第二個星號(*)可以是0到5的數(shù)字，或者是auto。可以使用.ml-auto和.mr-auto來左右對齊。如圖3-29所示。圖3-29<divclass="row"><divclass="col-md-4bg-success">.col-md-4</div><divclass="col-md-4ml-autobg-warning">.col-md-4.ml-auto</div></div><divclass="row"><divclass="col-md-3ml-md-autobg-success">.col-md-3.ml-md-auto</div><divclass="col-md-3ml-md-autobg-warning">.col-md-3.ml-md-auto</div></div><divclass="row"><divclass="col-automr-autobg-success">.col-auto.mr-auto</div><divclass="col-

溫馨提示

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

最新文檔

評論

0/150

提交評論