Bootstrap-Miniaturansichten

Bootstrap bietet .Miniaturansicht Klasse, die zum Erstellen eines Rasters aus Bildern, Text und mehr verwendet wird, verleiht Bildern Miniaturansicht-ähnliche Stile. Wir benötigen ein Raster aus Bildern oder Videos, um eine gute Benutzererfahrung im Web zu schaffen. Sie werden verwendet, um verknüpfte Bilder in Rastern mit minimal erforderlichem Markup anzuzeigen. Miniaturansichten werden auf Webseiten als kleinere Kopien des Originalbilds implementiert und der Hauptzweck eines Miniaturbilds auf einer Webseite besteht darin, die Bandbreite und die Downloadzeit zu reduzieren. Bootstrap bietet die folgenden Möglichkeiten zum Erstellen von Miniaturansichten:

  • Standard-Miniaturansicht
  • Miniaturansichten mit benutzerdefiniertem Inhalt
  • lesen Sie auch:

    • Bootstrap-Setup
    • Bootstrap-Typografie

    Die folgenden Beispiele zeigen die verschiedenen Techniken, die zum Implementieren der Miniaturansichten in Bootstrap verwendet werden. Wenn Sie Fragen dazu haben Bootstrap-Miniaturansichtenschreiben Sie es bitte in den Kommentarbereich.

    Bootstrap-Standard-Miniaturansicht

    Das folgende Beispiel zeigt eine Standard-Miniaturansicht:

    <!DOCTYPE html>
    <head>
    <title>Bootstrap Example</title>
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    </head>
    <body>
    <div  >
    <h2>Default Thumbnails</h2>
    <div  >
       <div  >
          <a href="#"  >
             <img src="https://javabeat.net/wp-content/uploads/2014/03/amazing-300x214.jpg" alt="amazing">
          </a>
       </div>
       <div  >
          <a href="#"  >
             <img src="https://javabeat.net/wp-content/uploads/2014/05/dummy_image2-300x300.jpg" alt="my_image1">
          </a>
       </div>
       <div  >
          <a href="#"  >
             <img src="https://javabeat.net/wp-content/uploads/2014/05/dummy_image1-300x210.jpg"  alt="my_image2">
          </a>
          </div>
    </div>
    </body>
    </html>
    
    • Führen Sie die Bootstrap-Standard-Thumbnail-Beispieldemo aus

    Bootstrap-Standard-Thumbnail-Beispiel

    Bootstrap-Miniaturansichten mit benutzerdefiniertem Inhalt

    Wir können benutzerdefinierte Inhalte wie Überschriften, Absätze, Schaltflächen oder jede andere Art von HTML-Inhalt in Standard-Miniaturansichten einfügen, wie im folgenden Beispiel gezeigt:

    <!DOCTYPE html>
    <head>
    <title>Bootstrap Example</title>
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    </head>
    <body>
    <div  >
    <h2>Adding Content to Thumbnails</h2>
    <div  >
       <div  >
          <div  >
             <img src="https://javabeat.net/wp-content/uploads/2014/03/amazing-300x214.jpg"
              alt="amazing">
          </div>
          <div  >
             <h3>First Image</h3>
             <p>The Bootstrap is most popular front end framework for creating websites and web applications. Bootstrap is a powerful front end framework which makes faster and easier web development.</p>
             <p><a href="#"   role="button">View</a>
             <a href="#"   role="button">Download</a></p>
          </div>
       </div>
       <div  >
          <div  >
             <img src="https://javabeat.net/wp-content/uploads/2014/05/dummy_image2-300x300.jpg"
                alt="my_image1">
          </div>
          <div  >
    	  <h3>Second Image</h3>
    	  <p>The Bootstrap is most popular front end framework for creating websites and web applications. Bootstrap is a powerful front end framework which makes faster and easier web development.</p>
    	  <p><a href="#"   role="button">View</a>
    	  <a href="#"   role="button">Download</a
    </p>
          </div>
      </div>
       <div  >
          <div  >
             <img src="https://javabeat.net/wp-content/uploads/2014/05/dummy_image1-300x210.jpg" alt="my_image2">
          </div>
          <div  >
    	  <h3>Third Image</h3>
    	  <p>The Bootstrap is most popular front end framework for creating websites and web applications. Bootstrap is a powerful front end framework which makes faster and easier web development.</p>
    	  <p><a href="#"   role="button">View</a>
    	  <a href="#"   role="button">Download</a></p>
          </div>
       </div>
    </div>
    </div>
    </body>
    </html>
    

    Das obige Skript zeigt, wie Inhalte zu den Miniaturansichten im Dokument hinzugefügt werden. Im Standard-Thumbnail-Bereich haben wir verwendet .Miniaturansicht Klasse innerhalb des Ankerelements. Um Inhalte hinzuzufügen, verwenden wir diese Klasse innerhalb des div-Elements, wie im Skript angegeben. Um einer Miniaturansicht eine Beschriftung zu geben, verwenden Sie die Klasse caption zusammen mit dem div-Element. Wir können Inhalte innerhalb des div-Elements hinzufügen, um die Miniaturansicht auf der Webseite zu beschreiben.

    • Führen Sie die Beispieldemo für benutzerdefinierten Bootstrap-Inhalt aus

    Beispiel für benutzerdefinierten Bootstrap-Inhalt

    Kommentar verfassen

    Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

    Nach oben scrollen