jQueryプラグイン、Link ScraperにBootstrapのデザインを適応してみる。

さて、Link Scraperって標準だとこんな感じに表示されると思います。

テキストボックスの横幅とかは指定できるんですが、Bootstrapのデザインを使いたい！
と思ったので、JQueryで無理矢理やってみました(笑)
こんな感じにしました。

実装したコードは以下の通りです。
実装にあたり変更した箇所だけ記載します。
(Bootstrap:3.3.1)

JavaScript

var scrapper_total_width;//宣言だけで、横幅は指定しない。

$(function(){
	//テキストボックスのBootstrap適応
	$("#linkBox").wrap("<div class='row'></div>");
	$("#linkBox").addClass("col-xs-offset-2 col-xs-8");
	$("#linkBox").attr("placeholder","URLを入力してね");
	//ボタンのBotstrap適応
	$("#scrapper_post_button").wrap("<div class='row'></div>");
	$("#scrapper_post_button").addClass("col-xs-offset-5 col-xs-2");
});

デモページを作成しました！
Link ScraperにBootstrapのデザインを適応してみる：デモページ