Tutorial básico do Bootstrap

Plugin do Bootstrap

Padrão de Codificação CSS Bootstrap Plugin de Slideshow Bootstrap

Padrão de Codificação HTML Bootstrap

Sintaxe

Use dois espaços em vez de tabulações (tab). -- É a única maneira de garantir uma apresentação consistente em todos os ambientes.
Os elementos aninhados devem ser recolhidos uma vez (ou seja, dois espaços).
Para a definição de atributos, certifique-se de usar sempre aspas duplas, nunca aspas simples.
Não use rótulos de fechamento auto-encerrados (self-Adicione uma barra invertida no final do elemento de fechamento opcional -- HTML5 Padrãoé explicitamente mencionado como opcional.
Não omita o rótulo de fechamento opcional (closing tag) (por exemplo,</li> ou </body>）。

Exemplo:

<!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

Adicione a declaração do modo padrão (standard mode) na primeira linha de cada página HTML, para garantir uma apresentação consistente em todos os navegadores.

Exemplo:

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

Atributo de idioma

de acordo com o HTML5 Padrão:

Altamente recomendado especificar o atributo lang para o elemento raiz html, para configurar o idioma correto do documento. Isso ajudará as ferramentas de síntese de voz a determinar o modo de pronúncia a ser usado, ajudará as ferramentas de tradução a determinar as regras a serem seguidas durante a tradução, etc.

Aqui está listadoTabela de código de idioma。

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

modo de compatibilidade do IE

O IE suporta usar <meta> a etiqueta para determinar a versão do IE que deve ser usada para renderizar a página atual. A menos que haja uma necessidade especial forte, é melhor configurar como edge mode，notificando o IE para usar o modo mais recente que ele suporta.

<meta http-equiv="X-UA-Compatível" content="IE=Edge">

codificação de caracteres

Ao declarar explicitamente a codificação de caracteres, é possível garantir que o navegador determine rapidamente e facilmente o modo de renderização do conteúdo da página. Essa prática tem a vantagem de evitar o uso de marcadores de entidade de caracteres (character entity) no HTML, mantendo assim a consistência com a codificação do documento (geralmente UTF-8 codificação）。

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

introduzir arquivos CSS e JavaScript

de acordo com o HTML5 padrão, geralmente não é necessário especificar type propriedade, porque text/css e text/javascript São os valores padrão deles.

HTML5 links de especificação

<!-- CSS externo -->
<link rel="stylesheet" href="code-guide.css">
<!-- Em-CSS do documento -->
<style>
  /* ... */
</style>
<!-- JavaScript -->
<script src="code-guide.js"></script>

Praticidade é a regra

Procure seguir os padrões e a semântica do HTML, mas não à custa da utilidade. Em qualquer momento, use o menor número possível de tags e mantenha a menor complexidade possível.

Ordem dos atributos

Os atributos HTML devem ser organizados na ordem fornecida a seguir, garantindo a legibilidade do código.

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

class é usada para identificar componentes altamente reutilizáveis, portanto, deve estar no primeiro lugar. id é usado para identificar componentes específicos e deve ser usado com cautela (por exemplo, favoritos na página), portanto, está no segundo lugar.

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

Atributos booleanos (boolean)

Os atributos booleanos podem não ser atribuídos na declaração. A norma XHTML requer que sejam atribuídos, mas o HTML5 A norma não requer.

Para mais informações, consulte Seção WhatWG sobre atributos booleanos:

Se um atributo booleano do elemento tiver um valor, é true, e se não tiver valor, é false.

SeDeterminadoPara atribuir valores, consulte a norma WhatWG:

Se o atributo existir, seu valor deve ser uma string vazia ou o nome padronizado do atributo [...] e não adicione espaços em branco no início ou no final.

Em termos simples, é não atribuir.

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

Reduza o número de tags

Ao escrever código HTML, evite sempre elementos pais desnecessários. Muitas vezes, isso requer iterações e refatoração. Veja o exemplo a seguir:

<!-- Não tão bom -->
<span>
  <img src="...">
</span>
<!-- Melhor -->
<img src="...">

Etiquetas geradas pelo JavaScript

Etiquetas geradas pelo JavaScript tornam o conteúdo mais difícil de encontrar, editar e reduzem o desempenho. Evite sempre que possível.

Padrão de Codificação CSS Bootstrap Plugin de Slideshow Bootstrap