Responsive

ツールチップ ポップオーバー カルーセル bootstrap

<html lang="ja"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap 101 Template</title> <link href="css/bootstrap.min.css" rel="stylesheet"> </link></meta></meta></meta></head></html>

ナビゲーションバー bootstrap

<nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-1"> <span class="sr-only">toggle nav</span> <span class="icon-bar"></span> <span class="icon-bar"><…</span></button></div></div></nav>

ボタンやドロップダウン bootstrap

<div class="btn-group"> <button class="btn btn-primary"><i class="glyphicon glyphicon-heart">about</i></button> <button class="btn btn-success"><i class="glyphicon glyphicon-heart">main</i></button> <button class="btn btn-info"><i class="glyphicon glyphicon-heart">sub</i></button> </div>

offsetでカラムの間に空間を入れる

<form class="form-horizontal"> <div class="form-group"> <label class="control-label col-sm-2" for="postcode">郵便番号</label> <div class="col-sm-4"> <input type="text" id="postcode" class="form-control" placeholder="郵便番号"> </div> </div> <div class="form-group"></div></form>

ナビゲーションバーのJSライブラリ

http://formstone.it/components/naver PC表示 SP表示 SP表示

画面に合わせてサイズ縮小・拡大

img { max-width: 100%; height: auto; width: auto; display: block; }

IE8へのレスポンシブ対応

media queryへの対応 header内に以下を記述する。 importは使わない @media screen and (max-width:1180px){foo}

webアプリモードにする

<meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <link rel="apple-touch-startup-image" href="#"></link></meta></meta>