Corso di base Bootstrap

Plugin Bootstrap

Norme di codifica CSS Bootstrap Plugin di carosello Bootstrap

Norme di codifica HTML Bootstrap

Sintassi

Utilizzare due spazi per sostituire i tab (tab) -- è l'unico metodo che garantisce una visualizzazione coerente in tutti gli ambienti.
Gli elementi nidificati devono essere rientrati di una volta (cioè due spazi).
Per la definizione delle proprietà, assicurarsi di utilizzare sempre virgolette doppi, mai virgolette singole.
Non aggiungere una barra obliqua alla fine degli elementi autoclosabili -- Specifica HTML5è chiarito esplicitamente che è opzionale.
Non saltare i tag di chiusura opzionali (closing tag) (ad esempio,</li> o </body>)

Esempio:

<!DOCTYPE html>
<html>
  <head>
    <title>Titolo della pagina</title>
  </head>
  <body>
    <img src="images/company-logo.png" alt="[#0#]">
    <h1>Hello, world!</h1>
  </body>
</html>

Doctype HTML5

Aggiungi la dichiarazione del modello standard (standard mode) alla prima riga di ogni pagina HTML, in modo da garantire una visualizzazione coerente in ogni browser.

Esempio:

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

Attributo di lingua

Secondo la specifica HTML5:

Si consiglia vivamente di specificare l'attributo lang per l'elemento root html, in modo da impostare correttamente la lingua del documento. Questo aiuta gli strumenti di sintesi vocale a determinare l'articolazione da utilizzare, aiuta gli strumenti di traduzione a determinare le regole da seguire durante la traduzione, ecc.

qui sono elencatiTabella dei codici di lingua.

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

modalità di compatibilità IE

IE supporta l'uso di etichette specifiche <meta> per determinare la versione di IE da utilizzare per disegnare la pagina corrente. A meno di esigenze speciali forti, è meglio impostarlo su modalità edge, avvisando IE di utilizzare il modello più recente supportato.

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

Codifica dei caratteri

Specificando chiaramente la codifica dei caratteri, è possibile garantire che il browser possa giudicare rapidamente e facilmente il modo di visualizzazione del contenuto della pagina. Questo ha il vantaggio di evitare l'uso di entità di carattere (character entity) nell'HTML, rendendo l'encoding del documento uniforme (solitamente in UTF-8).

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

l'inserimento di file CSS e JavaScript

secondo la specifica HTML5, quando si inseriscono file CSS e JavaScript non è necessario specificare type proprietà, perché text/css e text/javascript rispettivamente sono i loro valori predefiniti.

Link della specifica HTML5

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

La praticità è regina

Seguire il più possibile lo standard HTML e la semantica, ma senza sacrificare la praticità. In ogni momento, cercare di utilizzare il minor numero di tag e mantenere la minima complessità.

Ordine degli attributi

Gli attributi HTML devono essere ordinati secondo l'ordine fornito di seguito, per garantire la leggibilità del codice.

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

La classe viene utilizzata per identificare componenti altamente riutilizzabili e dovrebbe essere messa in primo luogo. L'id viene utilizzato per identificare componenti specifici e dovrebbe essere utilizzato con cautela (ad esempio, i segnalibri nelle pagine), quindi messo in secondo luogo.

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

Attributi booleani (boolean)

Gli attributi booleani possono essere dichiarati senza valore. La specifica XHTML richiede che vengano assegnati, ma la specifica HTML5 non lo richiede.

Per ulteriori informazioni, si prega di consultare Sezione WhatWG sui attributi booleani:

Se un attributo booleano di un elemento ha un valore, è true, se non ha un valore, è false.

SeCertamentePer assegnare valori, si prega di consultare la specifica WhatWG:

Se l'attributo esiste, il suo valore deve essere una stringa vuota o il nome standard dell'attributo [...] e non aggiungere spazi bianchi iniziali o finali.

In altre parole, non assegnare valori.

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

Ridurre il numero di tag

Quando si scrive codice HTML, evitare di usare elementi genitori inutili. Spesso, questo richiede iterazioni e refactoring. Ecco un esempio:

<!-- Non così grande -->
<span>
  <img src="...">
</span>
<!-- Migliore -->
<img src="...">

Tag generati da JavaScript

I tag generati da JavaScript rendono il contenuto più difficile da trovare, modificare e riducono le prestazioni. Evitare di farlo quando possibile.

Norme di codifica CSS Bootstrap Plugin di carosello Bootstrap