Detaillierte Erklärung der Miniaturansichten in Bootstrap

Der am häufigsten verwendete Ort für Miniaturansichten auf Websites sind Produktlistenseiten, auf denen mehrere Bilder in einer Zeile angezeigt werden und einige Titel, Beschreibungen und andere Informationen am unteren Rand (links oder rechts) des Bildes haben. Das Bootstrap-Framework unterteilt diesen Teil in eine Modulkomponente. In diesem Artikel wird das Bootstrap-Miniaturbild im Detail vorgestellt mit dem Rastersystem von Bootstrap, um Miniaturansichten zu realisieren

Die chinesische Übersetzung von Miniaturansichten ist in der Tat ein bisschen wie Miniaturansichten. In der Mitte befindet sich ein kleiner Kreis aus leerem Raum um das Bild herum, ein Rand und abgerundete Ecken außen und Text darunter

.thumbnail {
  display: block;
  padding: 4px;
  margin-bottom: 20px;
  line-height: 1.42857143;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  -webkit-transition: all .2s ease-in-out;
          transition: all .2s ease-in-out;
}
.thumbnail > img,
.thumbnail a > img {
  margin-right: auto;
  margin-left: auto;
}
a.thumbnail:hover,
a.thumbnail:focus,
a.thumbnail.active {
  border-color: #428bca;
}
.thumbnail .caption {
  padding: 9px;
  color: #333;
}

Benutzerdefinierter Inhalt

Auf der Grundlage von nur Miniaturansichten wird ein Container mit dem Namen „Bildunterschrift“ hinzugefügt und andere Inhalte wie Titel, Textbeschreibung, Schaltfläche usw. werden in diesem Container platziert .

.thumbnail .caption {
  padding: 9px;
  color: #333;
}

rrree

Weitere Programmierkenntnisse finden Sie unter:

Programmiervideos

! !

Das obige ist der detaillierte Inhalt vonDetaillierte Erklärung der Miniaturansichten in Bootstrap. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!