Utqaylla qallariy ejemplokuna

¿Necesitas algunas plantillas rápidas? Kay sapsi ejemplokuna huñusqaykumanta qhaway:

Ñawpaqmanta churasqa rejilla

Bootstrap kaqpa huknin kaqnin hina qusqa ñawpaqmanta ruwasqa llika llamkana 940px ancho 16 columnayuq llika kachkan. Chayqa huk sabor riqsisqa 960 rejilla sistemamanta, ichaqa mana chay yapasqa margen/acolchado paña chaymanta paña ladokunapi.

Ejemplo de marca de rejilla

Kaypi rikuchisqa hina, huk sapsi churay iskay "columnakunawan" ruwakunman, sapa huk yupayta 16 fundacional columnakunamanta sut'inchasqayku sistema rejillaykumanta. Aswan hukniray kananpaq uraypi kaq ejemplokunata qhaway.

<div clase = "fila" > 
  <div clase = "span6" > 
    ...
  </div> nisqa
  <div clase = "span10" > 
    ...
  </div> nisqa
</div> nisqa

Columnas de nidificación

Anidado contenidoyki sichus ruwanayki tiyan huk ruwaspa .rowhuk kachkaq columna ukhupi.

Anidado columnakunap rikch'aynin

<div clase = "fila" > 
  <div clase = "span12" > 
    Nivel 1 de columna
    <div clase = "fila" > 
      <div clase = "span6" > 
        2 kaq ñiqi
      </div> nisqa
      <div clase = "span6" > 
        2 kaq ñiqi
      </div> nisqa
    </div> nisqa
  </div> nisqa
</div> nisqa

Kikinpa rejillaykita rolloy

Bootstrap kaqpi ruwasqa huk makilla tikraqkuna kanku ñawpaqmanta 940px llika llamkana ruwanapaq. Huk chhika ruwaywan, columnakunap sayayninta, canalesninkuta, chaymanta maypichus tiyasqanku waqaychanata tikrayta atikunki.

Rejilla ukhupi

Chay rejilla sistemata tikranapaq necesitasqanku variablekuna kunan llapanku preboot.less.

Kunanqa personalizanapaq

Rejillata tikrayqa kimsa @grid-*tikraqkunata tikraymi, chaymanta Aswan pisi willañiqikunata musuqmanta huñuymi.

Bootstrap hamun equipado huk sistema de rejilla 24 columnakunakama hapinanpaq; ñawpaqmanta churasqa 16. Kaypi imayna llika tikraykikuna 24 columna llikaman ruwasqa rikch'akunman.

@rejillaColumnas : 24 ;       
@rejillaColumna Ancho : 20px ;   
@gridGutterAncho : 20px nisqa ;   

Una vez recompilado, estarás establecido!

Diseño fijo

Ñawpaqmanta chaymanta sanu 940px-ancho, chawpichasqa churay yaqa mayqin web kitipaq utaq p'anqapaq huk sapalla qusqa <div.container>.

<cuerpo> nisqa
  <div clase = "contenedor" > 
    ...
  </div> nisqa
</cuerpo> nisqa

Diseño de fluido

Huk alternativa, flexible fluido p'anqa estructura min- chaymanta max-anchos kaqwan chaymanta huk lluq'i lado barra kaqwan. Allinmi apps nisqapaq, docs nisqapaqpas.

<cuerpo> nisqa
  <div clase = "contenedor-fluido" > 
    <div clase = "barra lado" > 
      ...
    </div> nisqa
    <div clase = "contenido" > 
      ...
    </div> nisqa
  </div> nisqa
</cuerpo> nisqa

Umakuna & copia

Huk jerarquía tipográfica estándar web kitiykikuna ruwanapaq.

Llapan qillqana mayt'u iskay Aswan pisi tikraqkunapi preboot.less willañiqiykupi sayasqa kachkan: @basefontchaymanta @baseline. Ñawpaq kaqmi tukuyninpi llamk'achisqa base font-size iskay kaqtaq base line-height nisqa.

Chay tikraqkunata llamk'achiyku, chaymanta wakin yupaykunata, tukuy layaykumanta chaymanta aswanta margenkuna, rellenokuna, chaymanta chiru-alturakuna ruwanapaq.

h1. Uma 1.1

h2. Umalliq 2

h3. Uma 3.1

h4. Uma 4.1

h5. Umalliq 5

h6. Uma 6

Ejemplo parrafo

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus y magnis disparuriente montes, nascetur ridiculus mus nisqa. Nullam id dolor id nibh ultricies antawakuna ut id elit.

Ejemplo titulo Tiene subpartida...

Misc. elementokuna

Enfasis, direcciones, & abreviaturas nisqakunata llamk’achispa

<strong> <em> <address> <abbr>

Hayk’aqtaq apaykachana

Etiquetas de énfasis ( <strong>y <em>) nisqawanmi qawachina huk palabrapa otaq huk frasepa muyuriqninpi copiawan tupachispa aswan importante kasqanmanta otaq enfasis kasqanmanta. <strong>Importanciapaq, <em>estrés nisqamanta astawan rimanapaq ima apaykachana .

Huk parrafopi enfasis

Fusce dapibus , tellus ac cursus commodo , tortor mauris condimentum nibh , ut fermentum masa justo tiyay amet risus. Maecenas faucibus mollis nisqap chawpinpi kaq. Nulla vitae elit libero, huk pharetra augue.

Qhaway: Hinallam allin kachkan llamk'achiyta <b>chaymanta <i>etiquetakuna HTML5 kaqpi chaymanta mana estiloyuq kananku tiyan negrita chaymanta cursiva kaqpi, chaymanta (aunque sichus huk aswan semántico elemento kan, llamk'achiy). <b>es destinado a resaltar palabras o frases sin transmitir importancia adicional, mientras <i>que es mayormente para voz, términos técnicos, etc.

Direcciones

Chay <address>elementoqa aswan qaylla ñawpaq taytanpaq tinkinapaq willakuypaq llamk'achisqa, icha tukuy llamk'ay kurkupaq. Kaypin iskay ejemplokuna kashan imaynatas utilizakunman chayta:

Qhaway: Hukpi sapa chiruqa <address>chiru-p'akiywan ( <br />) tukukunan tiyan icha huk bloque-nivel etiquetawan (kayhina, ) p'istuykusqa kanan <p>tiyan allinta ruwanapaq.

Pisichasqa simikuna

Pisichasqakunapaq, siglaspaqpas, <abbr>etiquetata llamk'achiy ( HTML5<acronym> nisqapi manaña llamk'achisqachu ). Etiqueta ukhupi taquigrafía nisqa formulariota churay hinaspa hunt’asqa sutipaq huk titulota churay.

Bloqueo nisqa

<blockquote> <p> <small>

Imaynatataq citasunman

<blockquote>Huk bloqueo nisqa churanapaq, muyuriqninpi p'istuy <p>hinaspa <small>etiquetakuna. Utilizar el <small>elemento para citar tu fuente y obtendrás un guión em —antes de él.

Lorem ipsum dolor tiyay amet, consectetur adipiscing elit. Integer posuere erat huk ante venenatis dapibus posuere velit aliquet.

Julio Hibbert sutiyuq doctormi

<bloqueo nisqa>
  <p> Lorem ipsum dolor tiyay amet, consectetur adipiscing elit. Integer posuere erat huk ante venenatis dapibus posuere velit aliquet. </p>
  <huch’uy> Dr. Julius Hibbert </huch’uy>
</blockquote> nisqa

Mana kamachisqa<ul>

• Lorem ipsum dolor tiyay amet
• Consectetur adipiscing nisqa elit
• Entero molestie lorem en massa
• Facilisis en aliquet nisl de pretio nisqa
• Nulla volutpat aliquam velit
  • Fasello iaculis nisqa neque nisqa
  • Purus sodales ultricas nisqa
  • Vestibulo laoreet porttitor sem
  • Ac tristique libero volutpat at
• Faucibus porta lacus fringilla vel
• Aenean tiyay amet erat nunc
• Eget porttitor lorem

Mana estiloyuq<ul.unstyled>

• Lorem ipsum dolor tiyay amet
• Consectetur adipiscing nisqa elit
• Entero molestie lorem en massa
• Facilisis en aliquet nisl de pretio nisqa
• Nulla volutpat aliquam velit
  • Fasello iaculis nisqa neque nisqa
  • Purus sodales ultricas nisqa
  • Vestibulo laoreet porttitor sem
  • Ac tristique libero volutpat at
• Faucibus porta lacus fringilla vel
• Aenean tiyay amet erat nunc
• Eget porttitor lorem

Kamachisqa<ol>

1. Lorem ipsum dolor tiyay amet
2. Consectetur adipiscing nisqa elit
3. Entero molestie lorem en massa
4. Facilisis en aliquet nisl de pretio nisqa
5. Nulla volutpat aliquam velit
6. Faucibus porta lacus fringilla vel
7. Aenean tiyay amet erat nunc
8. Eget porttitor lorem

Willaydl

Listas de descripción

Huk sut'inchay listaqa allinmi términokunata sut'inchanapaq.

Euismod nisqa

Vestibulo id ligula porta felis euismod semper eget lacinia odio sem nec elit.

Donec id elit mana mi porta gravida nisqapi eget metus nisqapi.

Malesuada porta

Etiam porta sem malesuada magna mollis euismod nisqamanta.

Código

<code> <pre>

Pimp códigoyki estilopi iskay etiquetakuna simplewan. Aswan manchay kaypaq javascript kaqnintakama, Google kaqpa codigo prettify biblioteca kaqpi urmachiy chaymanta churasqa kanki.

Código nisqa riqsichiy

Código, bloques de o simplemente fragmentos inline, estilowan rikuchikunman allin etiquetapi p'istuykuspalla. Achka chirukunata mast'ariq codigo bloquekunapaq, <pre>elementota llamk'achiy. Chiru ukhupi codigopaq, <code>elementota llamk'achiy.

<div> nisqa
  <h1>Uma</h1>
  <p>Imapas kayllapi...</p>
</div> nisqa

<div> <h1> Uma </h1> <p> Kaypi imapas... </p> </div>
  
  

Etiquetas en línea

<span class="label">

Cuerpoykipi textopi mayqen frasetapas atencionta waqyay otaq banderawan churay.

Imatapas etiquetay

Nunca necesitaba uno de esos lujoso Nuevo! utaq ¿Código qillqachkaspa importante banderakuna? Bueno, kunanqa chaykunatan chaskinki. Kaypi imakuna ñawpaqmanta churasqa kachkan:

Rejilla de medios de comunicación

Huk pisi HTML chakiyuq chaymanta pisi estilokunayuq p'anqakunapi hukniray sayayniyuq uchuy siq'ikunata qhaway.

Ejemplo miniaturas

Huch'uy siq'ikuna kaqpi .media-gridmayqin sayayniyuqpas kanman, ichaqa aswan allinta llamk'anku mayk'aq chiqalla Bootstrap rejilla sistema ruwasqa kaqman mapasqa. 90, 210, 330 hina siq'i anchokuna huk pisi pixelkuna hunt'achiyninwan hukllanakunku .span2, .span4, chaymanta .span6columna sayayninkuna kaqlla kananpaq.

Hatun

Chawpi

Uchuy

Chaykunata codificaspa

Rejillas de medios nisqakunaqa mana sasachu llamk'achinapaq chaymanta aswan sasallawan marcasqa lado kaqpi. Dimensiones nisqakunaqa puramente basada en el tamaño de las imágenes incluidas nisqapi.

<ul clase = "media-rejilla" > 
  <li> nisqa
    <a href = "#" > nisqa 
      <img class = "huch'uy rikch'aq" src = "https://qu.wi.com/330x230" alt = "" >   
    </a>
  </li>
  <li> nisqa
    <a href = "#" > nisqa 
      <img class = "huch'uy rikch'aq" src = "https://qu.wi.com/330x230" alt = "" >   
    </a>
  </li>
</ul>

Mesas de construcción

<table> <thead> <tbody> <tr> <th> <td> <colspan> <caption>

Mesakunaqa ancha allinmi —achka imakunapaqpas. Hatun tablakuna, ichaqa, huk chhika marcador munakuyta necesitanku allin, escalable, chaymanta ñawirinapaq (codigo nivelpi). Kaypi huk iskay kimsa yuyaychaykunata yanapanapaq.

