Wikidot-Bootstrap解析

wikidot-bootstrap-analysys.png

デフォルトで用意されているWikidot Bootstrapのコードの中身はどうなってるのか?紐解いてみよう
default.png
sampleのHTMLコード
layout documentation

解析結果(途中)

<div class="header">
<h1><a href="/">[[site_name]]</a>
</h1>
[[site_subtitle]]
<div class="login-status">
[[module LoginStatus]] 
</div>
</div>
<h2>[[page_title]]</h2>
[[breadcrumbs]] 
[[content]]
[[search_box]]
[[module PageOptionsBottom]]

ヘッダー

bodyの始まり

<body id="html-body"><div class="container">
    <div id="header" class="navbar">
    <div class="navbar-inner">
        <div class="container-fluid">
            <a href="/" class="brand"><span>Jasminlactone</span></a>
            <div class="nav-collapse collapse">
 
                    <span>miffy</span>

[[module LoginStatus]]

<div class="navbar-text pull-right" id="login-status">

正確にはここから
<div class="btn-group" style="z-index: 1001;">
<button class="btn disabled" style="opacity: 1; filter: alpha(opacity=100);"><span class="printuser"><a href="http://www.wikidot.com/user:info/miffysora" onclick="WIKIDOT.page.listeners.userInfo(1205539); return false;"  ><img class="small" src="http://www.wikidot.com/avatar.php?userid=1205539&amp;size=small&amp;timestamp=1386422375" alt="miffysora" style="background-image:url(http://www.wikidot.com/userkarma.php?u=1205539)"/></a>miffysora</span> <div class="badge badge-info">1</div></button><div class="btn dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></div><ul class="dropdown-menu"><li><a href="http://www.wikidot.com/account/activity"><i class="icon-dashboard"></i> アクティビティ</a></li><li><a href="http://www.wikidot.com/account/messages"><i class="icon-envelope"></i> メッセージ<div class="badge badge-info">1</div></a></li><li><a href="http://www.wikidot.com/account/settings"><i class="icon-cogs"></i> 設定</a></li><li><a href="http://www.wikidot.com/account/upgrade"><i class="icon-credit-card"></i> アップグレード</a></li><li class="divider"></li><li><a href="http://jasminlactone.wikidot.com/_admin"><i class="icon-cog"></i> サイトを管理する</a></li><li class="divider"></li><li><a href="javascript:;" onclick="WIKIDOT.page.listeners.logoutClick(event)"><i class="icon-signout"></i> サインアウト</a></li></ul></div><script  type="text/javascript">WIKIREQUEST.userId = 1205539;</script>

おまけ、なんで囲われたのかわからない。
</div>

サーチボックス

<div id="search-top-box" class="form-search">
    <form id="search-top-box-form" action="dummy" class="input-append">
        <input id="search-top-box-input" class="text empty search-query" type="text" size="15" name="query" value="このサイトを検索" onfocus="if(YAHOO.util.Dom.hasClass(this, 'empty')){YAHOO.util.Dom.removeClass(this,'empty'); this.value='';}"/><input class="button btn" type="submit" name="search" value="検索"/>
    </form>
</div>
            </div><!--/.nav-collapse -->
        </div><!-- container-fluid -->
    </div><!-- navbar-inner -->
</div><!-- header navbar -->

本文開始?

      <div class="row-fluid">            
        <div class="span12 ">
            <h1>Sample</h1>

[[contents]]

            <div id="page-content">
            </div>
            <div id="page-info-break"></div>

