故あって言語で切り替わるページを書いたのですが、その際、言語名＋国旗をタグで表現できるCSSライブラリ Languages for Bootstrap 3 を見つけたので紹介します。とても便利です。
##インストール
Languages for Bootstrap 3 のインストールは bower を使います。
bower install bootstrap-language
必要なファイルは languages.min.css および languages.png です。これらのファイルをページからアクセスできるディレクトリへコピーします。同一ディレクトリである必要があります。
##ライブラリの読み込み
使いたいページで .css ファイルを読み込みます。
<link href="css/languages.min.css" rel="stylesheet" />
##言語タグ
タグで言語を指定します。言語は lang で指定します。
<span class="lang-sm lang-lbl" lang="ja"></span>
表記方法は lang-lbl, lang-lbl-en, lang-lbl-full クラスで指定します。
lang-lbl は現地語で、lang-lbl-en は英語で、lang-lbl-full は英語＋現地語での表記を指定できます。
<span class="lang-sm lang-lbl" lang="ja"></span>
<span class="lang-sm lang-lbl-en" lang="ja"></span>
<span class="lang-sm lang-lbl-full" lang="ja"></span>
サイズは lang-xs, lang-sm, lang-lg で指定します。
<span class="lang-xs lang-lbl" lang="ja"></span>
<span class="lang-sm lang-lbl-en" lang="ja"></span>
<span class="lang-lg lang-lbl-full" lang="ja"></span>
このタグのおかげで言語切り替えメニューがきっちりかけました。感謝がてら記事を書いてみました。