茶鏡のブログ

駆け出しのWebデザイナーが文句ばっかりぐちぐちぐちぐち言う日記です。

Bootstrap(Ver.3) のこまかーいこわざ覚書 

かなりお久しぶりです。

Bootstrapも、もうVer4ですけれども、えーいこちとらIE8対応せにゃあかんのじゃーということで、案件で使った本当に細かい小技を覚書としてご紹介します。

BootstrapのいいところはJavascriptが強力で、説明書にないことしたくなってもある程度対応できるところですねぇ。また思い出したら書きたいとおもいます。


リンク先の特定タブを開かせる

なんだか日本語になっておりませんが、「このリンクおした時だけ、hogeページにある(初期状態は#TabAがアクティブな)タブ#Tabの#TabBをアクティブにしたい」というときに使います。

HTML リンクを設置するページに
<a href="hoge.html#TabB">TabBひらいて!</a>
JS タブ#Tabが設置されたhogeページに書きます
$(function(){
    var TargetTab = location.hash;
    if (TargetTab == "#TabB"){
        $("#Tab a[href='#TabB']").tab('show');
        location.hash = '';
    }
        else{return false;}
});

ドロップダウンメニューが開いている時だけ周りを暗くしたい

これはメガドロップダウンメニューを使う時であるかもしれません。

HTML ページの下の方に設置
<div id="Cover" class="CoverBg"></div>
CSS
.CoverBg {
    width: 100%;
    height: 100%;
    /*背景画像の設定はおこのみで*/
    background: transparent url("img/bg_cmn_dropdown.png") repeat scroll center center;
    /*他のJSやCSSの設定に応じてz-indexを設定してください。*/
    z-index: 200;
    position: fixed;
    top: 0px;
    left: 0px;
    display: none;
}
JS
$(.dropdown').on('shown.bs.dropdown',function(){
    var BodyHeight = $("body").height(); //Get Header Height
    $("#Cover").css("height",BodyHeight);
    $("#Cover").stop().show();
});
$('.dropdown').on('hidden.bs.dropdown',function(){
    $("#Cover").stop().hide();
});
$("#Cover").click(function(){
    $('.dropdown-toggle').dropdown();
});

Bootstrapで印刷対応する(ざっくり編)

そんなむちゃくちゃな…という話ですが、ざっくりと紹介します。というよりは、gistの紹介ですねぇ〜^^。

Bootstrapのプリントの設定を外す

デフォルトのままでは白地に黒になってしまうので外します。これはBootstrap-Sassを使っているとやり方によって違うのですが、ダウンロードしてつかう場合は「Customize」のところで「Print media styles」を外すと行ける気がします。

印刷用CSSを作る

私は下記gistを参考にしました。「small表示の時の状態でプリントする」設定です。
パソコン表示にしたかったので、これをほぼそのままコピペして、sm になっているところを md に変えます。
このgistはグリッドの設定ですので、サイドバーを非表示にするなどは、よしなにしてくださいませ。

Render Bootstrap as "small" layout when printing