English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Bootstrap basic tutorial

Bootstrap plugins

Bootstrap CSS Coding Standard

语法

  • Replace tabs (tab) with two spaces. -- This is the only way to ensure consistent display in all environments.
  • When grouping selectors, place the individual selectors on a separate line.
  • For code readability, add a space before the left curly brace of each declaration block.
  • The right curly brace of the declaration block should be on a separate line.
  • Every declaration statement's : 后应该插入一个空格。
  • 为了获得更准确的错误报告，每条声明都应该独占一行。
  • 所有声明语句都应当以分号结尾。最后一条声明语句后面的分号是可选的，但是，如果省略这个分号，你的代码可能更易出错。
  • 对于以逗号分隔的属性值，每个逗号后面都应该插入一个空格（例如，box-shadow).
  • 不要在 rgb()、rgba()、hsl()、hsla() 或 rect() 值的内部的逗号后面插入空格。这样利于从多个属性值（既加逗号也加空格）中区分多个颜色值（只加逗号，不加空格）。
  • 对于属性值或颜色参数，省略小于 1 的小数前面的 0 （例如，.5 代替 0.5；-.5px 代替 -0.5px).
  • 十六进制值应该全部小写，例如，#fff。在扫描文档时，小写字符易于分辨，因为他们的形式更易于区分。
  • 尽量使用简写形式的十六进制值，例如，用 #fff 代替 #ffffff.
  • 为选择器中的属性添加双引号，例如，input[type="text"].只有在某些情况下是可选的，但是，为了代码的一致性，建议都加上双引号。
  • 避免为 0 值指定单位，例如，用 margin: 0; 代替 margin: 0px;.

对于这里用到的术语有疑问吗？请参考 Wikipedia 上的 层叠样式表 - 语法.

/* Bad CSS */
.selector, .selector-secondary, .selector[type=text] {
  padding:15px;
  margin:0px 0px 15px;
  background-color:rgba(0, 0, 0, 0.5);
  box-shadow:0px 1px 2px #CCC,inset 0 1px 0 #FFFFFF
}
/* Good CSS */
.selector,
.selector-secondary,
.selector[type="text"] {
  padding: 15px;
  margin-bottom: 15px;
  background-color: rgba(0,0,0,.5);
  box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff;
}

声明顺序

相关的属性声明应当归为一组，并按照下面的顺序排列：

  • Positionierung
  • Box model
  • Typographic
  • Visuell

    • 由于定位（positioning）可以从正常的文档流中移除元素，并且还能覆盖盒模型（box model）相关的样式，因此排在首位。盒模型排在第二位，因为它决定了组件的尺寸和位置。

    其他属性只是影响组件的内部（inside）oder beeinflussen die ersten beiden Attribute nicht, daher werden sie am Ende platziert.

    Die vollständige Eigenschaftsliste und die Reihenfolge thereof finden Sie bitte in Rückzug.

    .erklärung-auftrag {
  /* Positionierung */
  position: absolut;
  oben: 0;
  rechts: 0;
  unten: 0;
  links: 0;
  z-index: 100;
  /* Box-Modell */
  display: block;
  float: right;
  width: 100px;
  height: 100px;
  /* Typografie */
  schrift: normal 13px "Helvetica Neue", sans-serif;
  line-height: 1.5;
  color: #333;
  text-ausrichten: center;
  /* Visuell */
  background-color: #f5f5f5;
  border: 1px solid #e5e5e5;
  border-radius: 3px;
  /* Sonstiges */
  opacity: 1;
}

    Verwenden Sie nicht @import

    mit <link> Schaltflächen im Vergleich zu@import Anweisungen sind viel langsamer, nicht nur zusätzliche Anfragen hinzufügen, sondern auch unerwartete Probleme verursachen. Ersatz gibt es in mehreren Formen:

    • Verwenden Sie mehrere <link> Element
    • Durch Sass oder Less ähnliche CSS-Präprozessor, mehrere CSS-Dateien in eine Datei kompilieren
    • Durch Rails, Jekyll oder andere Systeme, die CSS-Datei-Kombinationsfunktionen anbieten

    Bitte beziehen Sie sich auf Artikel von Steve SoudersErfahren Sie mehr.

    <!-- Verwenden Sie Link-Elemente -->
<link rel="stylesheet" href="core.css">
<!-- Vermeiden Sie @imports -->
<style>
  @import url("more.css");
</style>

    Position der Medienabfragen (Media query)

    Platzieren Sie die Medienabfragen in der Nähe der am besten geeigneten Regeln. Packen Sie sie nicht in eine einzelne Stilebene oder am Ende der Dokumente. Wenn Sie sie getrennt aufbewahren, werden sie in der Zukunft vergessen. Hier ist ein typisches Beispiel.

    .element { ... }
.element-avatar { ... }
.element-selected { ... }
@media (min-width: 480px) {
  .element { ...}
  .element-avatar { ... }
  .element-selected { ... }
}

    Attribute mit Präfix

    Wenn spezifische Hersteller Attribute mit Präfix verwenden, lassen Sie durch Einklappen die Werte jeder Eigenschaft vertikal ausgerichtet sein, um die Mehrzeilen-Editierung zu erleichtern.

    In Textmate wird verwendet Text → Bearbeiten Sie jede Zeile in der Auswahl (⌃⌘A). In Sublime Text 2 wird, verwenden Sie Auswahl → Hinzufügen der vorherigen Zeile (⌃⇧↑) und Auswahl → Hinzufügen der nächsten Zeile (⌃⇧↓)).

    /* Vorgeschlagene Eigenschaften */
.selector {
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);
          box-shadow: 0 1px 2px rgba(0,0,0,.15);
}

    Einzelne Regeldeklarationen auf einer Zeile

    FürEnthält nur eine DeklarationStil, um Lesbarkeit und schnelle Bearbeitung zu erleichtern, wird empfohlen, Anweisungen in einer Zeile zu platzieren. Für Stile mit mehreren Deklarationen sollten die Deklarationen in Zeilen aufgeteilt werden.

    Der Schlüssel dazu ist die Fehlerdetektion -- Zum Beispiel weist der CSS-Prüfer darauf hin, dass in 183 Eine Zeile hat einen Syntaxfehler. Wenn es sich um eine Zeile mit einer einzigen Regeldeklaration handelt, werden Sie diesen Fehler nicht übersehen; wenn es sich um eine Zeile mit mehreren Regeldeklarationen handelt, müssen Sie sorgfältig analysieren, um sicherzustellen, dass keine Fehler übersehen werden.

    /* Einzelne Deklarationen auf einer Zeile */
.span1 { width: 60px; }
.span2 { width: 140px; }
.span3 { width: 220px; }
/* Mehrere Deklarationen, eine pro Zeile */
.sprite {
  display: inline-block;
  width: 16px;
  height: 15px;
  background-image: url(../img/sprite.png);
}
.icon           { background-position: 0 0; }
.icon-home      { background-position: 0 -20px; }
.icon-account   { background-position: 0 -40px; }

    Kurzschreibattributdeklarationen

    Bei der Notwendigkeit, alle Werte explizit zu setzen, sollte die Verwendung von Kurzschreibattributdeklarationen begrenzt werden. Beispiele für häufige Missbräuche von Kurzschreibattributdeklarationen sind wie folgt:

    • padding
    • margin
    • font
    • background
    • border
    • border-radius

    In den meisten Fällen benötigen wir nicht alle Werte für die Kurzschreibattributdeklarationen anzugeben. Zum Beispiel benötigen die heading-Elemente von HTML nur die Werte für den oberen und unteren Abstand (margin), daher ist es ausreichend, diese beiden Werte zu überschreiben. Übermäßige Verwendung von Kurzschreibattributdeklarationen kann zu einem Durcheinander im Code führen und unnotwendige Überschreibungen der Attributwerte verursachen, die unerwartete Nebenwirkungen verursachen können.

    MDN (Mozilla Developer Network) ein sehr gutes Dokument übershorthand properties Artikel, die für Benutzer nützlich sind, die sich nicht mit den Kurzschreibattributdeklarationen und deren Verhalten auskennen.

    /* Schlechter Beispiel */
.element {
  margin: 0 0 10px;
  background: red;
  background: url("image.jpg");
  border-radius: 3px 3px 0 0;
}
/* Guter Beispiel */
.element {
  margin-bottom: 10px;
  background-color: red;
  background-image: url("image.jpg");
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}

    Einrückungen in Less und Sass

    Vermeiden Sie unnötige Einrückungen. Dies liegt daran, dass Sie zwar Einrückungen verwenden können, aber es nicht bedeutet, dass Sie sie unbedingt verwenden sollten. Verwenden Sie Einrückungen nur, wenn Sie die Styles auf den übergeordneten Elementen beschränken müssen (also Nachkommen-Selektoren) und wenn mehrere Elemente zu einrücken sind.

    // Ohne Einrückung
