Bootstrap Basic Tutorial

Bootstrap plugins

Bootstrap CSS Coding Standards Bootstrap Carousel Plugin

Bootstrap HTML Coding Standards

Syntax

Replace tabs (tab) with two spaces -- This is the only way to ensure consistent display in all environments.
Nested elements should be indented once (i.e., two spaces).
For the definition of attributes, ensure that all are in double quotes and never use single quotes.
Do not use a self-closing (self-Add a backslash to the end of the closing) element -- HTML5 Specificationit is explicitly stated that this is optional.
Do not omit the optional closing tag (closing tag) (for example,</li> or </body>）.

Example:

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

Add a standard mode (standard mode) declaration to the first line of each HTML page to ensure consistent display in all browsers.

Example:

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

Language attribute

According to HTML5 Specification:

It is strongly recommended to specify the lang attribute for the html root element to set the correct language for the document. This will help speech synthesis tools determine the pronunciation they should use, and help translation tools determine the rules they should follow when translating, etc.

Here is a list ofLanguage code table.

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

IE compatibility mode

IE supports using specific <meta> to determine the IE version to be used for rendering the current page. Unless there is a strong special requirement, it is best to set it to edge modeto notify IE to use the latest mode it supports.

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

character encoding

By explicitly declaring the character encoding, it can ensure that the browser quickly and easily determines the rendering method of the page content. The benefit of this is that it can avoid using character entity markers (character entity) in HTML, so that all are consistent with the document encoding (generally using UTF-8 encoding).

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

introducing CSS and JavaScript files

According to HTML5 the specification, generally does not need to be specified when introducing CSS and JavaScript files type properties, because text/css and text/javascript They are their default values.

HTML5 spec links

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

Practicality first

Try to follow the HTML standard and semantics, but do not sacrifice practicality. At any time, try to use the fewest tags and maintain the minimum complexity.

Attribute order

HTML attributes should be arranged in the order given below to ensure the readability of the code.

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

The class is used to identify highly reusable components, so it should be placed first. The id is used to identify specific components and should be used cautiously (such as page bookmarks), so it is placed second.

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

Boolean (boolean) attributes

Boolean attributes can be declared without assigning values. The XHTML specification requires them to be assigned, but HTML5 The specification does not require.

For more information, please refer to WhatWG section on boolean attributes:

Boolean attributes of elements are true if they have a value, and false if they do not.

IfCertainlyIf you need to assign a value, please refer to the WhatWG specification:

If the attribute exists, its value must be an empty string or the standard name of the [...] attribute, and do not add any whitespace at the beginning or end.

In simple terms, it means not assigning any values.

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

Reduce the number of tags

When writing HTML code, try to avoid unnecessary parent elements. This often requires iteration and refactoring. Please see the following example:

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

Tags generated by JavaScript

Tags generated by JavaScript make content difficult to find, edit, and reduce performance. Try to avoid them whenever possible.

Bootstrap CSS Coding Standards Bootstrap Carousel Plugin