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

<h2>1. Einführung in das Bootstrap-Framework</h2> <div style="margin: 0px; font-family: helvetica, 'hiragino sans gb', 微软雅黑, 'microsoft yahei ui', simsun, simhei, arial, sans-serif; font-size: 15px; line-height: 24px;">Bootstrap ist das beliebteste Front-End-Entwicklungsframework. </div> <div style="margin: 0px; font-family: helvetica, 'hiragino sans gb', 微软雅黑, 'microsoft yahei ui', simsun, simhei, arial, sans-serif; font-size: 15px; line-height: 24px;">Was ist ein Framework: ein halbfertiges Produkt des Entwicklungsprozesses. </div> <div style="margin: 0px; font-family: helvetica, 'hiragino sans gb', 微软雅黑, 'microsoft yahei ui', simsun, simhei, arial, sans-serif; font-size: 15px; line-height: 24px;">Bootstrap verfügt über die folgenden wichtigen Funktionen: </div> <div style="margin: 0px; font-family: helvetica, 'hiragino sans gb', 微软雅黑, 'microsoft yahei ui', simsun, simhei, arial, sans-serif; font-size: 15px; line-height: 24px;">(1) Vollständiges CSS-Stil-Plug-in</div> <div style="margin: 0px; font-family: helvetica, 'hiragino sans gb', 微软雅黑, 'microsoft yahei ui', simsun, simhei, arial, sans-serif; font-size: 15px; line-height: 24px;">(2) Umfangreiche vordefinierte Stylesheets</div> <div style="margin: 0px; font-family: helvetica, 'hiragino sans gb', 微软雅黑, 'microsoft yahei ui', simsun, simhei, arial, sans-serif; font-size: 15px; line-height: 24px;">(3) jQuery-basierter Plug-in-Satz</div> <div style="margin: 0px; font-family: helvetica, 'hiragino sans gb', 微软雅黑, 'microsoft yahei ui', simsun, simhei, arial, sans-serif; font-size: 15px; line-height: 24px;">(4) Flexibles Rastersystem</div> <div style="margin: 0px; font-family: helvetica, 'hiragino sans gb', 微软雅黑, 'microsoft yahei ui', simsun, simhei, arial, sans-serif; font-size: 15px; line-height: 24px;">Im Folgenden wird kurz das Wissen vorgestellt, das Bootstrap verwenden kann. </div> <div style="margin: 0px; font-family: helvetica, 'hiragino sans gb', 微软雅黑, 'microsoft yahei ui', simsun, simhei, arial, sans-serif; font-size: 15px; line-height: 24px;"> </div> <h1 style="margin: 0px; font-family: helvetica, 'hiragino sans gb', 微软雅黑, 'microsoft yahei ui', simsun, simhei, arial, sans-serif; font-size: 15px; line-height: 24px;"><span style="font-size: 1.4rem;" data-wiz-span="data-wiz-span">2. Einführung für Neulinge</span></h1> <div style="margin: 0px; font-family: helvetica, 'hiragino sans gb', 微软雅黑, 'microsoft yahei ui', simsun, simhei, arial, sans-serif; font-size: 15px; line-height: 24px;">Die Version, die ich verwende, ist 3.3.x</div> <div style="margin: 0px; font-family: helvetica, 'hiragino sans gb', 微软雅黑, 'microsoft yahei ui', simsun, simhei, arial, sans-serif; font-size: 15px; line-height: 24px;">Die folgende Schnittstelle finden Sie auf der offiziellen chinesischen Bootstrap-Website</div> <div style="margin: 0px; font-family: helvetica, 'hiragino sans gb', 微软雅黑, 'microsoft yahei ui', simsun, simhei, arial, sans-serif; font-size: 15px; line-height: 24px;"> <img src="http://images2015.cnblogs.com/blog/1011161/201610/1011161-20161009155921532-527408082.png" alt="" style="max-width:90%" style="max-width:90%" border="0"> <div> </div> </div> <div style="margin: 0px; font-family: helvetica, 'hiragino sans gb', 微软雅黑, 'microsoft yahei ui', simsun, simhei, arial, sans-serif; font-size: 15px; line-height: 24px;"> </div> <p>Dieses Buch verwendet die vorkompilierte Version zum Lernen</p> <p> </p> <h2>3. Dateistruktur</h2> <p><img src="http://images2015.cnblogs.com/blog/1011161/201610/1011161-20161009155921938-1247480108.png" alt="" style="max-width:90%" style="max-width:90%" border="0"></p> <p> </p> <p> </p> <p> </p> <p>Die Produktionsumgebung verwendet bootstrap.min.css und bootstrap.min.js. Mit Ausnahme der Schriftstruktur können andere Dateien beliebig benannt werden. </p> <p> </p> <h2>4. Standardvorlage</h2> <p>Die erste besteht darin, die Bootstrap-Umgebung in Aptana einzurichten. </p> <p>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. </p> <p>Benennen Sie den heruntergeladenen Ordner „dist“ in „bootstrap“ um, kopieren Sie ihn und fügen Sie ihn in den Projektordner ein. </p> <div id="highlighter_263880" class="syntaxhighlighter html"> <div class="wiz-table-container" style="position: relative; padding: 15px 0px 5px;"> <div class="wiz-table-body"> <table class="noBorderTable" border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td class="gutter"> <div class="line number1 index0 alt2" style="height: 16px;">1</div> <div class="line number2 index1 alt1" style="height: 16px;">2</div> <div class="line number3 index2 alt2" style="height: 16px;">3</div> <div class="line number4 index3 alt1" style="height: 16px;">4</div> <div class="line number5 index4 alt2" style="height: 16px;">5</div> <div class="line number6 index5 alt1" style="height: 16px;">6</div> <div class="line number7 index6 alt2" style="height: 16px;">7</div> <div class="line number8 index7 alt1" style="height: 16px;">8</div> <div class="line number9 index8 alt2" style="height: 16px;">9</div> <div class="line number10 index9 alt1" style="height: 16px;">10</div> <div class="line number11 index10 alt2" style="height: 16px;">11</div> <div class="line number12 index11 alt1" style="height: 16px;">12</div> <div class="line number13 index12 alt2" style="height: 16px;">13</div> <div class="line number14 index13 alt1" style="height: 16px;">14</div> <div class="line number15 index14 alt2" style="height: 16px;">15</div> <div class="line number16 index15 alt1" style="height: 16px;">16</div> <div class="line number17 index16 alt2" style="height: 16px;">17</div> <div class="line number18 index17 alt1" style="height: 16px;">18</div> <div class="line number19 index18 alt2" style="height: 16px;">19</div> <div class="line number20 index19 alt1" style="height: 16px;">20</div> <div class="line number21 index20 alt2" style="height: 16px;">21</div> <div class="line number22 index21 alt1" style="height: 16px;">22</div> <div class="line number23 index22 alt2" style="height: 16px;">23</div> <div class="line number24 index23 alt1" style="height: 16px;">24</div> <div class="line number25 index24 alt2" style="height: 16px;">25</div> <div class="line number26 index25 alt1" style="height: 16px;">26</div> <div class="line number27 index26 alt2" style="height: 16px;">27</div> <div class="line number28 index27 alt1" style="height: 16px;">28</div> <div class="line number29 index28 alt2" style="height: 16px;">29</div> <div class="line number30 index29 alt1" style="height: 16px;">30</div> <div class="line number31 index30 alt2" style="height: 16px;">31</div> <div class="line number32 index31 alt1" style="height: 16px;">32</div> <div class="line number33 index32 alt2" style="height: 16px;">33</div> <div class="line number34 index33 alt1" style="height: 16px;">34</div> <div class="line number35 index34 alt2" style="height: 16px;">35</div> <div class="line number36 index35 alt1" style="height: 16px;">36</div> <div class="line number37 index36 alt2" style="height: 16px;">37</div> <div class="line number38 index37 alt1" style="height: 16px;">38</div> <div class="line number39 index38 alt2" style="height: 16px;">39</div> <div class="line number40 index39 alt1" style="height: 16px;">40</div> <div class="line number41 index40 alt2" style="height: 16px;">41</div> <div class="line number42 index41 alt1" style="height: 16px;">42</div> <div class="line number43 index42 alt2" style="height: 16px;">43</div> <div class="line number44 index43 alt1" style="height: 16px;">44</div> <div class="line number45 index44 alt2" style="height: 16px;">45</div> <div class="line number46 index45 alt1" style="height: 16px;">46</div> <div class="line number47 index46 alt2" style="height: 16px;">47</div> <div class="line number48 index47 alt1" style="height: 16px;">48</div> <div class="line number49 index48 alt2" style="height: 16px;">49</div> <div class="line number50 index49 alt1" style="height: 16px;">50</div> <div class="line number51 index50 alt2" style="height: 16px;">51</div> <div class="line number52 index51 alt1" style="height: 16px;">52</div> <div class="line number53 index52 alt2" style="height: 16px;">53</div> <div class="line number54 index53 alt1" style="height: 16px;">54</div> </td> <td class="code"> <div class="container"> <div class="line number1 index0 alt2" style="height: 16px;"><code class="html plain"><!DOCTYPE html></code></div> <div class="line number2 index1 alt1" style="height: 16px;"><code class="html plain"><</code><code class="html keyword">html</code> <code class="html color1">lang</code><code class="html plain">=</code><code class="html string">"zh-cn"</code><code class="html plain">></code></div> <div class="line number3 index2 alt2" style="height: 16px;"> <code class="html spaces">    </code><code class="html plain"><</code><code class="html keyword">head</code><code class="html plain">></code> </div> <div class="line number4 index3 alt1" style="height: 16px;"> </div> <div class="line number5 index4 alt2" style="height: 16px;"> <code class="html spaces">        </code><code class="html comments"><!--页面编码 --></code> </div> <div class="line number6 index5 alt1" style="height: 16px;"> <code class="html spaces">        </code><code class="html plain"><</code><code class="html keyword">meta</code> <code class="html color1">charset</code><code class="html plain">=</code><code class="html string">"UTF-8"</code><code class="html plain">></code> </div> <div class="line number7 index6 alt2" style="height: 16px;"> <code class="html spaces">        </code><code class="html comments"><!--低版本浏览器模拟渲染--></code> </div> <div class="line number8 index7 alt1" style="height: 16px;"> <code class="html spaces">        </code><code class="html plain"><</code><code class="html keyword">meta</code> <code class="html color1">http-equiv</code><code class="html plain">=</code><code class="html string">"X-UA-Compatible"</code> <code class="html color1">content</code><code class="html plain">=</code><code class="html string">"IE=Edge"</code><code class="html plain">></code> </div> <div class="line number9 index8 alt2" style="height: 16px;"> <code class="html spaces">        </code><code class="html comments"><!--响应式布局：UI布局和移动设备一致，缩放大小为原始大小--></code> </div> <div class="line number10 index9 alt1" style="height: 16px;"> <code class="html spaces">        </code><code class="html comments"><!--也可以使用下列声明：</code></div> <div class="line number11 index10 alt2" style="height: 16px;"><code class="html spaces"> </code><code class="html comments"><meta name="viewport" content="width=device-width, initialscale=</code></div> <div class="line number12 index11 alt1" style="height: 16px;"><code class="html comments">1, maximumscale=1, user-scalable=no"></code> </div> <div class="line number13 index12 alt2" style="height: 16px;"> <code class="html spaces">        </code><code class="html comments">意思是强制让文档宽度和设备宽度保持1：1，不允许用户单击放大浏览。注意content属性要用逗号（或分号）隔开，不规范则失效  --></code> </div> <div class="line number14 index13 alt1" style="height: 16px;"> <code class="html spaces">        </code><code class="html plain"><</code><code class="html keyword">meta</code> <code class="html color1">name</code><code class="html plain">=</code><code class="html string">"viewport"</code> <code class="html color1">content</code><code class="html plain">=</code><code class="html string">"width=deviece-width,initial-scale=1"</code><code class="html plain">></code> </div> <div class="line number15 index14 alt2" style="height: 16px;"> <code class="html spaces">        </code> </div> <div class="line number16 index15 alt1" style="height: 16px;"> <code class="html spaces">        </code><code class="html comments"><!--支持国产浏览器的高速渲染--></code> </div> <div class="line number17 index16 alt2" style="height: 16px;"> <code class="html spaces">        </code><code class="html plain"><</code><code class="html keyword">meta</code> <code class="html color1">name</code><code class="html plain">=</code><code class="html string">"renderer"</code> <code class="html color1">content</code><code class="html plain">=</code><code class="html string">"Webkit"</code><code class="html plain">></code> </div> <div class="line number18 index17 alt1" style="height: 16px;"> <code class="html spaces">        </code><code class="html comments"><!--在此进行SEO设置：作者、关键词、描述--></code> </div> <div class="line number19 index18 alt2" style="height: 16px;"> <code class="html spaces">        </code><code class="html plain"><</code><code class="html keyword">meta</code> <code class="html color1">name</code><code class="html plain">=</code><code class="html string">"author"</code> <code class="html color1">content</code><code class="html plain">=</code><code class="html string">"djtao"</code><code class="html plain">></code> </div> <div class="line number20 index19 alt1" style="height: 16px;"> <code class="html spaces">        </code><code class="html plain"><</code><code class="html keyword">meta</code> <code class="html color1">name</code><code class="html plain">=</code><code class="html string">"keywords"</code> <code class="html color1">content</code><code class="html plain">=</code><code class="html string">"djtao"</code><code class="html plain">></code> </div> <div class="line number21 index20 alt2" style="height: 16px;"> <code class="html spaces">        </code><code class="html plain"><</code><code class="html keyword">meta</code> <code class="html color1">name</code><code class="html plain">=</code><code class="html string">"description"</code> <code class="html color1">content</code><code class="html plain">=</code><code class="html string">"djtao"</code><code class="html plain">></code> </div> <div class="line number22 index21 alt1" style="height: 16px;"> <code class="html spaces">        </code> </div> <div class="line number23 index22 alt2" style="height: 16px;"> <code class="html spaces">        </code><code class="html plain"><</code><code class="html keyword">title</code><code class="html plain">>bootstrap基础模板</</code><code class="html keyword">title</code><code class="html plain">></code> </div> <div class="line number24 index23 alt1" style="height: 16px;"> <code class="html spaces">        </code> </div> <div class="line number25 index24 alt2" style="height: 16px;"> <code class="html spaces">        </code><code class="html comments"><!--bootstrap--></code> </div> <div class="line number26 index25 alt1" style="height: 16px;"> <code class="html spaces">        </code> </div> <div class="line number27 index26 alt2" style="height: 16px;"> <code class="html spaces">        </code><code class="html comments"><!--以下两个js插件用于在IE8及以下支持H5元素查询的，如不用可移除 --></code> </div> <div class="line number28 index27 alt1" style="height: 16px;"> <code class="html spaces">        </code><code class="html comments"><!--[if lt IE 9]></code> </div> <div class="line number29 index28 alt2" style="height: 16px;"> <code class="html spaces">            </code><code class="html comments"><script src="scripts/html5.min.js"></script></code> </div> <div class="line number30 index29 alt1" style="height: 16px;"> <code class="html spaces">            </code><code class="html comments"><script src="scripts/respond.min.js"></script></code> </div> <div class="line number31 index30 alt2" style="height: 16px;"> <code class="html spaces">        </code><code class="html comments"><![endif]--></code> </div> <div class="line number32 index31 alt1" style="height: 16px;"> <code class="html spaces">        </code> </div> <div class="line number33 index32 alt2" style="height: 16px;"> <code class="html spaces">        </code><code class="html comments"><!--bootstrap样式文件 --></code> </div> <div class="line number34 index33 alt1" style="height: 16px;"> <code class="html spaces">        </code><code class="html plain"><</code><code class="html keyword">link</code> <code class="html color1">rel</code><code class="html plain">=</code><code class="html string">"stylesheet"</code> <code class="html color1">href</code><code class="html plain">=</code><code class="html string">"bootstrap/css/bootstrap.css"</code><code class="html plain">></code> </div> <div class="line number35 index34 alt2" style="height: 16px;"> <code class="html spaces">        </code><code class="html comments"><!--自定义样式文件 --></code> </div> <div class="line number36 index35 alt1" style="height: 16px;"> <code class="html spaces">        </code><code class="html plain"><</code><code class="html keyword">link</code> <code class="html color1">rel</code><code class="html plain">=</code><code class="html string">"stylesheet"</code> <code class="html color1">href</code><code class="html plain">=</code><code class="html string">"styles/css.css"</code><code class="html plain">></code> </div> <div class="line number37 index36 alt2" style="height: 16px;"> <code class="html spaces">        </code> </div> <div class="line number38 index37 alt1" style="height: 16px;"> </div> <div class="line number39 index38 alt2" style="height: 16px;"> <code class="html spaces">        </code> </div> <div class="line number40 index39 alt1" style="height: 16px;"> <code class="html spaces">        </code> </div> <div class="line number41 index40 alt2" style="height: 16px;"> <code class="html spaces">        </code> </div> <div class="line number42 index41 alt1" style="height: 16px;"> <code class="html spaces">    </code><code class="html plain"></</code><code class="html keyword">head</code><code class="html plain">></code> </div> <div class="line number43 index42 alt2" style="height: 16px;"> <code class="html spaces">    </code><code class="html plain"><</code><code class="html keyword">body</code><code class="html plain">></code> </div> <div class="line number44 index43 alt1" style="height: 16px;"> <code class="html spaces">    </code> </div> <div class="line number45 index44 alt2" style="height: 16px;"> <code class="html spaces">    </code> </div> <div class="line number46 index45 alt1" style="height: 16px;"> <code class="html spaces">    </code> </div> <div class="line number47 index46 alt2" style="height: 16px;"> <code class="html spaces">        </code><code class="html comments"><!--基于jQuery的脚本文件 --></code> </div> <div class="line number48 index47 alt1" style="height: 16px;"> <code class="html spaces">        </code><code class="html plain"><</code><code class="html keyword">script</code> <code class="html color1">src</code><code class="html plain">=</code><code class="html string">"scripts/jquery.min.js"</code><code class="html plain">></</code><code class="html keyword">script</code><code class="html plain">></code> </div> <div class="line number49 index48 alt2" style="height: 16px;"> <code class="html spaces">        </code><code class="html comments"><!-- bootstrap的jq插件 --></code> </div> <div class="line number50 index49 alt1" style="height: 16px;"> <code class="html spaces">        </code><code class="html plain"><</code><code class="html keyword">script</code> <code class="html color1">src</code><code class="html plain">=</code><code class="html string">"bootstrap/js/bootstrap.min.js"</code><code class="html plain">></</code><code class="html keyword">script</code><code class="html plain">></code> </div> <div class="line number51 index50 alt2" style="height: 16px;"> <code class="html spaces">        </code><code class="html comments"><!--自定义脚本文件 --></code> </div> <div class="line number52 index51 alt1" style="height: 16px;"> <code class="html spaces">        </code><code class="html plain"><</code><code class="html keyword">script</code> <code class="html color1">src</code><code class="html plain">=</code><code class="html string">"scripts/js.js"</code><code class="html plain">></</code><code class="html keyword">script</code><code class="html plain">></code> </div> <div class="line number53 index52 alt2" style="height: 16px;"> <code class="html spaces">    </code><code class="html plain"></</code><code class="html keyword">body</code><code class="html plain">></code> </div> <div class="line number54 index53 alt1" style="height: 16px;"><code class="html plain"></</code><code class="html keyword">html</code><code class="html plain">></code></div> </div> </td> </tr> </tbody> </table> </div> </div> </div> <p>Achten Sie auf die Reihenfolge, Ihre Stile und Skripte müssen an letzter Stelle stehen. </p> <p>Die Online-Referenz-CD lautet </p> <div id="highlighter_613714" class="syntaxhighlighter as3"> <div class="wiz-table-container" style="position: relative; padding: 15px 0px 5px;"> <div class="wiz-table-body"> <table class="noBorderTable" border="0" cellpacing="0" cellpadding="0"> <tbody> <tr> <td class="gutter"> <div class="line number1 index0 alt2" style="height: 16px;">1<table class="noBorderTable" border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td class="gutter"> <div class="line number1 index0 alt2" style="height: 16px;">1</div> <div class="line number2 index1 alt1" style="height: 16px;">2</div> <div class="line number3 index2 alt2" style="height: 16px;">3</div> <div class="line number4 index3 alt1" style="height: 16px;">4</div> <div class="line number5 index4 alt2" style="height: 16px;">5</div> <div class="line number6 index5 alt1" style="height: 16px;">6</div> <div class="line number7 index6 alt2" style="height: 16px;">7</div> <div class="line number8 index7 alt1" style="height: 16px;">8</div> </td> <td class="code"> <div class="container"> <div class="line number1 index0 alt2" style="height: 16px;"><code class="as3 plain"><!-- Latest compiled and minified CSS --></code></div> <div class="line number2 index1 alt1" style="height: 16px;"><code class="as3 plain"><link rel=</code><code class="as3 string">"stylesheet"</code> <code class="as3 plain">href=</code><code class="as3 string">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"</code><code class="as3 plain">></code></div> <div class="line number3 index2 alt2" style="height: 16px;"> </div> <div class="line number4 index3 alt1" style="height: 16px;"><code class="as3 plain"><!-- Optional theme --></code></div> <div class="line number5 index4 alt2" style="height: 16px;"><code class="as3 plain"><link rel=</code><code class="as3 string">"stylesheet"</code> <code class="as3 plain">href=</code><code class="as3 string">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css"</code><code class="as3 plain">></code></div> <div class="line number6 index5 alt1" style="height: 16px;"> </div> <div class="line number7 index6 alt2" style="height: 16px;"><code class="as3 plain"><!-- Latest compiled and minified JavaScript --></code></div> <div class="line number8 index7 alt1" style="height: 16px;"><code class="as3 plain"><script src=</code><code class="as3 string">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"</code><code class="as3 plain">></script></code></div> </div> </td> </tr> </tbody> </table> <div class="line number2 index1 alt1" style="height: 16px;">2</div> <div class="line number3 index2 alt2" style="height: 16px;">3</div> <div class="line number4 index3 alt1" style="height: 16px;">4</div> <div class="line number5 index4 alt2" style="height: 16px;">5<h2> <div class="line number6 index5 alt1" style="height: 16px;">6<br> <div class="line number7 index6 alt2" style="height: 16px;">7 <div class="line number8 index7 alt1" style="height: 16px;">8<h2> </h2> </div> </div> </div> </h2> </div> </div> </td> <td class="code"> <div class="container"> <div class="line number1 index0 alt2" style="height: 16px;"> <code class="as3 plain"><!-- Neuestes kompiliertes und minimiertes CSS --></code> <div class="line number2 index1 alt1" style="height: 16px;"> <code class="as3 plain"><link rel=</code><code class="as3 string">"stylesheet"< /code> <code class="as3 plain">href=</code><code class="as3 string">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min. css"</code><code class="as3 plain">></code><p> </p> <div class="line number3 index2 alt2" style="height: 16px;"> <div class="line number4 index3 alt1" style="height: 16px;"> <code class="as3 plain"><!-- Optionales Thema --></code><p> </p> <div class="line number5 index4 alt2" style="height: 16px;"> <code class="as3 plain"><link rel=</code><code class="as3 string">"stylesheet"< /code> <code class="as3 plain">href=</code><code class="as3 string">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme. min.css"</code><code class="as3 plain">></code> <div class="line number6 index5 alt1" style="height: 16px;"> <h2> <div class="line number7 index6 alt2" style="height: 16px;"> <code class="as3 plain"><!-- Neuestes kompiliertes und minimiertes JavaScript --></code> <div class="line number8 index7 alt1" style="height: 16px;"> <code class="as3 plain"><script src=</code><code class="as3 string">"https:/ /maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"</code><code class="as3 plain">></script></code><h3> </h3> </div> </div> </h2> </div> </div> </div> </div> </div> </div> </div> </td> </tr> </tbody> </table> <p> <img src="http://images2015.cnblogs.com/blog/1011161/201610/1011161-20161009155923329-34756637.jpg" alt="" style="max-width:90%" style="max-width:90%" border="0"> </p> <h3></h3>5. Grundlegende CSS-Syntax<p> </p>1. Priorität<h3> </h3>Dasselbe wie natives CSS. <p> </p>#xxx>.xxx>xxx<div id="highlighter_396629" class="syntaxhighlighter as3"> <div class="wiz-table-container" style="position: relative; padding: 15px 0px 5px;">2. Selektor<div class="wiz-table-body"> <table class="noBorderTable" border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td class="gutter"> <div class="line number1 index0 alt2" style="height: 16px;">1</div> <div class="line number2 index1 alt1" style="height: 16px;">2</div> <div class="line number3 index2 alt2" style="height: 16px;">3</div> </td> <td class="code"> <div class="container"> <div class="line number1 index0 alt2" style="height: 16px;"><code class="as3 plain">nav>li li{</code></div> <div class="line number2 index1 alt1" style="height: 16px;"> <code class="as3 spaces">    </code><code class="as3 plain">margin-left:10px;</code> </div> <div class="line number3 index2 alt2" style="height: 16px;"><code class="as3 plain">}</code></div> </div> </td> </tr> </tbody> </table>(1) Attributauswahl</div> </div> </div> <p> </p>(2) Unterselektor<div id="highlighter_284016" class="syntaxhighlighter html"> <div class="wiz-table-container" style="position: relative; padding: 15px 0px 5px;">>Nein.<div class="wiz-table-body"> <table class="noBorderTable" border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td class="gutter"> <div class="line number1 index0 alt2" style="height: 16px;">1</div> </td> <td class="code"> <div class="container"> <div class="line number1 index0 alt2" style="height: 16px;"><code class="html plain">article h1~p{font-size:20px}</code></div> </div> </td> </tr> </tbody> </table>(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. <table class="noBorderTable" border="0" cellpacing="0" cellpadding="0"> <tbody> <tr> <td class="gutter"> <div class="line number1 index0 alt2" style="height: 16px;">1 <div class="line number2 index1 alt1" style="height: 16px;">2 <div class="line number3 index2 alt2" style="height: 16px;">3 </div> </div> </div> </td> <td class="code"> <div class="container"> <div class="line number1 index0 alt2" style="height: 16px;"> <code class="as3 plain">nav>li li{</code> <div class="line number2 index1 alt1" style="height: 16px;"> <code class="as3spaces"> </code><code class="as3 plain">margin-left:10px;</code> <div class="line number3 index2 alt2" style="height: 16px;"> <code class="as3 plain">}</code> </div> </div> </div> </div> </td> </tr> </tbody> </table> Verwenden Sie ~, um den Knoten hinter dem Element anzugeben. Suchen Sie beispielsweise alle p-Elemente nach h1 im Artikelelement <table class="noBorderTable" border="0" cellpacing="0" cellpadding="0"> <tbody> <tr> <td class="gutter"> <div class="line number1 index0 alt2" style="height: 16px;">1 </div> </td> <td class="code"> <div class="container"> <div class="line number1 index0 alt2" style="height: 16px;"> <code class="html plain">article h1~p{font-size:20px}</code> </div> </div> </td> </tr> </tbody> </table> </div> </div> </div> <h2>3. Pseudoklassenselektor</h2> <p>Die häufig verwendeten Pseudoklassen in Bootstrap sind nichts anderes als diese</p> <p><img src="http://images2015.cnblogs.com/blog/1011161/201610/1011161-20161009155924470-1311835502.jpg" alt="" style="max-width:90%" style="max-width:90%" border="0"></p> <p> </p> <h2>4. Anzeigeattribut</h2> <p>Das Display ist einfach zu bedienen, kann aber nicht wahllos verwendet werden. </p> <div> <img style="max-width:90%" src="http://images2015.cnblogs.com/blog/1011161/201610/1011161-20161009155925751-1901559236.jpg" alt="" border="0"> </div> <div> </div> <h2>5. Medienberatung</h2> <div>Medienberatung ist das Kernelement des responsiven Layouts von Bootstrap, aber die wichtigsten sind Min, Max und und</div> <div> <div id="highlighter_83124" class="syntaxhighlighter css"> <div class="wiz-table-container" style="position: relative; padding: 15px 0px 5px;"> <div class="wiz-table-body"> <table class="noBorderTable" border="0" cellpacing="0" cellpadding="0"> <tbody> <tr> <td class="gutter"> <div class="line number1 index0 alt2" style="height: 16px;">1<table class="noBorderTable" border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td class="gutter"> <div class="line number1 index0 alt2" style="height: 16px;">1</div> <div class="line number2 index1 alt1" style="height: 16px;">2</div> <div class="line number3 index2 alt2" style="height: 16px;">3</div> <div class="line number4 index3 alt1" style="height: 16px;">4</div> <div class="line number5 index4 alt2" style="height: 16px;">5</div> <div class="line number6 index5 alt1" style="height: 16px;">6</div> <div class="line number7 index6 alt2" style="height: 16px;">7</div> <div class="line number8 index7 alt1" style="height: 16px;">8</div> <div class="line number9 index8 alt2" style="height: 16px;">9</div> </td> <td class="code"> <div class="container"> <div class="line number1 index0 alt2" style="height: 16px;"> <code class="css plain">@media(</code><code class="css keyword">max-width</code><code class="css plain">: </code><code class="css value">767px</code><code class="css plain">){</code> </div> <div class="line number2 index1 alt1" style="height: 16px;"> <code class="css spaces">    </code><code class="css comments">/*在小于768像素的屏幕中，这里样式生效*/</code> </div> <div class="line number3 index2 alt2" style="height: 16px;"><code class="css plain">}</code></div> <div class="line number4 index3 alt1" style="height: 16px;"> <code class="css plain">@media(</code><code class="css keyword">max-width</code><code class="css plain">: </code><code class="css value">767px</code><code class="css plain">) and (</code><code class="css keyword">max-width</code><code class="css plain">: </code><code class="css value">991px</code><code class="css plain">){</code> </div> <div class="line number5 index4 alt2" style="height: 16px;"> <code class="css spaces">    </code><code class="css comments">/*在768-991像素区间的屏幕中，这里样式生效*/</code> </div> <div class="line number6 index5 alt1" style="height: 16px;"><code class="css plain">}</code></div> <div class="line number7 index6 alt2" style="height: 16px;"> <code class="css plain">@media(</code><code class="css keyword">min-width</code><code class="css plain">: </code><code class="css value">1200px</code><code class="css plain">){</code> </div> <div class="line number8 index7 alt1" style="height: 16px;"> <code class="css spaces">    </code><code class="css comments">/*在大于等于1200像素的屏幕中，这里样式生效*/</code> </div> <div class="line number9 index8 alt2" style="height: 16px;"><code class="css plain">}</code></div> </div> </td> </tr> </tbody> </table> <div class="line number2 index1 alt1" style="height: 16px;">2</div> <div class="line number3 index2 alt2" style="height: 16px;">3</div> <div class="line number4 index3 alt1" style="height: 16px;">4</div> <div class="line number5 index4 alt2" style="height: 16px;">5<p> </p> <div class="line number6 index5 alt1" style="height: 16px;">6 <div class="line number7 index6 alt2" style="height: 16px;">7<p> </p> <div class="line number8 index7 alt1" style="height: 16px;">8 <div class="line number9 index8 alt2" style="height: 16px;">9<h2> </h2> </div> </div> </div> </div> </div> </div> </td> <td class="code"> <div class="container"> <div class="line number1 index0 alt2" style="height: 16px;"> <code class="css plain">@media(</code><code class="css keyword">max-width</code><code class="css plain">: </code><code class="css value">767px</code><code class="css plain">){</code> <div class="line number2 index1 alt1" style="height: 16px;"> <code class="css rooms"> </code><code class="css comments">/*Auf Bildschirmen, die kleiner als 768 Pixel sind, Dieser Stil wird wirksam*/</code><h3> <div class="line number3 index2 alt2" style="height: 16px;"> <code class="css plain">}</code><br> <div class="line number4 index3 alt1" style="height: 16px;"> <code class="css plain">@media(</code><code class="css keyword">max-width</code><code class="css plain">: </code><code class="css value">767px</code><code class="css plain">) und (</code><code class=" CSS-Schlüsselwort">max-width</code><code class="css plain">: </code><code class="css value">991px</code><code class="css plain">){ </code> <div class="line number5 index4 alt2" style="height: 16px;"> <code class="css rooms"> </code><code class="css comments">/*Im Bereich von 768–991 Pixel Auf dem Bildschirm wird dieser Stil wirksam*/</code><p> </p> <div class="line number6 index5 alt1" style="height: 16px;"> <code class="css plain">}</code> <div class="line number7 index6 alt2" style="height: 16px;"> <code class="css plain">@media(</code><code class="css keyword">min-width</code><code class="css plain">: </code><code class="css value">1200px</code><code class="css plain">){</code><div id="highlighter_717643" class="syntaxhighlighter as3"> <div class="line number8 index7 alt1" style="height: 16px;"> <code class="css rooms"> </code><code class="css comments">/*Auf Bildschirmen größer oder gleich 1200 Pixel, dieser Stil wird wirksam*/</code><div id="highlighter_1893" class="syntaxhighlighter js"> <div class="line number9 index8 alt2" style="height: 16px;"> <code class="css plain">}</code><div class="wiz-table-container" style="position: relative; padding: 15px 0px 5px;"> <div class="wiz-table-body"> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </h3> </div> </div> </div> </td> </tr> </tbody> </table> <table class="noBorderTable" border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td class="gutter"> <div class="line number1 index0 alt2" style="height: 16px;">1</div> <div class="line number2 index1 alt1" style="height: 16px;">2</div> <div class="line number3 index2 alt2" style="height: 16px;">3</div> </td> <td class="code"> <div class="container"> <div class="line number1 index0 alt2" style="height: 16px;"> <code class="js plain">(</code><code class="js keyword">function</code><code class="js plain">(){</code> </div> <div class="line number2 index1 alt1" style="height: 16px;"> <code class="js spaces">    </code><code class="js keyword">do</code> <code class="js plain">somthing</code> </div> <div class="line number3 index2 alt2" style="height: 16px;"><code class="js plain">}() )</code></div> </div> </td> </tr> </tbody> </table> 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 <table class="noBorderTable" border="0" cellpacing="0" cellpadding="0"> <tbody> <tr> <td class="gutter"> <div class="line number1 index0 alt2" style="height: 16px;">1 <div class="line number2 index1 alt1" style="height: 16px;">2 <div class="line number3 index2 alt2" style="height: 16px;">3 </div> </div> </div> </td> <td class="code"> <div class="container"> <div class="line number1 index0 alt2" style="height: 16px;"> <code class="js plain">(</code><code class="js keyword">function</code><code class="js plain">(){</code> <div class="line number2 index1 alt1" style="height: 16px;"> <code class="js rooms"> </code><code class="js keyword">do</code> <code class="„js" plain>etwas</code> <div class="line number3 index2 alt2" style="height: 16px;"> <code class="js plain">}() )</code> </div> </div> </div> </div> </td> </tr> </tbody> </table> </div> </div> </div> <p> bedeutet sofort anrufen. </p> <h3>(3) Prototyp</h3> </div> <p>JS-Plug-Ins in BT werden alle auf Basis objektorientierter Methoden erstellt. </p> </div> <p>Definieren Sie als einfaches Beispiel Additions- und Subtraktionsoperationen</p> <div id="highlighter_311826" class="syntaxhighlighter js"> <div class="wiz-table-container" style="position: relative; padding: 15px 0px 5px;"> <div class="wiz-table-body"> <table class="noBorderTable" border="0" cellpacing="0" cellpadding="0"> <tbody> <tr> <td class="gutter"> <div class="line number1 index0 alt2" style="height: 16px;">1<table class="noBorderTable" border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td class="gutter"> <div class="line number1 index0 alt2" style="height: 16px;">1</div> <div class="line number2 index1 alt1" style="height: 16px;">2</div> <div class="line number3 index2 alt2" style="height: 16px;">3</div> <div class="line number4 index3 alt1" style="height: 16px;">4</div> <div class="line number5 index4 alt2" style="height: 16px;">5</div> <div class="line number6 index5 alt1" style="height: 16px;">6</div> <div class="line number7 index6 alt2" style="height: 16px;">7</div> <div class="line number8 index7 alt1" style="height: 16px;">8</div> <div class="line number9 index8 alt2" style="height: 16px;">9</div> <div class="line number10 index9 alt1" style="height: 16px;">10</div> <div class="line number11 index10 alt2" style="height: 16px;">11</div> <div class="line number12 index11 alt1" style="height: 16px;">12</div> </td> <td class="code"> <div class="container"> <div class="line number1 index0 alt2" style="height: 16px;"> <code class="js keyword">var</code> <code class="js plain">decimalDigits = 2,</code> </div> <div class="line number2 index1 alt1" style="height: 16px;"> <code class="js spaces">    </code><code class="js plain">tax = 5;</code> </div> <div class="line number3 index2 alt2" style="height: 16px;"> </div> <div class="line number4 index3 alt1" style="height: 16px;"> <code class="js keyword">function</code> <code class="js plain">add(x, y) {</code> </div> <div class="line number5 index4 alt2" style="height: 16px;"> <code class="js spaces">    </code><code class="js keyword">return</code> <code class="js plain">x y;</code> </div> <div class="line number6 index5 alt1" style="height: 16px;"><code class="js plain">}</code></div> <div class="line number7 index6 alt2" style="height: 16px;"> </div> <div class="line number8 index7 alt1" style="height: 16px;"> <code class="js keyword">function</code> <code class="js plain">subtract(x, y) {</code> </div> <div class="line number9 index8 alt2" style="height: 16px;"> <code class="js spaces">    </code><code class="js keyword">return</code> <code class="js plain">x - y;</code> </div> <div class="line number10 index9 alt1" style="height: 16px;"><code class="js plain">}</code></div> <div class="line number11 index10 alt2" style="height: 16px;"> </div> <div class="line number12 index11 alt1" style="height: 16px;"><code class="js comments">//alert(add(1, 3));</code></div> </div> </td> </tr> </tbody> </table> <div class="line number2 index1 alt1" style="height: 16px;">2</div> <div class="line number3 index2 alt2" style="height: 16px;">3</div> <div class="line number4 index3 alt1" style="height: 16px;">4</div> <div class="line number5 index4 alt2" style="height: 16px;">5<p> </p> <div class="line number6 index5 alt1" style="height: 16px;">6 <div class="line number7 index6 alt2" style="height: 16px;">7<div id="highlighter_995312" class="syntaxhighlighter js"> <div class="line number8 index7 alt1" style="height: 16px;">8<div class="wiz-table-container" style="position: relative; padding: 15px 0px 5px;"> <div class="line number9 index8 alt2" style="height: 16px;">9<div class="wiz-table-body"> <div class="line number10 index9 alt1" style="height: 16px;">10<table class="noBorderTable" border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td class="gutter"> <div class="line number1 index0 alt2" style="height: 16px;">1</div> <div class="line number2 index1 alt1" style="height: 16px;">2</div> <div class="line number3 index2 alt2" style="height: 16px;">3</div> <div class="line number4 index3 alt1" style="height: 16px;">4</div> </td> <td class="code"> <div class="container"> <div class="line number1 index0 alt2" style="height: 16px;"> <code class="js keyword">var</code> <code class="js plain">Calculator = </code><code class="js keyword">function</code> <code class="js plain">(decimalDigits, tax) {</code> </div> <div class="line number2 index1 alt1" style="height: 16px;"> <code class="js spaces">    </code><code class="js keyword">this</code><code class="js plain">.decimalDigits = decimalDigits;</code> </div> <div class="line number3 index2 alt2" style="height: 16px;"> <code class="js spaces">    </code><code class="js keyword">this</code><code class="js plain">.tax = tax;</code> </div> <div class="line number4 index3 alt1" style="height: 16px;"><code class="js plain">};</code></div> </div> </td> </tr> </tbody> </table> <div class="line number11 index10 alt2" style="height: 16px;">11 <div class="line number12 index11 alt1" style="height: 16px;">12 </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </td> <td class="code"> <div class="container"> <div class="line number1 index0 alt2" style="height: 16px;"> <code class="js keyword">var</code> <code class="js plain">decimalDigits = 2,</code> <div class="line number2 index1 alt1" style="height: 16px;"> <code class="js rooms"> </code><code class="js plain">tax = 5;</code> <div class="line number3 index2 alt2" style="height: 16px;"> <div class="line number4 index3 alt1" style="height: 16px;"> <code class="js keyword">function</code> <code class="js plain">add(x, y) { <div class="line number5 index4 alt2" style="height: 16px;"> <code class="js rooms"> </code><code class="js keyword">return</code> <code class="js plain">x y;</code> <div class="line number6 index5 alt1" style="height: 16px;"> <code class="js plain">}</code> <div class="line number7 index6 alt2" style="height: 16px;"> <div class="line number8 index7 alt1" style="height: 16px;"> <code class="js keyword">function</code> <code class="js plain">subtract(x, y) { <div class="line number9 index8 alt2" style="height: 16px;"> <code class="js rooms"> </code><code class="js keyword">return</code> <code class="js plain">x - y;</code> <div class="line number10 index9 alt1" style="height: 16px;"> <code class="js plain">}</code> <div class="line number11 index10 alt2" style="height: 16px;"> <div class="line number12 index11 alt1" style="height: 16px;"> <code class="js comments">//alert(add(1, 3));</code> </div> </div> </div> </div></code> </div> </div> </div> </div></code> </div> </div> </div> </div> </div> </td> </tr> </tbody> </table> Umgeschrieben in ein Additions- und Subtraktionsberechnungsfunktionsobjekt <table class="noBorderTable" border="0" cellpacing="0" cellpadding="0"> <tbody> <tr> <td class="gutter"> <div class="line number1 index0 alt2" style="height: 16px;">1 <div class="line number2 index1 alt1" style="height: 16px;">2 <div class="line number3 index2 alt2" style="height: 16px;">3 <div class="line number4 index3 alt1" style="height: 16px;">4 </div> </div> </div> </div> </td> <td class="code"> <div class="container"> <div class="line number1 index0 alt2" style="height: 16px;"> <code class="js keyword">var</code> <code class="js plain">Calculator = </code><code class="js keyword">function</code> <code class="js plain">(decimalDigits, tax) {</code> <div class="line number2 index1 alt1" style="height: 16px;"> <code class="js rooms"> </code><code class="js keyword">this</code><code class="js plain">.decimalDigits = decimalDigits;</code> <div class="line number3 index2 alt2" style="height: 16px;"> <code class="js rooms"> </code><code class="js keyword">this</code><code class="js plain">.tax = tax;</code> <div class="line number4 index3 alt1" style="height: 16px;"> <code class="js plain">};</code> </div> </div> </div> </div> </div> </td> </tr> </tbody> </table> </div> </div> </div> <p>Legen Sie dann den Prototyp des Calculator-Objekts fest, indem Sie das <span style="color: #ff6600;"></span>Objektliteral <strong><span style="color: #ff6600;"> der Eigenschaft </span>Prototyp</strong> des Calculator-Objekts zuweisen. </p> <div id="highlighter_350061" class="syntaxhighlighter js"> <div class="wiz-table-container" style="position: relative; padding: 15px 0px 5px;"> <div class="wiz-table-body"> <table class="noBorderTable" border="0" cellpacing="0" cellpadding="0"> <tbody> <tr> <td class="gutter"> <div class="line number1 index0 alt2" style="height: 16px;">1<table class="noBorderTable" border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td class="gutter"> <div class="line number1 index0 alt2" style="height: 16px;">1</div> <div class="line number2 index1 alt1" style="height: 16px;">2</div> <div class="line number3 index2 alt2" style="height: 16px;">3</div> <div class="line number4 index3 alt1" style="height: 16px;">4</div> <div class="line number5 index4 alt2" style="height: 16px;">5</div> <div class="line number6 index5 alt1" style="height: 16px;">6</div> <div class="line number7 index6 alt2" style="height: 16px;">7</div> <div class="line number8 index7 alt1" style="height: 16px;">8</div> <div class="line number9 index8 alt2" style="height: 16px;">9</div> <div class="line number10 index9 alt1" style="height: 16px;">10</div> </td> <td class="code"> <div class="container"> <div class="line number1 index0 alt2" style="height: 16px;"><code class="js plain">Calculator.prototype = {</code></div> <div class="line number2 index1 alt1" style="height: 16px;"> <code class="js spaces">      </code><code class="js plain">add: </code><code class="js keyword">function</code> <code class="js plain">(x, y) {</code> </div> <div class="line number3 index2 alt2" style="height: 16px;"> <code class="js spaces">          </code><code class="js keyword">return</code> <code class="js plain">x y;</code> </div> <div class="line number4 index3 alt1" style="height: 16px;"> <code class="js spaces">      </code><code class="js plain">},</code> </div> <div class="line number5 index4 alt2" style="height: 16px;"> </div> <div class="line number6 index5 alt1" style="height: 16px;"> <code class="js spaces">      </code><code class="js plain">subtract: </code><code class="js keyword">function</code> <code class="js plain">(x, y) {</code> </div> <div class="line number7 index6 alt2" style="height: 16px;"> <code class="js spaces">          </code><code class="js keyword">return</code> <code class="js plain">x - y;</code> </div> <div class="line number8 index7 alt1" style="height: 16px;"> <code class="js spaces">      </code><code class="js plain">}</code> </div> <div class="line number9 index8 alt2" style="height: 16px;"> <code class="js spaces">  </code><code class="js plain">};</code> </div> <div class="line number10 index9 alt1" style="height: 16px;"> <code class="js spaces">  </code><code class="js comments">//alert((new Calculator()).add(1, 3));</code> </div> </div> </td> </tr> </tbody> </table> <div class="line number2 index1 alt1" style="height: 16px;">2</div> <div class="line number3 index2 alt2" style="height: 16px;">3</div> <div class="line number4 index3 alt1" style="height: 16px;">4</div> <div class="line number5 index4 alt2" style="height: 16px;">5<p> </p> <div class="line number6 index5 alt1" style="height: 16px;">6 <div class="line number7 index6 alt2" style="height: 16px;">7<h3> <div class="line number8 index7 alt1" style="height: 16px;">8 <div class="line number9 index8 alt2" style="height: 16px;">9<h3> <div class="line number10 index9 alt1" style="height: 16px;">10 </div> </h3> </div> </div> </h3> </div> </div> </div> </div> </td> <td class="code"> <div class="container"> <div class="line number1 index0 alt2" style="height: 16px;"> <code class="js plain">Calculator.prototype = {</code><p> </p> <div class="line number2 index1 alt1" style="height: 16px;"> <code class="js rooms"> </code><code class="js plain">add: </code><code class="js keyword">function</code> <code class="js plain">(x, y) {</code> <div class="line number3 index2 alt2" style="height: 16px;"> <code class="js rooms">                                                                                                                                                              . "js plain">x y;</code><div id="highlighter_709217" class="syntaxhighlighter as3"> <div class="line number4 index3 alt1" style="height: 16px;"> <code class="js rooms"> </code><code class="js plain">},</code><div id="highlighter_211333" class="syntaxhighlighter js"> <div class="line number5 index4 alt2" style="height: 16px;"> <div class="wiz-table-container" style="position: relative; padding: 15px 0px 5px;"> <div class="line number6 index5 alt1" style="height: 16px;"> <code class="js rooms"> </code><code class="js plain">subtract: </code><code class="js keyword">function</code> <code class="js plain">(x, y) {</code><div class="wiz-table-body"> <div class="line number7 index6 alt2" style="height: 16px;"> <code class="js. rooms">                                                                                                                                                               . "js plain ">x - y;</code><table class="noBorderTable" border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td class="gutter"> <div class="line number1 index0 alt2" style="height: 16px;">1</div> <div class="line number2 index1 alt1" style="height: 16px;">2</div> </td> <td class="code"> <div class="container"> <div class="line number1 index0 alt2" style="height: 16px;"> <code class="js plain">$(</code><code class="js string">'div'</code><code class="js plain">).on(click,</code><code class="js keyword">function</code><code class="js plain">(){...});</code> </div> <div class="line number2 index1 alt1" style="height: 16px;"> <code class="js plain">$(</code><code class="js string">'div'</code><code class="js plain">).off(click,</code><code class="js keyword">function</code><code class="js plain">(){...});</code> </div> </div> </td> </tr> </tbody> </table> <div class="line number8 index7 alt1" style="height: 16px;"> <code class="js rooms"> </code><code class="js plain">}</code> <div class="line number9 index8 alt2" style="height: 16px;"> <code class="js rooms"> </code><code class="js plain">};</code> <div class="line number10 index9 alt1" style="height: 16px;"> <code class="js rooms"> </code><code class="js comments">//alert((new Calculator() ).add(1, 3));</code> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </td> </tr> </tbody> </table> (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 <table class="noBorderTable" border="0" cellpacing="0" cellpadding="0"> <tbody> <tr> <td class="gutter"> <div class="line number1 index0 alt2" style="height: 16px;">1 <div class="line number2 index1 alt1" style="height: 16px;">2 </div> </div> </td> <td class="code"> <div class="container"> <div class="line number1 index0 alt2" style="height: 16px;"> <code class="js plain">$(</code><code class="js string">'div'</code> <code class="js plain">).on(click,</code><code class="js keyword">function</code><code class="js plain">(){...}) ;</code> <div class="line number2 index1 alt1" style="height: 16px;"> <code class="js plain">$(</code><code class="js string">'div'</code> <code class="js plain">).off(click,</code><code class="js keyword">function</code><code class="js plain">(){...}) ;</code> </div> </div> </div> </td> </tr> </tbody> </table> </div> </div> </div> </div> <p><span class="con" style="font-size: 10px;">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. </span></p> <p>Die Bindung in der Bootstrap-Methode ist ähnlich, aber die Idee ist anders, </p> <div id="highlighter_276150" class="syntaxhighlighter as3"> <div class="wiz-table-container" style="position: relative; padding: 15px 0px 5px;"> <div class="wiz-table-body"> <table class="noBorderTable" border="0" cellpacing="0" cellpadding="0"> <tbody> <tr> <td class="gutter"> <div class="line number1 index0 alt2" style="height: 16px;">1<table class="noBorderTable" border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td class="gutter"> <div class="line number1 index0 alt2" style="height: 16px;">1</div> </td> <td class="code"> <div class="container"> <div class="line number1 index0 alt2" style="height: 16px;"> <code class="as3 plain">$(document).on(</code><code class="as3 string">'click.bs.carosel.data.api'</code><code class="as3 plain">,</code><code class="as3 string">'div'</code><code class="as3 plain">,</code><code class="as3 color3">function</code><code class="as3 plain">(){...})</code> </div> </div> </td> </tr> </tbody> </table> </div> </td> <td class="code"> <div class="container"> <div class="line number1 index0 alt2" style="height: 16px;"> <code class="as3 plain">$(document).on(</code><code class="as3 string">'click .bs.carosel.data.api'</code><code class="as3 plain">,</code><code class="as3 string">'div'</code><code class="as3 plain ">,</code><code class="as3 color3">Funktion</code><code class="as3 plain">(){...})</code> </div> </div> </td> </tr> </tbody> </table> </div> <p> </p> <p>Wählen Sie mithilfe des Bubbling-Mechanismus die Div des Dokuments aus. Verbesserte Leistung. </p> <h3> </h3> <p>(2) Namensraum</p> <p>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. </p> <h3> </h3> <p>(3)$.data()</p> <div id="highlighter_831802" class="syntaxhighlighter html">Sammeln Sie alle benutzerdefinierten Attribute, denen Daten zum angegebenen Element vorangestellt sind, und führen Sie sie in einem Literal zusammen. Zum Beispiel: <div class="wiz-table-container" style="position: relative; padding: 15px 0px 5px;"> <div class="wiz-table-body"> <table class="noBorderTable" border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td class="gutter"> <div class="line number1 index0 alt2" style="height: 16px;">1</div> </td> <td class="code"> <div class="container"> <div class="line number1 index0 alt2" style="height: 16px;"><code class="html plain"><</code><code class="html keyword">div</code> <code class="html color1">id</code><code class="html plain">=</code><code class="html string">"abc"</code> <code class="html color1">data-role</code><code class="html plain">=</code><code class="html string">"aaa"</code> <code class="html color1">data-toggle</code><code class="html plain">=</code><code class="html string">"toggle"</code> <code class="html color1">data-xxx</code><code class="html plain">=</code><code class="html string">"djtao"</code><code class="html plain">></</code><code class="html keyword">div</code><code class="html plain">></code></div> </div> </td> </tr> </tbody> </table> </div> <table class="noBorderTable" border="0" cellpacing="0" cellpadding="0"> <tbody> <tr> <td class="gutter"> <div class="line number1 index0 alt2" style="height: 16px;">1</div> </td> <td class="code"> <div class="container"> <div class="line number1 index0 alt2" style="height: 16px;"><code class="html plain"><</code><code class="html keyword">div</code> <code class="html color1">id</code><code class="html plain">=</code><code class="html string">"abc"</code> <code class="html color1" >data-role</code><code class="html plain">=</code><code class="html string">"aaa"</code> <code class="html color1">data-toggle </code><code class="html plain">=</code><code class="html string">"toggle"</code> <code class="html color1">data-xxx</code> <code class="html plain">=</code><code class="html string">"djtao"</code><code class="html plain">></</code><code class="html keyword">div</code><code class="html plain">></code></div> <p> </p> </div> </td> </tr> </tbody> </table> <div id="highlighter_197547" class="syntaxhighlighter js"> <div class="wiz-table-container" style="position: relative; padding: 15px 0px 5px;"> <div class="wiz-table-body">Ich möchte den Wert der Rolle erfassen<table class="noBorderTable" border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td class="gutter"> <div class="line number1 index0 alt2" style="height: 16px;">1</div> </td> <td class="code"> <div class="container"> <div class="line number1 index0 alt2" style="height: 16px;"> <code class="js plain">$(</code><code class="js string">'#abc'</code><code class="js plain">).data(</code><code class="js string">'role'</code><code class="js plain">)</code> </div> </div> </td> </tr> </tbody> </table> </div> </div> </div> <table class="noBorderTable" border="0" cellpacing="0" cellpadding="0"> <tbody> <tr> <td class="gutter"> <div class="line number1 index0 alt2" style="height: 16px;">1<p> </p> </div> </td> <td class="code"> <div class="container"> <div class="line number1 index0 alt2" style="height: 16px;"> <code class="js plain">$(</code><code class="js string">'#abc'</code><code class="js plain">).data(</code><code class="js string">'role'</code><code class="js plain">)</code> <p> </p> </div> </div> </td> </tr> </tbody> </table> <h2> </h2> <p>Wenn keine Parameter vorhanden sind, entspricht dies dem Sammeln und Deklarieren eines JSON. var value={role:'aaa',toggle:'toggle',xxx:'djtao'}</p> <p> </p> <p>8.H5-Hilfsattribute</p> <p>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. </p> <p> </p> <p>【Postscript】</p> <div>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. </div> <h1 style="margin: 0px; font-family: helvetica, 'hiragino sans gb', 微软雅黑, 'microsoft yahei ui', simsun, simhei, arial, sans-serif; font-size: 15px; line-height: 24px;">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. <br> <br> </h1> </div>Von Wiz Notes (Wiz)<div id="MySignature"> </div> <div class="clear"></div> </div> </div> </div> </div>