bootstrap ひな形
スポンサーリンク
wordpress に bootstrap を入れる。 header.php へ挿入
<!– bootstrap —>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="<?php echo get_template_directory_uri(); ?>/bootstrap-3.3.1-dist/css/bootstrap.min.css" rel="stylesheet">
<!–[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]–>
<script src="<?php echo get_template_directory_uri(); ?>/bootstrap-3.3.1-dist/js/bootstrap.min.js"></script>
<!– /bootstrap —>
※通常のサイトでは JQuery の取り込みも必要です。上はWP用に JQuery を外してあります。
wordpress で bootstrap mのグリッドシステムを使う
<!– bootstrap タグの場合 –>
<div class="container-fluid"> <!– talble –>
<!– Bootstrapのグリッドシステムclass="row"で開始 –>
<div class="row"> <!– tr –>
<!– col-{prefix}-{分割数} 分割数の合計を12にする –>
<div class="col-sm-4">~~~</div> <!– td /td –>
<div class="col-sm-4">~~~</div> <!– td /td –>
<div class="col-sm-4">~~~</div> <!– td /td –>
</div> <!– /tr –>
</div> <!– /table –>
スポンサーリンク