デファクトスタンダードなCSSフレームワーク。 2021年5月5日に現在のBootstrap5がリリースされました
No.2208
09/01 11:20

edit

Bootstrap4 で disabled な button にも tooltip を表示させる

● Bootstrap4 で disabled な button にも tooltip を表示させる

1. html ( button を div で囲み、title をコピーする )

<button data-toggle="tooltip" type="button" disabled="disabled" title="このデータは削除できません" class="btn"></button>

 ↓

<div class="button-wrapper" data-toggle="tooltip">
	<button data-toggle="tooltip" type="button" disabled="disabled" title="このデータは削除できません" class="btn"></button>
</div>

2. css

<style>
.tooltip.show {
    opacity: 0.95;
}

.tooltip .tooltip-inner {
    font-size: 12px;
    color: red;
    background-color: #fff;
    border: solid 1px #333;
    opacity: 1.0;
}

/* disabled な button に tooltipを適用させる */
.button-wrapper {
  display: inline-block;
}
.button-wrapper .btn:disabled {
  pointer-events: none;
}
</style>

3. JavaScript

div タグに title を自動的にセットする命令を加えます

<script>
$(function () {
	$('.button-wrapper').attr('title', $('.button-wrapper button').attr('title') );	// divタグに titleをセットする
	$('[data-toggle="tooltip"]').tooltip();
})
</script>
No.1990
04/30 12:52

edit

bootstrap 4 hidden xs

● bootstrap 4 hidden xs

・ スマホ(xs サイズ)のみ非表示

<div class=”d-none d-sm-block”>
スマホでは消えます
</div>

・ スマホ(xs サイズ)のみ表示

<div class=”d-block d-sm-none”>
PCでは消えて、スマホのみ表示されます
</div>
No.1957
02/27 10:46

edit

Bootstrap4 の レスポンシブを無効化する

● Bootstrap4 の レスポンシブを無効化する

1. 次のようなタグを削除する

  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

2. 次の内容で non-responsive.css を作成して読み込ませる

.container {
  min-width: 1000px !important;
  max-width: 1000px !important;
}
No.1682
05/02 22:02

edit

No.1654
01/14 14:20

edit

Bootstrap で ボタンを押した時 アイコンを表示させる

● Bootstrap で ボタンを押した時 アイコンを表示させる

<button type="button" class="btn btn-primary btn-lg " id="load" data-loading-text="<i class='fa fa-circle-o-notch fa-spin'></i> データ送信中...">Submit Order</button>

$('.btn').on('click', function() {
    var $this = $(this);
  $this.button('loading');
    setTimeout(function() {
       $this.button('reset');
   }, 8000);
});

引用: https://codepen.io/jmalatia/pen/HkmaA

No.1640
12/11 09:26

edit

No.1390
12/07 16:06

edit

ダミー画像(アタリ画像)生成スクリプト holder.js

● ダミー画像(アタリ画像)生成スクリプト holder.js

使い方

<script src="//cdnjs.cloudflare.com/ajax/libs/holder/2.9.6/holder.js"></script>

幅 : 350px
高さ : 250px 
の画像を表示する

<img data-src="holder.js/350x250" >

幅 : 100%
高さ : 80px
の画像を表示する

<img data-src="holder.js/100px350" >

↓ このように画像サイズが表示されます。

添付ファイル1
No.1386
09/05 13:58

edit

添付ファイル

Bootstrapのヘルパー部品ライブラリ Smoke

● Bootstrapのヘルパー部品ライブラリ Smoke

http://alfredobarron.github.io/smoke/

・アラート(表示後 xx秒で自動的に消えるやつ + 消すボタン付き)
・確認ダイアログ
・パネル(折りたたみ、フルスクリーン)
・パスワードを隠す、表示する
・(あまり使いませんが)フォームバリデーション

などがあります。

No.1366
11/16 19:02

edit

Bootstrap4でブロック要素を中央表示

● Bootstrap4でブロック要素を中央表示

<div class="mx-auto" style="width: 200px;">
  Centered element
</div>

https://v4-alpha.getbootstrap.com/utilities/spacing/#horizontal-centering

● Bootstrap3でブロック要素を中央表示

<div class="center-block">
  Centered element
</div>
No.1358
11/13 13:42

edit

Bootstrap4でテーブルを角丸表示させる

● Bootstrap4でテーブルを角丸表示させる

cssクラス table_border_radius を作成してテーブルに割り当てます。

<table class="table table-bordered table_border_radius">
	<tr>
		<td>TEST</td>
		<td>テストデータです。</td>
		<td>テストデータです。</td>
	</tr>
	<tr>
		<td>TEST</td>
		<td>テストデータです。</td>
		<td>テストデータです。</td>
	</tr>
	<tr>
		<td>TEST</td>
		<td>テストデータです。</td>
		<td>テストデータです。</td>
	</tr>
</table>

Bootstrap4でテーブルを角丸表示させるCSS

.table_border_radius {
  border: 1px solid red;
  border-radius: 5px;
  border-spacing: 0;
  border-collapse: separate;
}
.table_border_radius tr td {
	border: none;
	border-bottom: 1px solid black;
	border-right: 1px solid black;
}
.table_border_radius tr td:first-child {
  border-left: none;
}
.table_border_radius tr td:last-child {
  border-right: none;
}
.table_border_radius tr:first-child td {
  border-top: none;
}
.table_border_radius tr:last-child td {
  border-bottom: none;
}
TEST テストデータです。 テストデータです。
TEST テストデータです。 テストデータです。
TEST テストデータです。 テストデータです。
No.1327
10/27 22:48

edit

Bootstrap カルーセル(画像スライド)のデモ

Bootstrap3 カルーセルのデモはこちら

● html

  <div id="sampleCarousel" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
      <li class="active" data-target="#sampleCarousel" data-slide-to="0"></li>
      <li data-target="#sampleCarousel" data-slide-to="1"></li>
      <li data-target="#sampleCarousel" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner" role="listbox">
      <div class="item active">
        <img src="./001.jpg" alt="写真1">
      </div>
      <div class="item">
        <img src="./002.jpg" alt="写真1">
      </div>
      <div class="item">
        <img src="./003.jpg" alt="写真1">
      </div>
    </div>
    <a class="left carousel-control" href="#sampleCarousel" role="button" data-slide="prev">
		<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
		<span class="sr-only">前へ</span>
	</a>
    <a class="right carousel-control" href="#sampleCarousel" role="button" data-slide="next">
		<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
		<span class="sr-only">次へ</span>
	</a>
  </div>

● JavaScript からカルーセルを操作する

  // スライドの停止
  function stop_slide() {
    jQuery('#sampleCarousel').carousel('pause');
    alert('スライドを停止しました');
  }

  // 任意の画像へ移動
  function carousel_move(no) {
    jQuery('#sampleCarousel').carousel(no);
  }
No.1191
10/27 22:50

edit

画像

BootstrapのCSSスタイルを<div>タグの中にだけ適用する

● BootstrapのCSSスタイルを<div>タグの中にだけ適用する

既存の 非bootstrap 環境で作成されたwebサイトに対し、後から Bootstrapの部品を入れたい場合があります。
この時<head>タグでbootstrapを読み込んでしまうと<body>タグ全体に Bootstrapのcssスタイルが適用され 、
グローバルナビゲーションなどのレイアウトが崩れる可能性があります。

そこで任意のクラス内だけbootstrapのcssstyleを適用できれば既存のナビゲーションが崩れることはありません

こちらにとても簡単な方法で クラス内だけ Bootstrap を適用する方法を採用されている方がいます
特定のdiv要素の中だけBootstrapを適用する - Qiita

考え方としてはとてもシンプルで scss で任意のクラスを作成してその中に bootstrap.css を全部取り込んでしまうというやり方です。
(賢いですね。やり方はこちら ↓ )

● BootstrapのCSSスタイルを<div>タグの中にだけ適用する方法(手っ取り早くする場合)

1. mybootstrap.css をダウンロードする。

https://pgmemo.tokyo/data/filedir/1178_1.css?975

