Twitter Bootstrapのデザインと挙動を気軽にテストできるBootplyが超絶便利!

スポンサーリンク
【お知らせ】 英単語を画像イメージで楽に暗記できる辞書サイトを作りました。英語学習中の方は、ぜひご利用ください!
画像付き英語辞書 Imagict | 英単語をイメージで暗記
【開発記録】
英単語を画像イメージで暗記できる英語辞書サービスを作って公開しました

Twitter Bootstrap 便利ですよね。私はデザインがそれほど得意ではないので、大変重宝しています。ということで今日は、Twitter Bootstrap のデザインと挙動を、WEB 上で簡単にテストして試せる便利なウェブサービスをご紹介。

Bootply – Bootstrap Editor and Playground for JavaScript, CSS, HTML5 and jQuery.
Screen Shot 2015-03-16 at 21.40.31

Bootply は、”Bootstrap Editor and Builder” と説明がある通り、Bootstrap をウェブ上で試すために使えるエディタ&ビルダーです。

本家、Twitter Bootstrap。
Bootstrap The world’s most popular mobile-first and responsive front-end framework.

スポンサーリンク

Bootply の使い方

上記リンクの Bootply トップページから「Play Now」を押すと、プレイグラウンドの画面 Bootply – The Bootstrap Playground へと移動します。

JavaScript, CSS, HTML の編集用ペインが分割されて表示されるので、それぞれ好きなように編集します。以下、Bootstrap の nav-tabs の CSS を適当にカスタマイズしてみる例。とりあえず、JavaScript は空にして HTML と CSS を入力しました。

Screen_Shot_2015-03-16_at_21_03_16

入力したコードは以下。

css

html

Bootstrap の nav-tabs(Navs)については以下。
Navs | Components Bootstrap

Run 実行でデザインと挙動を確認

編集が終了したら、上部メニューの Run を押すと、下部に実際のビューが出力されます。今回の場合、Home, Profile, Messages のタブメニューのUIが表示されました。Save を押すと保存される。

Screen_Shot_2015-03-16_at_21_03_57

この Bootply のプレビューで、デザインの確認とともに要素にマウスオーバーしたりクリックしたり挙動を確認することもできます。また左メニュー部で、Bootstrap, jQuery のバージョンを指定できるので、必要な組み合わせでデザインと挙動を確認できる。色々すごい。

Bootstrap の Components などをさっと試したい場合には超便利ですので、Bootstrap をよく使われる方は、ぜひ Bootply をお試しください!以下、今回作成して保存したカスタマイズ例へのリンクです。

Bootstrap example code

スポンサーリンク
私は CSS がちょっと苦手なので勉強せねば...
スポンサーリンク
 
Twitterを使っていますのでフォローお願いたします!ブログの更新情報もつぶやいてます^^
(英語学習用)

Leave Your Message!