1秒でbootstrapを使ったページが作れる「Bootstrap Editor」のススメ

  • 66
    Like
  • 0
    Comment

10.png

URL:http://www.venezia-works.com/bst/

対象者

bootstrap初心者の方
WEBページ作成初心者の方
ページ作成に工数をできるだけ削減したい方

この記事を読んでできること

オンライン上でbootstrapを試すことが出来る
コードをそのまま流用して素早く開発することができる

Bootstrap Editorとは

URL:http://www.venezia-works.com/bst/

オンライ上で作業することができるBootstrapエディタです。
ローカルにインストールすることなく手軽にコードを試せることができます。

緑色の「Bootstrap4」「Bootstrap3」どちらかの
ボタンを押すとすぐに始めれます。

テンプレート機能が充実!

グリッドシステムのベーシックなページや
ブログ、ランディングページなど豊富なテンプレートがすでに用意されています。
最初から作るよりもテンプレートを使用することですぐに作成することができます。

【ベーシックグリッドテンプレート】
2_1.png

【ランディングページテンプレート】
2_2.png

【ブログテンプレート】
2_3.png

【GoogleMAPテンプレート】

11.png

中でも驚きなのは、グーグルマップを使用したテンプレート。
(テンプレートをスクロールすると出てきます)
こちらは、「GoogleMap(住所検索)」を選び、Previewをクリックすると表示されます。
入力フォームつきで、「東京都」などと入力するとすぐにマップに表示してくれます。
GoogleMAPを使用したアプリをつくりたいけどページの作り方がわからないという方に
ぜひ使ってほしいテンプレートです。

他にも便利な機能

1.CODE
エディターのカラー選択(Emmet)

2.Template
Bootstrapのテンプレート選択

3. Image
画像選択から追加可能

4. Nomal
Bootstrapテンプレート色を選択

5.Live View
編集中のCODEをプレビュー(PC,Tablet,Phone,CodeOnry)

6.エラー表示
JavaScriptエラーを表示

7.Save/Open/Clear
「Save」は編集中のデータを一時保存します。「Open」は保存データを再表示します。「Clear」は保存データを削除します。

8.Download
編集中データをファイルダウンロード

さいごに

bootstrapをオンラインで試したり、手軽にさくさくとページを作成する時、
Bootstrap Editorをぜひ活用してみてください!