「ブートストラップを深く理解する」読書ノート: 第 1 章始めるための準備-htmlチュートリアル-php.cn

<h2>1. ブートストラップフレームワークの紹介</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 は、最も人気のあるフロントエンド開発フレームワークです。 </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> <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> <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) 完全なCSSスタイルプラグイン</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) 豊富な定義済みスタイルシート</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ベースのプラグインセット</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) 柔軟なグリッドシステム</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> <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. 初心者のための入門</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;">作者が使用しているバージョンは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;">Bootstrap 中国の公式 Web サイトで次のインターフェイスを見つけることができます</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>この本は学習用にプリコンパイルされたバージョンを使用します</p> <p> </p> <h2>3. ファイル構造</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>本番環境では bootstrap.min.css と bootstrap.min.js を使用します。フォント構造を除いて、その他のファイルには任意の名前を付けることができます。 </p> <p> </p> <h2>4.標準テンプレート</h2> <p>最初のステップは、aptana でブートストラップ環境をセットアップすることです。 </p> <p>ctrl+N 新しい Web プロジェクトを作成し、デフォルトのプロジェクトを選択し、プロジェクトに名前を付け、場所を定義して完了します。 </p> <p>ダウンロードしたフォルダーの名前を「dist」に変更し、コピーしてプロジェクトフォルダーに貼り付けます。 </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"></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 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><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><code class="html plain"><</code><code class="html キーワード">メタ</code> <code class="html color1">名前</code><code class=" html plain">=</code><code class="html string">"レンダラー"</code> <code class="html color1">コンテンツ</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"></code><code class="html comments"></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><code class="html plain"><</code><code class="html キーワード">メタ</code> <code class="html color1">名前</code><code class=" html plain">=</code><code class="html string">"作成者"</code> <code class="html color1">コンテンツ</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><code class="html plain"><</code><code class="html キーワード">メタ</code> <code class="html color1">名前</code><code class=" html plain">=</code><code class="html string">"キーワード"</code> <code class="html color1">コンテンツ</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><code class="html plain"><</code><code class="html キーワード">メタ</code> <code class="html color1">名前</code><code class=" html plain">=</code><code class="html string">"説明"</code> <code class="html color1">コンテンツ</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><code class="html plain"><</code><code class="htmlKeyword">タイトル</code><code class="html plain">>ブートストラップ基本テンプレート</</ code ><code class="html キーワード">タイトル</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><code class="html comments"></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"></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><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"></code><code class="html comments"></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><code class="html plain"><</code><code class="html keyword">リンク</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><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><code class="html plain"><</code><code class="html keyword">リンク</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"></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"></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><code class="html plain"></</code><code class="html キーワード">本文</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>順序に注意してください。独自のスタイルとスクリプトは最後にある必要があります。 </p> <p>オンラインリファレンス CDN は</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. 基本的な CSS 構文</h2> <h2>1.優先順位</h2> <p>ネイティブCSSと同じ。 </p> <p>#xxx>.xxx>xxx</p> <h2>2.セレクター</h2> <h3>(1) 属性セレクター</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) 子セレクター</h3> <p>>いいえ</p> <h3>(3) 兄弟セレクター</h3> <p>近接セレクターは + 記号で表されます。たとえば、nav-ul-li 構造のナビゲーションバーでは、2 つの li の間にマージンを設定します。 </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> ~ を使用して要素の背後にあるノードを指定します。たとえば、article 要素内の h1 以降のすべての p 要素を検索します</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. 疑似クラスセレクター</h2> <p>ブートストラップで一般的に使用される疑似クラスは次のとおりです</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. 表示属性</h2> <p>ディスプレイは使いやすいですが、むやみに使用することはできません。 </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.報道関係のお問い合わせ</h2> <div>メディアコンサルテーションはブートストラップのレスポンシブレイアウトの中核要素ですが、主に使用されるのは min、max、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">/*在小于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> </div> </div> <p>同様に、高さも使用できます。 </p> <p> </p> <h2>6. 関連する JavaScript 文法を調べる</h2> <h3>(1) and or 演算子 (&&, ||) を使用する <br>(2) 関数をすぐに呼び出す</h3> <p>こんな使い方もおすすめ</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>はすぐに電話するという意味です。 </p> <h3>(3) プロトタイプ</h3> </div> <p>BT の js プラグインはすべてオブジェクト指向メソッドに基づいて作成されています。 </p> </div> <p>加算演算と減算演算を定義する簡単な例</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>加減算関数オブジェクトに書き換えました</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>次に、<span style="color: #ff6600;"></span>オブジェクトリテラル<strong><span style="color: #ff6600;">を Calculator オブジェクトの </span>prototype</strong> 属性に割り当てて、Calculator オブジェクトのプロトタイプを設定します。 </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">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> </div> </div> <p>(コードは著者のブログから引用)</p> <h3>7.jQueryの知識を組み合わせる</h3> <h3>(1)イベントバインディング</h3> <p> jQuery で一般的に使用されるバインディング構文は、on/off、bind/unbind です。たとえば</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> <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> </div> </div> </div> <p><span class="con" style="font-size: 10px;">注: binding() 関数は、イベントハンドラーをバインドするために jQuery 1.7 以前で使用される関数です。on() 関数は、イベントハンドラーをバインドするために jQuery 1.7 で提供される関数です。バージョン 1.7 では、実際、この 2 つの関数は基本的に同じように使用されますが、おそらく以前のバージョンでは、bind() 関数は一度に 1 つのイベントハンドラーのみをラベルオブジェクトにバインドできますが、on () 関数はハンドラーをバインドできます。複数の異なるイベントに同時に参加できます。 </span></p> <p>ブートストラップメソッドのバインディングは似ていますが、考え方が異なります</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>バブリングメカニズムを使用して、ドキュメントの div を選択します。パフォーマンスを向上させた。 </p> <p> </p> <h3>(2) 名前空間</h3> <p>デバッグするときは、イベントの後に click.djtao などの文字列を追加し、トリガーメソッドを使用してトリガーします。元のクリックイベントには影響しません。 </p> <p> </p> <h3>(3)$.data()</h3> <p>指定された要素のデータの接頭辞が付いたすべてのカスタム属性を収集し、それらを 1 つのリテラルにマージします。例: </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>ロールの価値を集めたい</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>パラメータがない場合は、jsonを収集して宣言するのと同じです。 var value={role:'aaa',toggle:'toggle',xxx:'djtao'}</p> <p> </p> <h2>8.H5 補助属性</h2> <p>視覚障害者やその他の人々の読書をサポートできます。通常、接頭辞 arial が付けられ、これらは総称して arial 属性と呼ばれます。 </p> <p> </p> <p>【追記】</p> <p>国内著者の本の多くはAPIドキュメントを読んでいるような気分になります。言えば言うほど間違いも増えるし、お金もかかる(@﹏@)〜。。ただし、API ドキュメント自体の出発点は低くなく、「深く理解する」とされているので、何度か読んで、いくつかのプロジェクトを体験してください。おそらく API ドキュメントよりもその価値が高いことがわかります。 </p> <p>この読書ノートシリーズは、今学んですぐに応用するという考えに基づいており、shuwai.com から収集した書籍外の例をいくつか挿入します。基本的にすべて自分で入力し、内容の一部を自分で修正したため、学習プロセスを記録した一連の記事にすぎません。それだけです。 </p> <p> </p> <div>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>

「ブートストラップを深く理解する」読書ノート: 第 1 章 始めるための準備

「ブートストラップを深く理解する」読書ノート: 第 1 章始めるための準備