Inhaltsverzeichnis

1. Einführung in das Bootstrap-Framework

2. Einführung für Neulinge" >2. Einführung für Neulinge

3. Dateistruktur

4. Standardvorlage

3. Pseudoklassenselektor

4. Anzeigeattribut

5. Medienberatung

(3) Prototyp

Heim

Web-Frontend

HTML-Tutorial

„Vertiefendes Verständnis von Bootstrap' Lesehinweise: Kapitel 1 Vorbereitung für den Einstieg

Oct 10, 2016 am 11:41 AM

1. Einführung in das Bootstrap-Framework

Bootstrap ist das beliebteste Front-End-Entwicklungsframework.

Was ist ein Framework: ein halbfertiges Produkt des Entwicklungsprozesses.

Bootstrap verfügt über die folgenden wichtigen Funktionen:

(1) Vollständiges CSS-Stil-Plug-in

(2) Umfangreiche vordefinierte Stylesheets

(3) jQuery-basierter Plug-in-Satz

(4) Flexibles Rastersystem

Im Folgenden wird kurz das Wissen vorgestellt, das Bootstrap verwenden kann.

2. Einführung für Neulinge

Die Version, die ich verwende, ist 3.3.x

Die folgende Schnittstelle finden Sie auf der offiziellen chinesischen Bootstrap-Website

Dieses Buch verwendet die vorkompilierte Version zum Lernen

3. Dateistruktur

Die Produktionsumgebung verwendet bootstrap.min.css und bootstrap.min.js. Mit Ausnahme der Schriftstruktur können andere Dateien beliebig benannt werden.

4. Standardvorlage

Die erste besteht darin, die Bootstrap-Umgebung in Aptana einzurichten.

Strg N Erstellen Sie ein neues Webprojekt, wählen Sie das Standardprojekt aus, benennen Sie das Projekt, definieren Sie den Speicherort und schließen Sie ab.

Benennen Sie den heruntergeladenen Ordner „dist“ in „bootstrap“ um, kopieren Sie ihn und fügen Sie ihn in den Projektordner ein.

&lt;!DOCTYPE html&gt;
&lt;html lang="zh-cn"&gt;

    &lt;head&gt;
 
        &lt;!--页面编码  --&gt;

        &lt;meta charset="UTF-8"&gt;

        &lt;!--低版本浏览器模拟渲染--&gt;

        &lt;meta http-equiv="X-UA-Compatible" content="IE=Edge"&gt;

        &lt;!--响应式布局：UI布局和移动设备一致，缩放大小为原始大小--&gt;

        &lt;!--也可以使用下列声明：
        &lt;meta name="viewport" content="width=device-width, initialscale=
1, maximumscale=1, user-scalable=no"&gt;

        意思是强制让文档宽度和设备宽度保持1：1，不允许用户单击放大浏览。注意content属性要用逗号（或分号）隔开，不规范则失效  --&gt;

        &lt;meta name="viewport" content="width=deviece-width,initial-scale=1"&gt;

        &lt;!--支持国产浏览器的高速渲染--&gt;

        &lt;meta name="renderer" content="Webkit"&gt;

        &lt;!--在此进行SEO设置：作者、关键词、描述--&gt;

        &lt;meta name="author" content="djtao"&gt;

        &lt;meta name="keywords" content="djtao"&gt;

        &lt;meta name="description" content="djtao"&gt;

        &lt;title&gt;bootstrap基础模板&lt;/title&gt;

        &lt;!--bootstrap--&gt;

        &lt;!--以下两个js插件用于在IE8及以下支持H5元素查询的，如不用可移除  --&gt;

        &lt;!--[if lt IE 9]&gt;

            &lt;script src="scripts/html5.min.js"&gt;&lt;/script&gt;

            &lt;script src="scripts/respond.min.js"&gt;&lt;/script&gt;

        &lt;![endif]--&gt;

        &lt;!--bootstrap样式文件  --&gt;

        &lt;link rel="stylesheet" href="bootstrap/css/bootstrap.css"&gt;

        &lt;!--自定义样式文件  --&gt;

        &lt;link rel="stylesheet" href="styles/css.css"&gt;

    &lt;/head&gt;

    &lt;body&gt;

        &lt;!--基于jQuery的脚本文件  --&gt;

        &lt;script src="scripts/jquery.min.js"&gt;&lt;/script&gt;

        &lt;!-- bootstrap的jq插件 --&gt;

        &lt;script src="bootstrap/js/bootstrap.min.js"&gt;&lt;/script&gt;

        &lt;!--自定义脚本文件  --&gt;

        &lt;script src="scripts/js.js"&gt;&lt;/script&gt;

    &lt;/body&gt;
