2024年深入理解BootStrap Item2 -- 简单入门_bootstrap mod-item(1)，2024年最新去面试前端开发面试官会问什么问题及答案

本文链接：https://blog.csdn.net/2401_84433924/article/details/138914868

这里分享一份由字节前端面试官整理的「2021大厂前端面试手册」，内容囊括Html、CSS、Javascript、Vue、HTTP、浏览器面试题、数据结构与算法。全部整理在下方文档中，共计111道

HTML

HTML5有哪些新特性？
Doctype作⽤? 严格模式与混杂模式如何区分？它们有何意义?
如何实现浏览器内多个标签页之间的通信？
⾏内元素有哪些？块级元素有哪些？空(void)元素有那些？⾏内元素和块级元素有什么区别？
简述⼀下src与href的区别？
cookies,sessionStorage,localStorage 的区别？
HTML5 的离线储存的使用和原理？
怎样处理移动端 1px 被渲染成 2px 问题？
iframe 的优缺点？
Canvas 和 SVG 图形的区别是什么？

JavaScript

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

问：0.1 + 0.2 === 0.3 嘛？为什么？
JS 数据类型
写代码：实现函数能够深度克隆基本类型
事件流
事件是如何实现的？
new 一个函数发生了什么
什么是作用域？
JS 隐式转换，显示转换
了解 this 嘛，bind，call，apply 具体指什么
手写 bind、apply、call
setTimeout(fn, 0)多久才执行，Event Loop
手写题：Promise 原理
说一下原型链和原型链的继承吧
数组能够调用的函数有那些？
PWA使用过吗？serviceWorker的使用原理是啥？
ES6 之前使用 prototype 实现继承
箭头函数和普通函数有啥区别？箭头函数能当构造函数吗？
事件循环机制（Event Loop）

可以看到依赖的jQuery库的版本>=1.9.0即可。

下面通过访问http://jquery.com/

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

我来下载最新的版本2.03

可以通过IE直接访问http://code.jquery.com/jquery-2.0.3.min.js

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

另存到与Bootstrap文件夹下的js文件夹里面。

注意：所有Bootstrap插件都依赖jQuery。而且在正式的项目当中我们推荐使用压缩之后的版本，因为它的体积很小（里面取出了注释的文字和空白）。

在网页中使用Bootstrap

我们创建了一个最简单的基本模版

<!DOCTYPE html> <html> <head> <title>Bootstrap</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet" media="screen"> <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]>
 <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
 <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
 <![endif]--> </head> <body> <h1>Hello, world!</h1> <script src="js/jquery-2.0.3.min.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html>

1.首先我们可以将Bootstrap的样式文件引用当网页中

<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">

2.如果你需要使用Bootstrap架构提供JavaScript插件的话，那么需要将架构的js文件链接引用到网页中，上面也有提到过JavaScript插件都是依赖与jQuery库的，所以我们当然也需要链接引用jquery的库文件

    <script src="js/jquery-2.0.3.min.js"></script> <script src="js/bootstrap.min.js"></script>

3.viewport的标签，这个标签可以修改在大部分的移动设备上面的显示，为了确保适当的绘制和触屏缩放。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

4.我们使用的html5的一些新的标签，那么在IE9以下的浏览器并不支持这些标签，也不能为这些标签进行添加样式。那么修复这个问题我们需要链接引用的文件如下

    <!--[if lt IE 9]>
 <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
 <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
 <![endif]-->

意思就是说如果用户IE浏览器的版本小于IE9，那么就会加载这两个js文件库，现在就可以使用这些新的标签，并且可以在这些标签上添加样式了。

就这样我们最简单的Hello World!页面呈现在了大家面前。