bootstrap

bootstrap4 css lgサイズ以上の場合にのみcssを適用したい場合とcssのリセットについて

フォームを常に100%にしたい場合以下のようにする <form class="w-100"></form> しかしlg以上は100%にしたくなくて、元のwidthに戻したい(リセットしたい)、というケースの場合、cssとhtmlを以下のようにする。css /* lg以上限定のcss */ @media (min-width: 992px) { .w-lg-initial { w…

bootstrap ハンバーガーメニューを常に表示する方法

bootstrapのハンバーガーメニューをどのサイズでも常に表示させたい場合Customize and download · Bootstrap @grid-float-breakpoint => 9999pxとか大きい値にする※9999とか気持ち悪いんだけど他に方法が無さそうだったので仕方なくこうする

bootstrap ドロップダウンメニューがパネルの下に隠れてしまう件

z-indexも効かず、1時間はまったので(いや正確には昨日の夜これが分からなくてそのまま寝てしまったので実際は4時間は無駄にした。でもそのおかげで睡眠がとれたから±2時間のマイナスとしておこう。と思ったけど本当はその後8km走るはずだったし損失はそこそ…

bootstrapのカスタマイズ方法

通常、既存のbootstrap.cssをカスタマイズしたい場合、別途custom.css等を作ってそれで上書きをするんだけど、例えばグリッドを12から24に変更したい場合だと、上書きするやり方ではできなそうだったため以下調べたやり方2つ。ビルドをしない方法 Customize…

jquery bootstrapのiCheckでflat指定したradioボタンを選択する方法

はまったのでメモ。html <div> <label> <input type="radio" class="flat" name="radio" value="0" />チェック1 </label> <label> <input type="radio" class="flat" name="radio" value="1" />チェック2 </label> </div> jquery $(function(){ // ↓flat指定ありの場合 $("div").find('input').eq(0).iCheck('check'); // ↓flatを使わない通常の選択方法 //$("di…

bootstrap3 グリッドシステム col-sm やら col-xsの意味について

bootstrapのグリッドシステムを利用する際にcol-smやらcol-xsを指定する。詳細はこちら CSS · Bootstrapグリッドって分かりにくいんだけど、ポイントは12分割がベースってこと。 例えば <div class="col-sm-6 col-xs-12">hoge<div> <div class="col-sm-6 col-xs-12">hoge<div>みたいな指定をした場合、col-sm即ちタブレット以上サイズ(pc</div></div></div></div>…

bootstrapでradioボタンのonchangeが効かない件

メモ iCheckでラジオボタンがかっこよくなると一生changeイベントが拾えない - arimoつくったメモicheckというライブラリが原因らしい Checkboxes and radio buttons customization (jQuery and Zepto) plugin以下のようにすること //$("#radio1").on('chang…