Der Medienobjekt ist ein Bild auf der linken Seite mit beschreibendem Inhalt auf der rechten Seite. Es ermöglicht abstrakte Objektstile zum Erstellen verschiedener Komponenten wie Blog-Kommentare, Tweets usw. Der Hauptzweck des Medienobjekts besteht darin, einen Block mit Informationen zu bestimmten Medien wie Bildern, Videos oder Audio bereitzustellen. Das Ziel des Medienobjekts besteht darin, den Objekten ein einfaches Markup bereitzustellen. Bootstrap stellt dem Medienobjekt zwei Formen zur Verfügung:
lesen Sie auch:
- Bootstrap-Setup
- Bootstrap-Typografie
Die folgenden Beispiele veranschaulichen die Verwendung verschiedener Techniken zur Implementierung des Medienobjekts in Bootstrap. Wenn Sie Fragen dazu haben Bootstrap-Medienobjektschreiben Sie es bitte in den Kommentarbereich.
Bootstrap-Standardobjekt
Es ermöglicht das Platzieren von Medienobjekten wie Bildern, Videos oder Audio auf der linken Seite und der Inhaltsbereich auf der rechten Seite kann Objekte enthalten, die Informationen zu diesem bestimmten Objekt in Form von Text bereitstellen. Um dieses Formular zu erstellen, verwenden Sie das .Medien class innerhalb des div-Elements, 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>Default Media</h2>
<div >
<a href="#" >
<img src="https://javabeat.net/wp-content/uploads/2014/03/amazing-300x214.jpg"
alt="amazing" height="100" width="100"></a>
<div clas="media-body">
<h4 >Media Heading</h4>
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.
It is a combination of HTML, CSS, and Javascript code designed to help build user interface components.
Bootstrap was also programmed to support both HTML5 and CSS3.
</div>
</div>
<div >
<a href="#" >
<img src="https://javabeat.net/wp-content/uploads/2014/03/amazing-300x214.jpg"
alt="amazing" height="100" width="100"></a>
<div clas="media-body">
<h4 >Media Heading</h4>
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.
It is a combination of HTML, CSS, and Javascript code designed to help build user interface components.
Bootstrap was also programmed to support both HTML5 and CSS3.
<div >
<a href="#" >
<img src="https://javabeat.net/wp-content/uploads/2014/03/amazing-300x214.jpg"
alt="amazing" height="100" width="100"></a>
<div clas="media-body">
<h4 >Media Heading</h4>
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.
It is a combination of HTML, CSS, and Javascript code designed to help build user interface components.
Bootstrap was also programmed to support both HTML5 and CSS3.
</div>
</div>
</div>
</div>
</div>
</body>
</html>
- Beispiel für Bootstrap-Standardmedien ausführen
Bootstrap-Medienliste
Um dem Medienobjekt zusätzliches Markup zu geben, bei dem Elemente Teil einer ungeordneten Liste sind, können wir Folgendes verwenden .Medienliste class innerhalb des div-Elements, 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>Default Media</h2>
<ul >
<li >
<a href="#" >
<img src="https://javabeat.net/wp-content/uploads/2014/03/amazing-300x214.jpg"
alt="amazing" height="100" width="100"></a>
<div clas="media-body">
<h4 >My Heading</h4>
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.
It is a combination of HTML, CSS, and Javascript code designed to help build user interface components.
Bootstrap was also programmed to support both HTML5 and CSS3.
<div >
<a href="#" >
<img src="https://javabeat.net/wp-content/uploads/2014/03/amazing-300x214.jpg"
alt="amazing" height="100" width="100"></a>
<div clas="media-body">
<h4 >My Heading</h4>
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.
It is a combination of HTML, CSS, and Javascript code designed to help build user interface components.
Bootstrap was also programmed to support both HTML5 and CSS3.
<div >
<a href="#" >
<img src="https://javabeat.net/wp-content/uploads/2014/03/amazing-300x214.jpg"
alt="amazing" height="100" width="100"></a>
<div clas="media-body">
<h4 >My Heading</h4>
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.
It is a combination of HTML, CSS, and Javascript code designed to help build user interface components.
Bootstrap was also programmed to support both HTML5 and CSS3.
</div>
</div>
</div>
</div>
<div >
<a href="#" >
<img src="https://javabeat.net/wp-content/uploads/2014/03/amazing-300x214.jpg"
alt="amazing" height="100" width="100"></a>
<div clas="media-body">
<h4 >My Heading</h4>
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.
It is a combination of HTML, CSS, and Javascript code designed to help build user interface components.
Bootstrap was also programmed to support both HTML5 and CSS3.
</div>
</div>
</div>
</li>
<li >
<a href="#" >
<img src="https://javabeat.net/wp-content/uploads/2014/03/amazing-300x214.jpg"
alt="amazing" height="100" width="100"></a>
<div clas="media-body">
<h4 >My Heading</h4>
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.
It is a combination of HTML, CSS, and Javascript code designed to help build user interface components.
Bootstrap was also programmed to support both HTML5 and CSS3.
</div>
</li>
</ul>
</div>
</body>
</html>
- Führen Sie ein Beispiel für eine Bootstrap-Medienliste aus
