Bootstrap 基礎教程

Bootstrapプラグイン

Bootstrap CSS コード規範 Bootstrap スライダープラグイン

Bootstrap HTML コード規範

文法

タブ（tab）の代わりに2つのスペースを使用します。 -- これはすべての環境で一貫した表示を保証する唯一の方法です。
ネストされた要素はインデントを1回（つまり2つのスペース）行います。
属性の定義においては、必ず双引号を使用し、決してシングル引号を使用しないでください。
self-closing（自閉）タグでは、-closing）タグの末尾にスラッシュを追加 -- HTML5 規格中で明確にこれはオプションであると記述されています。）
オプションの終了タグ（closing tag）を省略しないでください（例えば、</li> または </body>）。

例：

<!DOCTYPE html>
<html>
  <head>
    <title>Page title</title>
  </head>
  <body>
    <img src="images/company-logo.png" alt="[#0#]">
    <h1>Hello, world!</h1>
  </body>
</html>

HTML5 doctype

各HTMLページの最初の行に標準モード（standard mode）の宣言を追加し、すべてのブラウザで一貫した表示を確保できます。

例：

<!DOCTYPE html>
<html>
  <head>
  </head>
</html>

言語属性

HTMLに基づいて5 規格：

htmlの根要素にlang属性を指定することを強く推奨します。これにより、ドキュメントの正しい言語が設定され、音声合成ツールが適切な発音を選択し、翻訳ツールが翻訳に従う規則を決定するのに役立ちます。

以下に示す言語コード表。

<html lang="zh">
  <!-- ... -->
</html>

IEコンパチビリティモード

IEは特定の <meta> タグを使用して、現在のページの描画に使用するIEのバージョンを決定します。特に強い特殊な要件がない限り、以下の設定が最適です。 edge mode、これによりIEがサポートする最新のモードを採用するように通知します。

<meta http-equiv="X-UA-Compatible" content="IE=Edge">

文字エンコーディング

明確に文字エンコーディングを宣言することで、ブラウザがページ内容のレンダリング方法を素早く簡単に判断できることを確保できます。これにより、HTML内で文字エンティティマーク（character entity）を使用することを避け、ドキュメントエンコーディングと完全に一致させることができます（一般的にはUTF-8 エンコーディング）。

<head>
  <meta charset="UTF-8">
</head>

CSSとJavaScriptファイルをインポート

HTMLに基づいて5 規格に従って、CSSとJavaScriptファイルをインポートする際には一般的に指定する必要はありません。 type 属性は、 text/css および text/javascript それぞれのデフォルト値です。

HTML5 spec リンク

<!-- 外部 CSS -->
<link rel="stylesheet" href="code-guide.css">
<!-- In-document CSS -->
<style>
  /* ... */
</style>
<!-- JavaScript -->
<script src="code-guide.js"></script>

実用至上主義

HTML 标準と意味をできるだけ守ることをお勧めしますが、実用性を犠牲にしないようにしてください。いつでも、最小のタグを使用し、最小の複雑さを保つようにしてください。

属性順序

HTML 属性は以下の順序で並べ替え、コードの読みやすさを確保してください。

class
id, name
data-*
src, for, type, href
title, alt
aria-*, role

class は高度に再利用可能なコンポーネントを識別するために使用されるため、最初に配置するべきです。id は特定のコンポーネントを識別するために使用されるため、慎重に使用する必要があります（例えば、ページ内のブックマークなど）、そのため、第二に配置します。

<a id="..." data-modal="toggle" href="#">
  例リンク
</a>
<input type="text">
<img src="..." alt="[#1#]">

ボルン（boolean）型属性

ボルン（boolean）型属性は、宣言時に値を設定しなくても構いません。XHTML 规範では値を設定する必要がありますが、HTML5 規範には必要ありません。

さらに詳しい情報は、以下を参照してください WhatWG ボルン属性に関するセクション：

要素のボルン属性が値を持っている場合、それは true であり、値がない場合、それは false です。

もし一定値を設定する場合、WhatWG 规範を参照してください：

属性が存在する場合、その値は空文字列または [...] 属性の規範的な名前でなければなりません。また、先頭と末尾にスペースを追加しないでください。

簡単に言えば、値を設定しないことです。

<input type="text" disabled>
<input type="checkbox" value="1" checked>
<select>
  <option value="1" selected>1</option>
</select>

タグの数を減らす

HTML 代码を書く際には、余分な親要素を避けましょう。多くの場合、これには反復と再構築が必要です。以下の例をご覧ください：

<!-- それほど良くありません -->
<span>
  <img src="...">
</span>
<!-- より良い -->
<img src="...">

JavaScriptで生成されたタグ

JavaScriptで生成されたタグは、内容の検索や編集を難しくし、パフォーマンスを低下させるため、避けられる場合は避けましょう。

Bootstrap CSS コード規範 Bootstrap スライダープラグイン