2. mybootstrap.css を htmlから読み込んで適用する

これで bootstrapクラス内だけ Bootstrapのcssが適用されます。

<div class="bootstrap">
・・・・・・・・・・
</div>

● BootstrapのCSSスタイルを<div>タグの中にだけ適用する方法(自分でコンパイルする場合)

1. bootstrap.css をダウンロードする。

2. bootstrap.css を bootstrap.scss にリネームする

mv  bootstrap.css  bootstrap.scss

3. mybootstrap.scss を作成する。

下記の内容で mybootstrap.scss を作成します。

.bootstrap {
  @import "bootstrap"
}

4. mybootstrap.scss をコンパイルする。

・scssファイルをコンパイルする「node-sass」 をインストールします。

npm install -g node-sass

・mybootstrap.scss をコンパイルします。

node-sass my_bootstrap.scss my_bootstrap.css 

5. mybootstrap.css を htmlから読み込んで適用する

これで bootstrapクラス内だけ Bootstrapのcssが適用されます。

<div class="bootstrap">
・・・・・・・・・・
</div>
添付ファイル1
No.1178
09/05 13:52

edit

添付ファイル

css
sass

jqueryとbootstrapのカレンダーで日本の祝日を表示する

● jqueryとbootstrapのカレンダーで日本の祝日を表示する

http://0-oo.net/sbox/javascript/google-calendar-holidays
こちらのスクリプトがとてもよくできているのでありがたく使わせていただきます。

● デモを見てみる

jQuery UI Datepickerに祝日を表示するデモ

● jscssファイルの読み込みとスタイルの上書き

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css"/>
<script src="https://g.0-oo.net/gcalendar-holidays.js"></script>
<style>
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover {
    color: white !important;
    background-color: rgb(0, 127, 255) !important;
}
</style>

● カレンダー用フォームの設置

<input type="text" id="test">

● カレンダースクリプトの起動

<script>
$(function() {
    var months = ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"];
    $("#test").datepicker({
        prevText: '前月',
        nextText: '次月',
        // changeYear: true,
        // changeMonth: true,
        yearSuffix: "年",
        showMonthAfterYear: true,
        monthNames: months,
        monthNamesShort: months,
        firstDay: 1,
        dayNamesMin: ["日", "月", "火", "水", "木", "金", "土"],
        showButtonPanel: true,
        currentText: '今日',
        closeText: '閉じる',
        dateFormat: "yy/m/d"
    });
    $("#test").focus();
});
</script>

● bootstrapで使用する場合

bootstrapにはbootstrap datepicker と言うのがありますが 無視してjQuery datepicker を使用する方が応用がきくのでおすすめです。

・bootstrap版が使いたい場合はこちらからどうぞ
https://github.com/tempusdominus/bootstrap-4

・bootstrap非依存版
https://github.com/tempusdominus/datetimepicker

No.1155
06/17 09:20

edit

bootstrapのタブをcookieに記憶させる。URLの #tab1 などでタブを切り替える。

● bootstrapのタブをcookieに記憶させる

bootstrapのタブはそのページをリロードしたり次のページに行って戻ってきたりするとデフォルトの状態に戻されています。
次のようにしてそこでクッキーに保存してタグの状態を記憶させるようにします。

ファイル bootstrap_save_tab.js を次のような内容で保存する

/**
 * Handles 'Bootstrap' package.
 *
 * @namespace bootstrap_
 */

/**
 * @var {String}
 */
var bootstrap_uri_to_tab_key = 'bootstrap_uri_to_tab';

/**
 * @return {String}
 */
function bootstrap_get_uri()
{
    return window.location.href;
}

/**
 * @return {Object}
 */
function bootstrap_load_tab_data()
{
    var uriToTab = localStorage.getItem(bootstrap_uri_to_tab_key);
    if (uriToTab) {
    try {
        uriToTab = JSON.parse(uriToTab);
        if (typeof uriToTab != 'object') {
        uriToTab = {};
        }
    } catch (err) {
        uriToTab = {};
    }
    } else {
    uriToTab = {};
    }
    return uriToTab;
}

