CSSの優先度には気をつけようの話

Laravel-adminでadmin画面を作成中・・・

ということで、本日はHTMLでフロントを作成していました。
色変えたり、文字を揃えたり、gridを調節したり、、、。

Laravel-adminを使用しており、
admin画面はBootstrapがガンガンついています。

デフォでも綺麗につくれるのですが、
微妙なカスタマイズを行う必要がありまして、、、

BootstrapがかかっているところにCSSが追加できない！！

Bootstrapがかかっているところにはstyle属性をつけてもCSSがつかないんですね、、、
知らなかった、、、
悩むこと1時間ほど、、、、、

CSSには優先度とやらがあるらしい！

ということを知ったのでした。
参考　http://creator.aainc.co.jp/archives/4947

importantつけたらimportantになるのね、CSSちゃんかしこい。

優先順位について理解する余力がなかったので、
解決策として、Bootstrap.cssを直接編集する荒技（？）を取りました。
コメントアウト残しといたからだいじょぶだいじょぶ

まとめ

直接Bootstrapファイルを修正することで、大体は解決しましたが、
同じクラス（foreach文で作成）に対して別々のCSSの付け方は分からず、、、
ぐすん。

未だ、JSの問題が残っているので、明日解決してやるぞい

<script src="https://code.jquery.com/jquery.min.js"></script>

<script>
    $(document).ready(function() {
        $('#search_button').click(function() {
            $('.box-body').slideToggle(); // toggleメソッドで表示・非表示を切り替える
        });
    });
</script>

clickでbox-bodyが、slideToggleするけど一瞬で元に戻る（泣

ちょっと動くから逆におもろい。
preventDefaultが怪しいと睨んでいるのじゃ。

ってことで、
さくらみこちゃんも５周年を迎えたことだし、
おじさん頑張っちゃうぞぉ！

おわり。