響應式web開發(fā)技術期末試題

1、響應式web開發(fā)技術期末試題1. 在Bootstrap中，對于較長的文本內(nèi)容，可以添加（ ）類，以省略號的形式表示超出容器的文本內(nèi)容。 A、.text-truncate(正確答案)B、white-space:nowrap;C、text-overflow:ellipsis;D、overflow:hidden;2. Bootstrap網(wǎng)格系統(tǒng)在各種屏幕和設備上的約定，大型屏幕設備的斷點范圍是（ ） A、576pB、768pxC、992px(正確答案)D、1200px3. Bootstrap中用來設置文本居中的類是（ ） A、.text-leftB、.text-center(正確答案)C、.text

2、-rightD、.text-justify4. 在Bootstrap中可以使用（ ）類選擇符，進行列偏移。 A、.deviation-B、.offset-(正確答案)C、.index-D、.order-5. 通常使用標簽，添加（ ）類來設計徽章 A、.badge(正確答案)B、.alertC、.progressD、.media6. 在Bootstrap中，定位元素表示相對定位的是（ ） A、.position-staticB、.position-relative(正確答案)C、.position-absoluteD、.position-fixed7. Bootstrap中使用（ ）類來清除浮動

3、 A、.clearfix(正確答案)B、.clear-floatC、.clearD、.float-none8. 在Bootstrap中，給圖片添加（ ）類，圖片大小會隨著父元素大小同步縮放，更加方便且不會輕易撐破其元素。 A、.img-fluid(正確答案)B、.img-thumbnailC、min-width:100%;D、width:auto;9. 卡片組件是Bootstrap新增的一組重要樣式，卡片陣列是（ ） A、.card-columnsB、.card-groupC、.card-deck(正確答案)D、.card10. 改變flex項目在flex容器中的包裹方式（可以實現(xiàn)彈性布局）下

4、列表示包裹的是（ ） A、.flex-nowrapB、.flex-wrap(正確答案)C、.flex-wrap-reverseD、.flex-fill11. 下列用于設置垂直上下外邊距為0.5rem的是（ ） A、我們生于紅旗之下B、長于春風之中C、目光所至皆為華夏D、五星閃耀皆為信仰(正確答案)12. 下列“ 為什么要讀書? 因為你要相信前方有一個更好的你在等著你！ ” 代碼表示:（ ） A、在任何類型的設備上，列的寬度都是占50%(正確答案)B、在小型屏幕設備上，列的寬度都是占50%C、在中型屏幕設備上，列的寬度都是占50%D、在大型屏幕設備上，列的寬度都是占50%13. 下列關于寬度正確

5、寫法的是（ ） A、盛年不再來B、一日難再晨C、及時當勉勵D、歲月不待人(正確答案)14. 下面代碼表示將來，社會迎接你的禮物，就是無數(shù)個打擊，而你能做的準備，就是在校園里練就一顆堅強的心臟。 （ ） A、這段文本是灰色背景，白色文本B、這段文本是白色背景，灰色文本C、這段文本是藍色背景，白色文本(正確答案)D、這段文本是藍色背景，灰色文本15. 圓角邊框顯示正圓效果的是（ ） A、.roundedB、.rounded-circle(正確答案)C、.rounded-pillD、.rounded-016. Bootstrap中的下拉菜單組件中功能選項必須包含在（ ）類容器中。 A、.dropdo

6、wnB、.dropdown-menu(正確答案)C、.dropdown-toggleD、.dropdown-item17. Bootstrap導航組件一般以列表結構為基礎進行設計，下列描述錯誤的是（ ） A、在上添加nav類B、在每個選項上添加nav-item類C、在每個鏈接上添加nav-link類D、.flex-column類可以設置導航的水平布局(正確答案)18. Bootstrap默認的網(wǎng)格和列間有邊距，一般是左右15px的margin或padding處理，可以使用（ ）類來消除它 A、border-0B、m-0C、no-gutters(正確答案)D、p-019. 下列flexbox彈性

7、布局容器表示內(nèi)容排列的是（ ） A、align-content-B、align-items-C、justify-content-(正確答案)D、align-self-20. Bootstrap中的下拉菜單組件必須包含在（ ）類容器中。 A、.dropdown(正確答案)B、.dropdown-menuC、.dropdown-toggleD、.dropdown-item21. Bootstrap包含了一個強大的移動優(yōu)先的網(wǎng)格系統(tǒng)，它是基于一個（ ）列的布局，有5種響應尺寸（對應不同的屏幕），用來創(chuàng)建各種形狀和尺寸的布局。 A、12(正確答案)B、11C、10D、922. Bootstrap使用媒

8、體查詢?yōu)椴季趾徒涌趧?chuàng)建合理的斷點，中型設備的媒體查詢是（ ） A、media (min-width: 576像素) . B、media (min-width: 768像素) . (正確答案)C、media (min-width: 992像素) . D、media (min-width: 1200像素) . 23. 使用（ ）類選擇符，可以對空間進行可視化排序，系統(tǒng)提供了12個級別的順序，在主流瀏覽器和設備寬度上都能生效。 A、.sort-B、.index-C、.offset-D、.order-(正確答案)24. 通用樣式類中，實現(xiàn)激活狀態(tài)的類是（ ）。 A、.active(正確答案)B、.di