/**
 * @param {Object} data
 */
function bootstrap_save_tab_data(data)
{
    localStorage.setItem(bootstrap_uri_to_tab_key, JSON.stringify(data));
}

/**
 * @param {String} href
 */
function bootstrap_save_tab(href)
{
    var uri = bootstrap_get_uri();
    var uriToTab = bootstrap_load_tab_data();
    uriToTab[uri] = href;
    bootstrap_save_tab_data(uriToTab);
}

/**
 *
 */
function bootstrap_restore_tab()
{
    var uri = bootstrap_get_uri();
    var uriToTab = bootstrap_load_tab_data();
    if (uriToTab.hasOwnProperty(uri) &&
    $('[href="' + uriToTab[uri] + '"]').length) {
    } else {
    uriToTab[uri] = $('a[data-toggle="tab"]:first').attr('href');
    }
    if (uriToTab[uri]) {
        $('[href="' + uriToTab[uri] + '"]').tab('show');
    }
}

$(document).ready(function() {

    if ($('.nav-tabs').length) {

    // for bootstrap 3 use 'shown.bs.tab', for bootstrap 2 use 'shown' in the next line
    $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
        bootstrap_save_tab($(this).attr('href'));
    });
    bootstrap_restore_tab();

    }

});

bootstrap.min.js , jquery.cookie.min.js とともに読み込ませます

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<script src="./bootstrap_save_tab.js"></script>

以上です。 これだけでbootstrapを使ったページのタブを自動的に記憶してくれるようになります。

● URLの最後の #tab1 などでタブを切り替える

URLの最後の #tab1 などでタブを切り替えるには 次のようにします

html

<ul class="nav nav-tabs">
	<li ><a id="id_tab1" href="#tab1primary" data-toggle="tab">タブ1</a></li>
	<li><a id="id_tab2" href="#tab2primary" data-toggle="tab">タブ2</a></li>
	<li><a id="id_tab3" href="#tab3primary" data-toggle="tab">タブ3</a></li>
	<li><a id="id_tab4" href="#tab4primary" data-toggle="tab">タブ4</a></li>
</ul>

javascript

$(function(){
	if (location.hash == '#tab1'){
		setTimeout( function() {
			$('.nav-tabs a[href="#tab1primary"]').tab('show');
		}, 500 );
	} else if (location.hash == '#tab2'){
		setTimeout( function() {
			$('.nav-tabs a[href="#tab2primary"]').tab('show');
		}, 500 );
	} else if (location.hash == '#tab3'){
		setTimeout( function() {
			$('.nav-tabs a[href="#tab3primary"]').tab('show');
		}, 500 );
	} else if (location.hash == '#tab4'){
		setTimeout( function() {
			$('.nav-tabs a[href="#tab4primary"]').tab('show');
		}, 500 );
	}
});
No.1144
11/14 11:22

edit

Cookie
Bootstrap

Bootstrap4のメディアクエリ

Bootstrap4を使用しているサイトでメディアクエリを追加する場合の記述は以下のようになります。

Bootstrapではデフォルトで次のように画面サイズが決められています

識別子 画面サイズ デバイス
xs 575px以下 モバイル(縦向き)
sm 576px 〜 767px モバイル(横向き)
md 768px 〜 991px タブレット
lg 992px 〜 1199px PC
xl 1200px 以上 PC(大画面)

cssのメディアクエリは次のように記述します。

@media (max-width: 575.98px) {
	.my-class {
		// cssプロパティをここに記述
	}
}

@media (min-width: 576px) and (max-width: 767.98px) {
	.my-class {
		// cssプロパティをここに記述
	}
}

@media (min-width: 768px) and (max-width: 991.98px) {
	.my-class {
		// cssプロパティをここに記述
	}	
}

@media (min-width: 992px) and (max-width: 1199.98px) {
	.my-class {
		// cssプロパティをここに記述
	}	
}

@media (min-width: 1200px) {
	.my-class {
		// cssプロパティをここに記述
	}	
}
No.990
11/14 11:22

edit

Bootstrap