前端面试汇总（Bootstrap框架）

最新推荐文章于 2024-08-02 22:17:41 发布

Eugene.Tom.Lee

最新推荐文章于 2024-08-02 22:17:41 发布

阅读量1.4k

点赞数

文章标签： bootstrap

本文链接：https://blog.csdn.net/weixin_42677762/article/details/109124899

版权

前端面试汇总（Bootstrap框架）

1 什么是Bootstrap？以及为什么要使⽤Bootstrap？
Bootstrap是⼀个⽤于快速开发 Web 应⽤程序和⽹站的前端框架。
Bootstrap是基于HTML 、 CSS 、 JAVASCRIPT 的
Bootstrap 具有移动设备优先、浏览器⽀持良好、容易上⼿、响应式设计等优点，所以
Bootstrap 被⼴泛应⽤
2 使⽤Bootstrap时，要声明的⽂档类型是什么？以及为什么要这样声明？
使⽤Bootstrap时，需要使⽤HTML5⽂档类型（ Doctype ）。 <!DOCTYPE html>
因为 Bootstrap使⽤了⼀些HTML5元素和CSS属性，如果在 Bootstrap创建的⽹⻚开头不使⽤ HTML5 的⽂档类型（ Doctype），可能会⾯临⼀些浏览器显示不⼀致的
问题，甚⾄可能⾯临⼀些特定情境下的不⼀致，以致于代码不能通过 W3C标准的验证
3 什么是Bootstrap⽹格系统
Bootstrap包含了⼀个响应式的、移动设备优先的、不固定的⽹格系统，可以随着设备或视⼝⼤⼩的增加⽽适当地扩展到 12列。它包含了⽤于简单的布局选项的预定义类，也包含了⽤于⽣成更多语义布局的功能强⼤的混合类响应式⽹格系统随着屏幕或视⼝（ viewport）尺⼨的增加，系统会⾃动分为最多12列。
4 Bootstrap⽹格系统（Grid System）的⼯作原理
（1）⾏必须放置在 .container class内，以便获得适当的对⻬（ alignment）和内边距（padding）。
（2）使⽤⾏来创建列的⽔平组。
（3）内容应该放置在列内，且唯有列可以是⾏的直接⼦元素。（4）预定义的⽹格类，⽐如 .row和 .col-xs-4，可⽤于快速创建⽹格布局。 LESS
混合类可⽤于更多语义布局。
（5）列通过内边距（ padding）来创建列内容之间的间隙。该内边距是通过.rows上的外边距（margin）取负，表示第⼀列和最后⼀列的⾏偏移。
（6）⽹格系统是通过指定您想要横跨的⼗⼆个可⽤的列来创建的。例如，要创建三个相等的列，则使⽤三个 .col-xs-4
5 对于各类尺⼨的设备，Bootstrap设置的class前缀分别是什么超⼩设备⼿机（ <768px ）： .col-xs-*
⼩型设备平板电脑（>=768px ）： .col-sm-*
中型设备台式电脑（>=992px ）： .col-md-*
⼤型设备台式电脑（>=1200px ）： .col-lg-*
6 Bootstrap ⽹格系统列与列之间的间隙宽度是多少
间隙宽度为30px（⼀个列的每边分别是15px）
7 如果需要在⼀个标题的旁边创建副标题，可以怎样操作
在元素两旁添加<small>，或者添加.small的 class
8 ⽤Bootstrap，如何设置⽂字的对⻬⽅式？
class="text-center"设置居中⽂本
class="text-right"设置向右对⻬⽂本
class="text-left"设置向左对⻬⽂本
9 Bootstrap如何设置响应式表格？
增加class="table-responsive"
10 使⽤Bootstrap创建垂直表单的基本步骤？
（1）向⽗<form>元素添加 role="form"；
（2）把标签和控件放在⼀个带有class="form-group" 的 <div> 中，这是获取最佳间距所必需的；
（3）向所有的⽂本元素<input> 、 <textarea> 、 <select> 添加 class="form-control"
11 使⽤Bootstrap创建⽔平表单的基本步骤？
（1）向⽗<form>元素添加 class="form-horizontal"；
（2）把标签和控件放在⼀个带有 class="form-group"的 <div>中；
（3）向标签添加 class="control-label"。
12 使⽤Bootstrap如何创建表单控件的帮助⽂本？
增加class="help-block"的 span 标签或p标签。
13 使⽤Bootstrap激活或禁⽤按钮要如何操作？
激活按钮：给按钮增加.active的class
禁⽤按钮：给按钮增加disabled="disabled"的属性
14 Bootstrap有哪些关于的class？
（1）.img-rounded为图⽚添加圆⻆
（2） .img-circle 将图⽚变为圆形（3） .img-thumbnail 缩略图功能（4）.img-responsive图⽚响应式 (将很好地扩展到⽗元素)
15Bootstrap中有关元素浮动及清除浮动的class？
（1） class="pull-left"元素浮动到左边
（2）class="pull-right"元素浮动到右边
（3） class="clearfix" 清除浮动
16 除了屏幕阅读器外，其他设备上隐藏元素的class？
class="sr-only"
17Bootstrap如何制作下拉菜单？
（1）将下拉菜单包裹在class="dropdown" 的 <div>中；
（2）在触发下拉菜单的按钮中添加：
class="btn dropdown-toggle"
id="dropdownMenu1" data-toggle="dropdown"
（3）在包裹下拉菜单的ul中添加：class="dropdown-menu" ````role="menu" aria-labelledby="dropdownMenu1"
（4）在下拉菜单的列表项中添加：role="presentation"。其中，下拉菜单的标题要添加class="dropdown-header"，选项部分要添加 tabindex="-1" 。
18 Bootstrap如何制作按钮组？以及⽔平按钮组和垂直按钮组的优先级？
（1）⽤ class="btn-group" 的<div>去包裹按钮组；class="btn-group-vertical"可设置垂直按钮组。
（2）btn-group的优先级⾼于btn-group-vertical的优先级。
19Bootstrap如何设置按钮的下拉菜单？
在⼀个.btn-group 中放置按钮和下拉菜单即可。
20Bootstrap中的输⼊框组如何制作？
（1）把前缀或者后缀元素放在⼀个带有 class="input-group" 中的 <div>中
（2）在该<div> 内，在class="input-group-addon" 的 <span>⾥⾯放置额外的内容；
（3）把 <span>放在<input>元素的前⾯或后⾯。
21Bootstrap中的导航都有哪些？
（1）导航元素：有 class="nav nav-tabs"的标签⻚导航，还有 class="nav nav-pills"的胶囊式标签⻚导航；
（2）导航栏： class="navbar navbar-default" role="navigation"；（3）⾯包屑导航：class="breadcrumb"
22Bootstrap中设置分⻚的class？
默认的分⻚： class="pagination"
默认的翻⻚： class=“pager”
23Bootstrap中显示标签的class？
class=“label”
24 Bootstrap中如何制作徽章？
<span class="badge">26</span>
25 Bootstrap中超⼤屏幕的作⽤是什么？
设置class="jumbotron"可以制作超⼤屏幕，该组件可以增加标题的⼤⼩并增加更多的外边距

每天一句中文式外语

俄语

 1、Где находится магазин？
 [各界 拿伙几嚓 马嘎刃]？
哪里有商店？
2、Как пройти (проехать) к магазину？
 [嘎可 普拉一极[普拉也哈其]可 马嘎刃努]？
到商店怎么走？
3、Открыт ли уже(закрыт ли ещё) магазин？
 [阿特可雷特 里 乌热[萨可雷特 里 亦肖]马嘎刃]？
商店已经开门了（已关门了）吗？
4、Можно показать это пальто (эти брюки, этот костюм…)? 
[毛日那 八嘎萨其 艾达把利多[艾及不流给 艾达特 嘎斯旧木]]
可以看看这件大衣（这件西服……）吗？
5、Можно примерить эти чёрные туфли (кожаное пальто)?
[毛日那 普里灭力气 埃及 瞧勒内也 度夫里[果热那也 把利朵]]
可以试试这双黑皮鞋（皮大衣……）吗？
6、Сколько стоит эта кукла (этот фотоаппарат, эти часы…)？
[丝过里嘎 丝多一特 艾大 古柯拉[艾大特 发达阿扒拉特，埃及 恰塞…]]？
这个洋娃娃（这部照相机，这块表…）多少钱？