Boostrapのセレクトボックスをかっこよくする

harada 2,140views 更新:2014年11月5日

bootstrap-selectというライブラリを追加することで、セレクトボックスをデフォルトからBootstrapのボタンやドロップダウンを利用したスタイルに変更することができます。

利用方法

jQueryを利用しているのでjQueryとダウンロードしたjsファイルとcssファイルを読み込みます。

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_directory_uri(); ?>/_inc/css/bootstrap-select.min.css">
<script src="<?php echo get_stylesheet_directory_uri(); ?>/_inc/js/bootstrap-select.min.js"></script>
<script type="text/javascript">
        $(function(){
            $('.post_status').selectpicker({
                'selectedText': 'cat'
            });
        });
</script>

HTML

<select class="post_status" style="display:none;">
<option value='公開'>公開</option>
<option value='下書き'>下書き</option>
</select>

参考:BootStrap のセレクトボックスを格好良くする メモ

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません