Tarjetas
Bootstrap kaqpa tarjetakuna huk flexible chaymanta mast'arikuq contenido waqaychanata qun achka variantes kaqwan chaymanta akllanakunawan.
Sobre
Tarjeta nisqaqa huk flexible hinaspa extensible contenido nisqa waqaychanam. Umapaq chaymanta chakipaq akllanakunayuq, achka imaymana ruwanakuna, contextual qhipa llimp'ikuna chaymanta kallpasapa qhaway akllanakunayuq. Sichus Bootstrap 3 kaqwan riqsisqa kanki, tarjetakuna mawk'a panelesniykumanta, pukyuykumanta, chaymanta uchuy rikch'ayniykumanta tikranku. Chay componentekunaman rikchakuq ruwayqa tarjetakunapaq clasekuna modificador hinam kachkan.
Qatina
Tarjetakuna ruwasqa kanku aswan pisi marcawan chaymanta estilokunawan atikuq hina, ichaqa chaywanpas huk tonelada control chaymanta personalización quyta atinku. Flexbox kaqwan ruwasqa, paykunaqa mana sasa alineacionta qunku chaymanta wak Bootstrap componentes kaqwan allinta chaqrukunku. Paykunaqa mana margin
ñawpaqmanta churasqachu kanku, chayrayku espaciamiento utilidadkunata necesitasqanmanhina llamk'achiy.
Uraypi huk tarjeta básica kaqmanta huk ejemplo kachkan, chaqrusqa contenidoyuq chaymanta huk takyasqa anchoyuq. Tarjetakuna mana takyasqa anchoyuqchu kanku qallariypaq, chayrayku naturalmente hunt'achinqanku hunt'a anchunta tayta elementonmanta. Kayqa imaymana sayay akllanaykuwan mana sasachu ruwasqa kachkan .
Titulo de tarjeta
Wakin usqhayta ejemplo qillqa tarjetapa titulonpi ruwanapaq chaymanta tarjetapa contenidomanta aswan achkata ruwanapaq.
Maymanpas riy<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
Tipos de contenido
Tarjetakuna achka imaymana ruwanakunata yanapan, siq'ikuna, qillqa, lista qutukuna, t'inkikuna chaymanta aswan. Uraypi imakuna yanapasqa kasqanmanta ejemplokuna kachkan.
Kurku
Tarjetapa wasichay bloquenmi .card-body
. Chayta llamk’achiy mayk’aqllapis tarjeta ukhupi acolchado t’aqata necesitanki.
<div class="card">
<div class="card-body">
This is some text within a card body.
</div>
</div>
Titulokuna, qillqasqakuna, t’inkikuna ima
Tarjetapa titulonkunataqa .card-title
huk <h*>
etiquetaman yapaspam servichikunku. .card-link
Chay hinallataqmi, t'inkikuna yapasqa, huk <a>
etiquetaman yapaspa hukninpa ladunpi churasqa .
Subtítulos nisqakunataqa .card-subtitle
huk <h*>
etiquetaman yapaspam llamk'achinku. Sichus chay .card-title
chaymanta .card-subtitle
imakuna huk imapi churasqa kanku chayqa .card-body
, tarjetapa titulonpas subtítulonpas sumaqllatam tupachisqa kachkan.
Titulo de tarjeta
Subtítulo de tarjeta
Wakin usqhayta ejemplo qillqa tarjetapa titulonpi ruwanapaq chaymanta tarjetapa contenidomanta aswan achkata ruwanapaq.
Tarjeta link Huk t'inki<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>
Imaykuna
.card-img-top
tarjetapa hawanman huk rikchayta churan. , nisqawanqa .card-text
tarjetamanmi qillqasqata yapayta atikunman. Ukhupi .card-text
qillqasqapas HTML etiquetakuna estándar kaqwan estilochasqa kanman.
Wakin usqhayta ejemplo qillqa tarjetapa titulonpi ruwanapaq chaymanta tarjetapa contenidomanta aswan achkata ruwanapaq.
<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
Huñukunata qillqay
Huk tarjetapi listakuna listakuna ruway huk flush lista huñuwan.
- Huk imapas
- Iskay kaq imapas
- Kimsa kaq item
<div class="card" style="width: 18rem;">
<ul class="list-group list-group-flush">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
</div>
- Huk imapas
- Iskay kaq imapas
- Kimsa kaq item
<div class="card" style="width: 18rem;">
<div class="card-header">
Featured
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
</div>
- Huk imapas
- Iskay kaq imapas
- Kimsa kaq item
<div class="card" style="width: 18rem;">
<ul class="list-group list-group-flush">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
<div class="card-footer">
Card footer
</div>
</div>
Lavabo de cocina
Chaqruy chaymanta tupachiy achka contenido layakuna tarjetata ruwanapaq necesitasqaykita, utaq tukuy imata chaypi wikch'uy. Uraypi rikuchisqa siq'i estilokuna, bloquekuna, qillqa estilokuna chaymanta huk lista huñu —llapan huk takyasqa ancho tarjetawan p'istuykusqa.
Titulo de tarjeta
Wakin usqhayta ejemplo qillqa tarjetapa titulonpi ruwanapaq chaymanta tarjetapa contenidomanta aswan achkata ruwanapaq.
- Huk imapas
- Iskay kaq imapas
- Kimsa kaq item
<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
<div class="card-body">
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>
Encabezado y pie
Huk tarjeta ukhupi huk akllana umalliq chaymanta/utaq chaki yapay.
Tratamiento especial de títulos nisqa
Uraypi yanapaq qillqawan huk natural pusaq hina huk contenido yapasqaman.
Maymanpas riy<div class="card">
<div class="card-header">
Featured
</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
Tarjeta umalliqkunataqa elementokunaman yapaspa estiloyuqmi kanman .card-header
.<h*>
Riqsisqa
Tratamiento especial de títulos nisqa
Uraypi yanapaq qillqawan huk natural pusaq hina huk contenido yapasqaman.
Maymanpas riy<div class="card">
<h5 class="card-header">Featured</h5>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
Allin riqsisqa cita, huk elemento blockquote nisqapi tarikuq.
<div class="card">
<div class="card-header">
Quote
</div>
<div class="card-body">
<blockquote class="blockquote mb-0">
<p>A well-known quote, contained in a blockquote element.</p>
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
</div>
</div>
Tratamiento especial de títulos nisqa
Uraypi yanapaq qillqawan huk natural pusaq hina huk contenido yapasqaman.
Maymanpas riy<div class="card text-center">
<div class="card-header">
Featured
</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
<div class="card-footer text-muted">
2 days ago
</div>
</div>
Tamaño
Tarjetakuna mana específico width
qallariypaq suyanku, chayrayku 100% ancho kanqa mana wakhina nisqa kaqtin. Kayta tikrayta atikunki munasqamanhina sapanchasqa CSS kaqwan, llika clasekunawan, llika Sass mixins kaqwan utaq yanapakuykunawan.
Rejilla marcado nisqawan
Rejilla nisqawanmi tarjetakunata necesitasqanman hina columnakunapi, filakunapi ima p’istuy.
Tratamiento especial de títulos nisqa
Uraypi yanapaq qillqawan huk natural pusaq hina huk contenido yapasqaman.
Maymanpas riyTratamiento especial de títulos nisqa
Uraypi yanapaq qillqawan huk natural pusaq hina huk contenido yapasqaman.
Maymanpas riy<div class="row">
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
</div>
Utilidades nisqawan yanapachikuspa
Huk tarjeta anchonta usqhaylla churanapaq makilla tarikuq sayay yanapakuyniykuwan llamk'achiy.
<div class="card w-75">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Button</a>
</div>
</div>
<div class="card w-50">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Button</a>
</div>
</div>
Sapanchasqa CSS nisqawan
Sapanchasqa CSS llamk'achiy estilo raphiykikunapi utaq chiru ukhupi estilokuna hina anchota churanaykipaq.
Tratamiento especial de títulos nisqa
Uraypi yanapaq qillqawan huk natural pusaq hina huk contenido yapasqaman.
Maymanpas riy<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
Qillqasqa chiqanchay
Mayqin tarjetapa qillqa chiqanchayta usqhaylla tikrayta atikunki —tukuyninpi utaq wakin rakikunapi— qillqa chiqanchay claseykuwan .
Tratamiento especial de títulos nisqa
Uraypi yanapaq qillqawan huk natural pusaq hina huk contenido yapasqaman.
Maymanpas riyTratamiento especial de títulos nisqa
Uraypi yanapaq qillqawan huk natural pusaq hina huk contenido yapasqaman.
Maymanpas riyTratamiento especial de títulos nisqa
Uraypi yanapaq qillqawan huk natural pusaq hina huk contenido yapasqaman.
Maymanpas riy<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
<div class="card text-center" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
<div class="card text-right" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
Navegación nisqa
Wakin puriyta huk tarjeta umalliqman (utaq hark'aman) yapay Bootstrappa nav componentesninwan .
Tratamiento especial de títulos nisqa
Uraypi yanapaq qillqawan huk natural pusaq hina huk contenido yapasqaman.
Maymanpas riy<div class="card text-center">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
Tratamiento especial de títulos nisqa
Uraypi yanapaq qillqawan huk natural pusaq hina huk contenido yapasqaman.
Maymanpas riy<div class="card text-center">
<div class="card-header">
<ul class="nav nav-pills card-header-pills">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
Imaykuna
Tarjetakunapiqa huk iskay kimsa akllanakuna kachkan siq’ikunawan llamk’anapaq. Akllay huk tarjetapa huknin puntanpi “imagen tapakuna” yapaymanta, tarjetapa contenidowan dibujokunata tapay utaq tarjetapi imagenta churaylla.
Imagen tapakuna
Umachakuna, chaki qillqakuna hina, tarjetakunapiqa kanmanmi hawanpi urayninpi “imagenkuna tapakuna”, tarjetapa hawanpi utaq urayninpi kaq dibujokuna.
Titulo de tarjeta
Kayqa huk aswan hatun tarjeta yanapaq qillqawan uraypi huk natural pusaq hina yapasqa contenidoman. Kay contenidoqa aswan unaymi.
Qhipa kutita 3 mins ñawpaqta musuqchasqa
Titulo de tarjeta
Kayqa huk aswan hatun tarjeta yanapaq qillqawan uraypi huk natural pusaq hina yapasqa contenidoman. Kay contenidoqa aswan unaymi.
Qhipa kutita 3 mins ñawpaqta musuqchasqa
<div class="card mb-3">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
<img src="..." class="card-img-bottom" alt="...">
</div>
Imahina llanthukuna
Huk rikchayta tarjetapa qipanman tikray hinaspa tarjetaykipa qillqanta llanthuy. Siqimanhina, huk estilokunata utaq yanapakuykunata necesitanki utaq mana necesitanki.
<div class="card bg-dark text-white">
<img src="..." class="card-img" alt="...">
<div class="card-img-overlay">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text">Last updated 3 mins ago</p>
</div>
</div>
Kinranpa
Huk huñusqa rejilla chaymanta utilidad clasekuna llamk'achispa, tarjetakuna horizontal ruwayta atikunku huk movil-amigable chaymanta kutichiq ñanpi. Uraypi ejemplopi, canales de rejilla nisqakunata hurquyku .no-gutters
chaymanta .col-md-*
clasekunawan tarjetata horizontalta ruwanapaq chay punto de md
ruptura nisqapi. Tarjetaykipi imakuna kasqanmantam astawan allichakunayki kanqa.
Titulo de tarjeta
Kayqa huk aswan hatun tarjeta yanapaq qillqawan uraypi huk natural pusaq hina yapasqa contenidoman. Kay contenidoqa aswan unaymi.
Qhipa kutita 3 mins ñawpaqta musuqchasqa
<div class="card mb-3" style="max-width: 540px;">
<div class="row no-gutters">
<div class="col-md-4">
<img src="..." alt="...">
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
</div>
Estilos de tarjetas
Tarjetakunapiqa imaymana akllanakunam kachkan, chaynapi ñawpaqninpi, bordesninkuta hinaspa colorninkuta ruwanankupaq.
Fondo y color
Tarjetapa rikchayninta cambianaykipaqqa qillqakunata hinaspa qipaman yanapakuykunata servichikuy .
Titulo de tarjeta primaria
Wakin usqhayta ejemplo qillqa tarjetapa titulonpi ruwanapaq chaymanta tarjetapa contenidomanta aswan achkata ruwanapaq.
Titulo de tarjeta secundaria
Wakin usqhayta ejemplo qillqa tarjetapa titulonpi ruwanapaq chaymanta tarjetapa contenidomanta aswan achkata ruwanapaq.
Titulo de tarjeta de éxito
Wakin usqhayta ejemplo qillqa tarjetapa titulonpi ruwanapaq chaymanta tarjetapa contenidomanta aswan achkata ruwanapaq.
Titulo de tarjeta de peligro
Wakin usqhayta ejemplo qillqa tarjetapa titulonpi ruwanapaq chaymanta tarjetapa contenidomanta aswan achkata ruwanapaq.
Titulo de tarjeta de advertencia
Wakin usqhayta ejemplo qillqa tarjetapa titulonpi ruwanapaq chaymanta tarjetapa contenidomanta aswan achkata ruwanapaq.
Titulo de tarjeta de info
Wakin usqhayta ejemplo qillqa tarjetapa titulonpi ruwanapaq chaymanta tarjetapa contenidomanta aswan achkata ruwanapaq.
Titulo de tarjeta de luz
Wakin usqhayta ejemplo qillqa tarjetapa titulonpi ruwanapaq chaymanta tarjetapa contenidomanta aswan achkata ruwanapaq.
Titulo de tarjeta oscura
Wakin usqhayta ejemplo qillqa tarjetapa titulonpi ruwanapaq chaymanta tarjetapa contenidomanta aswan achkata ruwanapaq.
<div class="card text-white bg-primary mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Primary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card text-white bg-secondary mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Secondary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card text-white bg-success mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Success card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card text-white bg-danger mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Danger card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card text-white bg-warning mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Warning card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card text-white bg-info mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Info card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card bg-light mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Light card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card text-white bg-dark mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Dark card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
Yanapakuq tecnologiakunaman significadota apachiy
Color llamk'achiyta significado yapanapaq huk rikuy rikuchiyllata qun, mayqinchus mana yanapakuq tecnologiakuna llamk'aqkunaman chayachikunqachu – pantalla ñawiriqkuna hina. Aseguray willayta llimp'iwan riqsichisqa kikin contenidomanta sut'i kaqta (kayhina rikukuq qillqa), utaq huk ñankunawan churasqa kaqta, kayhina yapasqa qillqa .sr-only
clasewan pakasqa.
Pata
Utilizar utilidades de frontera para cambiar solo el border-color
de una tarjeta. Reparay .text-{color}
clasekunata tayta mamapi .card
utaq huk subconjunto tarjetapa contenidomanta churayta atikunki kay urapi rikusqa hina.
Titulo de tarjeta primaria
Wakin usqhayta ejemplo qillqa tarjetapa titulonpi ruwanapaq chaymanta tarjetapa contenidomanta aswan achkata ruwanapaq.
Titulo de tarjeta secundaria
Wakin usqhayta ejemplo qillqa tarjetapa titulonpi ruwanapaq chaymanta tarjetapa contenidomanta aswan achkata ruwanapaq.
Titulo de tarjeta de éxito
Wakin usqhayta ejemplo qillqa tarjetapa titulonpi ruwanapaq chaymanta tarjetapa contenidomanta aswan achkata ruwanapaq.
Titulo de tarjeta de peligro
Wakin usqhayta ejemplo qillqa tarjetapa titulonpi ruwanapaq chaymanta tarjetapa contenidomanta aswan achkata ruwanapaq.
Titulo de tarjeta de advertencia
Wakin usqhayta ejemplo qillqa tarjetapa titulonpi ruwanapaq chaymanta tarjetapa contenidomanta aswan achkata ruwanapaq.
Titulo de tarjeta de info
Wakin usqhayta ejemplo qillqa tarjetapa titulonpi ruwanapaq chaymanta tarjetapa contenidomanta aswan achkata ruwanapaq.
Titulo de tarjeta de luz
Wakin usqhayta ejemplo qillqa tarjetapa titulonpi ruwanapaq chaymanta tarjetapa contenidomanta aswan achkata ruwanapaq.
Titulo de tarjeta oscura
Wakin usqhayta ejemplo qillqa tarjetapa titulonpi ruwanapaq chaymanta tarjetapa contenidomanta aswan achkata ruwanapaq.
<div class="card border-primary mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body text-primary">
<h5 class="card-title">Primary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card border-secondary mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body text-secondary">
<h5 class="card-title">Secondary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card border-success mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body text-success">
<h5 class="card-title">Success card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card border-danger mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body text-danger">
<h5 class="card-title">Danger card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card border-warning mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body text-warning">
<h5 class="card-title">Warning card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card border-info mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body text-info">
<h5 class="card-title">Info card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card border-light mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Light card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card border-dark mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body text-dark">
<h5 class="card-title">Dark card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
Mixins servicios públicos
Chaymantapas tarjetapa umanpi hinaspa chakinpi kaq fronterakunatam cambiawaq necesitasqaykiman hina, chaymantapas chaywanpas hurquwaqmi background-color
..bg-transparent
Titulo de tarjeta de éxito
Wakin usqhayta ejemplo qillqa tarjetapa titulonpi ruwanapaq chaymanta tarjetapa contenidomanta aswan achkata ruwanapaq.
<div class="card border-success mb-3" style="max-width: 18rem;">
<div class="card-header bg-transparent border-success">Header</div>
<div class="card-body text-success">
<h5 class="card-title">Success card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
<div class="card-footer bg-transparent border-success">Footer</div>
</div>
Diseño de tarjetas
Tarjetakuna ukhupi contenido estilomanta aswan, Bootstrap huk pisi akllanakuna serie tarjetakuna churanapaq churan. Kunankamaqa, kay churana akllanakuna manaraq kutichinchu .
Tarjeta qutukuna
Tarjeta huñukunata llamk'achiy tarjetakunata huklla, k'askasqa elemento hina kaqlla anchoyuq, sayayniyuq columnakuna hina ruwanapaq. Tarjeta qutukuna pilasqamanta qallarinku chaymanta llamk'achinku display: flex;
hukllachasqa kanankupaq hukllachasqa dimensioneswan qallarispa sm
ruphaypi.
Titulo de tarjeta
Kayqa huk aswan hatun tarjeta yanapaq qillqawan uraypi huk natural pusaq hina yapasqa contenidoman. Kay contenidoqa aswan unaymi.
Qhipa kutita 3 mins ñawpaqta musuqchasqa
Titulo de tarjeta
Kay tarjetaqa uraypi yanapaq qillqayuqmi huk natural pusaq hina huk contenido yapasqaman.
Qhipa kutita 3 mins ñawpaqta musuqchasqa
Titulo de tarjeta
Kayqa huk aswan hatun tarjeta yanapaq qillqawan uraypi huk natural pusaq hina yapasqa contenidoman. Kay tarjetaqa aswan unay contenidoyuqraqmi ñawpaq kaqmanta chay kaqlla sayay ruwayta qawachinanpaq.
Qhipa kutita 3 mins ñawpaqta musuqchasqa
<div class="card-group">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
Chakiyuq tarjeta qutukunata llamk'achkaspa, contenidonku kikinmanta filasqa kanqa.
Titulo de tarjeta
Kayqa huk aswan hatun tarjeta yanapaq qillqawan uraypi huk natural pusaq hina yapasqa contenidoman. Kay contenidoqa aswan unaymi.
Titulo de tarjeta
Kay tarjetaqa uraypi yanapaq qillqayuqmi huk natural pusaq hina huk contenido yapasqaman.
Titulo de tarjeta
Kayqa huk aswan hatun tarjeta yanapaq qillqawan uraypi huk natural pusaq hina yapasqa contenidoman. Kay tarjetaqa aswan unay contenidoyuqraqmi ñawpaq kaqmanta chay kaqlla sayay ruwayta qawachinanpaq.
<div class="card-group">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
Mazos de tarjetas
¿Necesitan huk conjunto de tarjetas de igualdad de ancho y altura que no sean unse a uno a otro? Utilizar mazos de tarjetas.
Titulo de tarjeta
Kayqa huk aswan hatun tarjeta yanapaq qillqawan uraypi huk natural pusay hina yapasqa contenidoman. Kay contenidoqa aswan unaymi.
Qhipa kutita 3 mins ñawpaqta musuqchasqa
Titulo de tarjeta
Kay tarjetaqa uraypi yanapaq qillqayuqmi huk natural pusaq hina huk contenido yapasqaman.
Qhipa kutita 3 mins ñawpaqta musuqchasqa
Titulo de tarjeta
Kayqa huk aswan hatun tarjeta yanapaq qillqawan uraypi huk natural pusaq hina yapasqa contenidoman. Kay tarjetaqa aswan unay contenidoyuqraqmi ñawpaq kaqmanta chay kaqlla sayay ruwayta qawachinanpaq.
Qhipa kutita 3 mins ñawpaqta musuqchasqa
<div class="card-deck">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
Imaynachus tarjeta qutukunawan, tarjeta chakikuna mazokunapi kikinmanta filasqa kanqa.
Titulo de tarjeta
Kayqa huk aswan hatun tarjeta yanapaq qillqawan uraypi huk natural pusaq hina yapasqa contenidoman. Kay contenidoqa aswan unaymi.
Titulo de tarjeta
Kay tarjetaqa uraypi yanapaq qillqayuqmi huk natural pusaq hina huk contenido yapasqaman.
Titulo de tarjeta
Kayqa huk aswan hatun tarjeta yanapaq qillqawan uraypi huk natural pusaq hina yapasqa contenidoman. Kay tarjetaqa aswan unay contenidoyuqraqmi ñawpaq kaqmanta chay kaqlla sayay ruwayta qawachinanpaq.
<div class="card-deck">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
Tarjetas de rejilla
Bootstrap rejilla sistemata chaymanta .row-cols
clasenkunata llamk'achiy hayk'a rejilla columnakuna (tarjetakunayki muyuriqpi p'istuykusqa) sapa filapi rikuchisqaykita kamachinaykipaq. Ejemplopaq, kaypi .row-cols-1
huk columnapi tarjetakunata churay, hinaspa .row-cols-md-2
tawa tarjetakunata rakispa kaqlla anchoman achka filakunapi, chawpi rakiymanta wichayman.
Titulo de tarjeta
Kayqa huk aswan hatun tarjeta yanapaq qillqawan uraypi huk natural pusay hina yapasqa contenidoman. Kay contenidoqa aswan unaymi.
Titulo de tarjeta
Kayqa huk aswan hatun tarjeta yanapaq qillqawan uraypi huk natural pusay hina yapasqa contenidoman. Kay contenidoqa aswan unaymi.
Titulo de tarjeta
Kayqa huk aswan hatun tarjeta yanapaq qillqawan uraypi huk natural pusay hina yapasqa contenidoman.
Titulo de tarjeta
Kayqa huk aswan hatun tarjeta yanapaq qillqawan uraypi huk natural pusay hina yapasqa contenidoman. Kay contenidoqa aswan unaymi.
<div class="row row-cols-1 row-cols-md-2">
<div class="col mb-4">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
</div>
Chayman tikray chaymanta .row-cols-3
tawa kaq tarjeta p’istuta rikunki.
Titulo de tarjeta
Kayqa huk aswan hatun tarjeta yanapaq qillqawan uraypi huk natural pusay hina yapasqa contenidoman. Kay contenidoqa aswan unaymi.
Titulo de tarjeta
Kayqa huk aswan hatun tarjeta yanapaq qillqawan uraypi huk natural pusay hina yapasqa contenidoman. Kay contenidoqa aswan unaymi.
Titulo de tarjeta
Kayqa huk aswan hatun tarjeta yanapaq qillqawan uraypi huk natural pusay hina yapasqa contenidoman.
Titulo de tarjeta
Kayqa huk aswan hatun tarjeta yanapaq qillqawan uraypi huk natural pusay hina yapasqa contenidoman. Kay contenidoqa aswan unaymi.
<div class="row row-cols-1 row-cols-md-3">
<div class="col mb-4">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
</div>
Igual sayayniyuq kachkaspaykiqa, .h-100
tarjetakunaman yapay. Sichus ñawpaqmanta kaqlla sayaykunata munanki $card-height: 100%
, Sass nisqapi churayta atinki.
Titulo de tarjeta
Kayqa huk aswan hatun tarjeta yanapaq qillqawan uraypi huk natural pusay hina yapasqa contenidoman. Kay contenidoqa aswan unaymi.
Titulo de tarjeta
Kayqa huk pisi tarjeta.
Titulo de tarjeta
Kayqa huk aswan hatun tarjeta yanapaq qillqawan uraypi huk natural pusay hina yapasqa contenidoman.
Titulo de tarjeta
Kayqa huk aswan hatun tarjeta yanapaq qillqawan uraypi huk natural pusay hina yapasqa contenidoman. Kay contenidoqa aswan unaymi.
<div class="row row-cols-1 row-cols-md-3">
<div class="col mb-4">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a short card.</p>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
</div>
Tarjeta columnakuna
Tarjetakunataqa CSS nisqawanlla Albañil hina columnakunapim t'aqayta atikunman, chaypi p'istuykuspa .card-columns
. Tarjetakuna CSS column
propiedades kaqwan ruwasqa kanku flexbox kaqmanta aswan facil chiqanchaypaq. Tarjetakunataqa patamanta urayman, lluq’imanta pañaman ima mañakunku.
¡Umakuna wichayman! Tarjeta columnakunawan kilómetro purisqaykiqa hukniraymi kanman. Tarjetakuna columnakuna chimpapi mana p'akikunanpaq, chaykunata churananchik tiyan display: inline-block
imaynachus column-break-inside: avoid
mana huk solucion mana balayuqraqchu kachkan.
Musuq chiruman p’istuykuq tarjetapa titulon
Kayqa huk aswan hatun tarjeta yanapaq qillqawan uraypi huk natural pusay hina yapasqa contenidoman. Kay contenidoqa aswan unaymi.
Allin riqsisqa cita, huk elemento blockquote nisqapi tarikuq.
Titulo de tarjeta
Kay tarjetaqa uraypi yanapaq qillqayuqmi huk natural pusaq hina huk contenido yapasqaman.
Qhipa kutita 3 mins ñawpaqta musuqchasqa
Allin riqsisqa cita, huk elemento blockquote nisqapi tarikuq.
Titulo de tarjeta
Kay tarjetaqa sapa kuti tituloyuqmi, urayninpitaq pisi parrafoyuq qillqasqa kachkan.
Qhipa kutita 3 mins ñawpaqta musuqchasqa
Allin riqsisqa cita, huk elemento blockquote nisqapi tarikuq.
Titulo de tarjeta
Kayqa huk tarjetataqmi uraypi tituloyuq hinaspa yanapaq qillqayuq. Kay tarjetaqa wakin contenido yapasqayuqmi, llapanpi aswan hatun kananpaq.
Qhipa kutita 3 mins ñawpaqta musuqchasqa
<div class="card-columns">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title that wraps to a new line</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
<div class="card p-3">
<blockquote class="blockquote mb-0 card-body">
<p>A well-known quote, contained in a blockquote element.</p>
<footer class="blockquote-footer">
<small class="text-muted">
Someone famous in <cite title="Source Title">Source Title</cite>
</small>
</footer>
</blockquote>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card bg-primary text-white text-center p-3">
<blockquote class="blockquote mb-0">
<p>A well-known quote, contained in a blockquote element.</p>
<footer class="blockquote-footer text-white">
<small>
Someone famous in <cite title="Source Title">Source Title</cite>
</small>
</footer>
</blockquote>
</div>
<div class="card text-center">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has a regular title and short paragraphy of text below it.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img src="..." class="card-img" alt="...">
</div>
<div class="card p-3 text-right">
<blockquote class="blockquote mb-0">
<p>A well-known quote, contained in a blockquote element.</p>
<footer class="blockquote-footer">
<small class="text-muted">
Someone famous in <cite title="Source Title">Source Title</cite>
</small>
</footer>
</blockquote>
</div>
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is another card with title and supporting text below. This card has some additional content to make it slightly taller overall.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
Tarjeta columnakunatapas mast'arikunmanmi chaymanta wakin código yapasqawan ruwasqa kanman. Uraypi rikuchisqa huk mast'ariy .card-columns
clase kaqmanta kikin CSS llamk'achisqaykuwan—CSS columnakuna— huk huñu kutichiq patakuna ruwanapaq columnakuna yupayta tikranapaq.
.card-columns {
@include media-breakpoint-only(lg) {
column-count: 4;
}
@include media-breakpoint-only(xl) {
column-count: 5;
}
}