[[module PageOptionsBottom]]

                <div id="page-options-container">
                    <div id="page-info">ページリビジョン: 0, 最終更新日時: <span class="odate time_1386422370 format_%25e%20%25b%20%25Y%2C%20%25H%3A%25M%20%28%25O%20%E5%89%8D%29">07 Dec 2013 13:19</span></div><div class="page-watch-options">            <a href="javascript:;" onclick="WIKIDOT.page.listeners.awatch(event, 'site')">jasminlactone.wikidot.com</a> | <a href="javascript:;" onclick="WIKIDOT.page.listeners.awatch(event, 'category')">_defaultカテゴリ</a> | <a href="javascript:;" onclick="WIKIDOT.page.listeners.awatch(event, 'page')">このページ</a>をお気に入りに登録する        
    [<a href="http://www.wikidot.com/faq:watching" target="_blank">?</a>]
</div>
            <div id="page-options-bottom"  class="page-options-bottom">
            <a href="javascript:;" class="btn btn-default" id="edit-button">編集</a>
<a href="javascript:;" class="btn btn-default" id="tags-button">タグ</a>
<a href="javascript:;" class="btn btn-default" id="history-button">履歴</a> 
<a href="javascript:;" class="btn btn-default" id="files-button">ファイル</a> <a href="javascript:;" class="btn btn-default" id="print-button">印刷</a> <a href="javascript:;" class="btn btn-default" id="site-tools-button">サイトツール</a>
<a href="javascript:;" class="btn btn-default" id="more-options-button">+&nbsp;オプション</a> 
</div>
<div id="page-options-bottom-2" class="page-options-bottom form-actions" style="display:none">
    <a href="javascript:;" class="btn btn-default" id="edit-sections-button">セクションを編集</a>
    <a href="javascript:;" class="btn btn-default" id="edit-append-button">追加</a>
    <a href="javascript:;" class="btn btn-default" id="edit-meta-button">メタを編集</a>
    <a href="javascript:;" class="btn btn-default" id="watchers-button">ウォッチャー</a> 
    <a href="javascript:;" class="btn btn-default" id="backlinks-button">バックリンク</a> 
    <a href="javascript:;" class="btn btn-default" id="view-source-button">ページのソース</a> 
    <a href="javascript:;" class="btn btn-default" id="parent-page-button"></a> 
    <a href="javascript:;" class="btn btn-default" id="page-block-button">ページロック</a>    
    <a href="javascript:;" class="btn btn-default" id="rename-move-button">名を変更する</a> 
    <a href="javascript:;" class="btn btn-default" id="delete-button">削除</a> 
</div>
<div id="page-options-area-bottom">
</div>
 
                </div>
 
            <div id="action-area" class="well" style="display: none;"></div>
        </div><!--/span-->
      </div><!--/row-->
 
      <hr>
 
    <div id="footer" style="display: block; visibility: visible;">
        <div class="options" style="display: block; visibility: visible;">
    <a href="http://www.wikidot.com/doc" id="wikidot-help-button">ヘルプ</a>
    &nbsp;|
    <a href="http://www.wikidot.com/legal:terms-of-service" id="wikidot-tos-button">サービス利用規約</a>
    &nbsp;|
    <a href="http://www.wikidot.com/legal:privacy-policy" id="wikidot-privacy-button">プライバシー</a>
    &nbsp;|
    <a href="javascript:;" id="bug-report-button" onclick="WIKIDOT.page.listeners.pageBugReport(event)">バグを報告する</a>
    &nbsp;|
    <a href="javascript:;" id="abuse-report-button" onclick="WIKIDOT.page.listeners.flagPageObjectionable(event)">違反を報告する</a>
</div>
サポートサイト <a href="http://www.wikidot.com">Wikidot.com</a> 
    </div>
 
        <div id="license-area" class="license-area">
            特に指定がない限り、このサイトのコンテンツには次のライセンスが適用されます: <a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/">Creative Commons Attribution-ShareAlike 3.0 License</a>
        </div>
 
    </div>
 
    <div id="dummy-ondomready-block" style="display: none;" ></div>
</div>
<div id="dummy-ondomready-block" style="display: none;" ></div>

最初からついてくるフッター部


bootstrap

サポートサイト Wikidot.com bootstrap