Bootstrap3のコードを書き出してくれるLayoutItの使い方

Pocket

Web制作でいつもお世話になっているBootstrap3。もう使い慣れすぎてこれ無しで作るのがめんどくさくなるほどでまさにBootstrap中毒と言えます。

そんなただでさえ便利なBootstrap3がさらに便利になるかもしれないWebツールがありました。それがこちら

LayoutIt
Bootstrap3を書き出してくれるWebツール
どんなツールかというと、ブラウザ上でドラッグ&ドロップでグリッドやコンポーネントを配置してくれるというものです。
Bootstrap3の便利ツールLaoutIt

LayoutItで選択できるメニュー一覧

左のメニューからは以下のものが選択できます。

Grid System

デフォルトで以下の値がセットされていますが、自分で自由に設定することもできます。その際合計12になるようにセットします(例えば、3 3 3 3など)。

  • 12
  • 6,6
  • 8,4
  • 4,4,4
  • 2,6,4

Base CSS

  • Title
  • Paragraph
  • Address
  • Blockquote
  • Unordered List
  • Ordered List
  • Description
  • Table
  • Form
  • Horizontal Form
  • Button
  • Anchor Button
  • Image

Conponents

  • Button Group
  • Button Dropdowns
  • Navs
  • Breadcrumb
  • Pagination
  • Label
  • Badge
  • Jumbotron
  • Page Header
  • Text
  • Thumbnails
  • Progress Bar
  • Media Object
  • List group
  • Panels

Javascript

  • Modal
  • Navbar
  • Tabs
  • Alerts
  • Collapse
  • Carousel

LayoutItの使い方

では実際にこのWebツールを使ってBootstrap3のレイアウトを組んでみたいと思います。ドラッグ&ドロップで簡単に作れるのでさくっと作ってみましょう。

まずはグリッドのセット

まずはグリッドの配置を行います。左のメニューからメイン画面にドラッグするだけ。
layoutitの使い方1

必要なコンポーネントをセット

その次はその中に必要なコンポーネントを配置していきます。コンポーネントはBootstrap3で用意されているモノと同じものを選択します。

このときただ配置するだけでなく、配置した後にスタイルの変更が可能です。
layoutitの使い方2

LayoutItで出来上がりをプレビュー

出来上がったら実際どんな見た目かを確認することができます。確認するには画面上部のプレビューを押すだけ。
layoutitの使い方3

完成したものをダウンロード

完成したらダウンロードしてみましょう。ダウンロードするには会員登録する必要があるので登録します。

zipファイルを解凍すると中身はこんな感じになってます。
layoutitの使い方4
ちなみに今回作ったのがこんな感じ。はじめてでも3分ほどでサクッとつくれます。
layoutitの使い方5