htmlの基本構造と、<head>内での記述、レイアウトの骨格についてのマークアップのルールです。
文書メタデータ
<head>内ではDOCTYPE宣言、メタ情報の記述、cssの読み込みをします。
DOCTYPE宣言（Document Type Definition、DTD）の記述はHTML5を宣言します。
<!DOCTYPE html>
<meta>タグにて各種メタ情報の記述をします。文字コードはutf-8を使用してください。Bootstrapのグリッドシステム、メディアクエリの仕組みを使いレスポンシブ表示を正しく動作させるために、viewportの設定をします。
iPhoneやiPadの「ホーム画面に追加」から作成したショートカットからフルスクリーンモードで画面を開くためにapple-mobile-web-app-capableをyesに、apple-touch-iconでホーム画面のショートカットに使用するアイコン画像を指定します。ただし、ベーシック認証をかけている場合、認証のかかったディレクトリ以下にアイコン画像がある場合は表示されません。認証で制限されていない場所に置いたアイコン画像を指定するようにしてください。
<meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="apple-mobile-web-app-capable" content="yes"> <link rel="apple-touch-icon" href="images/apple-touch-icon.png">
ab-ui.cssとプロジェクト用のcssを読み込みます。ab-ui.cssの後にプロジェクト用のcssを読み込ませて下さい。
<!-- Loading AB UI --> <link rel="stylesheet" type="text/css" href="css/ab-ui.css"> <!-- プロジェクト用のCSS --> <link rel="stylesheet" type="text/css" href="css/***.css">
サイトヘッダー
システム全体に共通で使用するヘッダーです。全体で共通であるシステム名称やログイン情報などを配置します。
<div class="navbar with-sidebar with-sidebar-below" role="navigation" id="header-site">
<div class="navbar-header">
<button type="button" class="sidebar-toggle">
<span class="sr-only">Toggle sidebar</span>
</button>
<h1 class="navbar-title"><a href="#">システム名称</a></h1>
</div>
</div>
コンテンツヘッダー
画面およびフローに固有のヘッダーです。画面やフローのタイトルおよびおよびサブナビゲーションや関連画面へのリンクなどを配置します。
<nav class="navbar navbar-default navbar-lg with-sidebar" id="header-content">
<div class="navbar-header">
<h2 class="navbar-title">画面タイトル</h2>
</div>
</nav>
コンテンツ
コンテンツは.containerの中に.sectionを設け、その中に記述していきます。.sectionのなかに、グリッドシステムを使って要素を配置します。
フットブロック
ウィンドウ下辺に固定でフロートして常時表示できる領域です。コンテンツの分量にかかわらず最下部までのスクロールを必要としないため、いつでもアクションを起こせるようにするためのボタンを配置したりするのに利用します。
<div class="navbar navbar-default with-sidebar navbar-fixed-bottom navbar-footblock" role="navigation">
<ul class="nav navbar-nav navbar-right">
<li><button class="btn">ボタン</button></li>
</ul>
</div>