使用bootstrap框架快速开发网页

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

refer

  1. bootstrap5.0文档
    https://getbootstrap/docs/5.0/getting-started/introduction/
  2. b站视频“bootstrap5快速入门”
    https://www.bilibili/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/twbs/bootstrap/archive/v5.1.3.zip
将下载的压缩包中的bootstrap.min.css文件和bootstrap.min.js文件在index.html文件head元素中进行引用

然后我们就可以配合官方文档快速开发了。

待续

更多推荐

使用bootstrap框架快速开发网页