9、sabledC、.nvalidD、.effective25. Bootstrap網(wǎng)格系統(tǒng)在各種屏幕和設備上的約定，中屏的類（.class）前綴是（ ） A、col-smB、col-lgC、col-md(正確答案)D、col-xl26. Bootstrap中，導航欄組件子組件中，用于折疊插件和導航切換行為的是（ ) A、.navbar-brandB、.navbar-navC、.navbar-toggler(正確答案)D、.collapse .navbar-collapse27. 下列代碼表示: 世界上好些最容易的事情中 拖延時間最不費力 A、在任何類型的設備上，一行水平排列二部分，左邊占8列，右

10、邊占4列B、在小型屏幕設備上，一行水平排列二部分，左邊占8列，右邊占4列C、在大型屏幕設備上，一行水平排列二部分，左邊占8列，右邊占4列D、在中型屏幕設備上，一行水平排列二部分，左邊占8列，右邊占4列(正確答案)28. 下列用于設置頂部內(nèi)邊距為1rem的是（ ） A、你所浪費的今天B、是許多人奢望的明天C、你所面對的現(xiàn)在D、是未來你回不去的曾經(jīng)(正確答案)29. Bootstrap提供了一些有代表意義的文本顏色類，下列顏色是灰色的是（ ） A、.text-primaryB、.text-secondary(正確答案)C、.text-successD、.text-danger30. Bootstr

11、ap是美國（ ）公司開發(fā)的 A、Sun MicrosystemsB、GitHubC、NetscapeD、Twitter(正確答案)31. 下列屬于Bootstrap特色的有（ ） A、支持響應式設計(正確答案)B、跨設備、跨瀏覽器(正確答案)C、可定制的jQuery插件(正確答案)D、提供開源代碼(正確答案)32. 下列關于Flexbox的說法正確的是（ ） A、Flex是Flexible Box的縮寫，意為彈性布局，用來為盒狀模型提供最大的靈活性(正確答案)B、不是所有容器都可以指定為Flex布局C、.d-inline-flex類設置對象為內(nèi)聯(lián)塊級彈性伸縮盒子(正確答案)D、.d-flex類

12、設置對象為彈性伸縮盒子(正確答案)33. Bootstrap中定義了兩個容器類，分別為（ ） A、.container(正確答案)B、.container-fluid(正確答案)C、divD、body34. 要使用Bootstrap前端開發(fā)框架開發(fā)響應式布局頁面，至少應該加載哪些文件（ ） A、bootstrap.min.css(正確答案)B、jquery-3.3.1.slim.js(正確答案)C、popper.min.js(正確答案)D、bootstrap.min.js(正確答案)35. 下列關于div容器標簽應用類樣式的解釋 ，正確的是（ ） A、該容器共應用了4種類樣式(正確答案)B、在

13、中型以下設備屏幕上（768px）時，獨占一整行12列網(wǎng)格系統(tǒng)(正確答案)C、在中型以上設備屏幕上（768px）時，占12列網(wǎng)格系統(tǒng)中的3列(正確答案)D、背景顏色為淺藍色，左浮動(正確答案)36. 下列不走心的努力,都是在敷衍自己. 代碼的顯示效果（ ） A、在sm設備上顯示（紅色背景，白色文本）B、在md設備上顯示（紅色背景，白色文本）(正確答案)C、在lg設備上顯示（紅色背景，白色文本）D、在xl設備上顯示（紅色背景，白色文本）37. 下列關于div容器標簽應用類樣式的解釋 ，正確的是（ ） A、獨占一行12列網(wǎng)格系統(tǒng)(正確答案)B、固定在頂部C、除了小屏幕設備顯示，其它情況都不顯示(正確

14、答案)D、僅設置了頂部邊框 垂直內(nèi)邊距為0.5rem 背景為亮灰色(正確答案)38. 下列關于圖像標簽應用類樣式的解釋 ，正確的是（ ） A、圖像設置響應式布局，圖片大小隨著父元素大小同步縮放(正確答案)B、該圖像設置為邊框(正確答案)C、圖像邊框設置為灰色(正確答案)D、內(nèi)邊距為0.5rem，頂外邊距為1rem(正確答案)39. 引用.card-body樣式，可以建立卡片的內(nèi)容主體，下列屬于卡片主體.card-body內(nèi)容的類有（ ） A、.card-title(正確答案)B、.card-text(正確答案)C、.card-link(正確答案)D、.card-footer40. 下列屬于輪播組件類樣式的有（ ） A、.carousel slide(正確答案)B、.carousel-indicators(正確答案)C、.carousel-inner(正確答案)D、.carousel-item(正確答案)41. container容器根據(jù)屏幕寬度的不同，會利用媒體查詢設定固定的寬度，當改變?yōu)g覽器的大小時，頁面會呈現(xiàn)階段性變化。但Container容器的最大寬度在每個斷點并不發(fā)生變化。（ ） A、對B、錯(正確答案)42. 雖然Bootstrap使用em或rem來定義大多數(shù)尺寸，但網(wǎng)格斷點和容器寬度使用的是px，這是因為視口寬度以像素為單位。（ ）