"In-depth Understanding of Bootstrap" Reading Notes: Chapter 3 CSS Layout

<h2>1. Outline the concept</h2> <div>bootstrap is developed based on H5. It advocates mobile first (media inquiry statement is required), and does not support a wide range of browsers. </div> <div>Responsive images: max-width:100% height:auto;</div> <div>You can add: .img-responsive class</div> <div>The basic style of typography is: </div> <div>The margin of the body is 0, the background color is white, and the line spacing is 20/14 times</div> <div>Use the Normalize.css library to minimize differences between browsers</div> <div>Centered container container has a maximum range. (The maximum left and right margins are auto, related to the device) </div> <div> </div> <h2>2. Basic text typesetting (global settings)</h2> <div> <h2>1.<span style="line-height: 1.6;">Title (h mark and small mark)</span> </h2> <div> <div id="highlighter_795477" class="syntaxhighlighter html" style="width: 1276.8px;"> <div id="highlighter_361744" class="syntaxhighlighter html"> <div class="wiz-table-container" style="position: relative; padding: 15px 0px 5px;"> <div class="wiz-table-body"> <table class="noBorderTable" style="width: 1275px;" 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> </td> <td class="code" style="width: 1173px;"> <div class="container"> <div class="line number1 index0 alt2" style="height: 16px;"><code class="html plain"><</code><code class="html keyword">h1</code><code class="html plain">>header1<</code><code class="html keyword">small</code><code class="html plain">>small tag subtitle</</code><code class="html keyword">small</code><code class="html plain">></</code><code class="html keyword">h1</code><code class="html plain">> </code></div> <div class="line number2 index1 alt1" style="height: 16px;"><code class="html plain"><</code><code class="html keyword">h2</code><code class="html plain">>header2<</code><code class="html keyword">small</code><code class="html plain">>small tag subtitle</</code><code class="html keyword">small</code><code class="html plain">></</code><code class="html keyword">h2</code><code class="html plain">> </code></div> <div class="line number3 index2 alt2" style="height: 16px;"><code class="html plain"><</code><code class="html keyword">h3</code><code class="html plain">>header3<</code><code class="html keyword">small</code><code class="html plain">>small tag subtitle</</code><code class="html keyword">small</code><code class="html plain">></</code><code class="html keyword">h3</code><code class="html plain">> </code></div> <div class="line number4 index3 alt1" style="height: 16px;"><code class="html plain"><</code><code class="html keyword">h4</code><code class="html plain">>header4<</code><code class="html keyword">small</code><code class="html plain">>subtitle of small tag</</code><code class="html keyword">small</code><code class="html plain">></</code><code class="html keyword">h4</code><code class="html plain">> </code></div> <div class="line number5 index4 alt2" style="height: 16px;"><code class="html plain"><</code><code class="html keyword">h5</code><code class="html plain">>header5<</code><code class="html keyword">small</code><code class="html plain">>subtitle of small tag</</code><code class="html keyword">small</code><code class="html plain">></</code><code class="html keyword">h5</code><code class="html plain">> </code></div> <div class="line number6 index5 alt1" style="height: 16px;"><code class="html plain"><</code><code class="html keyword">h6</code><code class="html plain">>header6<</code><code class="html keyword">small</code><code class="html plain">>small tag subtitle</</code><code class="html keyword">small</code><code class="html plain">></</code><code class="html keyword">h6</code><code class="html plain">> </code></div> </div> </td> </tr> </tbody> </table> </div> </div> </div> <img src="http://images2015.cnblogs.com/blog/1011161/201610/1011161-20161010142739102-1895601554.png" alt="" border="0"><img src="http://images2015.cnblogs.com/blog/1011161/201610/1011161-20161010142740055-2109177660.jpg" alt="" border="0"> </div> </div> <div> <p>The font color of the <small> content in all title elements is gray<span style="line-height: 1.6;"> (#999999), and the line spacing is 1. </span></p> The text font in <p><small> is 65% of the font size corresponding to the current element in h1, h2, and h3; while in h4, h5, and h6, it is 75%. <span style="line-height: 1.6;"></span> </p> </div> <p> </p> <p>A. The font size is 14px and the spacing is 20px. The margin-bottom of the p element is half the line spacing (10px). <span style="line-height: 1.6;"></span> </p> <p>B. Highlight<span style="line-height: 1.6;"></span> </p> <p><span style="line-height: 1.6;">When you have a piece of text that you want to highlight but don’t want to get the same weight as the h mark, you can class="lead"<span></span><br></span> </p> <p> </p> <div id="highlighter_393077" 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">1<div class="line number1 index0 alt2" style="height: 16px;"> </div> </td> <td class="code"> <div class="container"> <div class="line number1 index0 alt2" style="height: 16px;"><<code class="html plain"></code>span<code class="html keyword"> </code>class<code class="html color1"></code>=<code class="html plain"></code>"lead"<code class="html string"></code>>email me</<code class="html plain"></code>span<code class="html keyword"></code>><code class="html plain"></code> </div> </div> </td> </tr> </tbody> </table> </div> </div> </div> <p>As shown in the picture, the comparison effect between lead and h1: <span style="line-height: 1.6;"></span> </p> <p><span style="line-height: 1.6;"><img src="http://images2015.cnblogs.com/blog/1011161/201610/1011161-20161010142740539-2045389970.png" alt="" border="0"><br></span> </p>2. Emphasize text<h2> </h2> <div class="wiz-table-container" style="position: relative; padding: 15px 0px 5px;"> <div class="wiz-table-body"> <table style="width: 100%;" border="1" bgcolor="#FFFFFF"> <tbody> <tr>Accent elements<td style="width: 50%;"> </td>Performance<td style="width: 50%;"> </td> </tr> <tr> <td style="width: 50%;">small<p> </p>(You can directly apply the .small class)<p> </p> </td>Small text<td style="width: 50%;"> </td> </tr> <tr>strong<td style="width: 50%;"> </td>Emphasis (bold)<td style="width: 50%;"> </td> </tr> <tr>em<td style="width: 50%;"> </td>italic<td style="width: 50%;"> </td> </tr> <tr>cite<td style="width: 50%;"> </td>Cite sources, font size is 85%<td style="width: 50%;"> </td> </tr> </tbody> <div> </div> <h2>3. Abbreviations abbr and .initialism</h2> <p>Both can achieve the underline dotted hover hand effect, which needs to be used with the title attribute. </p> <h2>4. address address</h2> <p>Used to package information related to contact information. The style difference is that the spacing and bottom style are slightly different. </p> <div id="highlighter_86830" 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> </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">address</code><code class="html plain">></code></div> <div class="line number2 index1 alt1" style="height: 16px;"> <code class="html spaces">  </code><code class="html plain"><</code><code class="html keyword">strong</code><code class="html plain">>Twitter, Inc.</</code><code class="html keyword">strong</code><code class="html plain">><</code><code class="html keyword">br</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">795 Folsom Ave, Suite 600<</code><code class="html keyword">br</code><code class="html plain">></code> </div> <div class="line number4 index3 alt1" style="height: 16px;"> <code class="html spaces">​​​​</code><code class="html plain">San Francisco, CA 94107<</code><code class="html keyword">br</code><code class="html plain">></code> </div> <div class="line number5 index4 alt2" style="height: 16px;"> <code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">abbr</code> <code class="html color1">title</code><code class="html plain">=</code><code class="html string">"Phone"</code><code class="html plain">>P:</</code><code class="html keyword">abbr</code><code class="html plain">>(123) 456-7890</code> </div> <div class="line number6 index5 alt1" style="height: 16px;"><code class="html plain"></</code><code class="html keyword">address</code><code class="html plain">></code></div> <div class="line number7 index6 alt2" style="height: 16px;"><code class="html plain"><</code><code class="html keyword">address</code><code class="html plain">></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">strong</code><code class="html plain">> Uncle Tom </</code><code class="html keyword">strong</code><code class="html plain">> </code><code class="html keyword">  </code><code class="html plain"><</code></div>a<div class="line number9 index8 alt2" style="height: 16px;"> <code class="html spaces">href</code><code class="html plain">=</code><code class="html keyword">"mailto:#"</code><code class="html color1">>tomxu@outlook.com</</code><code class="html plain">a</code><code class="html string">></code><code class="html plain"> </code><code class="html keyword"></</code><code class="html plain">address</code></div>><div class="line number10 index9 alt1" style="height: 16px;"> <code class="html plain"> </code> <code class="html keyword"> </code> <code class="html plain"> </code> </div> </code> </div> </div> <p>The effect is as shown in the picture</p> <p><img src="http://images2015.cnblogs.com/blog/1011161/201610/1011161-20161010142741086-1251850225.png" alt="" border="0"></p> <h2><span style="line-height: 1.6;">5. Quote blockquote</span></h2> <p>The general format for citations is</p> <div id="highlighter_518004" 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> </td> <td class="code"> <div class="container"> <div class="line number1 index0 alt2" style="height: 16px;"><code class="as3 plain"><blockquote></code></div> <div class="line number2 index1 alt1" style="height: 16px;"> <code class="as3 spaces"> </code><code class="as3 plain"><p>Love is not something you can just buy if you want</p></code> </div> <div class="line number3 index2 alt2" style="height: 16px;"> <code class="as3 spaces">  </code><code class="as3 plain"><small>From<cite>Love Sales</cite></small></code> </div> <div class="line number4 index3 alt1" style="height: 16px;"><code class="as3 plain"></blockquote></code></div> </div> </td> </tr> </tbody> </table> </div> </div> </div> <p><img src="http://images2015.cnblogs.com/blog/1011161/201610/1011161-20161010142741430-49428234.png" alt="" border="0"></p> <p><span style="line-height: 1.6;">Of course, replacing small with footer will have the same effect. </span></p> <p><span style="line-height: 1.6;">The default is left-aligned. If you want to right-align, you can use the .pull-right class for blockquote. The whole thing floated to the right. </span></p> <p><img src="http://images2015.cnblogs.com/blog/1011161/201610/1011161-20161010142741774-1723319592.png" alt="" border="0"></p> <h2>6. List</h2> <h3>(1)ul-li unordered list</h3> <p>Under bootstrap, the ul-li framework of ordinary lists is basically the same as the default. </p> <p>A. The style of the ul-li list is determined by list-style. Use the .list-unstyle class in the bootstrap framework. The source code style is nothing more than padding-left:0;list-style:none. </p> <p>Note: If it is a list nested list, if the <span>.</span><span>list-unstyle class is applied to the grandparent ul, the grandchild li will not inherit it. </span></p> <p><span>B. Inline list: Normal ul-li is displayed vertically. In many situations, the most typical one is navigation, which requires li to be arranged horizontally. At this time, you can use the <span>.list-inline class of the inline list</span></span></p> <p> </p> <div id="highlighter_385611" 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> </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">ul</code> <code class="html color1">class</code><code class="html plain">=</code><code class="html string">"list-inline"</code><code class="html plain">></code></div> <div class="line number2 index1 alt1" style="height: 16px;"> <code class="html spaces">                                                                                                      </code><code class="html plain">                                                                                                                                                                     </code><code class="html keyword">                                                                                                                                                  </code><code class="html plain">                                                                                                ​  </code> <code class="html keyword"> </code> <code class="html plain"> </code> </div> </div> <p><span><img src="http://images2015.cnblogs.com/blog/1011161/201610/1011161-20161010142742258-1575759483.png" alt="" border="0"><br></span></p> <h3>(2) ordered list ol-li</h3> <p>Changed the font to make the display softer</p> <h3>(3) dl-dt-dd definition list</h3> <p>The definition list includes description information. The <span>dl-dt-dd definition list</span>under bootstrap is usually arranged vertically. </p> <div id="highlighter_598113" 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> </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">dl</code><code class="html plain">></code></div> <div class="line number2 index1 alt1" style="height: 16px;"> <code class="html spaces">  </code><code class="html plain"><</code><code class="html keyword">dt</code><code class="html plain">>Title 1</</code><code class="html keyword">dt</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">dd</code><code class="html plain">>Description 1</</code><code class="html keyword">dd</code><code class="html plain">></code> </div> <div class="line number4 index3 alt1" style="height: 16px;"> <code class="html spaces">  </code><code class="html plain"><</code><code class="html keyword">dt</code><code class="html plain">>Title 2</</code><code class="html keyword">dt</code><code class="html plain">></code> </div> <div class="line number5 index4 alt2" style="height: 16px;"> <code class="html spaces">  </code><code class="html plain"><</code><code class="html keyword">dd</code><code class="html plain">>Description 2</</code><code class="html keyword">dd</code><code class="html plain">></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">dt</code><code class="html plain">>Title 3</</code><code class="html keyword">dt</code><code class="html plain">></code> </div> <div class="line number7 index6 alt2" style="height: 16px;"> <code class="html spaces">  </code><code class="html plain"><</code><code class="html keyword">dd</code><code class="html plain">>Description 3</</code><code class="html keyword">dd</code><code class="html plain">></code> </div> <div class="line number8 index7 alt1" style="height: 16px;"><code class="html plain"></</code><code class="html keyword">dl</code><code class="html plain">></code></div> </div> </td> </tr> </tbody> </table> </div> </div> </div> <p><img src="http://images2015.cnblogs.com/blog/1011161/201610/1011161-20161010142742743-1319120599.png" alt="" border="0"></p> <p>我想在横向展示一个商品列表，包括描述信息。如果给dl加上<span>class="dl-horizontal"</span></p> <p><img src="http://images2015.cnblogs.com/blog/1011161/201610/1011161-20161010142743258-1006507091.png" alt="" border="0"></p> <p> </p> <h2>7. 代码</h2> <p>包括code单行代码，kbd用户输入代码和pre多行代码块。</p> <p>代码样式的用法示例如下：</p> <div id="highlighter_826630" class="syntaxhighlighter html"> <div id="highlighter_296927" 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> </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">code</code><code class="html plain">><body></body></</code><code class="html keyword">code</code><code class="html plain">><</code><code class="html keyword">br</code><code class="html plain">></code></div> <div class="line number2 index1 alt1" style="height: 16px;"><code class="html plain"><</code><code class="html keyword">kbd</code><code class="html plain">><body></body></</code><code class="html keyword">kbd</code><code class="html plain">></code></div> <div class="line number3 index2 alt2" style="height: 16px;"><code class="html plain"><</code><code class="html keyword">pre</code><code class="html plain">><body></body></</code><code class="html keyword">pre</code><code class="html plain">></code></div> </div> </td> </tr> </tbody> </table> </div> </div> </div> <img src="http://images2015.cnblogs.com/blog/1011161/201610/1011161-20161010142744352-1730720578.png" alt="" border="0"> </div> <h3>（1）code</h3> <p><span>code内联代码可以在行间引用。原理是给code标记定义背景色，文字颜色</span></p> <h2><span>（2）kbd</span></h2> <p>kbd表示需要用户输入，可以配合input元素使用。</p> <div id="highlighter_709029" 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">请输入<kbd>ctrl+c</kbd>来复制代码，然后使用<kbd>ctrl+v</kbd>来粘贴代码</code></div> </div> </td> </tr> </tbody> </table> </div> </div> </div> <p><img src="http://images2015.cnblogs.com/blog/1011161/201610/1011161-20161010142744649-2052810696.png" alt="" border="0"></p> <h2>（3）多行代码块pre</h2> <p>pre是预编译的意思。bootstrap实现基本方法是背景-边框，高度，圆角，竖向滚动。</p> <p>粘贴进去会有空格。</p> <p>类似还有<samp>可以格式化代码。用较为标准的字体和行间距显示</p> <h2>8.其它H5标记补充</h2> <p><span>（1）<mark>,也可以使用.mark</span></p> <p> </p> <div id="highlighter_283527" 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">p</code> <code class="html color1">class</code><code class="html plain">=</code><code class="html string">"mark"</code><code class="html plain">>this is mark text</</code><code class="html keyword">p</code><code class="html plain">></code></div> </div> </td> </tr> </tbody> </table> </div> </div> </div> <p><span><img src="http://images2015.cnblogs.com/blog/1011161/201610/1011161-20161010142744930-1750370126.png" alt="" border="0"><br></span></p> <h3><span><span> (2) del mark and s mark </span></span></h3> <div id="highlighter_100404" 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">del</code><code class="html plain">>I am delated.</</code><code class="html keyword">del</code><code class="html plain">></code></div> </div> </td> </tr> </tbody> </table> </div> </div> </div> <p><img src="http://images2015.cnblogs.com/blog/1011161/201610/1011161-20161010142746164-1214610770.png" alt="" border="0"></p> <h3> (3) ins tag and u tag </h3> <div>Underscore, ins defines text that has been inserted into the document. The u mark <span style="line-height: 1.6;"> has different semantics from ins. If the text is not a hyperlink, don’t use the u mark </span> </div> <h3>(4) Alignment related</h3> <div>——text-left</div> <div>——text-center</div> <div>——text-right</div> <div>Text is centered left, center and right. </div> <div>——text-justify: judge for yourself—Qi Xing defines the spacing between words, which is similar to the head and tail avoidance rule. Note that there are also corresponding properties in css3. </div> <div>——text-nowrap: Always keep 1 line when the browser is zoomed out</div> <h3> (5) Case related: </h3> <div>text-lowercase</div> <div>text-uppercase </div> <div>text-capitalize initial letter size</div> <h3>【Example 3.1】Text formatting practice</h3> <div id="highlighter_620203" 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: 32px;">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: 32px;">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="html plain"><</code><code class="html keyword">div</code> <code class="html color1">class</code><code class="html plain">=</code><code class="html string">"text-justify"</code><code class="html plain">></code></div> <div class="line number2 index1 alt1" style="height: 16px;"> <code class="html spaces">           </code><code class="html plain"><</code><code class="html keyword">h3</code> <code class="html color1">class</code><code class="html plain">=</code><code class="html string">"text-center"</code><code class="html plain">>I am afraid <</code><code class="html keyword">small</code><code class="html plain">>William Shakespeare</</code><code class="html keyword"> small</code><code class="html plain">>< ;/</code><code class="html keyword">h3</code><code class="html plain">></code> </div> <div class="line number3 index2 alt2" style="height: 32px;"> <code class="html spaces">  </code><code class="html plain"><</code><code class="html keyword">p</code> <code class="html color1">class</code><code class="html plain">=</code><code class="html string">"text-capitalize"</code><code class="html plain">>you say that you love rain, but you open your umbrella when it rains.You say that you love the sun, but you find a shadow spot when the sun shines.You say that you love the wind, but you close your windows when wind blows.</</code><code class="html keyword">p</code><code class="html plain">></code> </div> <div class="line number4 index3 alt1" style="height: 16px;"> <code class="html spaces">             </code><code class="html plain"><</code><code class="html keyword">p</code><code class="html plain">><mark>This is why I am afraid, you say that u love me too.</mark></</code><code class="html keyword">p</code><code class="html plain">></code> </div>> <div class="line number5 index4 alt2" style="height: 16px;"> <code class="html spaces">           </code><code class="html plain"><</code><code class="html keyword">ins</code><code class="html plain">><</code><code class="html keyword">em</code><code class="html plain">>Translation</</code><code class="html keyword">em</code><code class="html plain">></</code><code class="html keyword">ins</code><code class="html plain">&g t;</code> </div>& & Lt; <div class="line number6 index5 alt1" style="height: 32px;"> <code class="html spaces">P</code><code class="html plain"> & gt; You say that the rain and rain are slightly mang, Lanting looks away; You said that spring was brilliant, green sleeves were red and fragrant; later, the west building was hidden inside, and I stood quietly beside you. You said that the soft breeze blows gently, and I lie down drunk and think; later, the doors and windows are tightly closed, and the tents are filled with sorrow. </</code><code class="html keyword">p</code><code class="html plain">></code><code class="html keyword"> </code><code class="html plain">                                                                                                                                                                                                                        </</code></div>p<div class="line number7 index6 alt2" style="height: 16px;"><code class="html spaces">></code><code class="html plain"> </code><code class="html keyword"></</code><code class="html plain">div</code><code class="html keyword">></code><code class="html plain"> </code> </div> <div class="line number8 index7 alt1" style="height: 16px;"> <code class="html plain"> </code> </div> </div> <p><img src="http://images2015.cnblogs.com/blog/1011161/201610/1011161-20161010142747946-1261753550.png" alt="" border="0"></p> <p> </p> <h2>3. Table related css</h2> <p>The table is implemented by adding the .table class to the table</p> <h3>【Example 3.2】<span style="line-height: 1.6;">Make a table with 5 rows and 5 columns to record information</span> </h3> <p> </p> <div id="highlighter_341065" 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> </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">table</code><code class="html plain">></code></div> <div class="line number2 index1 alt1" style="height: 16px;"> <code class="html spaces">                                                                                                                                                                                                             </code><code class="html plain">                                                                                                                                                                                                                  Since<div class="line number4 index3 alt1" style="height: 16px;"> <code class="html spaces">                        </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>TITLE</</code><code class="html keyword">td</code><code class="html plain">></code> </div> <div class="line number5 index4 alt2" style="height: 16px;"> <code class="html spaces">                        </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>AUTHOR</</code><code class="html keyword">td</code><code class="html plain">></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">td</code><code class="html plain">>PUBDATE</</code><code class="html keyword">td</code><code class="html plain">></code> </div> <div class="line number7 index6 alt2" style="height: 16px;"> <code class="html spaces">                        </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>PRICE</</code><code class="html keyword">td</code><code class="html plain">></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">tr</code><code class="html plain">></</code><code class="html keyword">thead</code><code class="html plain">></code> </div> <div class="line number9 index8 alt2" style="height: 16px;"> <code class="html spaces">                    </code> </div> <div class="line number10 index9 alt1" style="height: 16px;"> <code class="html spaces">                    </code><code class="html plain"><</code><code class="html keyword">tbody</code><code class="html plain">></code> </div> <div class="line number11 index10 alt2" style="height: 16px;"> <code class="html spaces">                        </code><code class="html plain"><</code><code class="html keyword">tr</code><code class="html plain">></code> </div> <div class="line number12 index11 alt1" style="height: 16px;"> <code class="html spaces">                            </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>1</</code><code class="html keyword">td</code><code class="html plain">></code> </div> <div class="line number13 index12 alt2" style="height: 16px;"> <code class="html spaces">                            </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>西游记</</code><code class="html keyword">td</code><code class="html plain">></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">td</code><code class="html plain">>吴承恩</</code><code class="html keyword">td</code><code class="html plain">></code> </div> <div class="line number15 index14 alt2" style="height: 16px;"> <code class="html spaces">                                                                                                                                                                                                                                </code><code class="html plain">                                                                                                                                                                                                       </code><code class="html keyword">                                                                                                                    ​ </code><code class="html plain">                                                                                                                       ​ ~ </code><code class="html keyword">                                                                                                                                                                                   </code><code class="html plain">                                                                                                                                                               </code> </div>                                                                                                                                                                                                                       <div class="line number16 index15 alt1" style="height: 16px;"> <code class="html spaces">                                                                                                                                                                                                                                               </code><code class="html plain">                                                                                                                     ​ </code><code class="html keyword">                                                                                                                        ​<div class="line number26 index25 alt1" style="height: 16px;"> <code class="html spaces">                            </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>3</</code><code class="html keyword">td</code><code class="html plain">></code> </div> <div class="line number27 index26 alt2" style="height: 16px;"> <code class="html spaces">                            </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>水浒传</</code><code class="html keyword">td</code><code class="html plain">></code> </div> <div class="line number28 index27 alt1" style="height: 16px;"> <code class="html spaces">                            </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>施耐庵</</code><code class="html keyword">td</code><code class="html plain">></code> </div> <div class="line number29 index28 alt2" style="height: 16px;"> <code class="html spaces">                            </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>30.99</</code><code class="html keyword">td</code><code class="html plain">></code> </div> <div class="line number30 index29 alt1" style="height: 16px;"> <code class="html spaces">                            </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>2010-1-3</</code><code class="html keyword">td</code><code class="html plain">></code> </div> <div class="line number31 index30 alt2" style="height: 16px;"> <code class="html spaces">                        </code><code class="html plain"></</code><code class="html keyword">tr</code><code class="html plain">></code> </div> <div class="line number32 index31 alt1" style="height: 16px;"> <code class="html spaces">                        </code><code class="html plain"><</code><code class="html keyword">tr</code><code class="html plain">></code> </div> <div class="line number33 index32 alt2" style="height: 16px;"> <code class="html spaces">                            </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>4</</code><code class="html keyword">td</code><code class="html plain">></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">td</code><code class="html plain">>红楼梦</</code><code class="html keyword">td</code><code class="html plain">></code> </div> <div class="line number35 index34 alt2" style="height: 16px;"> <code class="html spaces">                            </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>曹雪芹</</code><code class="html keyword">td</code><code class="html plain">></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">td</code><code class="html plain">>40.99</</code><code class="html keyword">td</code><code class="html plain">></code> </div> <div class="line number37 index36 alt2" style="height: 16px;"> <code class="html spaces">                            </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>2010-1-4</</code><code class="html keyword">td</code><code class="html plain">></code> </div> <div class="line number38 index37 alt1" style="height: 16px;"> <code class="html spaces">                        </code><code class="html plain"></</code><code class="html keyword">tr</code><code class="html plain">></code> </div> <div class="line number39 index38 alt2" style="height: 16px;"> <code class="html spaces">                    </code><code class="html plain"></</code><code class="html keyword">tbody</code><code class="html plain">></code> </div> <div class="line number40 index39 alt1" style="height: 16px;"> <code class="html spaces">                </code><code class="html plain"></</code><code class="html keyword">table</code><code class="html plain">></code> </div> </code> </div> </code> </div> </div> </td> </tr> </tbody> </table> </div> </div> </div> <p> </p> <div>Displayed when there is no class style: </div> <div> <img style="max-width:90%"282e148f-361a-409f-bbb0-2931f04935c9_files/localimage.png') no-repeat center center; border: 1px solid #ddd;" src="http://images2015.cnblogs.com/blog/1011161/201610/1011161-20161010142748571-675461791.gif" alt="" border="0"> <p><img src="http://images2015.cnblogs.com/blog/1011161/201610/1011161-20161010142748961-1101927088.png" alt="" border="0"></p> <h2>1.table basic style</h2> <h3>(1) Add class="table" to the table tag, the effect becomes: </h3> </div> <div> <img style="max-width:90%"282e148f-361a-409f-bbb0-2931f04935c9_files/localimage.png') no-repeat center center; border: 1px solid #ddd;" src="http://images2015.cnblogs.com/blog/1011161/201610/1011161-20161010142748571-675461791.gif" alt="" border="0"> <p><img src="http://images2015.cnblogs.com/blog/1011161/201610/1011161-20161010142749539-745591421.png" alt="" border="0"></p> <p> Is it possible to become rich, handsome and rich in seconds? </p> </div> <h3>(2) Alternate row color change.<span>table-striped</span> </h3> <p><span><span>table-striped: zebra crossing</span><br></span></p> <p><span>Using CSS3’s :nth-child implementation. </span></p> <h3>(3) Add border</h3> <p>Use .table-bordered to add a 1px border to all cells. </p> <h3>(4)Hover Highlight</h3> <p>Use .table:hover to highlight the current row on hover</p> <h3>(5) Compact Tables</h3> <p><span><span>table-condensed: Condensed, slightly smaller - reduces cell padding. This is what it looks like after applying everything. </span><br></span></p> <p><span><img src="http://images2015.cnblogs.com/blog/1011161/201610/1011161-20161010142750039-106969313.png" alt="" border="0"><br></span></p> <p>Code List</p> <div id="highlighter_419714" 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> </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">table</code> <code class="html color1">class</code><code class="html plain">=</code><code class="html string">"table table-bordered table-striped table-hover table-condensed"</code><code class="html plain">></code></div> <div class="line number2 index1 alt1" style="height: 16px;"> <code class="html spaces">                    </code><code class="html plain"><</code><code class="html keyword">thead</code><code class="html plain">><</code><code class="html keyword">tr</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">td</code><code class="html plain">>ID</</code><code class="html keyword">td</code><code class="html plain">></code> </div> <div class="line number4 index3 alt1" style="height: 16px;"> <code class="html spaces">                        </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>TITLE</</code><code class="html keyword">td</code><code class="html plain">></code> </div> <div class="line number5 index4 alt2" style="height: 16px;"> <code class="html spaces">                        </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>AUTHOR</</code><code class="html keyword">td</code><code class="html plain">></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">td</code><code class="html plain">>PUBDATE</</code><code class="html keyword">td</code><code class="html plain">></code> </div> <div class="line number7 index6 alt2" style="height: 16px;"> <code class="html spaces">                        </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>PRICE</</code><code class="html keyword">td</code><code class="html plain">></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">tr</code><code class="html plain">></</code><code class="html keyword">thead</code><code class="html plain">></code> </div> <div class="line number9 index8 alt2" style="height: 16px;"> <code class="html spaces">                     </code> </div> <div class="line number10 index9 alt1" style="height: 16px;"> <code class="html spaces">                    </code><code class="html plain"><</code><code class="html keyword">tbody</code><code class="html plain">></code> </div> <div class="line number11 index10 alt2" style="height: 16px;"> <code class="html spaces">                        </code><code class="html plain"><</code><code class="html keyword">tr</code><code class="html plain">></code> </div> <div class="line number12 index11 alt1" style="height: 16px;"> <code class="html spaces">                            </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>1</</code><code class="html keyword">td</code><code class="html plain">></code> </div>& & Lt; <div class="line number13 index12 alt2" style="height: 16px;"> <code class="html spaces">td</code><code class="html plain"> & gt; Journey to the West & LT;/</code><code class="html keyword">td</code><code class="html plain"> & gt; </code><code class="html keyword"> </code><code class="html plain">                                                                                                                                                                  </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">                                                                                                                        ​ ~ </code><code class="html plain">                                                                                                                                                                                                </code><code class="html keyword">                                                                                                                                                               </code><code class="html plain">                                                                                                                                                                                                                      <div class="line number23 index22 alt2" style="height: 16px;"> <code class="html spaces">                            </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>2010-1-2</</code><code class="html keyword">td</code><code class="html plain">></code> </div> <div class="line number24 index23 alt1" style="height: 16px;"><c></c></div></code> </div> </div> </td> </tr> </tbody> </table> </div> </div> </div> </td> </tr> </tbody> </table> </div> </div> </div> </td> </tr> </tbody> </table> </div> </div> </div> </td> </tr> </tbody> </table> </div> </div> </div> </table> </div> </div> </div>