Bootstrap базовый учебник

Bootstrap плагины

Нормы кодирования CSS Bootstrap Плагин слайдера Bootstrap

Нормы кодирования HTML Bootstrap

Грамматика

Используйте два пробела вместо табулятора (tab) -- это единственный способ обеспечить единообразное отображение во всех средах.
Вложенные элементы должны быть отступлены один раз (то есть два пробела).
Для определения свойств, убедитесь, что вы используете двойные кавычки, никогда не используйте одинарные кавычки.
Не добавляйте косую черту в конце элементов, имеющих автоматическое завершение (self-closing elements) -- Спецификация HTML5в котором явно указано, что это необязательно.
Не опускайте необязательные завершающие теги (closing tags) (например,</li> или </body>).

Пример:

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок страницы</title>
  </head>
  <body>
    <img src="images/company-logo.png" alt="[#0#]">
    <h1>Hello, world!</h1>
  </body>
</html>

DOCTYPE HTML5

Добавьте заявление стандартного режима (standard mode) в первую строку каждого HTML-документа, чтобы обеспечить единообразное отображение в каждом браузере.

Пример:

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

Свойства языка

Согласно спецификации HTML5:

Рекомендуется явно указать атрибут lang для корневого элемента html, чтобы установить правильный язык документа. Это поможет инструментам озвучивания определить их发音, а также поможет инструментам перевода определить правила, которые они должны соблюдать при переводе.

Здесь приведеныТаблица кодов языков.

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

режимы совместимости IE

IE поддерживает использование специальных <meta> тегом, чтобы определить версию IE, которую следует использовать для рисования текущей страницы. Unless there is a strong special need, it is better to set it to режим edgeТаким образом, уведомить IE использовать его наиболее новый режим.

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

Кодировка символов

Через явное заявление кодировки символов можно обеспечить быструю и легкую оценку способа отображения содержимого страницы браузером. Это имеет преимущество в том, что можно избежать использования символьных entidades (character entities) в HTML, чтобы они полностью соответствовали кодировке документа (обычно используется UTF-8).

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

Введение файлов CSS и JavaScript

Согласно спецификации HTML5, при引入 файлов CSS и JavaScript обычно не нужно указывать type атрибуты, потому что text/css и text/javascript Это их значения по умолчанию.

Ссылки спецификации HTML5

<!-- Внешний CSS -->
<link rel="stylesheet" href="code-guide.css">
<!-- Внутренний 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) атрибуты

Булевые атрибуты могут не быть присвоены при их объявлении. Спецификация 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尽量避免 избыточные родительские элементы. В большинстве случаев это требует итерации и рефакторинга. Вот пример:

<!-- Not so great -->
<span>
  <img src="...">
</span>
<!-- Better -->
<img src="...">

Теги, сгенерированные JavaScript

Теги, сгенерированные JavaScript, делают контент труднее найти, редактировать и снижают производительность. По возможности избегайте их.

Нормы кодирования CSS Bootstrap Плагин слайдера Bootstrap