Bootstrap教程

聊聊Bootstrap中的圖片組件和輪廓組件

青灯夜游

Nov 19, 2021 pm 07:32 PM

bootstrap

這篇文章帶大家一起了解一下Bootstrap中的圖片元件和輪廓元件，介紹一下響應式圖片、圖片縮圖、picture標籤和輪廓（Figures），希望對大家有幫助！

聊聊Bootstrap中的圖片組件和輪廓組件

1 圖片

本文節將學習如何讓圖片支援響應式行為（這樣它們就不會超出父元素的範圍）以及如何通過類（class）加入些許樣式。

1.1 響應式圖片

透過 Bootstrap 所提供的.img-fluid 類別讓圖片支援響應式佈局。其原理是將max-width: 100%; 和 height: auto; 賦予圖片，以便隨父元素一起縮放。【相關推薦：《bootstrap教學》】

nbsp;html>

  
    <meta>
    <meta>
    <meta>
    <meta>
    <link>
    <title>图片演示</title>
  
  
        <div>

            <img  src="/static/imghwm/default1.png" data-src="pic/taohua.jpg" class="lazy" alt="聊聊Bootstrap中的圖片組件和輪廓組件" >

        </div>
   
     <script></script>

上面container是為了讓圖片居中顯示切四周有邊距，不是圖片組件的一部分，下面是示範錄影。

聊聊Bootstrap中的圖片組件和輪廓組件

10.1.2 圖片縮圖

除了通用類別提供的提供的border-radius外，你還可以使用.img-thumbnail 使圖片的外觀具有1px 寬度的圓形邊框。

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
    <style>
      .div1{width: 300;  height: 300px;text-align: center;padding-top: 50px;}
    </style>
    <title>图片演示</title>
  </head>
  <body>
            <div class="div1">
                 <img class="img-thumbnail lazy"  src="/static/imghwm/default1.png"  data-src="pic/taohua.jpg"       style="max-width:90%"  alt="点击查看大图">
            </div>
   
     <script src="bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

這個元件也是響應式的，不過我只給了截圖,上面css的樣式是為了讓圖片不靠近邊上，不要不可能看不到邊框，其實直接使用container也一樣，在此只是為了不使用container免得大家以為container也是其中一部分。

聊聊Bootstrap中的圖片組件和輪廓組件

1.3 picture標籤

picture元素透過包含一個或多個source元素和一個img元素再結合media（媒體查詢）來使用，根據螢幕匹配的不同尺寸顯示不同圖片，如果沒有匹配到或瀏覽器不支援 picture 屬性則使用 img 元素，一個picture元素無論指定幾個source，只會顯示其中的一個或img。

如果你使用元素為某個<img class="img-thumbnail lazy" src="/static/imghwm/default1.png" data-src="pic/taohua.jpg" alt="聊聊Bootstrap中的圖片組件和輪廓組件" > 指定多個<source></source> 元素的話，請確保將.img-* 類別加入<img class="img-thumbnail lazy" src="/static/imghwm/default1.png" data-src="pic/taohua.jpg" alt="聊聊Bootstrap中的圖片組件和輪廓組件" > 元素而不是<picture></picture> 元素或source元素上。

source元素排列是有順序的。媒體查詢的值，如果是max-width，則從小到大排序；如果是min-width，則按從大到小的順序排列。下面是原始碼，原始碼中js程式碼是取得螢幕寬度，作為對照。

nbsp;html>

  
    <meta>
    <meta>
    <meta>
    <meta>
    <link>
    <title>图片演示</title>
  
  
        <div>
            <p>
                <span></span>
                <script>
                getwidth();
                window.onresize = function(){
                    getwidth();
                }
                function getwidth(){
                document.getElementById("info").innerHTML="宽度："+document.documentElement.clientWidth+"，高度："+document.documentElement.clientHeight;
                }
                </script>
                    </p>
            <picture>
                <source>
                <source>
                <img  class="img-thumbnail lazy" src="/static/imghwm/default1.png" data-src="pic/taohua.jpg" alt="聊聊Bootstrap中的圖片組件和輪廓組件" >
            </source></source></picture>

            <picture>
                <source>
                <source>
                <img  class="img-thumbnail lazy" src="/static/imghwm/default1.png" data-src="pic/taohua.jpg" alt="聊聊Bootstrap中的圖片組件和輪廓組件" >
            </source></source></picture>
        </div>
   
     <script></script>

下面是示範

聊聊Bootstrap中的圖片組件和輪廓組件

2 輪廓（Figures）

透過Bootstrap 的輪廓（figure）元件來顯示相關聯的圖片和文本。任何時候需要顯示一段內容（例如帶有可選標題的圖片），請使用 <figure></figure>標籤。