.table > thead > tr > th { … }
.table > thead > tr > td { … }
// Mit Einrückung
.table > thead > tr {
  > th { … }
  > td { … }
}

    Kommentare

    Code wird von Menschen geschrieben und gepflegt. Stellen Sie sicher, dass Ihr Code selbstbeschreibend, gut kommentiert und leicht verständlich für andere ist. Gute Code-Kommentare können den Kontext und die Absicht des Codes vermitteln. Vermeiden Sie das einfache Wiederholen von Komponenten- oder class-Namen.

    Für längere Kommentare sollten vollständige Sätze geschrieben werden; für allgemeine Notizen können kurze Phrasen verwendet werden.

    /* Schlechter Beispiel */
/* Modalkopf */
.modal-header {
  ...
}
/* Guter Beispiel */
/* Verpackungselement für .modal-title und .modal-close */
.modal-header {
  ...
}

    class-Namensgebung

    • class-Namen dürfen nur Kleinbuchstaben und Bindestriche (dashe) enthalten (keine Unterstriche, auch keine Kapselungsnamen). Bindestriche sollten für die Namensgebung von verwandten classes verwendet werden (ähnlich wie Namespaces), z.B.,.btn und .btn-danger).
    • Vermeiden Sie übertriebene willkürliche Abkürzungen..btn stellt button, aber .s Der Name sollte keine Bedeutung vermitteln.
    • class-Namen sollten so kurz wie möglich und klar sein.
    • Verwenden Sie sinnvolle Namen. Verwenden Sie organisierte oder klar definierte Namen und vermeiden Sie Namensgebung in Bezug auf die Darstellung (presentational).
    • Verwenden Sie die nächstgelegene übergeordnete class oder die Basisclass (base class) als Präfix für die neue class.
    • Verwenden Sie .js-* class zur Kennzeichnung von Verhalten (im Gegensatz zu Stilen) und vermeiden Sie es, diese class in CSS-Dateien zu enthalten.

    Bei der Benennung von Sass- und Less-Variablen können auch die oben genannten Normen berücksichtigt werden.

    /* Schlechter Beispiel */
.t { ... }
.red { ... }
.header { ... }
/* Guter Beispiel */
.tweet { ... }
.important { ... }
.tweet-header { ... }

    Selektoren

    • Verwenden Sie für allgemeine Elemente class, um die Optimierung der Renderleistung zu verbessern.
    • Vermeiden Sie für häufig auftretende Komponenten die Verwendung von Attributselektoren (z.B.,[class^="..."]）。Die Leistung des Browsers wird durch diese Faktoren beeinflusst.
    • Selektoren sollten so kurz wie möglich sein und die Anzahl der Elemente, die den Selektor bilden, so begrenzt wie möglich sein, empfohlen wird nicht mehr als 3 .
    • NurBeschränken Sie class nur, wenn notwendig, auf den nächsten übergeordneten Element (d.h. Nachkommen-Selektor) (z.B. ohne vorgeschaltete class, -- Präfixe ähneln Namensräumen).

    Weiterführende Lektüre:

    /* Schlechter Beispiel */
span { ... }
.page-container #stream .stream-item .tweet .tweet-header .username { ... }
.avatar { ... }
/* Guter Beispiel */
.avatar { ... }
.tweet-header .username { ... }
.tweet .avatar { ... }

    Code-Organisation

    • Organisieren Sie Codeabschnitte nach Komponenten.
    • Erstellen Sie konsistente Anmerkungsnormen.
    • Trennen Sie den Code mit konsistenten Leerzeichen in Blöcke, um die Scannung großer Dokumente zu erleichtern.
    • Wenn mehrere CSS-Dateien verwendet werden, teilen Sie sie nach Komponenten und nicht nach Seiten auf, da Seiten neu strukturiert werden, während Komponenten nur verschoben werden.
    /*
 * Abschnittsüberschrift der Komponente
 */
.element { ... }
/*
 * Abschnittsüberschrift der Komponente
 *
 * Manchmal müssen Sie optionalen Kontext für die gesamte Komponente einschließen. Tun Sie dies hier oben, wenn es wichtig genug ist.
 */
.element { ... }
/* Kontextuelle Unter-Komponente oder Modifikator */
.element-heading { ... }

    Editor-Einstellungen

    Richten Sie Ihren Editor nachfolgend ein, um häufige Unstimmigkeiten und Unterschiede im Code zu vermeiden:

    • Ersetzen Sie zwei Leerzeichen durch den Tabulator (soft Tab).-tab wird durch Leerzeichen dargestellt).
    • Remove trailing whitespace when saving the file.
    • Set the file encoding to UTF-8.
    • Add an empty line at the end of the file.

    Refer to the documentation and add these configuration information to the .editorconfig . For example:Bootstrap .editorconfig example files. More information can be found in about EditorConfig.

    Bootstrap Grid System Example: Stacked HorizontalBootstrap HTML Coding Standard