'In-depth Understanding of Bootstrap' Reading Notes: Chapter 1 Preparation for Getting Started-HTML Tutorial-php.cn

<h2>1. Introduction to 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 is the most popular front-end development framework. </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;">What is a framework: a semi-finished product of the development process. </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 has the following important features: </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) Complete CSS style plugin</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) Rich predefined style sheets</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 based plug-in set</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) Flexible grid system</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;">The following will briefly introduce the knowledge that bootstrap may use. </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. Getting started for newbies</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;">The version used by the author is 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;">The following interface can be found on the bootstrap Chinese official 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>This book uses the precompiled version for learning</p> <p> </p> <h2>3. File structure</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>The production environment uses bootstrap.min.css and bootstrap.min.js. Except for the font structure, other files can be named arbitrarily. </p> <p> </p> <h2>4. Standard template</h2> <p>The first step is to set up the bootstrap environment in aptana. </p> <p>ctrl+N Create a new web project, select the default project, name the project, define the location, and complete. </p> <p>Rename the downloaded folder dist to bootstrap, copy and paste it into the project folder. </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">meta</code> <code class="html plain">charset</code><code class="html keyword">=</code><code class="html color1">"UTF-8"</code><code class="html plain">><code class="html string"> </code><code class="html plain"> " <div class="line number8 index7 alt1" style="height: 16px;"> <code class="html spaces"> </code><code class="html plain"> </code><code class="html keyword"></code><code class="html color1"> </code><code class="html plain"> </code><code class="html string"> </code><code class="html color1">1, maximumscale=1, user-scalable=no"></code><code class="html plain"> 让制 means to keep the width and equipment width of 1: 1, and users are not allowed to click amplify and browse. Note that the content attribute must be separated by commas (or semicolons). If it is not standardized, it will be invalid --></code><code class="html string"> </code><code class="html plain"> </code> </div><<div class="line number9 index8 alt2" style="height: 16px;"><code class="html spaces">meta</code> <code class="html comments">name</code></div>=<div class="line number10 index9 alt1" style="height: 16px;"><code class="html spaces">"viewport"</code> <code class="html comments">content</code></div>=<div class="line number11 index10 alt2" style="height: 16px;"><code class="html spaces">"width=device-width,initial-scale=1"</code> <code class="html comments">></code> </div> <div class="line number12 index11 alt1" style="height: 16px;"> <code class="html comments"></code></div> <div class="line number13 index12 alt2" style="height: 16px;"> <code class="html spaces"> </code><code class="html comments"></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">"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 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">meta</code> <code class="html plain">name</code><code class="html keyword">=</code><code class="html color1">"author"</code> <code class="html plain">content</code><code class="html string">=</code><code class="html color1">"djtao"</code><code class="html plain">><code class="html string"> & & Lt; </code><code class="html plain">Meta</code> name<div class="line number18 index17 alt1" style="height: 16px;"> <code class="html spaces"> = </code><code class="html comments"> "keywords" </code>Content</div> <div class="line number19 index18 alt2" style="height: 16px;"> = <code class="html spaces"></code> "djtao" <code class="html plain"></code> & gt; <code class="html keyword"></code> <code class="html color1"></code> <code class="html plain"></code><<code class="html string"></code>meta<code class="html color1"> </code>name<code class="html plain"></code>=<code class="html string"></code>"description"<code class="html plain"> </code>content</div><div class="line number20 index19 alt1" style="height: 16px;">=<code class="html spaces"></code>"djtao"<code class="html plain"></code>><code class="html keyword"></code><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 basic template</</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"></code></div> & & Lt;!-The following two JS plug-ins are used for supporting H5 elements in IE8 and below, if no need to remove-& gt; <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"> </code> </div> <div class="line number28 index27 alt1" style="height: 16px;"> <code class="html spaces"></code><code class="html comments"> </code> </div> <div class="line number29 index28 alt2" style="height: 16px;"> <code class="html spaces"> </code><code class="html comments"><</code></div>link<div class="line number30 index29 alt1" style="height: 16px;"> <code class="html spaces">rel</code><code class="html comments">=</code></div>"stylesheet"<div class="line number31 index30 alt2" style="height: 16px;"> <code class="html spaces">href</code><code class="html comments">=</code></div>"bootstrap/css/bootstrap.css"<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"> </code> </div><<div class="line number34 index33 alt1" style="height: 16px;"><code class="html spaces">link</code> <code class="html plain">rel</code><code class="html keyword">=</code><code class="html color1">"stylesheet"</code> <code class="html plain">href</code><code class="html string">=</code><code class="html color1">"styles/css.css"</code><code class="html plain">> <code class="html string"> </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"></code><code class="html color1"> </code><code class="html plain"> </code><code class="html string"></</code><code class="html color1">head</code><code class="html plain">></code><code class="html string"><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"> & & Lt; </code><code class="html comments">Script</code> </div>Src<div class="line number48 index47 alt1" style="height: 16px;"> <code class="html spaces"> = </code><code class="html plain"> "scripts/jquery.min.js" </code><code class="html keyword"> & gt; & lt;/</code><code class="html color1">Script</code><code class="html plain"> & gt; </code><code class="html string"> </code><code class="html plain"> </code><code class="html keyword"> </code><code class="html plain"><</code></div>script<div class="line number49 index48 alt2" style="height: 16px;"> <code class="html spaces">src</code><code class="html comments">=</code></div>"bootstrap/js/bootstrap.min.js"<div class="line number50 index49 alt1" style="height: 16px;"><code class="html spaces">></</code><code class="html plain">script</code><code class="html keyword">> </code><code class="html color1"> </code><code class="html plain"> </code><code class="html string"> </code><code class="html plain"><</code><code class="html keyword">script</code> <code class="html plain">src</code></div>=<div class="line number51 index50 alt2" style="height: 16px;"><code class="html spaces">"scripts/js.js"</code><code class="html comments">></</code></div>script<div class="line number52 index51 alt1" style="height: 16px;"><code class="html spaces">></code><code class="html plain"> </code><code class="html keyword"> </code><code class="html color1"></</code><code class="html plain">body</code><code class="html string">></code><code class="html plain"> </code><code class="html keyword"></</code><code class="html plain">html</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"> </code> </div> </code> </div> </code> </div> <p>Pay attention to the order, your own styles and scripts must be at the end. </p> <p>The online reference cdn is</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" 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"></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"></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"></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> </div> </div> <h2> <br>5. Basic CSS syntax</h2> <h2>1.Priority</h2> <p>Same as native CSS. </p> <p>#xxx>.xxx>xxx</p> <h2>2.Selector</h2> <h3>(1) Attribute Selector</h3> <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>(2) child selector</h3> <p>>No.</p> <h3>(3) Sibling Selector</h3> <p>The adjacent selector is represented by a + sign. For example, in a navigation bar with a nav-ul-li structure, you want to set the margin between two li's. </p> <div id="highlighter_396629" 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" 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> </div> </div> </div> <p>Use ~ to specify the node behind the element. For example, find all p elements after h1 in the article element</p> <div id="highlighter_284016" 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> </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. Pseudo-class selector</h2> <p>The commonly used pseudo-classes in bootstrap are nothing more than these</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. display attribute</h2> <p>Display is easy to use, but it can’t be used indiscriminately. </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.Media inquiry</h2> <div>Media consultation is the core element of bootstrap’s responsive layout, but the main ones used are min, max and and</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" 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">/*On screens smaller than 768 pixels, this style will take effect*/</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">/*This style will take effect on screens with 768-991 pixels*/</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">/*On screens larger than or equal to 1200 pixels, this style will take effect*/</code> </div> <div class="line number9 index8 alt2" style="height: 16px;"><code class="css plain">}</code></div> </div> </td> </tr> </tbody> </table> </div> </div> </div> <p>Similarly, height can also be used. </p> <p> </p> <h2>6. Related JavaScript grammar combing</h2> <h3>(1) with and or operators (&&, ||) <br>(2) call function immediately</h3> <p>Recommended to use this</p> <div id="highlighter_717643" class="syntaxhighlighter as3"> <div id="highlighter_1893" 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" 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> </div> </div> </div> <p>means to call immediately. </p> <h3>(3) Prototype</h3> </div> <p>The js plug-ins in BT are all created based on object-oriented methods. </p> </div> <p>A simple example to define addition and subtraction operations</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" 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> </div> </div> <p>Rewritten into an addition and subtraction calculation function object</p> <div id="highlighter_995312" 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" 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> </div> </div> <p>Then, set the prototype of the Calculator object by assigning the <span style="color: #ff6600;"></span>object literal<strong><span style="color: #ff6600;"> to the </span>prototype</strong> attribute of the Calculator object. </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" 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"> </code><code class="js plain">},</code> </div> <div class="line number4 index3 alt1" style="height: 16px;"> <code class="js spaces"> </code><code class="js plain"> </code> </div>subtract: <div class="line number5 index4 alt2" style="height: 16px;"></div>function<div class="line number6 index5 alt1" style="height: 16px;"> <code class="js spaces">(x, y) {</code><code class="js plain"> </code><code class="js keyword"> </code><code class="js plain"></code> </div>}<div class="line number7 index6 alt2" style="height: 16px;"> <code class="js spaces"> </code><code class="js keyword"> </code><code class="js plain">};</code> </div> <div class="line number8 index7 alt1" style="height: 16px;"> <code class="js spaces"> </code><code class="js plain">//alert((new Calculator()).add(1, 3));</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 comes from the author’s blog)<code class="js comments"> </code>7.jQuery knowledge combing</div> </div>(1)Event Binding</td> </tr>The commonly used binding syntax in jQuery is on/off, bind/unbind. For example </tbody> </table> </div> </div> </div> <p> </p> <h3> </h3> <h3>1</h3> <p>2</p> <div id="highlighter_709217" class="syntaxhighlighter as3"> <div id="highlighter_211333" 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" cellspacing="0" cellpadding="0">$(<tbody><tr>'div'<td class="gutter"> <div class="line number1 index0 alt2" style="height: 16px;">).on(click,</div> <div class="line number2 index1 alt1" style="height: 16px;">function</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">).off(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"> </code> </div> </div> <p><span class="con" style="font-size: 10px;">Note: The bind() function is a function used by jQuery 1.7 or earlier to bind event handlers; the on() function is the preferred function provided by jQuery 1.7 for binding event handlers. ; Judging from the introduction and parameter description of version 1.7, in fact, the two functions are basically used in the same way, but maybe in earlier versions, the bind() function can only bind one event handler to the label object at a time, while on () function can bind handlers to multiple different events at once. </span></p> <p>The binding in bootstrap method is similar but the idea is different, </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" 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> </div> </div> <p>Using the bubbling mechanism, select the div of the document. Improved performance. </p> <p> </p> <h3>(2) Namespace</h3> <p>When debugging, add a string such as click.djtao after the event, and then use the trigger method to trigger it, it will not affect the original click event. </p> <p> </p> <h3>(3)$.data()</h3> <p>Collect all custom attributes prefixed with data on the specified element and merge them into one literal. For example: </p> <div id="highlighter_831802" 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> </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> </div> </div> <p>I want to collect the value of role</p> <div id="highlighter_197547" 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" 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> <p>If there are no parameters, it is equivalent to collecting and declaring a json. var value={role:'aaa',toggle:'toggle',xxx:'djtao'}</p> <p> </p> <h2>8.H5 auxiliary attributes</h2> <p>Can support reading for blind people and other people. Usually prefixed with arial, they are collectively referred to as arial attributes. </p> <p> </p> <p>【Postscript】</p> <p>Many books by domestic authors feel like reading API documents. The more you say, the more mistakes you make, and it’s also expensive (@﹏@)~. . But the starting point of the API document itself is not low. Since it is said to be "in-depth understanding", read it several times and experience several projects. Perhaps it can be seen that its value is higher than API documentation. </p> <p>This series of reading notes is based on the idea of learning now and applying it quickly, and will insert some out-of-book examples collected from shuwai.com. I basically typed it all myself, and modified some of the content myself, so it is just a series of articles that record my learning process. That’s all. </p> <p> </p> <div>From Wiz Notes(Wiz)</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;"> <br><br> </h1> <div id="MySignature"></div> <div class="clear"></div> </td> </tr></tbody> </table></div> </div> </div> </div> </td> </tr> </tbody> </table> </div> </div> </div>