miniatur bootstrap
Ten rozdział wyjaśni Bootstrap miniatury. Większość witryn wymagają obraz układu, wideo, tekst, itp w siatce. Bootstrap miniatur na to pozwala w łatwy sposób. Aby korzystać Bootstrap tworzenie miniaturek, co następuje:
- Dodaj <a> wokół znacznika obrazu z .thumbnailklasowej.
- Spowoduje to dodanie padding (padding) czterech pikseli i szare obramowanie.
- Gdy myszy nad obrazem, animacja pokaże obrysu obrazu.
Poniższy przykład ilustruje domyślną miniaturkę:
Przykłady
<div class = "wiersz">
<div class = "kol-SM-6 kol-MD-3">
<a href = "#" class = "miniatur">
<img src = "/wp-content/uploads/2014/06/kittens.jpg"
alt = "generic miniatur zastępczy">
</ A>
</ Div>
<div class = "kol-SM-6 kol-MD-3">
<a href = "#" class = "miniatur">
<img src = "/wp-content/uploads/2014/06/kittens.jpg"
alt = "generic miniatur zastępczy">
</ A>
</ Div>
<div class = "kol-SM-6 kol-MD-3">
<a href = "#" class = "miniatur">
<img src = "/wp-content/uploads/2014/06/kittens.jpg"
alt = "generic miniatur zastępczy">
</ A>
</ Div>
<div class = "kol-SM-6 kol-MD-3">
<a href = "#" class = "miniatur">
<img src = "/wp-content/uploads/2014/06/kittens.jpg"
alt = "generic miniatur zastępczy">
</ A>
</ Div>
</ Div>
Spróbuj »
Wyniki przedstawiają się następująco:
Dodaj zawartość niestandardową
Teraz, gdy mamy podstawową miniaturę, możemy dodać różne treści do miniaturek HTML, takich jak nagłówki, akapity, lub przyciski. Specyficzne etapy są następujące:
- Etykieta <a>klasie .thumbnail zmieniło <div>.
- W polu <div> wewnątrz, można dodać cokolwiek chcesz dodać. Ponieważ jest to <div>, możemy użyć domyślnego nazewnictwa zasady oparte na rozpiętości, aby dostosować rozmiar.
- Jeśli chcesz do grupy wielu obrazów, należy umieścić je w liście nieuporządkowanej, a każdy element listy pozostaje płynny.
Poniższy przykład ilustruje ten punkt:
Przykłady
<div class = "wiersz">
<div class = "kol-SM-6 kol-MD-3">
<div class = "miniatur">
<img src = "/wp-content/uploads/2014/06/kittens.jpg"
alt = "generic miniatur zastępczy">
<div class = "caption">
Zakładka <h3> Miniatury </ h3>
<P> Niektóre przykładowy tekst. Niektóre przykładowy tekst. </ P>
<P>
<a href = "#" class = "btn btn-podstawowej" role = "button"> Przycisk </ a>
<a href = "#" class = "btn btn-default" role = "button"> Przycisk </ a>
</ P>
</ Div>
</ Div>
</ Div>
<div class = "kol-SM-6 kol-MD-3">
<div class = "miniatur">
<img src = "/wp-content/uploads/2014/06/kittens.jpg"
alt = "generic miniatur zastępczy">
<div class = "caption">
Zakładka <h3> Miniatury </ h3>
<P> Niektóre przykładowy tekst. Niektóre przykładowy tekst. </ P>
<P>
<a href = "#" class = "btn btn-podstawowej" role = "button"> Przycisk </ a>
<a href = "#" class = "btn btn-default" role = "button"> Przycisk </ a>
</ P>
</ Div>
</ Div>
</ Div>
<div class = "kol-SM-6 kol-MD-3">
<div class = "miniatur">
<img src = "/wp-content/uploads/2014/06/kittens.jpg"
alt = "generic miniatur zastępczy">
<div class = "caption">
Zakładka <h3> Miniatury </ h3>
<P> Niektóre przykładowy tekst. Niektóre przykładowy tekst. </ P>
<P>
<a href = "#" class = "btn btn-podstawowej" role = "button"> Przycisk </ a>
<a href = "#" class = "btn btn-default" role = "button"> Przycisk </ a>
</ P>
</ Div>
</ Div>
</ Div>
<div class = "kol-SM-6 kol-MD-3">
<div class = "miniatur">
<img src = "/wp-content/uploads/2014/06/kittens.jpg"
alt = "generic miniatur zastępczy">
<div class = "caption">
Zakładka <h3> Miniatury </ h3>
<P> Niektóre przykładowy tekst. Niektóre przykładowy tekst. </ P>
<P>
<a href = "#" class = "btn btn-podstawowej" role = "button"> Przycisk </ a>
<a href = "#" class = "btn btn-default" role = "button"> Przycisk </ a>
</ P>
</ Div>
</ Div>
</ Div>
</ Div>
Spróbuj »
Wyniki przedstawiają się następująco:
