テーブル、会社概要、お知らせ、問い合わせフォームなどのフォーマットを1秒で作れるEmmet＋Bootstrap4のチートコード

5719 ワード
IntelliJ emmet Bootstrap Bootstrap テキストリンク

いつも会社概要とか、お知らせのフォーマットとか問い合わせフォームとかDiv、テーブル作るのが手間なので、
Tab一回で一気に作れるコマンドを覚えました。
Emmetが入っていれば動作します。
※ul>li*5 などと記述して tabキーを押すと 展開するやつです。
※環境はIntelliJ、Bootstrap4使ってます。

テーブルタイプA

イメージ画像

コード

table.table.table-striped.table-bordered>tbody>(tr>th{title}+td{content})*5

※Bootstrap4を使います。

展開するHTML

        <table>
          <tbody>
          <tr>
            <th>title</th>
            <td>content</td>
          </tr>
          <tr>
            <th>title</th>
            <td>content</td>
          </tr>
          <tr>
            <th>title</th>
            <td>content</td>
          </tr>
          <tr>
            <th>title</th>
            <td>content</td>
          </tr>
          <tr>
            <th>title</th>
            <td>content</td>
          </tr>
          </tbody>
        </table>

テーブルタイプB

イメージ画像

コード

table.table.table-striped.table-bordered>(thead>tr>(th{title})*5)+(tbody>tr>(td{content})*5)

※Bootstrap4を使います。

展開するHTML

        <table>
          <thead>
          <tr>
            <th>title</th>
            <th>title</th>
            <th>title</th>
            <th>title</th>
            <th>title</th>
          </tr>
          </thead>
          <tbody>
          <tr>
            <td>content</td>
            <td>content</td>
            <td>content</td>
            <td>content</td>
            <td>content</td>
          </tr>
          </tbody>
        </table>

Div でテーブル風 2カラム

イメージ画像

コード

div.row>(div.col-sm-4.bg-light.p-2{title}+div.col-sm-8.p-2{content})*4

※Bootstrap4を使います。

展開するHTML

        <div class="row">
          <div class="col-sm-4">title</div>
          <div class="col-sm-8">content</div>
          <div class="col-sm-4">title</div>
          <div class="col-sm-8">content</div>
          <div class="col-sm-4">title</div>
          <div class="col-sm-8">content</div>
          <div class="col-sm-4">title</div>
          <div class="col-sm-8">content</div>
        </div>