bootstrap

【bootstrap】モーダルが画面からはみ出ないようにサイズ調整する

はじめに bootstrapのモーダル使っててモーダルサイズが画面からはみ出るのが嫌だったので修正したときのメモ。 今回やったのは以下の2パターン ・テキストベースのモーダル ・画像を大きく表示するための画像ベースのモーダル テキストベースのモーダル 修…

【bootstrap】プルダウンに画像を表示するライブラリ

はじめに 今回やりたかったのは画像を選択するようなプルダウン。 検索してみたら、bootstrap-select.jsというのがありました。http://thdoan.github.io/bootstrap-select/ こちらからDL 実装 使い方は簡単でjsを読み込んで以下みたいな感じで使える。 boots…

【bootstrap】Modal内での画面遷移する方法

どうやるのが1番いいのかわからないけど今回は以下の対応 ・Modal内に複数ページのHTMLを入れておく ・現在のページ番号を変数に保持しておく ・[前へ][次へ]ボタンが押されるたびにページ番号を+または-してModal内を再表示 <div class="container" style="margin-top:5px;"> <button id="onModal" class="btn btn-default">Open</button> </div> <div id="myModal" class="modal fade"> </div>

【bootstrap】Modalの初期値を動的に設定する方法

たまにやろうとするとパッと出てこずに何度も調べている気がするのでメモしておく 一覧のクリックする行によってモーダルの中身を変えたい時などにも使える <button id="onModal" class="btn btn-default">Open</button> <div id="myModal" class="modal fade" role="dialog"> <div class="modal-dialog"> <div class="modal-content"> </div></div></div>

【bootstrap】横長の画面でmin-widthを指定して横スクロールさせる

bootstrap製の管理画面テンプレートのadminLTEを使って管理画面を作っているのだが、ある画面でtableに表示する項目が多くて困っています。bootstrap標準でtable-responsiveがあって画面に入りきらない箇所は横スクロールできるのですが、使ってるpcによって…

【bootstrap】table(th, td)列幅を固定する方法メモ

修正前 <table class="table table-hover"> <thead> <tr> <th>・・・</th> <th>・・・</th> ・・・ </tr> </thead> <tbody> <tr> <td>・・・</td> <td>・・・</td> ・・・ </tr> </tbody> </table>tableタグに「style="table-layout:fixed;"」追加 thタグに「style="width:200px;"」追加修正後 <table class="table table-hover" style="table-layout:fixed;"> </table>

bootstrapのdaterangepicker(datepicker)を日本語化して少しカスタマイズ?して使う方法メモ

はじめに タイトルのとおりですが知っていればかなり便利でした。 次回もサクっと使えるようにメモしておきます 使うもの ・jQuery ・Bootstrap ・bootstrap-daterangepicker ・moment.js 準備 jqueryとbootstrapはCDNを使用 bootstrap-daterangepickerはこ…

bootstrap 参考URL箇条書き

cssとかぜんぜんわからないけど、bootstrap使ってモックを作る際に参考になったページをダラダラ追加(あとでまとめます。たぶん...)