文章目录

📋前言

📋分析题目考点

💬答案如下：

💬考点分析

1️⃣考点一

2️⃣考点二

3️⃣考点三

4️⃣考点四

5️⃣考点五

📋练习demo 

💬文件结构

💬免费下载链接

💬HTML代码如下（仅供参考）

💬效果图

💻PC端

📱移动端

📋前言

• 首先，我们要了解在1+X Web前端开发中级的考核中，Bootstrap框架的考核内容有哪些，还有在真题中怎么考。让我们通过以下两张图片进行简单的了解。

• 部分代码截图

• 完整中级考核要求和该题的完整题目点击以下传送门
• callio项目—Bootstrap响应式网页(1+X Web前端开发中级 例题)
• 一篇文章带你解1+X Web 前端开发考核考纲（详细介绍）（涵盖初级、中级、高级）

📋分析题目考点

HTML
Lorem ipsum dolor sit amet, habitasse sollicitudin adipiscing nemo
更多
JAVASCRIPT
Lorem ipsum dolor sit amet, habitasse sollicitudin adipiscing nemo
更多
MYSQL
Lorem ipsum dolor sit amet, habitasse sollicitudin adipiscing nemo
更多
ES6
Lorem ipsum dolor sit amet, habitasse sollicitudin adipiscing nemo
更多
PHP
Lorem ipsum dolor sit amet, habitasse sollicitudin adipiscing nemo
更多
VUE
Lorem ipsum dolor sit amet, habitasse sollicitudin adipiscing nemo
更多
web前端
Web前端在IT行业真正受到重视大概也就六七年的时间。随着互联网的迅猛发展，各种互联网项目也不断兴起，对用户体验提出了更高的要求，前端开发也由此逐渐成为了重要的研发角色。从2012年至今，“Web前端工程师”的需求持续走高，薪酬也是水涨船高，所以，有不少人立志要成为前端开发工程师，但同时又担心Web前端开发到底还能热多久。
Service FormGet Your Service
htmlcss
Sign in

💬答案如下：

（1）device-width
（2）stylesheet
（3）container
（4）justify-content-between
（5）navbar-light
（6）carousel
（7）col-md-4 col-sm-6 col-12

（8）align-items-center
（9）form-control

💬考点分析

以上九个空中，后面七个是bootstrap的考点，结合代码的结构和题目的挖空。我们可以总结考点为头部容器container，导航栏nav，导航栏又细分为响应式导航栏，轮播图carousel，还有列表和表单等等。

1️⃣考点一

• 其中第一个空width=__(1)__是bootstrap很经典的一个考题🎯

• ❗❗重点：如上代码是bootstrap 4 基本模板中的meta标签
• Bootstrap的设计目标是移动设备优先，然后才是桌面设备。这实际上是一个非常及时的转变，因为现在越来越多的用户使用移动设备。为了让 Bootstrap 开发的网站对移动设备友好，确保适当的绘制和触屏缩放，需要在网页的 head 之中添加 viewport meta 标签

• width 属性控制设备的宽度。假设您的网站将被带有不同屏幕分辨率的设备浏览，那么将它设置为 device-width 可以确保它能正确呈现在不同设备上。

• initial-scale=1.0 确保网页加载时，以 1:1 的比例呈现，不会有任何的缩放。在移动设备浏览器上，通过为 viewport meta 标签添加 user-scalable=no 可以禁用其缩放（zooming）功能。

• 通常情况下，maximum-scale=1.0 与 user-scalable=no 一起使用。这样禁用缩放功能后，用户只能滚动屏幕，就能让您的网站看上去更像原生应用的感觉。

2️⃣考点二

• container是bootstrap顶层布局容器，这是一个必须使用的标签，在每一个页面上都会用到，是实现响应式布局的核心组成部分，在bootstrap4.4和老旧版本上有着细微的差异，在4.4.1版本中进行了升级，使得container标签更加灵活方便。

• 在bootstrap4.4.1中默认container默认有3个属性，分别如下：

  .container，它max-width在每个响应断点处设置一个
  .container-fluid，这是width: 100%所有断点
  .container-{breakpoint}，width: 100%直到指定的断点为止

• 下表说明了每个容器与原始容器的比较情况，并且跨每个断点。max-width.container.container-fluid查看它们的实际效果，并在我们的网格示例中进行比较。

3️⃣考点三

• nav可以说是必考的一个考点了非常经典，其中考点内容也非常丰富

• 还有导航栏上面的下拉菜单dropdown

• 其中还有考核的重点，响应式导航栏
• 为了给导航栏添加响应式特性，您要折叠的内容必须包裹在带有class.collapse、.navbar-collapse 的
  中。折叠起来的导航栏实际上是一个带有 class .navbar-toggle 及两个 data- 元素的按钮。第一个是 data-toggle，用于告诉 JavaScript 需要对按钮做什么，第二个是 data-target，指示要切换到哪一个元素。三个带有 class .icon-bar 的 创建所谓的汉堡按钮。这些会切换为 .nav-collapse

  中的元素。为了实现以上这些功能，您必须包含 Bootstrap 折叠（Collapse）插件。

4️⃣考点四

• carousel轮播图

• bootstrap网格系统

Bootstrap 网格系统（Grid System）的工作原理

网格系统通过一系列包含内容的行和列来创建页面布局。下面列出了 Bootstrap 网格系统是如何工作的：

• 行必须放置在 .container class 内，以便获得适当的对齐（alignment）和内边距（padding）。
• 使用行来创建列的水平组。
• 内容应该放置在列内，且唯有列可以是行的直接子元素。
• 预定义的网格类，比如 .row 和 .col-xs-4，可用于快速创建网格布局。LESS 混合类可用于更多语义布局。
• 列通过内边距（padding）来创建列内容之间的间隙。该内边距是通过 .rows 上的外边距（margin）取负，表示第一列和最后一列的行偏移。
• 网格系统是通过指定您想要横跨的十二个可用的列来创建的。例如，要创建三个相等的列，则使用三个 .col-xs-4。

网格选项

下表总结了 Bootstrap 网格系统如何跨多个设备工作：

	超小设备手机（<768px）	小型设备平板电脑（≥768px）	中型设备台式电脑（≥992px）	大型设备台式电脑（≥1200px）
网格行为	一直是水平的	以折叠开始，断点以上是水平的	以折叠开始，断点以上是水平的	以折叠开始，断点以上是水平的
最大容器宽度	None (auto)	750px	970px	1170px
Class 前缀	.col-xs-	.col-sm-	.col-md-	.col-lg-
列数量和	12	12	12	12
最小列宽	Auto	60px	78px	95px
间隙宽度	30px （一个列的每边分别 15px）	30px （一个列的每边分别 15px）	30px （一个列的每边分别 15px）	30px （一个列的每边分别 15px）
可嵌套	Yes	Yes	Yes	Yes
偏移量	Yes	Yes	Yes	Yes
列排序	Yes	Yes	Yes	Yes

补充：使用弹性框对齐实用程序垂直和水平对齐列。

• 垂直对齐

• 水平对齐

5️⃣考点五

• form表单

等等...

文章部分资料来自bootstrap官网⏬

bootstrap官网

📋练习demo 

💬文件结构

💬免费下载链接

点击下载 

💬HTML代码如下（仅供参考）

白葡萄酒
白葡萄酒含有多种维生素，营养丰富，具有舒筋、活血、养颜、润肺之效
详情
价格：140.00
包邮
240ml
30度
«Previous
1
2
3
»Next

💬效果图

💻PC端

📱移动端

🎯点赞收藏，防止迷路🔥