Visual Studio Codeでhtml + bootstrap4の書き方
今回の記事でVSCodeを利用してhtmlテンプレート、bootstrap4デザインの組み合わせを快速編集できる方法について説明します。
手順は以下の通りです。
１、拡張機能インストール
まずはVSCodeを開き、以下の二つの拡張機能をインストールする
- 1、HTML Preview
- 2、Bootstrap 4
２、HTMLファイル作成
ファイル -> 新規ファイルで新規ファイルを作成する
ショートカットキー：Ctrl+N
新規作ったファイルをhtml形式で保存する
方法１：右下の「プレーンテキスト」を押下する
方法２：Ctrl+K -> Mの順番で操作する
言語モード選択に「h」で書いて一覧からhtmlを選択する
右下の「プレーンテキスト」はHTMLになっていれば成功
３、HTML快速編集
１、b4と入力して Enterキーをクリック
bootstrap4のcssとjsファイルをインポート済みのhtmlのひな形ソースが生成される
２、<body>の中にb4-form-groupと入力して Enterキーをクリック
以下のフォームグループのソースが生成させる
<div class="form-group">
<label for=""></label>
<input type="text" name="" id="" class="form-control" placeholder="" aria-describedby="helpId">
<small id="helpId" class="text-muted">Help text</small>
</div>
３、その他自動補充機能もたくさんある、当記事で割愛
４、プレビュー方法
Ctrl+K -> Vの順番で操作する
プレビューできていますよね、これで完了。