Tutoriel de base Bootstrap

Bootstrap 插件

Normes de codage CSS Bootstrap Plugin de diaporama Bootstrap

Normes de codage HTML Bootstrap

Grammaire

Remplacez les tabulations (tab) par deux espaces -- C'est la seule manière de garantir une présentation cohérente dans tous les environnements.
Les éléments imbriqués doivent être indentés une fois (c'est-à-dire deux espaces).
Pour la définition des attributs, assurez-vous d'utiliser toujours des guillemets doubles, jamais des guillemets simples.
Ne pas utiliser de balise auto-closante (self-Ajoutez une barre oblique à la fin de l'élément de fermeture (closing) -- HTML5 Normel'indique explicitement que c'est optionnel.
Ne pas omettre les balises de fermeture optionnelles (closing tag) (par exemple,</li> ou </body>）。

Exemple :

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

Ajoutez la déclaration de mode standard (standard mode) à la première ligne de chaque page HTML pour vous assurer d'avoir une présentation cohérente dans chaque navigateur.

Exemple :

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

Attribut de langue

selon HTML5 Norme :

Il est fortement recommandé d'attribuer l'attribut lang au élément racine html pour définir correctement la langue du document. Cela aidera les outils de synthèse vocale à déterminer la prononciation à utiliser, et les outils de traduction à déterminer les règles à suivre lors de la traduction, etc.

Voici la liste代码表。

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

IE 兼容模式

IE prend en charge <meta> d'utiliser le tag edge mode，ainsi que pour informer IE d'utiliser le mode le plus récent qu'il prend en charge.

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

编码

En déclarant explicitement l'encodage de caractères, on peut assurer que le navigateur peut rapidement et facilement déterminer la manière de rendre le contenu de la page. Cela a l'avantage de pouvoir éviter l'utilisation des entités de caractères dans HTML (généralement en UTF-8 编码）。

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

l'introduction des fichiers CSS et JavaScript

selon HTML5 les normes, généralement, il n'est pas nécessaire de spécifier type car text/css et text/javascript Sont leurs valeurs par défaut.

HTML5 liens de spécification

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

Utilité avant tout

Tentez de suivre les normes HTML et les éléments sémantiques, mais sans sacrifier la praticité. Utilisez toujours le moins de balises possible et maintenez la complexité minimale.

Ordre des attributs

Les attributs HTML doivent être classés dans l'ordre suivant, pour assurer la lisibilité du code.

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

La classe est utilisée pour identifier des composants hautement réutilisables, donc elle doit être placée en premier. L'ID est utilisé pour identifier des composants spécifiques et doit être utilisé avec prudence (par exemple, des signets dans une page), donc il est placé en deuxième position.

<a id="..." data-modal="toggle" href="#">
  Lien d'exemple
</a>
<input type="text">
<img src="..." alt="[#1#]">

Attributs booléens (boolean)

Les attributs booléens peuvent ne pas être assignés lors de leur déclaration. La norme XHTML exige qu'ils soient assignés, mais HTML5 La norme ne nécessite pas.

Pour plus d'informations, veuillez consulter Section WhatWG sur les attributs booléens:

Les attributs booléens d'un élément ont une valeur true s'ils ont une valeur, et false s'ils n'ont pas de valeur.

SiDéfinitivementPour l'assigner, veuillez consulter la norme WhatWG :

Si l'attribut existe, sa valeur doit être une chaîne vide ou le nom normatif de l'attribut [...] et ne pas ajouter d'espaces blancs à la tête et à la queue.

En termes simples, c'est ne pas assigner de valeur.

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

Réduire le nombre de balises

Lorsque vous écrivez du code HTML, évitez d'utiliser des éléments parents inutiles. Souvent, cela nécessite des itérations et des refontes. Regardez l'exemple suivant :

<!-- Pas si grand -->
<span>
  <img src="...">
</span>
<!-- Better -->
<img src="...">

Balises générées par JavaScript

Les balises générées par JavaScript rendent le contenu difficile à trouver, à éditer et réduisent les performances. Évitez-les lorsque cela est possible.

Normes de codage CSS Bootstrap Plugin de diaporama Bootstrap