Posted at

ElixirのPhoenixでBootstrap3を使う

More than 3 years have passed since last update.

Bootstrap3をダウンロードしてきたら、解凍して、下の構造になっています。

$ tree -L 2 bootstrap-3.3.4-dist/

bootstrap-3.3.4-dist/
├── css
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   ├── bootstrap-theme.min.css
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   └── bootstrap.min.css
├── fonts
│   ├── glyphicons-halflings-regular.eot
│   ├── glyphicons-halflings-regular.svg
│   ├── glyphicons-halflings-regular.ttf
│   ├── glyphicons-halflings-regular.woff
│   └── glyphicons-halflings-regular.woff2
└── js
├── bootstrap.js
├── bootstrap.min.js
└── npm.js

3 directories, 14 files

そして新しいphoenixプロジェクトを作成します。

$ mix phoenix.new hello --no-brunch


  • bootstrap-3.3.4-dist/css/ディレクトリしたのファイルをすべてphoenixのプロジェクトhello/priv/static/css/ディレクトリ下移動します。


  • bootstrap-3.3.4-dist/fonts/ディレクトリをphoenixプロジェクトhello/priv/static/ディレクトリ下に移動します。


  • bootstrap-3.3.4-dist/js/ディレクトリ下のファイルをすべてphoenixプロジェクトhello/priv/static/js/ディレクトリ下移動します。


使うときに例としてはhello/web/templates/layout/application.html.eexファイルの<head>タグに下の2行を追加するとどのファイルでも使えるようになります。

<link rel="stylesheet" href="<%= static_path(@conn, "/css/bootstrap.css") %>">

<link rel="stylesheet" href="<%= static_path(@conn, "/js/bootstrap.js") %>">