Bootstrapの可変サイズを確認する

ブーストストラップで作成する際にどれぐらいのサイズだったか確認する方法です。サイズ表みたいなのがあれば良いなと考えた際にそれぞれのカラムに画像を入れてそこにサイズが表示できたら良いな、そーいうのないかなと探しました。みつかりましたよ。

Holder.js – client side image placeholders これがそうなんです。これはダミー画像に数値が載せられるのですがこれが良いのは自動で画像サイズをとってくれているところです。ですので幅を狭めるとその画像を取得してくれます。

これを利用してブートストラップのサイズ表が出来そうなので作りました。ビジュアルで見ながら作れるのが良いですね。


スポンサーリンク


使い方

Bootstrapの可変サイズとは関係ないですがholder.jsの一応簡単な使い方です。ダミー画像としても使えますね。ダウンロードしてきたholder.min.jsを通して後は
imgタグのdata-srcでholder.js/100×100でダミー画像が完成です。簡単ですね。&をつけてオプションを足してつけることが出来ます。幅サイズを100%にしたい場合は100pとすれば100%になります。

<script src="/path/js/holder.min.js"></script>
<img data-src="holder.js/300x200">

300pxと200pxのサイズのダミー画像が配置されます。

OPTION

theme: テーマオプションを使用することでそのテーマにそったカラーを使用することが出来ます。

 
例:<img data-src="holder.js/300x200?theme=sky">

holder1
sky, vine, lava, gray, industrial, socialのテーマが使用できます。

random: テーマをランダムに使用することが出来ます。

例:<img data-src="holder.js/300x200?random=yes">

holder2
bg: 背景カラー ウェブカラーを指定

例:<img data-src="holder.js/300x200?bg=2a2025">

holder3
fg: テキストカラー

例:<img data-src="holder.js/300x200?fg=ffffff">

text: カスタムテキスト

例:<img data-src="holder.js/300x200?text=Hello">

size: テキストサイズ

例:<img data-src="holder.js/300x200?size=50">

font: フォント指定

例:<img data-src="holder.js/300x200?font=Helvetica">

outline: アウトライン

例:<img data-src="holder.js/300x200?outline=yes">
上記を複合したもの
例:<img data-src="holder.js/100px200?fg=fff&bg=000&text=holder-js&size=30">

holder4
holder5
holder6

デモサイト

Pocket
LINEで送る


スポンサーリンク

コチラの記事もどうぞ!
You can skip to the end and leave a response. Pinging is currently not allowed.

コメントをお寄せ下さい

Subscribe to RSS Feed Follow me on Twitter!