Tutorial básico de Bootstrap

Bootstrap plugin

Especificaciones de codificación CSS Bootstrap Complemento de carrusel Bootstrap

Especificaciones de codificación HTML Bootstrap

Sintaxis

Reemplace los tabuladores (tab) con dos espacios. -- Esta es la única manera de garantizar una presentación consistente en todos los entornos.
Los elementos anidados deben estar sangrados una vez (es decir, dos espacios).
Para la definición de atributos, asegúrese de usar comillas dobles, nunca comillas simples。
No utilice etiquetas de cierre autoabiertas (self-closing)-Añadir una diagonal invertida en el final del elemento de cierre (closing) -- HTML5 Especificaciónse especifica claramente que es opcional。
No omita las etiquetas de cierre opcionales (closing tag) (por ejemplo,</li> o </body>）。

Ejemplo:

<!DOCTYPE html>
<html>
  <head>
    <title>Título de la página</title>
  </head>
  <body>
    <img src="images/company-logo.png" alt="[#0#]">
    <h1>¡Hola, mundo!¡/h1>
  </body>
</html>

HTML5 doctype

Añadir la declaración del modo estándar (standard mode) en la primera línea de cada página HTML para garantizar una presentación consistente en todos los navegadores.

Ejemplo:

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

Atributo de idioma

según HTML5 Especificación:

Se recomienda encarecidamente especificar el atributo lang del elemento raíz html para establecer el idioma del documento correctamente. Esto ayudará a las herramientas de síntesis de voz a determinar el modo de pronunciación que deben utilizar, y a las herramientas de traducción a determinar las reglas que deben seguir al traducir, etc.

Aquí se listaTabla de códigos de idioma。

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

IE compatibilidad modo

IE admite la especificación de modos específicos <meta> etiqueta para determinar la versión de IE que debe utilizarse para renderizar la página actual. A menos que haya necesidades especiales fuertes, es mejor configurarlo como edge mode，por lo tanto, notificar a IE que utilice el modo más reciente que admite.

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

codificación de caracteres

Al declarar explícitamente la codificación de caracteres, se puede garantizar que el navegador pueda determinar rápidamente y de manera sencilla el modo de renderizado del contenido de la página. Esta práctica tiene la ventaja de evitar el uso de entidades de caracteres en HTML (carácter entity), manteniendo toda la documentación consistente con la codificación del documento (generalmente UTF-8 codificación）。

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

la inclusión de archivos CSS y JavaScript

según HTML5 la especificación, generalmente no es necesario especificar type propiedades, porque text/css y text/javascript Son sus valores predeterminados.

HTML5 enlaces de especificación

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

La práctica es la reina

Siga lo más posible el estándar HTML y la semántica, pero no牺牲实用性。En cualquier momento, intente usar la menor cantidad de etiquetas y mantener la menor complejidad posible.

Orden de las propiedades

Las propiedades HTML deben ordenarse según la secuencia dada a continuación para asegurar la legibilidad del código.

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

La clase se utiliza para identificar componentes altamente reutilizables, por lo que debe colocarse en primer lugar. El id se utiliza para identificar componentes específicos y debe usarse con cautela (por ejemplo, marcadores de página en el interior), por lo que se coloca en segundo lugar.

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

Atributos booleanos (boolean)

Los atributos booleanos pueden no asignarse en la declaración. La norma XHTML requiere que se les asigne un valor, pero HTML5 La norma no requiere.

Para obtener más información, consulte WhatWG section on boolean attributes:

Los atributos booleanos de un elemento tienen un valor si es true, y no tienen valor si es false.

SiDefinitivamentePara asignar valores, consulte la norma WhatWG:

Si el atributo existe, su valor debe ser una cadena vacía o el nombre normativo de [...] del atributo, y no agregue espacios en blanco al principio y al final.

En términos simples, es no asignar valores.

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

Reduzca la cantidad de etiquetas

Al escribir código HTML, evite lo más posible elementos padre innecesarios. Muchas veces, esto requiere iteración y refactorización para lograrlo. Vea el siguiente ejemplo:

<!-- No tan grande -->
<span>
  <img src="...">
</span>
<!-- Mejor -->
<img src="...">

Etiquetas generadas por JavaScript

Las etiquetas generadas por JavaScript hacen que el contenido sea difícil de encontrar, editar y reduce el rendimiento. Evítelas siempre que sea posible.

Especificaciones de codificación CSS Bootstrap Complemento de carrusel Bootstrap