<thead>Sapa kuti sapaq umalliqniykikunata huk hinapi p'istuy , jerarquía <thead>> <tr>> <th>kananpaq.

Sapaq umalliqkunaman rikch'akuq, llapa tablaykip kurku kaqnin hukwan p'istuykusqa kanan tiyan <tbody>chaymanta jerarquíayki <tbody>> <tr>> <td>.

Ejemplo: Ñawpaqmanta churasqa tabla estilokuna

Llapan tablakuna kikinmanta estilochasqa kanqa fronteras esenciales kaqllawan ñawirinapaq chaymanta estructurata waqaychaypaq. Mana necesariochu yapanapaq clasekunata utaq atributokunata.

<mesa> nisqa
  ...
</tabla> nisqa

Ejemplo: Cebra-rayasqa

Huk chhika fancy mesaykikunawan zebra-rayado yapaspa —claseta yapaylla .zebra-striped.

Qhaway: Zebra-striping huk ñawpaqman puriq allinchay mana ñawpaq maskaqkunapaq IE8 hina chaymanta uraypi kanchu.

<tabla clase = "cebra-rayado" > 
...
</tabla> nisqa

Ejemplo: Zebra-rayado w/ TableSorter.js

Ñawpaq ejemplota hapispa, tablakunaykupa allin kayninta allinchayku jQuery kaqninta chaymanta Tablesorter plugin kaqnintakama t'aqay ruwayta quspa. Mayqin sapaqchasqap umalliqninpipas ñit'iy, t'aqayta tikranaykipaq.

<script src = "js/jquery/jquery.tablakuna t'aqaq.min.js" ></script> 
<qillqa > 
  $ ( ruway () { . 
    $ ( "tabla#sortTablaEjemplo" ). tablakuna t'aqaq ({ t'aqayLista : [[ 1 , 0 ]] });  
  });
</script> nisqa
<tabla clase = "cebra-rayado" > 
  ...
</tabla> nisqa

Ñawpaqmanta churasqa estilokuna

Llapan formulariokunaman ñawpaqmanta ruwasqa estilokuna qusqa kanku ñawirinapaq chaymanta escalable kaqpi rikuchinankupaq. Estilokuna qillqa yaykuchiypaq, akllana listakuna, qillqanakuna, radio botones chaymanta qhaway qutukuna chaymanta botones qusqa kanku.

Formularios apilados

Formularioykipa HTML kaqninman yapay .form-stackedchaymanta etiquetakunayuq kanki paykunap chakrankunap hawanpi mana paña kaqninkupi. Kayqa ancha allinta llamkan sichus formulariokunayki pisi kanku utaq iskay columnakuna yaykuyniyuq kanki aswan llasa formulariokunapaq.

Chakra sayaykunata ruray

Ima formulariotapas input, select, utaq textareaanchotapas ruway, huk iskay kimsa clasekunallata markaykiman yapaspa.

v1.3.0 kaqmanta, formulario elementokunapaq rejilla-based sayay clasekunata yapasqayku. Ama hina kaspa, kaykunata kunan kaq .mini, .small, etc clasekuna hawapi llamk'achiy.

Botones

Huk convención hina, botones ruwanapaq llamk'achisqa chaymanta t'inkikuna objetokunapaq llamk'achisqa. Ejemplopaq, "Uraykachiy" huk ñit'ina kanman chaymanta "qhipa ruway" huk t'inki kanman.

Llapan botones huk llimp'i gris estiloman ñawpaqmanta churasqa, ichaqa huk yupay ruwana clasekuna hukniray llimp'i estilokunapaq churakunman. Chay clasekunapiqa kanmi azul .primaryclase, azul claro .info, verde .successclase, puka .dangerclase ima.

Ejemplo de botones

Botón estilokuna imamanpas churakunman chay .btnchurasqawan. <a>Tipicamente kaykunata , <button>, chaymanta akllay <input>elementokunallaman churayta munanki . Kaypi imayna rikchakun:

Tamaños alternas

¿Aswan hatunchu icha aswan huch’uy botonkunatachu munanki? ¡Tienen en ello!

