目錄

3.代碼

（1）行內代碼

（2）大段引用

（3）變量

（4）按鈕

4.圖片

（1）縮略圖

（2）對齊

（3）picture標簽

3.代碼

（1）行內代碼

在<code>里編寫行內代碼，尖括號用轉義字符，如圖3-1

圖3-1 <p class="mt-5">這里有一個<code>&lt;code&gt;</code>

（2）大段引用

在?<pre>?里編寫多行代碼。 再次確保在代碼中轉義任何尖括號以進行正確渲染，如圖3-2。添加?.pre-scrollable?類，它將設置最大高度為340px并提供y軸滾動條。

圖3-2 <pre><code>&lt;p&gt;</code>是一個段落標簽<code>&lt;h1&gt;</code>是一級標題 </pre>

（3）變量

使用<var>標簽標記變量，如圖3-3

圖3-3 <var>y = ax + b</var>

（4）按鈕

使用?<kbd>?來標記鍵盤上的按鈕，如圖3-4

圖3-4 <p class="mt-5">復制的快捷按鍵為<kbd>ctrl</kbd>+<kbd>c</kbd></p>

?

4.圖片

bootstrap中，將圖片變為響應式的方法有：給圖片添加img-fluid類、添加max-width：100%和height：auto，則圖片大小隨著父元素大小同步縮放

<img src="./images/pic4.jpg" alt="" class="img-fluid">

（1）縮略圖

可以使用?img-thumbnail?類來設置一個1像素寬度的邊框，如圖4-1

圖4-1 <img src="./images/pic4.jpg" alt="" class="img-fluid img-thumbnail mt-5 ml-2">

（2）對齊

給圖像設置浮動類進行對齊，如圖4-2-1；

塊級圖像可以使用mx-auto?margin工具居中，如圖4-2-2；

還可通過父級設置居中，如圖4-2-3

4-2-1 <img src="./images/pic4.jpg" class="rounded float-left mt-5" > <img src="./images/pic4.jpg" class="rounded float-right mt-5" >

【注】rounded類給圖片添加了圓角

4-2-2 <img src="./images/pic4.jpg" class="rounded mx-auto d-block mt-5" > 4-2-3 <div class="container"><div class="row mt-5"><div class="col text-center"><img src="./images/pic4.jpg" class="rounded mt-5" ></div></div> </div>

（3）picture標簽

如果使用<picture>元素為特定的<img>指定多個<source>元素，需確保將<img>類添加到<img>而不是<picture>標記，如圖4-3

圖4-3 <div class="row mt-5"><div class="col text-center"><picture><source style="height: 400px;" media="(min-width: 1200px)" srcset="./images/pic1.jpg"><source style="height: 400px;" media="(min-width: 992px)" srcset="./images/pic2.jpg"><source style="height: 400px;" media="(min-width: 768px)" srcset="./images/pic3.jpg"><source style="height: 400px;" media="(min-width: 576px)" srcset="./images/pic4.jpg"><img style="height: 400px;" src="./images/pic5.jpg" alt=""></picture></div> </div>

?

?

?

?

?

?

總結

以上是生活随笔為你收集整理的bootstrap内容部分API解读（2）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。