[Bootstrap](http://getbootstrap.com/)の小ネタです。

[Bootstrap](http://getbootstrap.com/)には[Modal](http://getbootstrap.com/javascript/#modals)というダイアログを表示する機能が内包されています。この Modal を表示する際にパラメータを渡す方法について調べました。
ユースケースとしては、一覧から詳細ダイアログを開く際にパラメータを渡す場合などでしょうか。



![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2014/bootstrap-modal.png)

Modal にパラメータを渡す方法は昔から議論されていて、最近まで変更がされているようです。Github 上の Issue はこちら

Pass data arguments to modal? · Issue #531 · twbs/bootstrap
[https://github.com/twbs/bootstrap/issues/531](https://github.com/twbs/bootstrap/issues/531)

## 1. 3.0.3 以前

3.0.3 以前は以下のようにパラメータを渡すのですが、Modal 初回構築時のパラメータで固定されてしまうため、一覧 ▶︎ 詳細のような用途では使えませんでした。

```js
$myModal = $('#myModal').modal({
  person: 'mitsuruog'
});

//2.3.1と3.0.0ではネームスベースが微妙に異なる

//2.3.1
$myModal.on('show', function(e) {
  var name = $(this).data('modal').options.person
};

//3.0.0
$myModal.on('show.bs.modal', function(e) {
  var name = $(this).data('bs.modal').options.person
}
```

## 2. 3.0.3 以降

3.0.3 以降では、以下の用に modal を呼び出す際に、2 つめのパラメータにセットすることで、イベントオブジェクトにセットされてくるように改善されています。

```js
//3.0.3以降
$myModal = $('#myModal').modal({}, {
  person: 'mitsuruog'
});

$myModal.on('show.bs.modal', function(e) {
  var name = e.relatedTarget.person;
}
```

これで、一覧 ▶︎ 詳細のような用途で使えるようになりました。

めでたし。めでたし。

BootstrapのModalにパラメータを渡す

いつも非常にお世話になっている[bootstrap](http://twitter.github.com/bootstrap/)ですが、（業務系システムなど）画面の項目が多い場合、どうしても余白が多すぎると感じることが多くあります。
その都度、リセットする CSS を作っていたのですが、同じ悩みを抱える人が結構いるのではと思い公開してみました。

> (2014/11/15 追記)
> メンテしてないので使わないほうがいいです。3 系も対応してませんし...



### このエントリでお伝えしたいこと。

1.  良かったら使ってください。
2.  Cloud9 と grunt.js でどこでも快適ビルド生活。

## bootstrap narrow とは

項目数が多い画面向けに、余白を必要最低限にとどめた bootstrap テーマです。

素の部分は bootstrap をそのまま使用しています。
（つまり bootstrap に依存しています。）

ソースコード一式は Github にあります。
[https://github.com/mitsuruog/bootstrap-narrow](https://github.com/mitsuruog/bootstrap-narrow)

## ダウンロード

[CSSO](https://github.com/css/csso)にて minify したものも準備していますので、用途に応じて利用してください。

[Development Version](https://raw.github.com/mitsuruog/bootstrap-narrow/master/bootstrap-narrow.css) Full code

[Production Version](https://raw.github.com/mitsuruog/bootstrap-narrow/master/bootstrap-narrow.min.css) CSSOminify

## 使い方

HTML 上に次のようにマークアップしてください。

```html
<head>
  

  
  <link href="./css/bootstrap.css" rel="stylesheet" />
  <link href="./css/bootstrap-responsive.css" rel="stylesheet" />
  <link href="./css/bootstrap-narrow.css" rel="stylesheet" />

  
</head>
```

## 不具合・問い合わせ・要望など

Github にて運営してますので、[Issue](https://github.com/mitsuruog/bootstrap-narrow/issues)にてお願いします。

## その他

開発環境は[Cloud9](https://c9.io/)上で構築しています。

less を使っているので Build は[grunt.js](http://gruntjs.com/)で自動化しています。非常に快適です。

また、CSS については本業ではないので、色々勉強しながら作っています。
コードスタイルに関しては、こちらのエントリに準拠できるよう努力しています。

一貫性のある CSS らしい CSS を書くための原則

[https://github.com/necolas/idiomatic-css/tree/master/translations/ja-JP](https://github.com/necolas/idiomatic-css/tree/master/translations/ja-JP)

他に良いネタありましたら教えて下さい。

Tag: bootstrap

BootstrapのModalにパラメータを渡す

bootstrapテーマ「bootstrap narrow」を作りました