VisualStudio 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,以下是使用示例?