&lt;/html&gt;

Achten Sie auf die Reihenfolge, Ihre Stile und Skripte müssen an letzter Stelle stehen.

Die Online-Referenz-CD lautet

&lt;!-- Latest compiled and minified CSS --&gt;
&lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"&gt;
 
&lt;!-- Optional theme --&gt;
&lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css"&gt;
 
&lt;!-- Latest compiled and minified JavaScript --&gt;
&lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"&gt;&lt;/script&gt;

6

7
8

<link rel=

"stylesheet"< /code> href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min. css"&gt;

 

&lt;!-- Optionales Thema --&gt;


&lt;link rel="stylesheet"< /code> href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme. min.css"&gt;
 

&lt;!-- Neuestes kompiliertes und minimiertes JavaScript --&gt;

&lt;script src="https:/ /maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"&gt;&lt;/script&gt;

5. Grundlegende CSS-Syntax

1. Priorität

Dasselbe wie natives CSS.

#xxx>.xxx>xxx

2. Selektor

nav&gt;li li{

    margin-left:10px;
}

(1) Attributauswahl

(2) Unterselektor

&gt;Nein.

article h1~p{font-size:20px}

(3) Brother-Auswahl
Benachbarte Selektoren werden durch Symbole dargestellt. In einer Navigationsleiste mit einer Nav-Ul-Li-Struktur möchten Sie beispielsweise den Abstand zwischen zwei Lis festlegen. 

nav&gt;li li{ margin-left:10px;
}

Verwenden Sie ~, um den Knoten hinter dem Element anzugeben. Suchen Sie beispielsweise alle p-Elemente  nach h1 im Artikelelement

article h1~p{font-size:20px}

3. Pseudoklassenselektor

Die häufig verwendeten Pseudoklassen in Bootstrap sind nichts anderes als diese

4. Anzeigeattribut

Das Display ist einfach zu bedienen, kann aber nicht wahllos verwendet werden.

5. Medienberatung

Medienberatung ist das Kernelement des responsiven Layouts von Bootstrap, aber die wichtigsten sind Min, Max und und

@media(max-width: 767px){

    /*在小于768像素的屏幕中，这里样式生效*/
}

@media(max-width: 767px) and (max-width: 991px){

    /*在768-991像素区间的屏幕中，这里样式生效*/
}

@media(min-width: 1200px){

    /*在大于等于1200像素的屏幕中，这里样式生效*/
}

@media(max-width: 767px){

/*Auf Bildschirmen, die kleiner als 768 Pixel sind, Dieser Stil wird wirksam*/

`}`

`@media(max-width:` `767px) und (max-width:` `991px){`
`/Im Bereich von 768–991 Pixel Auf dem Bildschirm wird dieser Stil wirksam/`

`}`
`@media(min-width:` `1200px){`

`/Auf Bildschirmen größer oder gleich 1200 Pixel, dieser Stil wird wirksam/`

`}`

(function(){

    do somthing
}() )

Height kann auch auf die gleiche Weise verwendet werden. 6. Verwandte JavaScript-Syntaxüberprüfung (1) UND- und ODER-Operatoren (&&, ||) (2) Rufen Sie sofort die Funktion auf Empfohlen, dies zu verwenden

(function(){

do etwas

}() )

bedeutet sofort anrufen.

(3) Prototyp

JS-Plug-Ins in BT werden alle auf Basis objektorientierter Methoden erstellt.

Definieren Sie als einfaches Beispiel Additions- und Subtraktionsoperationen

var decimalDigits = 2,

    tax = 5;
 
function add(x, y) {

    return x   y;
}
 
function subtract(x, y) {

    return x - y;
}
 
//alert(add(1, 3));

8910

var Calculator = function (decimalDigits, tax) {

    this.decimalDigits = decimalDigits;

    this.tax = tax;
};

11
12

var decimalDigits = 2,

tax = 5;

function

add(x, y) {
&lt;div class="line number5 index4 alt2" style="height: 16px;"&gt;
&lt;code class="js rooms"&gt;

return x y;

}

function

subtract(x, y) {
&lt;div class="line number9 index8 alt2" style="height: 16px;"&gt;
&lt;code class="js rooms"&gt;

return x - y;

}

//alert(add(1, 3));

Umgeschrieben in ein Additions- und Subtraktionsberechnungsfunktionsobjekt

var Calculator = function (decimalDigits, tax) {

this.decimalDigits = decimalDigits;

this.tax = tax;

};

Legen Sie dann den Prototyp des Calculator-Objekts fest, indem Sie das Objektliteral der Eigenschaft Prototyp des Calculator-Objekts zuweisen.

Calculator.prototype = {

      add: function (x, y) {

          return x   y;

      },
 
      subtract: function (x, y) {

          return x - y;

      }

  };

  //alert((new Calculator()).add(1, 3));

8
9

10

Calculator.prototype = {

add: function (x, y) {

                                                                                                                                                              . "js plain"&gt;x y;

 }, subtract: function(x, y) {                                                                                                                                                               . "js plain "&gt;x - y;

$('div').on(click,function(){...});

$('div').off(click,function(){...});

 } };
 //alert((new Calculator() ).add(1, 3));

(Code stammt aus dem Blog des Autors) 7.jQuery-Wissensüberprüfung (1) Ereignisbindung Die häufig verwendete Bindungssyntax von JQuery ist Ein/Aus, Binden/Binden. Zum Beispiel

1 2	`$('div'` `).on(click,function(){...}) ;` `$('div'` `).off(click,function(){...}) ;`

Hinweis: Die Funktion bind() ist eine Funktion, die von jQuery 1.7 oder früher zum Binden von Ereignishandlern verwendet wird. Die Funktion on() ist die bevorzugte Funktion von jQuery 1.7 zum Binden von Ereignissen Einführung und Parameterbeschreibung von Version 1.7. Tatsächlich werden die beiden Funktionen grundsätzlich auf die gleiche Weise verwendet. In früheren Versionen kann die Funktion bind () jedoch möglicherweise jeweils nur die Verarbeitung eines Ereignisses an das Etikettenobjekt binden , und die Funktion on() kann Handler gleichzeitig an mehrere verschiedene Ereignisse binden.

Die Bindung in der Bootstrap-Methode ist ähnlich, aber die Idee ist anders,

1	`$(document).on('click.bs.carosel.data.api','div',function(){...})`

$(document).on('click .bs.carosel.data.api','div',Funktion(){...})

Wählen Sie mithilfe des Bubbling-Mechanismus die Div des Dokuments aus. Verbesserte Leistung.

(2) Namensraum

Fügen Sie beim Debuggen nach dem Ereignis eine Zeichenfolge wie click.djtao hinzu und verwenden Sie dann die Trigger-Methode, um es auszulösen. Dies hat keine Auswirkungen auf das ursprüngliche Klickereignis.

(3)$.data()

Sammeln Sie alle benutzerdefinierten Attribute, denen Daten zum angegebenen Element vorangestellt sind, und führen Sie sie in einem Literal zusammen. Zum Beispiel:

1	`<div` `id="abc"` `data-role="aaa"` `data-toggle="toggle"` `data-xxx="djtao"></div>`

1	`<div` `id="abc"` `data-role="aaa"` `data-toggle` `="toggle"` `data-xxx` `="djtao"></div>`

Ich möchte den Wert der Rolle erfassen

$('#abc').data('role')

1	`$('#abc').data('role')`

Wenn keine Parameter vorhanden sind, entspricht dies dem Sammeln und Deklarieren eines JSON. var value={role:'aaa',toggle:'toggle',xxx:'djtao'}

8.H5-Hilfsattribute

Kann das Lesen für Blinde und andere Menschen unterstützen. Normalerweise wird ihnen das Präfix „Arial“ vorangestellt, sie werden zusammenfassend als „Arial“-Attribute bezeichnet.

【Postscript】

Viele Bücher inländischer Autoren haben das gleiche Gefühl wie das Lesen von API-Dokumenten. Je mehr man sagt, desto mehr Fehler macht man, und es ist auch teuer (@﹏@)~. . Der Ausgangspunkt des API-Dokuments selbst ist jedoch nicht niedrig. Da es sich um ein „tiefes Verständnis“ handelt, lesen Sie es mehrmals und erleben Sie mehrere Projekte. Vielleicht ist ersichtlich, dass sein Wert höher ist als der der API-Dokumentation.

Diese Reihe von Lesenotizen basiert auf der Idee, das, was Sie jetzt lernen, anzuwenden und schnell loszulegen. Einige von der Website des Buches gesammelte Beispiele werden eingefügt. Ich habe im Grunde alles selbst geschrieben und einige Inhalte selbst geändert, sodass es sich lediglich um eine Reihe von Artikeln handelt, die meinen Lernprozess dokumentieren. Das ist alles.

Von Wiz Notes (Wiz)

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn