Bootstrap Grundlagenanleitung

Bootstrap 插件

BootstrapCSSKodierungsnorm BootstrapDiashowPlugin

BootstrapHTMLKodierungsnorm

语法

用两个空格来代替制表符（tab） -- 这是唯一能保证在所有环境下获得一致展现的方法。
嵌套元素应当缩进一次（即两个空格）。
对于属性的定义，确保全部使用双引号，绝不要使用单引号。
不要在自闭合（self-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>

语言属性

根据 HTML5 规范：

强烈建议为 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 文件

根据 HTML5 规范，在引入 CSS 和 JavaScript 文件时一般不需要指定 type 属性，因为 text/css 和 text/javascript 分别是它们的默认值。

HTML5 Spezifikationslinks

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

Praktikabilität ist das Wichtigste

Beachten Sie so weit wie möglich die HTML-Standard und Semantik, aber verzichten Sie nicht auf Praktikabilität. Verwenden Sie immer die geringstmöglichen Tags und halten Sie die Komplexität so gering wie möglich.

Reihenfolge der Attribute

HTML-Attribute sollten in der nachstehend angegebenen Reihenfolge geordnet werden, um die Lesbarkeit des Codes zu gewährleisten.

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

class wird verwendet, um hoch wiederverwendbare Komponenten zu kennzeichnen und sollte daher an erster Stelle stehen. id wird verwendet, um spezifische Komponenten zu kennzeichnen und sollte vorsichtig verwendet werden (z.B. Bookmarks innerhalb einer Seite), daher an zweiter Stelle.

<a id="..." data-modal="toggle" href="#">
  Beispiel-Link
</a>
<input type="text">
<img src="..." alt="[#1#]">

Booleanische (boolean) Attribute

Booleanische Attribute können ohne Zuweisung deklariert werden. Die XHTML-Spezifikation erfordert eine Zuweisung, aber HTML5 Spezifikation ist nicht erforderlich.

Für mehr Informationen siehe WhatWG-Sektion über booleanische Attribute:

Booleanische Attribute eines Elements sind wahr, wenn ein Wert vorhanden ist, und falsch, wenn kein Wert vorhanden ist.

wenndefinitivFür die Zuweisung von Werten bitte referieren Sie auf die WhatWG-Spezifikation:

Wenn das Attribut existiert, muss der Wert eine leere Zeichenfolge oder der reguläre Name des [...] Attributs sein, und es sollten keine Leerzeichen an den Anfang und das Ende angehängt werden.

Kurz gesagt, es sollte keine Werte zugewiesen werden.

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

Verringern Sie die Anzahl der Tags

Beim Schreiben von HTML-Code sollte vermieden werden, überflüssige Eltern-Elemente zu verwenden. Dies erfordert oft Iteration und Refactoring. Sehen Sie sich das folgende Beispiel an:

<!-- Nicht so groß -->
<span>
  <img src="...">
</span>
<!-- Besser -->
<img src="...">

Mit JavaScript erstellte Tags

Durch mit JavaScript erstellte Tags wird der Inhalt schwer auffindbar, editierbar und die Leistung verringert. Vermeiden Sie sie, wenn möglich.

BootstrapCSSKodierungsnorm BootstrapDiashowPlugin