これはスゴイぞ！Bootstrapのページ作成が積み木感覚で簡単にできてしまうジェネレーター -lollytin

Post on:2014年7月8日

lollytinでつくってみた

ということで、所要時間1分ほどの成果物がこれ！

さくっと作ったデモページ

キャプチャは作成したページの半分しか見えていませんが、ヘッダ、ドロップダウンのナビゲーション、アニメーションのスライダー、スクロールエフェクトを備えたコンテンツ、フォーム、Google Mapsコンテンツ、フッタなどが配置されています。

使い方は非常に簡単、HTML/CSSや英語の知識は必要ありません。
まずは、画面の説明から。

lollytinの基本画面

では、右パネルのレイアウトを一旦削除して、使い方を説明します。
※削除方法は各コンポーネントの「×」をクリック。

まずは左のアイコンからカテゴリを選択します。
カテゴリは、ヘッダ、フッタ、コンテンツ、ギャラリー、フォーム、サイドバーなどがあり、左のパネルに各コンポーネントが表示されます。
※キャプチャはヘッダのコンポーネント

次に、コンポーネントを右のパネルに配置していきます。
↑は、ヘッダ・コンテンツ・フッタを配置したもの。

配置変更はドラッグアンドドロップで簡単にできます。
↑は、サークルのコンテンツを上に移動したもの。

完成したら、右のアイコンから作成したページのファイルをダウンロードできます。
上：HTMLファイルのみ、下：Bootstrapのファイル全て

Bootstrapのファイルが揃ってる人はHTMLファイルのみ、無い人はファイル全てをダウンロードすると便利です。