カテゴリー別アーカイブ: Bootstrap

Bootstrap4で改行brをスクリーンサイズで表示非表示

全て表示(初期値)   br class=”d-block”
XSサイズのみ表示   br class=”d-block d-sm-none”
SMサイズのみ表示   br class=”d-none d-sm-block d-md-none”
MDサイズのみ表示   br class=”d-none d-md-block d-lg-none”
LGサイズのみ表示   br class=”d-none d-lg-block d-xl-none”
XLサイズのみ表示   br class=”d-none d-xl-block”

全てのサイズで非表示   br class=”d-none”
XSサイズのみ非表示   br class=”d-none d-sm-block”
SMサイズのみ非表示   br class=”d-sm-none d-md-block”
MDサイズのみ非表示   br class=”d-md-none d-lg-block”
LGサイズのみ非表示   br class=”d-lg-none d-xl-block”
XLサイズのみ非表示   br class=”d-xl-none”

印刷時、リンク箇所にURLが入ってしまうのを回避

Bootstrapの場合、印刷時にリンク箇所へURLが付記されてしまうことがあります。
これを回避するには、CSSの記述へ下記を追加してください。

@media print {
 a[href]:after {
 content: "" !important;
 }
  abbr[title]:after {
 content: "" !important;
 }
}

忘れないようにメモ。

Bootstrap3 マテリアル

Bootstrap3の標準で用意されているマテリアル（ボタン、フォーム…パーツ）以外に増やしたい場合に便利なサイトです。

Material Design for Bootstrap

Bootstrapでスライドボタン

見た目も使い勝手もよいBootstrap対応のスライドボタン。
クリックするとオンオフが簡単にできます。
提供しているのは「Bootstrap switch」

http://www.bootstrap-switch.org/
ダウンロード先
https://github.com/nostalgiaz/bootstrap-switch

ブラウザチェック用 App

HP制作では、色々な環境で動作チェックをする必要があります。
PC以外（スマホ、タブレット等）の画面サイズチェックは、以前 miyakawa が紹介していましたが、今回はOS毎の各ブラウザチェックに便利なアプリをご紹介します。

Sauce
Mac App Store で紹介されている無料アプリです。（全機能を使う場合は有料）
https://itunes.apple.com/jp/app/sauce/id564308477?mt=12

閲覧したいURL、OS、ブラウザ、画面サイズを選択してNavigateをクリック！（画面はお試し使用時）

使い心地は…というと、上記URLのレビューにもある通り「重い」。
でも、画面チェックとしてはかなり使えると思います。
ちなみに、全機能を使うならユーザー登録（無料 or 有料）が必要みたいですが、IE6〜10なら登録をしない「お試し」でもチェック出来ました。
ちなみにNavigateボタンをクリックした後、「Connecting…」画面の画像が動かないため、一瞬「フリーズか！？」と焦りました（笑）

販売元： SAUCE LABS INC

Bootstrap アイコン

Bootstrapは標準で140のアイコンが簡単な指定で表示できます。
黒のアイコンなら　 
白のアイコンなら　 
の赤字のそれぞれ入れればOKで簡単です。

さらに多くのアイコンを使用したい場合に2つのサイトを紹介します。

■Elusive Icons
271のアイコンがあります。

http://aristath.github.com/elusive-iconfont/

■Font Awesome
249のアイコンがあります。

設置方法：ダウンロードした中のCSS「font-awesome.min.css」と「font-awesome-ie7.min.css」をCSSフォルダーに入れる。
「font」フォルダーをそのまま、index.htmlと同じ階層にそのまま入れる。
index.htmlに下記の記述を追加する。
<link href=”css/font-awesome.min.css” rel=”stylesheet”>
<!–[if IE 7]>
<link rel=”stylesheet” href=”css/font-awesome-ie7.min.css“>
<![endif]–>
赤字は置いてある場所を確認して変更する。

後は使用したいアイコンをそれぞれ指定をする。
 icon-camera-retro
 icon-circle-down
 icon-circle-right
 icon-circle-left
<a href=”#t”> icon-circle-arrow-up</a>
 Spinner icon