Visual Studio Code开发HTML5安装插件快捷使用Bootstrap样式

2024-04-12 19:16:16

Visual Studio Code开发HTML5安装插件快捷使用Bootstrap样式

一、引入bootstrap.css

下载bootstrap，地址：Bootstrap中文网

点击Bootstrap中文文档，进入下载界面

点击下载 Bootstrap 会进入Bootstrap使用文档相关页面，主要提供了几种方式供开发者使用，可自行选择，这里我选择了第一种方式——用于生产环境的Bootstrap 下载方式

下载好之后将压缩包解压放进要使用的项目

在页面中引入bootstrap.min.css(bootstrap核心css文件)文件，以下?是我的项目结构以及bootstrap.min.css文件位置

至此bootstrap引入完成，但是在使用时会发现很费劲，如果想要使用bootstrap样式的按钮或者表格，难道要自己手动写class名称？

Visual Studio Code工具很友好得可以添加bootstrap插件！

二、添加bootstrap插件

点击红色区域按钮

搜索 bootstrap 3，会出现如下红框内相关插件，点击安装（Install）

顾名思义：

Bootstrap 3 Sinippets 插件是Bootstrap 3.x的插件

安装后在引入bootstrap后的HTML页面输入bs3- 可以弹出提示，根据自己的需要进行添加即可

Bootstrap 4 Sinippets 插件是Bootstrap 4.x的插件

安装后引入bootstrap后的HTML页面输入b4-$ 可以引入模板

这里用的是Bootstrap 3.x版本所以安装Bootstrap 3 Sinippets，以下是使用示例?

Visual Studio Code开发HTML5安装插件快捷使用Bootstrap样式相关推荐

Vue.js+Node.js全栈开发教程：通过Visual Studio Code开发调试Node应用
目前,有多种开发工具可以支持Node.js应用的开发,比如: jetBrains WebStorm.Eclipse.Visual Studio Code等.这些开发工具原则上是"条条大路通 ...
【实验手册】使用Visual Studio Code 开发.NET Core应用程序
.NET Core with Visual Studio Code 目录概述... 2 先决条件... 2 练习1: 安装和配置.NET Core以及Visual Studio Code 扩展... ...
Visual Studio Code 开发 .NET Core 看这篇就够了
来源:依乐祝 cnblogs.com/yilezhu/p/9926078.html 在本文中,我将带着大家一步一步的通过图文的形式来演示如何在Visual Studio Code中进行.NET Cor ...
《软件工具》手把手教你使用Visual Studio Code开发C/C++(Windows)
C/C++的开发工具很多,微软的Visual Studio,QT等都是不错的选择,但是这些IDE都过于庞大,而且有很多IDE都是收费的.笔者这里推荐GCC+Make+代码编辑器的方式来开发C/C++, ...
【错误记录】Ubuntu 中 ROOT 用户无法启动 Visual Studio Code 开发环境 ( 推荐在普通用户下使用 VSCode 开发环境 )
文章目录一.报错信息二.解决方案一.报错信息在 [开发环境]Ubuntu 安装 Visual Studio Code 开发环境 ( 下载 Visual Studio Code 安装器 | Ub ...
打造TypeScript的Visual Studio Code开发环境
打造TypeScript的Visual Studio Code开发环境本文转自:https://zhuanlan.zhihu.com/p/21611724 作者: 2gua TypeScript是由 ...
【开发环境】安装 Visual Studio Code 开发环境 ( 下载 Visual Studio Code 安装器 | Visual Studio Code )
文章目录一.下载 Visual Studio Code 安装器二.安装 Visual Studio Code 一.下载 Visual Studio Code 安装器进入 Visual Studi ...
[北京微软技术直通车]前端 Visual Studio Code 开发 Angular 与亿级 SQL Servern
微软技术直通车第一期将于2017年9月9日与大家见面,本次邀请华北区微软技术专家和大家一起交流前端工具与技术, Visual Studio Code,TypeScript 与 Anuglar 项目开发 ...
Visual Studio Code：利用 MSSQL 插件创建数据库 IDE
尽管面对繁重的 .NET 开发任务 Visual Studio 仍是我的首选 IDE,但我却已深深迷恋上 Visual Studio Code (VS Code),无论我使用的语言是 C#.JavaS ...

最新文章

热门文章