使用內建的.figure、.figure-img和.figure-caption類別，可提供HTML5 <figure></figure>和<figcaption></figcaption>標籤一些基本樣式設定。圖片沒有明確尺寸，請務必在<img class="figure-img img-fluid rounded lazy" src="/static/imghwm/default1.png" data-src="pic/taohua.jpg" alt="聊聊Bootstrap中的圖片組件和輪廓組件" >標籤加上 .img-fluid類別設定為響應式圖片。

事實上，輪廓元件不僅用於圖片，在前一節文字排版部分，引用來源部分就已經使用了輪廓元件。

nbsp;html>

  
    <meta>
    <meta>
    <meta>
    <meta>
    <link>
    <title>figure演示</title>
  
  
        <div>

            <figure>
                <img  class="figure-img img-fluid rounded lazy" src="/static/imghwm/default1.png" data-src="pic/taohua.jpg" alt="聊聊Bootstrap中的圖片組件和輪廓組件" >
                <figcaption>桃花朵朵开</figcaption>
                </figure>
        </div>
   
     <script></script>

聊聊Bootstrap中的圖片組件和輪廓組件

簡單解釋img標籤裡面的類別rounded是圖片四周為圓角，不需要可以不寫。 figcaption標籤裡面的類別text-center是圖片居中對齊，還可以用text-end為右對齊，預設可以不寫為左對齊。

今天的課程就到這裡。 請關注我，及時學習俺老劉原創的《Bootstrap5零基礎到精通》第11節Bootstrap中的表格，表格的用處非常廣泛，設計起來也比較麻煩，幸運的是藉助bootstrap我們可以很輕鬆地做出好看的表格。

如果這篇文章對你有幫助，記得隨手按讚！

更多關於bootstrap的相關知識，可在：bootstrap基礎教學！！

以上是聊聊Bootstrap中的圖片組件和輪廓組件的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文轉載於：掘金社区。如有侵權，請聯絡admin@php.cn刪除

React和Bootstrap：增強用戶界面設計Apr 26, 2025 am 12:18 AM

React和Bootstrap可以無縫集成來提升用戶界面設計。 1)安裝依賴包：npminstallbootstrapreact-bootstrap。 2)導入CSS文件：import'bootstrap/dist/css/bootstrap.min.css'。 3)使用Bootstrap組件，如按鈕和導航欄。通過這種結合，開發者可以利用React的靈活性和Bootstrap的樣式庫，創建美觀且高效的用戶界面。

將引導程序集成到React：實用指南Apr 25, 2025 am 12:04 AM

將Bootstrap集成到React項目中的步驟包括：1.安裝Bootstrap包，2.導入CSS文件，3.使用Bootstrap類名樣式化元素，4.使用React-Bootstrap或reactstrap庫來使用Bootstrap的JavaScript組件。這種集成利用React的組件化和Bootstrap的樣式系統，實現高效的UI開發。

Bootstrap是用什麼？一個實用的解釋Apr 24, 2025 am 12:16 AM

bootstrapisapowerfulflameworkthatsimplifiesCreatingingResponsive，移動 - firstwebsites.itoffers.itoffers：1）AgridSystemforadaptableBableLayouts，2）2）pre-styledlementslikeButtonslikeButtonSandForms和3）JavaScriptCompriptcomponcomponentsSuchcaroSelSuselforEnhanceSuch forenhanceTinteractivity。

引導程序：從佈局到組件Apr 23, 2025 am 12:06 AM

Bootstrap是一個由Twitter開發的前端框架，集成了HTML、CSS和JavaScript，幫助開發者快速構建響應式網站。其核心功能包括：柵格系統與佈局：基於12列的設計，使用flexbox佈局，支持不同設備尺寸的響應式頁面。組件與樣式：提供豐富的組件庫，如按鈕、模態框等，通過添加類名即可實現美觀效果。工作原理：依賴CSS和JavaScript，CSS使用LESS或SASS預處理器，JavaScript依賴jQuery，實現交互和動態效果。通過這些功能，Bootstrap大大提升了開發

什麼是bootstrap？初學者的介紹Apr 22, 2025 am 12:07 AM

BootstrapisafreeCSSframeworkthatsimplifieswebdevelopmentbyprovidingpre-styledcomponentsandJavaScriptplugins.It'sidealforcreatingresponsive,mobile-firstwebsites,offeringaflexiblegridsystemforlayoutsandasupportivecommunityforlearningandcustomization.

Bootstrap Demystified：一個簡單的解釋Apr 21, 2025 am 12:13 AM

Bootstrapisafree,open-sourceCSSframeworkthathelpscreateresponsive,mobile-firstwebsites.1)Itoffersagridsystemforlayoutflexibility,2)includespre-styledcomponentsforquickdesign,and3)ishighlycustomizabletoavoidgenericlooks,butrequiresunderstandingCSStoop