Kompilierung des Bootstrap-Tutorials – Erste Schritte + CSS-Grundlagen

Als ich mir Bootstrap selbst beibrachte, folgte ich der offiziellen Website-Dokumentation. Die offizielle Website ist eigentlich sehr klar und vollständig, aber für Front-End-Anfänger gibt es noch viele vereinzelte Wissenspunkte, die vorerst ignoriert werden können.

[Verwandte Videoempfehlungen: Bootstrap-Tutorial]

Hier ist eine kleine Zusammenfassung der Wissenspunkte, ich hoffe, sie kann Ihnen helfen im Aspekt „Erste Schritte“.

Bootstrap-Hinweise – Erste Schritte + CSS-Grundlagen

1. Erste Schritte

1. Download über die offizielle Website , oder über den von bootCDN bereitgestellten CDN-Dienst oder über den von cdnjs bereitgestellten CDN-Dienst auf das Dokument verweisen

bootstrap.min.css 
bootstrap.min.js

Wenn Sie unsere Dokumente zitieren, wird empfohlen, es am Ende des Body-Tag-Inhalts zu schreiben

jquery.min.js

2. Mobil zuerst

Um eine ordnungsgemäße Zeichnung zu gewährleisten Um die Skalierung des Touchscreens zu ermöglichen, muss diese im Tag „Ansichtsfenster-Metadaten hinzufügen“ enthalten sein.

https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css
https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js

In mobilen Browsern kann das Zoomen deaktiviert werden, indem das Metaattribut des Ansichtsfensters auf user-scalable=no gesetzt wird.

…
<bdoy>
…
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
</body>
…

Wenn Sie den spezifischen Inhalt des obigen Codes verstehen möchten, möchten Sie das Problem der Bewegung von Pixeln vollständig verstehen. Es wird empfohlen, auf MOOC.com einen Blick auf die WEB-Mobilkurse zu werfen

2. CSS-Layout

1. Layout-Container

Inhaltscontainer, die Breite wurde angepasst Fest (mit Abstand links und rechts)

   <meta name="viewport" content="width=device-width, initial-scale=1">

Inhaltscontainer, Breite beträgt 100%

   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

2. Rastersystem

Raster Das System teilt die Bildschirmbreite gleichmäßig in 12 auf. Wie viele Teile nimmt das Div ein? Schreiben Sie einfach die Zahl in die Klasse.

Beispielsweise ist

<div class="container"></div>

in vier Hauptkategorien für verschiedene Bildschirmgrößen unterteilt. nämlich:

<div class="container-fluid"></div>

html:

 class="col-md-12"

css:

.col-lg-大屏幕             >1200px
.col-md-中等屏幕       992px~1200px
.col-sm-小屏幕         750px~992px
.col-xs-超小屏幕             <750px

3. Typesetting-Title

   <div class="container">
        <div class="row">
            <div class="col-lg-3 col-md-6 col-sm-12">好好学习天天向上</div>
            <div class="col-lg-3 col-md-6 col-sm-12">好好学习天天向上</div>
            <div class="col-lg-3 col-md-6 col-sm-12">好好学习天天向上</div>
            <div class="col-lg-3 col-md-6 col-sm-12">好好学习天天向上</div>
            
        </div>
    </div>

4. Typesetting-Code

<style>
div[class^="col"]{
outline-offset: 1px;
outline:1px solid red;
}
</style>

5. Tabelle

Fügen Sie einen Klassennamen auf Basis der traditionellen a4b561c25d9afb9ac8dc4d70affff419table>tr>td0d36329ec37a2cc24d42c7229b69747a hinzu, um die von Bootstrap bereitgestellten Tabelleneffekte zu verwenden:

<mark></mark>    标记标签
<small></small>   小文本标签/副标题标签

Fügen Sie in< ;b>.table0d36329ec37a2cc24d42c7229b69747a die folgenden Klassennamen hinzu, um entsprechende Effekte hinzuzufügen

   <kbd></kbd>  标记通过键盘输入的内容
    <code></code>  标记代码内容

Zustandsklassen Über diese Statusklassen können Sie Farben für Zeilen oder Zellen festlegen

.active Die Farbe, die festgelegt wird, wenn sich die Maus über einer Zeile oder Zelle befindet.success Identifiziert Erfolg oder positive Aktion.info Identifiziert normale Eingabeaufforderungsinformationen oder Aktionen.warning Identifiziert eine Warnung oder erfordert die Aufmerksamkeit des Benutzers.danger Identifiziert Gefahr oder potenzielle Aktionen die negative Auswirkungen haben

6. Situative Farben (Text, Schaltflächen, Hintergründe usw.)

Farben werden an vielen Stellen im späteren Lernen verwendet

 <table class="table"></table>

7. Schaltflächen

Normalerweise verwenden wir Eingabe- oder Schaltflächen-Tags, um Formularschaltflächen zu schreiben, und wir verwenden auch Tags, um Schaltflächen zu imitieren. Die Schaltfläche

.table-bordered   带边框的
.table-striped    带条纹的
.table-hover 鼠标悬停
.table-condensed 紧缩表格  单元格内的padding值减半

hat die folgenden Skins oder Themen oder einfach Farben:

     -default;  默认
      -primary;  首选项
      -success;  成功（一般用于表达积极向上）
      -info;     信息
      -warning;  警告
      -danger;   危险

8. Dreieckssymbol

Sie können das Dreieckssymbol verwenden. Zeigt an, dass ein Element das hat Funktionalität eines Dropdown-Menüs. Beachten Sie, dass das Dreieckssymbol im Aufwärts-Popup-Menü umgekehrt ist.

       <a class="btn btn-danger" href="">百度一下</a>
        <input class="btn btn-danger" type="button" value="按钮2">
        <button class="btn btn-danger">按钮3</button>

9. Schaltfläche „Schließen“

Durch die Verwendung eines Symbols, das das Schließen symbolisiert, können Modalboxen und Warnboxen ausgeblendet werden.

 btn-default;  默认
  btn-primary;  首选项
  btn-success;  成功（一般用于表达积极向上）
  btn-info;  b   信息
  btn-warning;  警告
  btn-danger;   危险
  btn-link;     连接（a标签的方式）

Das obige ist der detaillierte Inhalt vonKompilierung des Bootstrap-Tutorials – Erste Schritte + CSS-Grundlagen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!