使用bootstrap框架快速开发网页

最新推荐文章于 2026-06-09 07:29:39 发布

原创最新推荐文章于 2026-06-09 07:29:39 发布 · 3.2k 阅读

9 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

个人网站

本文介绍了如何利用VisualStudioCode和Bootstrap5快速开发响应式网页。通过VSCode的快捷方式创建HTML元素，配合Bootstrap的预定义样式实现移动端适配。同时，讲解了如何设置VSCode以适应不同屏幕尺寸的展示，并推荐使用LiveServer插件实时预览页面。此外，强调了从官方下载Bootstrap源文件并引入到项目中的步骤，为后续开发打下基础。

使用bootstrap框架快速开发网页

本次使用bootstrap5+框架进行对网页进行快速开发，本文不涉及JavaScript内容，只涉及网页的搭建，即html和css的使用，如果有疑惑可以参考以下链接进行学习：

refer

bootstrap5.0文档
https://getbootstrap.com/docs/5.0/getting-started/introduction/
b站视频“bootstrap5快速入门”
https://www.bilibili.com/video/BV1G44y117Hb

同时，本网页和手机端做了适配，在网页放大缩小后不会出现图片过大占据整个屏幕等情况。主页最后能显示的效果如下：

在这里插入图片描述

本文将按照以下章节来讲述文章，对基于bootstrap框架的网页进行快速搭建

Visual Studio Code的简单使用
Bootstrap框架

Visual Studio Code

快速创建元素

使用vscode我们可以快速创建元素，如我们要创建h1元素，我们便可以使用h1+tab创建

如果我们要创建带多个class属性的元素，我们可以使用带很多英文句号的方式创建，如我们要创建带p-5，bg-primary，text-light的class属性的元素，我们可以如下书写后再按Tab

特别的，英文句号能够隐式代替div元素

如果我们要创建多个元素，我们可以使用乘法的方式创建。以上四种情况配合Tab使用，效果见下：

h1
<h1></h1>

section.p-5.bg-primary.text-light
<section class="p-5 bg-primary text-light">

.container
<div class="container"></div>

div*3
<div></div>
<div></div>
<div></div>

快速填充

当我们所要填写的内容还不确定的时候，我们可以使用lorem来进行自动填充，当组合的效果不同的时候会有不同的情况，下面列举了三种常见的情况

lorem
用1段单词自动填充

lorem3
创建3个单词进行填充

lorem*3
用3段单词进行填充

同时为了让生成的lorem能够在一个屏幕中显示，不需要左右拖动，我们需要设置vscode的文字方式。打开设置，在通用设置里使得文字展开为打开状态。
在这里插入图片描述

随时预览开发的网页

推荐使用插件Live Server，如下：

在这里插入图片描述

安装插件后，在需要实时预览的index.html文件右键，使用live server打开便可以实时预览。
在这里插入图片描述
要注意网页浏览器取消cache

Bootstrap5.0

为了方便后续的使用，我们这里推荐去官网上下载一下源文件
https://github.com/twbs/bootstrap/archive/v5.1.3.zip
将下载的压缩包中的bootstrap.min.css文件和bootstrap.min.js文件在index.html文件head元素中进行引用
在这里插入图片描述
然后我们就可以配合官方文档快速开发了。

待续

标签

#html