HTML,CSS,PHP,ワードプレスカスタマイズ 技術情報資料

bootstrap ひな形

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 -->


スポンサーリンク

関連記事

スポンサーリンク

カテゴリー