Source

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 class="card-img-top" src=".../100px180/" alt="Card image cap">
  <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.

Kayqa huk tarjetapa cuerponpa ukunpi wakin qillqasqam.

<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-titlehuk <h*>etiquetaman yapaspam servichikunku. .card-linkChay hinallataqmi, t'inkikuna yapasqa, huk <a>etiquetaman yapaspa hukninpa ladunpi churasqa .

Subtítulos nisqakunataqa .card-subtitlehuk <h*>etiquetaman yapaspam llamk'achinku. Sichus chay .card-titlechaymanta .card-subtitleimakuna 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-toptarjetapa hawanman huk rikchayta churan. , nisqawanqa .card-texttarjetamanmi qillqasqata yapayta atikunman. Ukhupi .card-textqillqasqapas 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 class="card-img-top" src=".../100px180/?text=Image cap" alt="Card image cap">
  <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.

Cras justo odio
Dapibus ac nisqa wasipi
Vestibulo en eros

<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>

Riqsisqa

Cras justo odio
Dapibus ac nisqa wasipi
Vestibulo en eros

<div class="card" style="width: 18rem;">
  <div class="card-header">
    Featured
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</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.

Cras justo odio
Dapibus ac nisqa wasipi
Vestibulo en eros

Tarjeta link Huk t'inki

<div class="card" style="width: 18rem;">
  <img class="card-img-top" src=".../100px180/?text=Image cap" alt="Card image cap">
  <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">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</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.

Riqsisqa

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>

Cita

Lorem ipsum dolor tiyay amet, consectetur adipiscing elit. Entero posuere erat a ante.

Pipas riqsisqa Fuente Titulo nisqapi

<div class="card">
  <div class="card-header">
    Quote
  </div>
  <div class="card-body">
    <blockquote class="blockquote mb-0">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
    </blockquote>
  </div>
</div>

Riqsisqa

Tratamiento especial de títulos nisqa

Uraypi yanapaq qillqawan huk natural pusaq hina huk contenido yapasqaman.

Maymanpas riy

2 punchaw ñawpaqta

<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 widthqallariypaq 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 riy

Tratamiento 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.

Titulo de tarjeta

Uraypi yanapaq qillqawan huk natural pusaq hina huk contenido yapasqaman.

Ñitina

Titulo de tarjeta

Uraypi yanapaq qillqawan huk natural pusaq hina huk contenido yapasqaman.

Ñitina

<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 riy

Tratamiento especial de títulos nisqa

Uraypi yanapaq qillqawan huk natural pusaq hina huk contenido yapasqaman.

Maymanpas riy

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>

<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>

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" href="#">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" href="#">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 class="card-img-top" src=".../100px180/" alt="Card image cap">
  <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 class="card-img-bottom" src=".../100px180/" alt="Card image cap">
</div>

Imahina llanthukuna

Huk rikchayta tarjetapa qipanman tikray hinaspa tarjetaykipa qillqanta llanthuy. Siqimanhina, huk estilokunata utaq yanapakuykunata necesitanki utaq mana necesitanki.

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 bg-dark text-white">
  <img class="card-img" src=".../100px270/#55595c:#373a3c/text:Card image" alt="Card image">
  <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>

Estilos de tarjetas

Tarjetakunapiqa imaymana akllanakunam kachkan, chaynapi ñawpaqninpi, bordesninkuta hinaspa colorninkuta ruwanankupaq.

Fondo y color

Tarjetapa rikchayninta cambianaykipaqqa qillqakunata hinaspa qipaman yanapakuykunata servichikuy .

Uma

Titulo de tarjeta primaria

Wakin usqhayta ejemplo qillqa tarjetapa titulonpi ruwanapaq chaymanta tarjetapa contenidomanta aswan achkata ruwanapaq.

Uma

Titulo de tarjeta secundaria

Wakin usqhayta ejemplo qillqa tarjetapa titulonpi ruwanapaq chaymanta tarjetapa contenidomanta aswan achkata ruwanapaq.

Uma

Titulo de tarjeta de éxito

Wakin usqhayta ejemplo qillqa tarjetapa titulonpi ruwanapaq chaymanta tarjetapa contenidomanta aswan achkata ruwanapaq.

Uma

Titulo de tarjeta de peligro

Wakin usqhayta ejemplo qillqa tarjetapa titulonpi ruwanapaq chaymanta tarjetapa contenidomanta aswan achkata ruwanapaq.

Uma

Titulo de tarjeta de advertencia

Wakin usqhayta ejemplo qillqa tarjetapa titulonpi ruwanapaq chaymanta tarjetapa contenidomanta aswan achkata ruwanapaq.

Uma

Titulo de tarjeta de info

Wakin usqhayta ejemplo qillqa tarjetapa titulonpi ruwanapaq chaymanta tarjetapa contenidomanta aswan achkata ruwanapaq.

Uma

Titulo de tarjeta de luz

Wakin usqhayta ejemplo qillqa tarjetapa titulonpi ruwanapaq chaymanta tarjetapa contenidomanta aswan achkata ruwanapaq.

Uma

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-onlyclasewan pakasqa.

Pata

Utilizar utilidades de frontera para cambiar solo el border-colorde una tarjeta. Reparay .text-{color}clasekunata tayta mamapi .cardutaq huk subconjunto tarjetapa contenidomanta churayta atikunki kay urapi rikusqa hina.

Uma

Titulo de tarjeta primaria

Wakin usqhayta ejemplo qillqa tarjetapa titulonpi ruwanapaq chaymanta tarjetapa contenidomanta aswan achkata ruwanapaq.

Uma

Titulo de tarjeta secundaria

Wakin usqhayta ejemplo qillqa tarjetapa titulonpi ruwanapaq chaymanta tarjetapa contenidomanta aswan achkata ruwanapaq.

Uma

Titulo de tarjeta de éxito

Wakin usqhayta ejemplo qillqa tarjetapa titulonpi ruwanapaq chaymanta tarjetapa contenidomanta aswan achkata ruwanapaq.

Uma

Titulo de tarjeta de peligro

Wakin usqhayta ejemplo qillqa tarjetapa titulonpi ruwanapaq chaymanta tarjetapa contenidomanta aswan achkata ruwanapaq.

Uma

Titulo de tarjeta de advertencia

Wakin usqhayta ejemplo qillqa tarjetapa titulonpi ruwanapaq chaymanta tarjetapa contenidomanta aswan achkata ruwanapaq.

Uma

Titulo de tarjeta de info

Wakin usqhayta ejemplo qillqa tarjetapa titulonpi ruwanapaq chaymanta tarjetapa contenidomanta aswan achkata ruwanapaq.

Uma

Titulo de tarjeta de luz

Wakin usqhayta ejemplo qillqa tarjetapa titulonpi ruwanapaq chaymanta tarjetapa contenidomanta aswan achkata ruwanapaq.

Uma

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

Uma

Titulo de tarjeta de éxito

Wakin usqhayta ejemplo qillqa tarjetapa titulonpi ruwanapaq chaymanta tarjetapa contenidomanta aswan achkata ruwanapaq.

Chaki

<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 qutukunaqa display: flex;hukllachasqa sayayninkuta aypanankupaqmi llamk’achinku.

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 class="card-img-top" src=".../100px180/" alt="Card image cap">
    <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 class="card-img-top" src=".../100px180/" alt="Card image cap">
    <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 class="card-img-top" src=".../100px180/" alt="Card image cap">
    <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.

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

Qhipa kutita 3 mins ñawpaqta musuqchasqa

<div class="card-group">
  <div class="card">
    <img class="card-img-top" src=".../100px180/" alt="Card image cap">
    <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 class="card-img-top" src=".../100px180/" alt="Card image cap">
    <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 class="card-img-top" src=".../100px180/" alt="Card image cap">
    <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

Qhipa kutita 3 mins ñawpaqta musuqchasqa

<div class="card-deck">
  <div class="card">
    <img class="card-img-top" src=".../100px200/" alt="Card image cap">
    <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 class="card-img-top" src=".../100px200/" alt="Card image cap">
    <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 class="card-img-top" src=".../100px200/" alt="Card image cap">
    <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.

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

Qhipa kutita 3 mins ñawpaqta musuqchasqa

<div class="card-deck">
  <div class="card">
    <img class="card-img-top" src=".../100px180/" alt="Card image cap">
    <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 class="card-img-top" src=".../100px180/" alt="Card image cap">
    <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 class="card-img-top" src=".../100px180/" alt="Card image cap">
    <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>