Mana atiq suyu

Botonkuna mana ruwasqa utaq huk razonrayku utaq wak app kaqwan mana llamk'achisqa kaqpaq, mana llamk'achisqa estadota llamk'achiy. Chayqa .disabledt'inkikunapaqmi, :disabledelementokunapaqpas <button>.

T'inkikuna

Botones

Imataq

Pata barrayku huk takyasqa barra kaq mayqinchus huk web kitip logotipo utaq sutin, ñawpaq puriy chaymanta maskana formularioyuq.

Personalizable

Llapan elementokuna ukhupi, chaymanta tukuy pata barra hinallataq, munasqa kanku. Akllayta atikunki huk logotipo/suti, nav, maskana chaymanta huk iskay kaq nav churayta —utaq mayqin chaymanta chay huñusqa kaqtapas.

Dropdowns incluidos

Hatun puriypa huknin hina, atiyta churarqayku qampaq nav kaqman urayk'aqkuna yapanaykipaq. Rikuy iskay kaq nav hawapi (alliq chiqanchasqa) imayna ruwasqa kaqta qhawanaykipaq. Urmachiy lietiquetakuna yanapallankutaq .activekunan p'anqa akllayta rikuchinapaq.

Tabs y pastillas

Hukwan sasa iskay kaq puriyta ruway <ul>. Intercambio entre pestañas o pastillas añadiendo la clase adecuada.

Hatun sub-secciones kaqmanta contenidopaq imaynachus yupayniyku churanakuna p'anqakuna chaymanta user timelines kaqmanta tikraypaq p'anqakuna hina contenido kaqmanta. Disponible en estilos tabbed o pastillas.

• Wasi
• Runapa kaynin
• Willakuykuna
• Ajustes
• Tupaqmasi
• Urmachiy
  • Enlace secundario
  • Huk imapas kaypi
  • Huk t'inki

<ul clase = "pestañas" > 
  <li clase = "activo" ><a href = "#" > Wasi </a></li>  
  <li><a href = "#" > Willakuy </a></li> 
  <li><a href = "#" > Willakuykuna </a></li> 
  <li><a href = "#" > Ajustes </a></li> 
  <li><a href = "#" > Rimanakuy </a></li> 
</ul>

• Wasi
• Runapa kaynin
• Willakuykuna
• Ajustes
• Tupaqmasi

<ul clase = "pastillas" > 
  <li clase = "activo" ><a href = "#" > Wasi </a></li>  
  <li><a href = "#" > Willakuy </a></li> 
  <li><a href = "#" > Willakuykuna </a></li> 
  <li><a href = "#" > Ajustes </a></li> 
  <li><a href = "#" > Rimanakuy </a></li> 
</ul>

T'antakuna

Breadcrumb puriy huk ñan hina llamk'achisqa maypi huk ruwana utaq huk sitio ukhupi kasqankuta rikuchinapaq, ichaqa mana ñawpaq purinapaqchu.

• Wasi

• Wasi / .
• Chawpi p'anqa

• Wasi / .
• Chawpi p'anqa / .
• Huknin

• Wasi / .
• Chawpi p'anqa / .
• Huknin / .
• Qamkuna kaypi kachkanki

<ul clase = "t'anta mikhuy" > 
  <li><a href = "#" > Wasi </a> <span clase = "rakiq" > / </span></li>   
  <li><a href = "#" > Chawpi p'anqa </a> <span clase = "rakiq" > / </span></li>   
  <li><a href = "#" > Huk </a> <span clase = "rakiq" > / </span></li>   
  <li class = "active" > Kaypi kachkanki </li> 
</ul>

Paginación

Paginación ultra simplista y mínimamente estilo inspirada por Rdio. Hatun bloqueqa sasa pantaymi, facil escalable, hatun ñit'iy áreas nisqakunata qun.

<div clase = "paginación" > 
  <ul> nisqa
    <li clase = "ñawpaq mana llamk'achisqa" ><a href = "#" > ← Ñawpaq </a></li>  
    <li clase = "activo" ><a href = "#" > 1 </a></li>  
    <li><a href = "#" > 2 </a></li> nisqa 
    <li><a href = "#" > 3 </a></li> nisqa 
    <li><a href = "#" > 4 ​​</a></li> nisqa 
    <li><a href = "#" > 5 </a></li> nisqa 
    <li clase = "qhipa kaq" ><a href = "#" > Qhipa kaq → </a></li> nisqa  
  </ul>
