Bootstrap(50)

50follower
Yukimi Sato さんのアバター 109views

【jQuery】ハンバーガーアイコンを開閉時に変化させる【Bootstrap】

参考:3本線のメニューボタンをパネルの開閉にあわせてバツに変化させてみる HTML <a href="#" id="panel-btn"><span id="panel-btn-icon"></span&g... 2016年8月18日
Yukimi Sato さんのアバター 209views

【CSS】Bootstrapで組んだナビメニューをタブレットでもスマホ表示にする

レスポンシブデザインでつきまとうナビメニューの形と幅の悩みですが、Bootstrapはデフォルトではタブレットの表示がスマホと同じようにたたまれたメニューにはならないので、それを解決するCSSです。 iPadでBootstrapのnavb... 2016年8月17日
harada さんのアバター 121views

「X-editable」を利用してその場で編集するUI(Edit In Place)を導入する

X-editableプラグインを利用することで、その場で編集するUI(Edit In Place)を簡単に導入することができます。 ダウンロードとデモはこちらから。 X-editableプラグインはBootstrapとjQuery UI、... 2016年7月5日
harada さんのアバター 795views

Bootstrap3:ラジオボタンをスイッチ表示にする

Bootstrap3を利用して、簡単にラジオボタンをスイッチのように表示することができます。 デモはこちら 事前にBootstrap3のJavaScriptファイルとjQuery、CSSファイルを読み込んでください。 HTML <... 2016年4月14日
harada さんのアバター 667views

Bootstrapのドロップダウンリストをセレクトボックスの代わりにフォームに利用する

Bootstrapのドロップダウンリストをセレクトボックスの代わりにフォームで利用する方法です。 HTMLを記述 <div class="inputBlock"> <div class="input-gro... 2016年3月31日
高瀬 裕介 さんのアバター 32views

bootstapを使ったコンテンツで見出しの右にボタンを出す

<div class="clearfix"> <div class="pull-left"><h1>見出し</h1></div> <div class="pull-r... 2016年3月17日
harada さんのアバター 607views

bootstrap-datepickerで日付を選択後ドロップボックスを閉じる

bootstrap-datepickerを利用することでBootstrapに簡単にカレンダーで日付を入力できるパーツが付けられます。 ダウンロードはこちら 利用方法はこちらのブログが参考になりました。 bootstrap-dat... 2016年2月26日
harada さんのアバター 778views

AdminLTEのDate range pickerを日本語化して利用する方法

※今回はAdminLTEに入っていたDate range pickerを利用して確認したためその方法を記述しています。 1. 読み込む AdminLTEに入っていたプラグインを読み込みます。 jQueryも必要です。 //head内 ... 2016年2月25日
harada さんのアバター 29views

Bootstrapのリンククリック後のスタイルを打ち消す

Bootstrapのリンクスタイルはクリック中やクリック後まで指定してあるので、思いがけず、なぜここにボックスシャドウが!?みたいなことがよくあるので打ち消しの枠を指定しています。 a:hover, a:active, a:focus {... 2016年2月16日
harada さんのアバター 60views

Bootstrap:ラジオボタンでポップオーバーを呼び出す

CSSを読み込む <link href="bootstrap.css" rel="stylesheet" type="text/css" /> Javascriptを読み込む&記述する <script type="... 2016年1月18日
harada さんのアバター 783views

Bootstrapでテキストフィールドとセレクトボックスとボタンを1行で表示する

HTML <div class="input-group input-group-lg"> <input type="text" class="form-control" placeholder="検索キーワードを入力"... 2015年12月10日
harada さんのアバター 393views

BootstrapのモーダルウィンドウでChart.jsを利用する場合

モーダルウィンドウを開いた時にChart.jsのグラフを表示したい場合、通常の記述のままだとモーダルウィンドウを開いた時にChart.jsが表示されない(実行されない)ことがあります。 その場合はChart.jsのJavaScriptの実行... 2015年9月30日
harada さんのアバター 356views

Bootstrapを利用していて印刷時にGoogleマップが潰れてしまうとき

表示は正常なのに、印刷プレビューを表示するとGoogleマップが潰れてしまう、表示されないというときはBootstrapが原因かもしれません。 具体的にはBootstrap.cssの以下のコードが作用してしまっているようです。 @med... 2015年9月8日
Yukimi Sato さんのアバター 1,199views

【Bootstrap】Bootstrap3でアコーディオン

BootstrapCDNとFont−AwesomeCDNを使って実装します。 Bootstrap3でアイコン付アコーディオン(Collapse)を使用するを参考にさせていただきました。 HTML <!DOCTYPE html&g... 2015年8月13日
Tetsuro  Aoki さんのアバター 2,525views

Bootstrapのnavbar-brandを中央寄せする

navbar-brandを中央寄せする方法です。 Webで調べると結構出てくるのですが、微妙に中央からずれていたりスマートフォンだとメニューボタンが効かなくなったりといろいろ不具合があったのでそれらを解決するcssを書いてみました。 .n... 2015年8月11日
harada さんのアバター 145views

Bootstrap3のボタングループで線が重なるバグを修正する

Bootstrapのbtn-groups-justifiedクラスを利用することで、簡単に均等配置のボタングループが作成できます。 http://getbootstrap.com/components/#btn-groups-justifi... 2015年6月17日
高瀬 裕介 さんのアバター 352views

Bootstrapで特定の要素をモバイルで非表示にする

モバイルにかぎらず画面幅の狭い端末では詳細項目を非表示にしたい時があります。 Bootstrapにはレスポンシブ対応のためのCSSクラスが予め用意されています。 <table class="table table-striped"&... 2015年5月29日
harada さんのアバター 2,277views

Bootstrapでサイドブロック固定を行う場合は「Affix」ではなくjQueryプラグインを利用した方がいい

Bootstrapでは簡単にメニューブロックなどの固定を行うことができるJavascript「Affix」がついてます。 なのでエレベーター式の右ブロック固定をするときにこちらを利用しようと思ったんですが、色々と問題が発生してしまいました。... 2014年11月12日
harada さんのアバター 2,149views

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

bootstrap-selectというライブラリを追加することで、セレクトボックスをデフォルトからBootstrapのボタンやドロップダウンを利用したスタイルに変更することができます。 利用方法 jQueryを利用しているのでjQuer... 2014年11月5日
Yukimi Sato さんのアバター 561views

【bootstrap】入れ子にする時は親よりも大きくならないようにする

<div class="row"> <div class="col-md-8">.col-md-8 ←親は【8】 <div class="row"> <div class="... 2014年10月8日