Reboot
Wakmanta qallariy, huk huñusqa elemento-específico CSS tikraykunamanta huk sapalla willañiqipi, kickstart Bootstrap huk sumaq, mana chiqninakuq, chaymanta sasan base linea ruwanapaq qunapaq.
Asuykuy
Wakmanta qallariy Normalizar kaqpi ruwan, achka HTML elementokunata huk chhika yuyayniyuq estilokunawan qun elemento akllanakunallata llamk'achispa. Estilo adicional nisqa ruwakun clasekunawanlla. Ejemplopaq, wakin <table>
estilokunata wakmanta qallariyku aswan sasan base kaqpaq chaymanta qhipaman quyku .table
, .table-bordered
, chaymanta aswan.
Kaypi kamachiyniyku chaymanta razonkuna akllanapaq imakunata Reboot kaqpi llallinapaq:
- Wakin maskaqpa ñawpaqmanta chanikunata musuqchay s llamk'achinapaq
rem
s rantipiem
escalable componente espaciamiento kaqpaq. - Karunchakuychu
margin-top
. Margenes verticales nisqakunaqa urmarunmanmi, chaymi mana suyasqa ruwaykunata qunman. Ichaqa aswan importanteqa, huk dirección demargin
es un modelo mental más simple. - Aswan facil escalapaq dispositivo sayaykunapi, bloque elementokuna
rem
s s kaqpaq llamk'achinanku tiyanmargin
. - -wan
font
tupaq kaqninkunamanta willaykunata aswan pisi kaqpi waqaychay,inherit
atikuqtin llamk'achispa.
P'anqa ñawpaqmanta churasqa
Chay <html>
chaymanta <body>
elementokuna musuqchasqa kanku aswan allin p'anqantin ñawpaqmanta ruwasqakuna qunapaq. Aswan sut'imanta:
- The
box-sizing
nisqaqa tukuy elementopi churasqa kachkan —hinallataq chaymanta*::before
,*::after
aborder-box
. Kayqa elementomanta willasqa ancho mana hayk'aqpas acolchado utaq borderayku pasasqa kananpaq qhawan. - Mana ima sapsi
font-size
willasqachu<html>
, ichataq16px
hap'isqa (navegadorpa ñawpaqmanta churasqa).font-size: 1rem
llamk'achisqa kachkan chaymanta<body>
chaypaq facil kutichiq laya-escalamiento kaqmanta willay mast'ariy tapuykuna kaqnintakama chaymanta ruwaqpa munasqankunata respetaspa chaymanta huk aswan yaykuy atiy ruwayta qhawaspa. <body>
Chaypas huk global ,font-family
,line-height
hinaspatext-align
. Kayqa qhipaman wakin formulario elementokuna herenciayuqmi, letrakuna mana tupaqninkunata hark'anapaq.- Seguridadpaq, chay
<body>
huk willasqabackground-color
, mana hunt'asqa#fff
.
Pila de fuente nativa
Ñawpaqmanta web qillqakuna (Helvetica Neue, Helvetica chaymanta Arial) Bootstrap 4 kaqpi urmachisqa kanku chaymanta huk “nativo qillqa pilawan” tikrasqa kanku allin qillqa ruwanapaq sapa dispositivo kaqpi chaymanta OS kaqpi. Astawan ñawiriy nativo qillqa pilakunamanta kay Smashing Magazine qillqasqapi .
Kayqa chaymanta kikinmanta herencia globalmente tukuy Bootstrap kaqpi ruwasqa font-family
. <body>
Tukuypaq font-family
, musuqchay $font-family-base
chaymanta musuqmanta huñuy Bootstrap kaqmanta.
Titulos y parrafos
Llapan umalliq elementokuna —kayhina, <h1>
—hinallataq <p>
musuqmanta churasqa kanku paykunap margin-top
hurqusqa kananpaq. Titulokuna margin-bottom: .5rem
yapasqa kanku chaymanta parrafokuna margin-bottom: 1rem
facil espaciamientopaq.
Uma | Qatina |
---|---|
|
h1. Bootstrap nisqa umalliq |
|
h2. Bootstrap nisqa umalliq |
|
h3. Bootstrap nisqa umalliq |
|
h4. Bootstrap nisqa umalliq |
|
h5. Bootstrap nisqa umalliq |
|
h6. Bootstrap nisqa umalliq |
Listakuna
Llapan listakuna— <ul>
, <ol>
, hinaspa <dl>
— paykunapa margin-top
hurqusqa hinaspa huk margin-bottom: 1rem
. Anidado listas nisqakunaqa manam margin-bottom
.
- 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
- 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
- Faucibus porta lacus fringilla vel
- Aenean tiyay amet erat nunc
- Eget porttitor lorem
Aswan sasan estilo ruwanapaq, sut'i jerarquía kaqpaq, chaymanta aswan allin espaciamiento kaqpaq, willakuy listakuna margin
s musuqchasqayuq kanku. <dd>
s kaqmanta churay margin-left
hinaspa 0
yapay margin-bottom: .5rem
. <dt>
s nisqakunam yana qillqawan qillqasqa kachkan .
- 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.
- Donec id elit mana mi porta gravida nisqapi eget metus nisqapi.
- Malesuada porta
- Etiam porta sem malesuada magna mollis euismod nisqamanta.
Ñawpaqmanta formatochasqa qillqasqa
Elementoqa <pre>
musuqmanta churasqa kachkan chayta hurqunanpaq chaymanta unidadkunata paypaq margin-top
llamk'achinanpaq .rem
margin-bottom
.ejemplo-elemento { . margen-urapi: 1rem; } .
Tablas
Tablakuna pisilla allichasqa kanku estilo <caption>
s kaqman, urmachiy fronterakuna kaqman, chaymanta text-align
tukuyninpi huklla kaqta qhawanku. Yapa tikraykuna fronterakunapaq, acolchadopaq, chaymanta aswan.table
hamun clasewan .
Tablapa umalliqnin | Tablapa umalliqnin | Tablapa umalliqnin | Tablapa umalliqnin |
---|---|---|---|
Tabla celda | Tabla celda | Tabla celda | Tabla celda |
Tabla celda | Tabla celda | Tabla celda | Tabla celda |
Tabla celda | Tabla celda | Tabla celda | Tabla celda |
Formas
Imaymana formulario elementokuna aswan sasan base estilokunapaq musuqmanta qallarisqa kanku. Kaypi wakin aswan riqsisqa tikrakuykuna:
<fieldset>
s mana fronterayuqchu, acolchadoyuq, margenniyuqchu chayrayku sapalla yaykuykunapaq utaq qutu yaykuykunapaq p'istu hina facil llamk'achiy atikunku.<legend>
s, chakra huñukuna hina, hukmanta ruwasqataqmi kanku, huk rikch'aq umalliq hina rikuchisqa kananpaq.<label>
s nisqakuna churasqa kanku churanankupaqdisplay: inline-block
saqinankupaqmargin
.<input>
s,<select>
s,<textarea>
s, chaymanta<button>
s aswanta Normalize kaqwan allichasqa kanku, ichaqa Reboot paykunapmargin
chaymanta churanline-height: inherit
, chaymanta.<textarea>
s tikrasqa kanku sayaqlla sayayniyuq kanankupaq imaynachus horizontal sayaynin sapa kuti “p’akikun” p’anqa churayta.<button>
s y<input>
elementos de botón tienencursor: pointer
cuando:not(:disabled)
.
Kay tikrakuykuna, chaymanta aswan, kay urapi rikuchisqa kachkan.
Misc elementos
Tarikuynin
Elementoqa <address>
musuqchasqam kachkan, maskaqpa ñawpaqmanta churasqanmanta font-style
kaqmanta italic
churanapaq normal
. line-height
hinallataqmi kunan herenciata chaskisqa, margin-bottom: 1rem
yapasqañataqmi. <address>
s nisqakunaqa aswan qaylla tayta mamapaq (utaq llapan llamkaypa kurkunpaq) tupanachiy willakuykunata qawachinapaqmi. nisqawan chirukunata tukuchispa formato nisqa waqaychay <br>
.
1355 qhatu ñan, Suite 900
San Francisco, CA 94103
P: (123) 456-7890 Tukuy Suti
ñ[email protected]
Bloqueo nisqa
margin
Blockquotes kaqpi ñawpaqmanta churasqa 1em 40px
, chayrayku chayta 0 0 1rem
wak elementokunawan aswan tupaq imapaqpas kutichiyku.
Lorem ipsum dolor tiyay amet, consectetur adipiscing elit. Entero posuere erat a ante.
Inline elementokuna
Chay <abbr>
elementoqa estilo básico nisqatam chaskikun, chaynapi parrafo qillqamanta aswan riqsisqa kananpaq.
Pisiyachisqa
cursor
Resumenpi ñawpaqmanta churasqa text
, chayrayku chayta kaqmanta pointer
churayku chay elementowan tinkiyta atikun chaymanta chaypi ñit'ispa chayta willanapaq.
Wakin detalles
Astawan yachaykuna detallesmanta.
Aswan sut’inchaykunaraq
Kaypiqa aswan sut’inchaykunan kashan chay sut’inchaykunamanta.
HTML5 [hidden]
nisqa atributo
HTML5 huk musuq tukuypaq laya sutichasqa[hidden]
display: none
yapan , chaymanta ñawpaqmanta hina estilochasqa . PureCSS kaqmanta huk yuyayta prestaspa , kay ñawpaqmanta ruwasqamanta allinchayku ruwaspa [hidden] { display: none !important; }
yanapakuypaq harkananpaq chaymanta display
mana qunqayllamanta llallichisqa kananpaq. Mana [hidden]
nativamente IE10 kaqwan yanapasqa kaptinpas, CSSniykupi sut'i willakuy chay sasachakuy muyuriqpi tarikun.
jTapukuy mana tupaq
[hidden]
mana jQuery's kaqwan $(...).hide()
chaymanta $(...).show()
métodos kaqwan tupaqchu. Chayrayku, mana kunan pacha aswanta [hidden]
huk técnicas kaqmanta aswanta endosaykuchu kay display
de elementos kamachiypaq.
Huk elementopa rikuynintalla tikranapaq, niyta munan su display
mana tikrasqachu chaymanta elemento documentopa puriyninta afectanmanraq, chaypa rantinpi .invisible
claseta llamk'achiy.