</div> nisqa

Alerta básica nisqa

.alert-message

Huk chiru willakuykunata huk ruwaypa mana allin kayninta, mana allin kayninta utaq allin kayninta riqsichinapaq. Particularmente útil para formularios.

Javascript nisqamanta hurquy »

Ejemplo de código

<div class = "alerta-willakuy willakuy" > 
  <a clase = "wichqay" href = "#" > × </a>  
  <p><strong> ¡Santo guacamole! </strong> Aswan allin qhaway yo kikiyki, mana ancha allintachu qhawarikunki. </p>
</div> nisqa

Willakuykunata harkay

.alert-message.block-message

Willakuykuna huk chhika sut'inchayta munanku, parrafo estilo alertasniyuq kayku. Kaykunaqa allin kanku aswan unay pantay willakuykunata burbujanapaq, huk llamk'aqman huk pendiente ruwaymanta willaypaq, utaq willayta sapalla p'anqapi aswan kallpachakuypaq rikuchiypaq.

Javascript nisqamanta hurquy »

Ejemplo de código

<div class = "alerta-willakuy hark'ay-willakuy willay" > 
  <a clase = "wichqay" href = "#" > × </a>  
  <p><strong> ¡Santo guacamole! ¡Kayqa huk advertencian! </strong> Aswan allin qhaway yo kikiyki, mana ancha allintachu qhawarikunki. Nulla vitae elit libero, huk pharetra augue. Praesent commodo cursus magna, vel escelerisco nisl nisqa consectetur nisqa. </p>
  <div clase = "alerta-ruray" > 
    <a class = "btn huch'uy" href = "#" > Kay ruwayta ruway </a> <a class = "btn huch'uy" href = "#" > Utaq kayta ruway </a>     
  </div> nisqa
</div> nisqa

Modales nisqa

Modales —rimanakuna utaq k'anchay qutukuna— ancha allin kanku contextual ruwaykunapaq situacionkunapi maypichus importante kan qhipa contexto waqaychasqa kananpaq.

Javascript nisqamanta hurquy »

Yanapakuykuna

Twipsies super útiles kanku huk confundisqa usuariota yanapanapaq chaymanta allin ñanman señalanapaq.

Javascript nisqamanta hurquy »

Popovers

Popovers llamk'achiy huk p'anqaman subtextual willayta qunaykipaq mana churayta afectaspa.

Javascript nisqamanta hurquy »

Qallarinapaq

Javascript Bootstrap bibliotecawan tinkiyqa super facilmi. Uraypi riyku aswan allin kaqkunamanta chaymanta quyku wakin manchay plugins qallarinaykipaq!

Javascript qillqakunata qhaway »

Imataq chaypi kachkan

Wakin Bootstrap kaqpa ñawpaq kaqninkunata kawsayman apamuy musuq sapanchasqa plugins kaqwan mayqinkunachus jQuery chaymanta Ender kaqwan llamk'anku . Kallpanchaykiku mast'arinaykipaq chaymanta tikranaykipaq chaymanta específico wiñariy necesidadniykiman hina.

¿Javascript nisqa necesariochu?

Manam! Bootstrap nisqaqa ñawpaq kaq chaymanta aswan ñawpaq kaq CSS biblioteca kananpaq ruwasqa. Kay javascript huk sapsi interactivo qatata qun chaymanta churasqa estilokuna patapi.

Ichaqa, pikunachus javascript necesitanku chaypaq, patamanta plugins qusqayku yanapanapaq imayna Bootstrap javascript kaqwan tinkiyta hamut'ayta chaymanta huk utqaylla, llamp'u akllanata qunapaq chaymanta chaylla ruwanakuna básica kaqpaq.

Aswan willakuypaq chaymanta wakin kawsaq rikuchiykunata qhawanaykipaq, ama hina kaspa qhaway plugin qillqa p'anqaykupi .