1.Which is true about Bootstrap?
A. Bootstrap is the most popular and powerful front-end (HTML, CSS, and JavaScript) framework for faster and easier responsive web development.
B. Bootstrap is a powerful front-end framework for faster and easier web development
C. It includes HTML and CSS based design templates for creating common user interface components like forms, buttons, navigations, dropdowns and so on.
D. All of them
2.Which is not a feature of Bootstrap?
A. Mobile first approach
B. Browser support
C. Easy to get started
D. Irresponsive design
3.What is not true about responsive design?
A. Bootstrap's responsive CSS adjusts to Desktops, Tablets and Mobiles
B. The end user need not worry about the device being used to access the web site
C. The end user continues to get the different experience across.
D. All of them
4.The following files do not belong to the bootstrap template?
A. jquery.js
B. bootstrap.min.js
C. bootstrap.min.css
D. bootstrap.java
5.In the statement <meta name="viewport" content="width-device-width, initial-scale=1">
A- The width-device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device).
B- The initial-scale=1 part sets the initial zoom level when the page is first loaded by the browser
A. Both are true
B. Both are false
C. A is false
D. B is false
6.A- The .container class provides a responsive full width container
B-The.container-fluid class provides a fixed width container, spanning the entire width of the viewport)
A. Both are true
B. Both are false
C. A is true
D. B is true
7.Which is/ are the correct rule of Bootstrap grid system?
A. Rows must be placed within the .container class in order to get proper alignment and padding(padding).
B. Use rows to create horizontal groups of columns.
C. The content should be placed within a column, and only the column can be a direct child ele ment of a row
D. All of them
8.Which example will result in a 25%/75% split on small devices and a 50%/50% split on medium (and large) devices?
9.Which class is used to increase the left margin of a column to the column?
A. Col-md-*
B. Col-md-offset-*
C. Col-md-push-*
D. Col- md-pull-*
10.Which elements defines the style of the element as a dashed border that appears at the bottom of the text, and displays the full text when th e mouse hovers over it?
A. <Emphasize>
B. <abbr>
C. <lead>
D. <abbreviation>
11.Which is not a list style in bootstrap?
A. List-unstyled
B. List-inlined
C. List-ordered
D. DI-horizontal
12.Which class is used for for tablets - screens equal to or greater than 768px wide?
A. Col-sm
B. Col-md
C. Col-lg
D. Col-xs
13.Which class is used to set text alignment and wrap text in a paragraph that is out of part of the screen?
A. Text-inline
B. Text-justify
C. Text-nowrap
D. Text-overcase
14.Which class is used add stripes in the form of zebra lines in BS tables?()
A. Table-bordered
B. Table-hover
C. Table-striped
D. Table-responsive
15.Which class is used to apply a hover color to a particular row or cell?
A. Active B. Danger C. Info D. Warning
16.Which is not type of form layout in BS?
A. Vertical form B. Horizontal form C. Inline form D. Diagonal form
17.Which class is used of optimum spacing on webpage?
A. Form-inline
B. Form -horizontal
C. Form-group
D. Form-control
18.With which form type, we need to use class "form-group" ?
A. Vertical form B. Horizontal form C. Inline form D. All of them
19.Which type of input is accepted in input box?
A. Color B. Search C. Password D. All of them
20.Which is not a correct class for Background in BS?
A. Bg-danger B. Bq-success C. Bg-black D. Bg-primary
21.In which type of form, we need to Add class .control-label to all <label> elements?
A. Inline form
B. Horizontal form
C. Vertical form
D. All of them
22.A- The .input-group class is a container to enhance an input by adding an icon, text or a button in front or behind it as a "help text".
B-The .input-group-addon class attaches an icon or help text next to the input field.
A. Both are true.
B. Both are false.
C. A is false
D.B is false
23.Which attribute is used to prevent user input to an input?
A. Disabled B. Inactive C. Readonly D. None of them
24.Which is not a class to set the size of a button?
A. Btn-lg
B. Btn-md
C. Btn-sm
D. Btn-xs
25.Which of the following CSS classes scan set the picture fillet?
A. img-rounded
B. img-circle
C. img-thumbnail
D. img-responsive
26.Which of the following bootstrap style of button creates a default/ standard button?
A.btn
B.btn-primary
C.btn-success
D.btn-info
27.Which creates a block-level button that spans the full width of the parent element?
A. Btn-xs. B. Btn-lg C. Btn-block D. Btn-md
28.Which one of them is not a validation style class?
A. Has-error B. Has-success C. Has-warning D. Has-feedback
29.Which of the following bootstrap style of button creates a default/ standard table?
A .table
B .table-striped
C. table-bordered
D .table-hover
30.Which tag is used to add a description or summary of the contents of the table's storage?
A. <thead> B.<tbody> C.<caption> D.< str>
31.Which tag is used to set text to italics?
A. <strong> B. <small> C. <em>D. <None of them>
32.The .container-fluid class provides ().
A. Table format
B. To create a form
C. Full width container
D. Fixed width container
33.Bootstrap' s grid allows up to
A. 6 columns across the page
B. 12 columns across the page
C. 3 columns across the page
D. 1 column across the page
34.Which is the default form in Bootstrap?
A. Horizontal form B. Vertical form C. Inline form D. None of them
35.input-lg provides ()
A. To make width size.
B. To make height sizeo
C. To make width and height size
D. To make character entry size
36.In the initial-scale=1 part sets
A. To make zoom in mobile only
B. To make zoom in desktop only
C. Initial zoom level when the page is first loaded by browser
D. None of them
37.Which class is used to create a button as a link in bootstrap?()
A.btn-hyperlink
B.btn-link (correct)
C.btn-url
D.btn-anchor
38.Which of the following class makes circle image?
A.img-circle-corner B. img-crl C. img-circle D. .img-rounded
39.Change the order of the grid columns with
A.col-md-front-* and .col-md-back-*
B.col-md-riaht-* and .col-md-left-*
C.col-.md-push-* and .col-md-pull-*
D. None of them
40.Which class is used to the inner padding of the row is cut in half to make the table look more Compact?A..table-responsive
B. table-condensed
C.table-compact
D. None of them
題：
1.Which of the following button group classes can be applied to the resizing of a button group without having to resize each button?
a.btn-group
b.btn-toolbar
c.btn-group-lg
d.btn-group-vertical
2.Which of the following CSS classes is used to create a encapsulated navigation menu?
a.nav-tabs
b.nav-pills
c.nav-stacked
d.nav-justified
3.Which of the following CSS classes is used to display pagination on a page?
a.pagination
b.active
c.pagination-lg
d.pagination-sm
4.Which of the following is not provided by Bootstrap for warning?
a.alert-success
b.alert-info
c.alert-warning
d.alert-good
5.Which of the following does not belong to the class Bootstrap provides for the progress bar?
a. progress
b.progress-bar
c. progress-bar-success
d. progress-bar-faile
6.Which of the following is not an advantage of Bootstrap
A. Mobile devices are preferred.
B. Browser support
C. Responsive design
D. use javascript
7.What is wrong with the following description of the Bootstrap package?
A. Bootstrap provides a basic structure with a grid system, link style, and background
B. Bootstrap contains more than a dozen reusable components for creating images, drop-down menus, navigation, warning boxes, pop-up boxes, and more
C. Bootstrap does not include jQuery plug-ins
D. Bootstrap comes with the following features: global CSS Settings, defining basic HTML element styles, and extensible classes
8. Which of the following is not a compiled version of Bootstrap?
A. Compiled CSS and Js (bootstrap.*)
B. Compiled and compressed CSS and Js (bootstrap.min.*)
C. The font from Glyphicons
D.Jquery source
9.What is the following incorrect description of the Bootstrap source code?
A. dist/folder contains uncompiled code
B. less /, is/ and fonts/ Files source code for Bootstrap CSS, Js, and icon fonts respectively
C.dist/folder contains precompiled code
D. docs-assets /, examples/ and all *.html files are Bootstrap documents
10.The following files are not bootstrap templates?
a. jquery.js
b. bootstrap.min.js.
c.bootstrap.min.css
d. bootstrap.java
11.What is wrong about how the Bootstrap Grid System works?
A. The row must be placed inside the. Container class
B. Use rows to create horizontal groups of columns
C. Create space between column contents using padding
D. A grid system is created by specifying twelve vertical columns that are available
12.Which of the following CSS classes enables mouse hover on any line within <tbody>?
a.table-striped
b.table-bordered
c.table-hover
d.table-condensed
13.Which of the following CSS classes represents a button operation for a dangerous action?
a.btn-danger
b.btn-warning
c.btn-info
d.btn-success
14.Which of the following CSS classes can set the rounded corners of an image?
a.img-rounded
b.img-circle
c.img-thumbnail
d.img-responsive
15.Which of the following is not part of the bootstrap form?
A. Vertical form (default)
B. Inline forms
C. Horizontal form
D. Circular forms
網上找題
單選
1, Bootstrap插件全部依賴是( )
A. JavaScript
B. JQuery
C. Angular JS
D. Node JS
2·柵格系統小屏幕使用的類前綴是( )
A.col-xs
B.col-sm
C.col-md
D.col-lg
3,如下代碼中,想要在超小屏幕和小屏幕顯示兩列,在中屏幕和大屏幕顯示三列,三個div的class正確的寫法是( )
<div>
<div>item1</div>
<div> item2</div>
<div> item3</div>
/div>
A. col-sm-6 col-md-4 col-sm-6 col-md-4 col-sm-6 col-md-4
B. col-sm-6 col-lg-4 col-sm-6 col-lg-4 col-sm-6 col-lg-4
C. col-xs-6 col-lg-4 col-xs-6 col-lg-4 col-xs-6 col-lg-4
D. col-xs-6 col-md-4 col-xs-6 col-md-4 col-xs-6 col-md-4
4·下面可以實現列偏移的類是( )
A.col-md-offset-*
B.col-md-push
C.col-md-pull-*
D.col-md-move-*
5.表單元素要加上什麼類,才能給表單添加圓角屬性,和陰影效果()
A. form-group
B. form-horizontal
C. form-inline
D. form-control
6.img-responsive類可以讓圖片支持響應式布局,它的實現原理是( )
A.設置了max-width: 100%和height: auto;
B.設置了max-width: 100%;和height: 100%;
C.設置了width: auto;和max-height: 100%;
D.設置了width: auto;和height: auto;
7.輸入框組想加上圖標,可以實現對表單控制項的擴展的類是( )
A. .input-group-btn
B. .input-group-addon
C. form-control
D. input-group-extra
8.標籤頁垂直方向堆疊排列,需要添加的類()
A. nav-vertical
B. nav-tabs
C. nav-pills
D. nav-stacked
9.可以把導航固定在頂部的類是()
A. navbar-fixed-top
B. navbar-fixed-bottom
C. navbar-static-top
D. navbar-inverse
10.導航條在小屏幕會被摺疊,實現顯示和摺疊功能的按鈕需要加什麼()
A.摺疊按鈕加data-toggle=, collapsed' ,摺疊容器需要加collapsed類
B.摺疊按鈕加data-toggle=' collapse',摺疊容器需要加collapse類
C.摺疊按鈕加data-toggle=, scrolll, ,摺疊容器需要加collapse類
D.摺疊按鈕加data-spy='scroll' ,摺疊容器需要加collapse類
11.實現nav平鋪整行,應該加哪個類()
A. nav-center
B. nav-justified
C. nav-left
D. nav-right
12.模態框提供了哪些尺寸()
A. modal-xs modal-sm modal-md modal-lg
B. modal-sm modal-md modal-lg
C. modal-xs modal-sm
D. modal-sm modal-lg
13.如果你不需要模態框彈出時的動畫效果(淡入淡出效果)怎樣實現( )
A.刪掉fade類即可
B.添加刪掉fade類即可
C.去掉.active類即可
D.去掉.in類即可
14,怎樣實現滾動監聽事件()
A.添加data-toggle= "scroll"
B.添加data-target=' scroll'
C.添加data-spy=, scroll'
D.添加data-dismiss=" scroll"
15.關閉modal的按鈕應該加什麼屬性()
A. data-dismiss=' modal'
B.data-toggle=' modal'
C. data-spy=' modal'
D. data-hide='true'
16,.下列不屬於panel的三要素是()
A. panel-heading
B. panel-body
C. panel-footer
D. panel-content
17·用JavaScript怎樣讓輪播圖從第二個圖片開始播放()
A. $('.carousel').carousel()
B. S('.carousel').carousel(0)
C. $('.carousel").carousel(1)
D.$('.carousel').carousel(2)
18.使用collapse實現手風琴,通過哪個屬性關聯整個面板組()
A. data-parent
B. data-toggle
C. data-target
D. href
19.如何讓輪播圖在頁面切換時有動畫( )
A.添加in類
B.添加fade類
c.添加active類
D.添加slide類
20·關於輪播圖說法正確的是()
A.輪播圖的頁面切換索引從1開始
B.下一頁實現方式data-slide-to= "prev"
C.可以使用carousel-caption類為圖片添加描述
D.上一頁實現方式data-slide-to= "-1"
21.對於tooltip的元素, data-placement的作用是()
A.工具提示條的顯示大小
B.工具提示條的顯示位置
C.工具提示條的顯示動畫
D.工具提示條的顯示顏色
22.彈出框元素: <button type="button" data-toggle="popover" id=" mypopover"title="this is my Popove element" data-animation'=truedata-content-"And some amazing content."點我彈出/隱藏弘出框</button>,對於title和data-content屬性的作用,錯誤的是()
A. title可以不支持html標籤
B. title是彈出框的標題
C. data-content是彈出框的內容
D. data-content可以支持html標籤
23.滾動監聽哪個屬性可以設置滾動條距離頂端的位置距離( )
A. data-offsetY
B. data-offset
C.data-spy
D. data-dismiss
24.標籤頁加了fade給每個tab-pane使切換標籤頁時有動畫,那麼怎樣讓第一個默認顯示出來()
A.添加類active
B.添加類show
C.添加類in
D.添加類fadeln
25.怎樣養tooltips通過點擊事件彈出( )
A. data-placement=" click"
B. data-delay=" click"
C. data-title="click"
D.data-trigger=" click"
26.怎樣修改輪播圖的頁面切換的時間間隔?
A.data-interval
B.data-pause
C.data- wrap
D.data-time
27.下列說法正確的是( )
A. button組件能同時支持工具提示和控制模態框
B.不要在同一個元素上同時使用多個插件的data屬性
C.使用bootstrap插件不需要引用jQuery
D. bootstrap插件不可以單個引入
28.怎樣只關閉警告框的data-API ( )
A. $(document).off('.data-api')
B.$(document).off('.alert-data-api')
C. $(document).off('.data-api.alert')
D.$(document).off('.alert.data-api)
29.於分頁組件說法錯誤的是()
A.使用類pagination來實現
B.pagination-lg..pagination-sm類提供了額外可供選擇的尺寸
C.disabled類不可用於翻頁中的連結
D. previous類和類next可以表示上一頁、下一頁
30.下列哪個類起徽章的作用()
A.page-header
B. jumbotron
C. badge
D. thumbnail
31·怎樣為進度條創建條紋效果( )
A.添加類progress-bar-striped
B.添加類progress-bar
C.添加類progress-striped
D.添加類progressBar-striped"
32.製作tab切換,要顯示的內容要放在下方哪個容器裡面
A. content B. tab-group C. tab-body D. tab-content
多選
1.關於bootstrap的布局容器說法正確的有()
A.container類用於固定寬度並支持響應式布局的容器
B.container-fluid類用於100%寬度,佔據全部視口(viewport)的容器
C.container和.container-fluid可以互相嵌套
D.布局容器僅提供了.container和.container-fluid兩種容器
2.如果想要繪製帶邊框的條紋狀的表格需要添加的類有( )
A. table-condensed B. table-hover C. table-bordered D. table-striped
3.下列關於柵格系統說法正確的有( )
A.柵格系統每一行不能少於12列
B.通過「行(row) "在水平方向創建一組「列(column)
C.行(row )"必須包含在.container (固定寬度)或.container-fluid(100%寬度)中,以便為其賦予合適的排列(aligment)和內補padding)
D.如果一「行(row) "中包含了的「列(column) "大於12,多餘的「列(column) "所在的元素將被作為一個整體另起一行排列
4.下列哪些是輔助類 ()
A.text-muted B.text-primary C.text-info D.text-danger