Tarjeta columnakuna

Tarjetakunataqa CSS nisqawanlla Albañil hina columnakunapim t'aqayta atikunman, chaypi p'istuykuspa .card-columns. Tarjetakuna CSS columnpropiedades 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-blockimaynachus column-break-inside: avoidmana 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.

Lorem ipsum dolor tiyay amet, consectetur adipiscing elit. Entero posuere erat a ante.

Pipas riqsisqa Fuente Titulo nisqapi

Titulo de tarjeta

Kay tarjetaqa uraypi yanapaq qillqayuqmi huk natural pusaq hina huk contenido yapasqaman.

Qhipa kutita 3 mins ñawpaqta musuqchasqa

Lorem ipsum dolor tiyay amet, consectetur adipiscing elit. Yupay hunt'asqa posuere erat.

Pipas riqsisqa Fuente Titulo nisqapi

Titulo de tarjeta

Kay tarjetaqa sapa kuti tituloyuqmi, urayninpitaq pisi parrafoyuq qillqasqa kachkan.

Qhipa kutita 3 mins ñawpaqta musuqchasqa

Lorem ipsum dolor tiyay amet, consectetur adipiscing elit. Entero posuere erat a ante.

Pipas riqsisqa Fuente Titulo nisqapi

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 class="card-img-top" src=".../100px160/" alt="Card image cap">
    <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>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</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 class="card-img-top" src=".../100px160/" alt="Card image cap">
    <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>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
      <footer class="blockquote-footer">
        <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 class="card-img" src=".../100px260/" alt="Card image">
  </div>
  <div class="card p-3 text-right">
    <blockquote class="blockquote mb-0">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</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-columnsclase 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;
  }
}

Tarjetas

Sobre

Qatina

Titulo de tarjeta

Tipos de contenido

Kurku

Titulokuna, qillqasqakuna, t’inkikuna ima

Titulo de tarjeta

Subtítulo de tarjeta

Imaykuna

Huñukunata qillqay

Lavabo de cocina

Titulo de tarjeta

Encabezado y pie

Tratamiento especial de títulos nisqa

Riqsisqa

Tratamiento especial de títulos nisqa

Tratamiento especial de títulos nisqa

Tamaño

Rejilla marcado nisqawan

Tratamiento especial de títulos nisqa

Tratamiento especial de títulos nisqa

Utilidades nisqawan yanapachikuspa

Titulo de tarjeta

Titulo de tarjeta

Sapanchasqa CSS nisqawan

Tratamiento especial de títulos nisqa

Qillqasqa chiqanchay

Tratamiento especial de títulos nisqa

Tratamiento especial de títulos nisqa

Tratamiento especial de títulos nisqa

Navegación nisqa

Tratamiento especial de títulos nisqa

Tratamiento especial de títulos nisqa

Imaykuna

Imagen tapakuna

Titulo de tarjeta

Titulo de tarjeta

Imahina llanthukuna

Titulo de tarjeta

Estilos de tarjetas

Fondo y color

Titulo de tarjeta primaria

Titulo de tarjeta secundaria

Titulo de tarjeta de éxito

Titulo de tarjeta de peligro

Titulo de tarjeta de advertencia

Titulo de tarjeta de info

Titulo de tarjeta de luz

Titulo de tarjeta oscura

Yanapakuq tecnologiakunaman significadota apachiy

Pata

Titulo de tarjeta primaria

Titulo de tarjeta secundaria

Titulo de tarjeta de éxito

Titulo de tarjeta de peligro

Titulo de tarjeta de advertencia

Titulo de tarjeta de info

Titulo de tarjeta de luz

Titulo de tarjeta oscura

Mixins servicios públicos

Titulo de tarjeta de éxito

Diseño de tarjetas

Tarjeta qutukuna

Titulo de tarjeta

Titulo de tarjeta

Titulo de tarjeta

Titulo de tarjeta

Titulo de tarjeta

Titulo de tarjeta

Mazos de tarjetas

Titulo de tarjeta

Titulo de tarjeta

Titulo de tarjeta

Titulo de tarjeta

Titulo de tarjeta

Titulo de tarjeta

Tarjeta columnakuna

Musuq chiruman p’istuykuq tarjetapa titulon

Titulo de tarjeta