bootstrap 學習筆記之span div差別
基於bootstrap的學習
導航頁面
在寫導航頁面的時候 注意到span與div的區別
01 <html>
02 <head>
03 <meta http-equiv="Content-Style-Type" content="text/css">
04 <title>HTML示例</title>
05 <style type="text/css">
06 .myspan1 { color: #FFFFFF; background-color: #800000; }
07 .myspan2 { color: #000000; background-color: #CCFFCC; }
08 .myspan3 { color: #FFFFFF; background-color: #000080; }
09 .myspan4 { color: #000000; background-color: #FFCCCC; }
10 .mydiv1 { color: #FFFFFF; background-color: #008000; }
11 .mydiv2 { color: #000000; background-color: #CCCCFF; }
12 .mydiv3 { color: #FFFFFF; background-color: #000000; }
13 .mydiv4 { color: #000000; background-color: #FFFFAA; }
14 </style>
15 </head>
16 <body>
17 <h2>生命必須元素</h2>
18 <span class="myspan1">水</span>
19 <span class="myspan2">維生素</span>
20 <span class="myspan3">蛋白質</span>
21 <span class="myspan4">礦物質</span>
22 <hr>
23 <div class="mydiv1">水</div>
24 <div class="mydiv2">維生素</div>
25 <div class="mydiv3">蛋白質</div>
26 <div class="mydiv4">礦物質</div>
27 </body>
28 </html>
在程式碼的測試可以看到
所以span為不換行
div為換行