Movable TypeにBootstrapを導入1

  • 投稿日:
  • by
  • カテゴリ:

Movable TypeにBootstrapを導入1

bootstrapを利用するための必要なものは、

bootstrap-3.3.4-dist(現時点で最新のもの)をダウンロード

bootstrap
|_____ css
| |_________ bootstrap.css
| |_________ bootstrap.min.css
| |_________ bootstrap.css.map
| |_________ bootstrap-them.css
| |_________ bootstrap.theme.min.css
| |_________ bootstrap.theme.css.map
|_____ fonts
| |_________ glyphiconshalflings-regular.eot
| |_________ glyphiconshalflings-regular.svg
| |_________ glyphiconshalflings-regular.ttf
| |_________ glyphiconshalflings-regular.wof
|______ js
| |_________ bootstrap.js
| |_________ bootstrap.min.js

mtフォルダー内もしくは各ブログ内に
(mtフォルダーには今後bootstrapが入る可能性もある。)
でもmtのバージョンアップ時に当然サイド入れなくてはいけないので。
各ブログ内にbootstrap 用のcss, js, , fontフォルダーを作っていれておくのがいいか。

外部からCDNを利用して導入する場合は 

CSSを<head><head>内に書き込む。
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"> <head>

もしくは、HTMLヘッダー内に記述して、ブログのフォルダー下層のCSSフォルダーにある。
<!-- Bootstrap core CSS -->
<link href="<$mt:BlogURL$>css/bootstrap.min.css" rel="stylesheet">
<link href="<$mt:BlogURL$>styles.css" rel="stylesheet">

ブログ/css/ bootstrap.min.cssを入れておけばいい。


jsは、

インデックスページ、ブログ用インデックスページ、記事、ウェブページなどを
</footer>と </body>の間に挿入。スクリプトは最後に読み込まれるようにする。


</footer>

<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="<$mt:StaticWebPath encode_html="1"$>jquery/jquery.min.js"></script>
<script src="<$mt:Link template="javascript_theme" encode_html="1">"></script>
<script src="<$mt:BlogURL$>js/bootstrap.min.js"></script>

</body>


テンプレートモジュールで
carousel
jumbotoron
navbarfixed
featurettes
container maketing
などを導入