《bootstrap练习题》由会员分享，可在线阅读，更多相关《bootstrap练习题（14页珍藏版）》请在金锄头文库上搜索。
1、bootstrap练习题基本信息：矩阵文本题*班 级：_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _姓 名：_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _学号：_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _1、下列关于Bootstrap说法错误的是()?单选题*A、移动优先B、响应式Web设计C、所有版本的浏览器都支持D、拥有丰富的组件和插件2、Bootstrap插件全部依赖()?单选题*A、JavaScriptB、jQueryC、Angular JSD、Vue JS3、使 用()表示在中型屏幕上向右偏移3 列
2、？单选题A s.offset-md-3 需答案）B、.offset-md-2C、.offset-sm-3Ds.offset-34、下列选项中，用于设置100%宽度，占据全部视口（viewport）的容器代码正确的 是（）？单选题*A、.B、.E确答案）C、.D、.5、下面代码表示（）等宽的布局？.单选题*A、1行 1列B、1行 2 列C、1行 3 列 确 答案）D、1行 4 列6、下列哪个不是bootstrap4的 容 器 类()?单选题*A、.containerB、.container-fluidC、.container-xsD、.container-sm7、下面关于bootstrap4的网
3、格系统说法错误的是()单选题*A、Bootstrap4包含了一个强大的移动优先的网格系统，它有5 种响应尺寸B、网格系统使用行来创建水平的列组C、网格系统是一个用于响应式设计的组件D、网格系统中的列通过指定112的值来表示其跨越的范围8、下列哪个不是bootstrap4的 容 器 类()?单选题*A、.containerB、.container-fluidC、.container-xs IE确答案)D、.container-sm9、使 用()属性设置弹窗的内容 单选题*A、titleB、data-content（正确答案）C、data-placementD、data-toggle10、下 列
4、0类可以实现关闭模态框 单选题】*A、data-toggle=nmodalB、data-dismiss=modar,C、class=modar,D、class=moda-dialog11、下 列（）类用于轮播在切换时滑动的效果 单选题*A、showB、slideC、openD、fade in12、用于定义轮播在页面加载时就开始自动播放的代码是（）。单选题*A、class=,carouselB、class=slideC、data-toggle=carouselHD、data-ride=carousel13、下列关于折叠插件说法错误的是（）。单选题*A、给触发元素添加data-toggle=col
5、lapse的作用是调用折叠B、一个触发器只能控制一个目标元素的显示或隐藏C、给包含框容器添加collapse类可以隐藏内容D、给包含框容器添加collapsing类可以实现带动态效果的切换14、Bootstrap实现分页的原理不包括（）。单选题*A、ul 元素上添力口 pagination类B、li 元素上添加page-item类C、超链接中添加page-link类D、以上都不是15、给表单元素添加圆角属性和阴影效果的是（）类 单选题*A、form-controlB、form-groupC、form-checkD、form-inline16、给输入框前面添加额外元素，需 要 使 用（）类。单选
6、题*A、input-groupB、input-group-textC、input-group-prependD、input-group-append17、下列哪个类不是定义警告框(也叫信息提示框)()o 单选题*A、alert-lightB、alert-darkC、alert-dangerD、alert-default18、给 list-group-item添 加()类使其呈现活动状态 单选题*A、active:B、disabledC、showD、open19、下列不属于Bootstrap的 卡 片(card)的相关类的是()。单选题*A、card-titleB、card-bodyC、card
7、-footerD、card-content20、设置徽章的水平内边距和较大的圆角边框，使徽章看起来更圆润，需要使用()类 单选题*A、badge-pillB、badgeC、badge-primaryD、badge-secondary21、下列关于进度条说法错误的是（）单选题*A、progress类用于定义进度条的外层容器B s progress-bar用于定义进度条样式C、1个进度组件中只能包含1个进度条D、给进度条元素添加progress-bar-striped类可以得到带条纹效果的进度条22、下列关于按钮样式说法错误的是（）单选题*A、应用了 btn-primary类样式的按钮背景颜色是亮
8、蓝色B、应用了 btn-success类样式的按钮背景颜色是亮绿色C、应用了 btn-secondary类样式的按钮边框颜色是灰色D、应用了 btn-danger类样式的按钮文字颜色是红色23、下列关于按钮组说法错误的是（）单选题*A、按钮组是由btn-group类定义的B、工具栏按钮组是多个基本按钮组放在一个btn-toolbar类容器中C、Bootstrap提供了包括btn-group-sm、btn-group-md等多种类来控制按钮组下的每个子按钮大小:D、Bootstr叩提供了相应的类可以使一组按钮垂直排列o24、滚动监听哪个属性可以设置滚动条距离顶端的位置距离（）单选题*A.data
9、-offsetYB.data-offsetC.data-spyD.data-dismiss25、实现导航水平平铺的是（）类 单选题*A、justify-content-centerB、nav-centerC、flex-columnD、nav-fill26、实现标签页导航垂直方向排列的是（）类 单选题*A、nav-verticalB、nav-tabsC、flex-column 确答案）D、nav-fill27、bootstrap4 重，对于 tooltip 的元素，data-placement 的作用是。单选题*A、工具提示条的显示大小B.工具提示条的显示位置C、工具提示条的显不动国D.工具提示
10、条的显示颜色28、实现导航栏固定在顶部的是()类 单选题*A.fixed-topB.fixed-bottomC.topD.bottom29、创建一个没有圆角的全屏幕(巨幕)，需要添加jumbotromfluid类。它的实现原理不包括0 单选题*A.设置了 padding-left:O；B.设置了 padding-right:()；C.设置了 border-radius:0;D、设置了 border：none E确答案)30、弹性布局属于下列哪项技术的内容()单选题*A、HTMLB、CSS(正确答案)C、JavaScriptD、以上都不是31、在弹性布局中，用于设置子元素的排列方向的类不包括()
11、单选题*A、flex-columnB、flex-rowC、flex-row-reverseD、flex-fill(正确答案)32、下 列()可以使表格水平溢出时出现水平滚动条 单选题*A、.table-responsive 正确答案)B、.table-smC、.table-stripedD、.table-hover33、下 列()可以清除容器中浮动的内容 单选题*A、.clearB、.clearfix(正确答案)C、.floatD、.float-none34、下 列()组合类可以设置元素仅在md屏幕时可见 单选题*A、.d-md-none.d-lg-blockBx.d-blockC、.d-no
12、ne.d-md-block.d-lg-noneD、.d-block.d-sm-none35、.img.fluid类可以让图片支持响应式布局，它的实现原理是()单选题A、设置了 max-width:100%;和 height:auto;B、设置了 max-width:100%;和 height:100%；C、设置了 max-width:auto;和 height:100%;D、设置了 max-width:auto;和 height:auto;36、关于轮播图说法正确的是()单选题*A、轮播图的页面切换索引从1开始B、下一页的实现方式 data-slide-to=prev”C、可以使用carous
13、el-caption类为图片添加描述D、上一页的实现方式dataslideto=“l”37、Bootstrap4中可以把导航栏固定在顶部的类是()单选题*A、navbar-fixed-topB、navbar-inverseC、fixed-top(正确答案)D、fixed-bottom38、如果你不需要模态框弹出时的动画效果(淡入淡出效果)怎样实现()单选题*A.删掉.fade类即可(正确答案)B.添加删掉.fade类即可C.去掉.active类即可D.去掉.in类即可39、怎样实现bootstrap的滚动监听事件()单选题*A.添加 data-toggle=scrollB.添加 data-ta
14、rget=scrollC.添加 data-spy=scrollD、添加 data-dismiss=scroll40、Bootstrap4网格系统中，平板的屏幕尺寸(=576px)对应的类是()单选题*A、col sm(正确答案)B、col-mdC、col-lgD、col-xl41、网格系统自动会将屏幕最多分为()歹 M单选题*A、10B、12C、13D、642、bootstrap4如何创建输入框组 单选题*A、div元素上添加.btn-block类B、div元素上添加.btn-group类C、div元素上添加.input-group类D、div元素上添加.btn-menu类43、Bootstr
15、ap中怎样修改轮播图的页面切换的时间间隔？单选题*A、data-intervalB、data-pauseC、data-wrapD、data-time44、关于Bootstrap4的布局容器说法正确的有()*A、.container类用于固定宽度并支持响应式布局的容器。B、.container-fluid 类用于 100%宽度，占据全部视口(viewport)Cx.container fD.container-fluid 可以互相嵌套D.布局容器仅提供了.container和.container-fluid两种容器45、下列关于栅格系统说法正确的有（）*A、栅格系统每一行不能少于12列B、通过“
16、行（row）”在水平方向创建一组“列（column）B （HC、网格每一行需要放在设置了.container（固定宽度）或.container-fluid（全屏宽度）类的容器中，这样就可以自动设置一些外边距与内边距。上D、如果一“行（row）”中包含了的“列（column）”大 于 1 2,多余的“列（column）”所在的元素将被作为一个整体另起一行排列。46、简述Bootstrap网 格 系 统（Grid System）的工作原理 填空题*（答 案：参考答案：boolslrap的网格系统使用一系列容器类、行和列的组合来创建布局。布局的规则如下：1、网格每一行需要放在设置了.container（固定宽度）或.container-fluid（全屏宽度）类的容器中，以便自动设置一些外边距与内边距。2、使用行来创建水平的列组3、内容需要放置在列中，并且只有列可以是行的直接子节点4、预定义的类如.row和.col-sm-4可用于快速制作网格布局5、列通过填充创建列内容之间的间隙。这个间隙是通过.rows类上的负边距设置第一行和最后一列的偏移6、网格列是通过指定112的值来表示其跨越的范围）4
