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. Kay maskaqpa ñawpaqmanta churasqanqa tikrasqata tikraspa llallichisqa kanman$font-size-root
.
- Mana ima sapsi
<body>
Chaypas huk global ,font-family
,font-weight
,line-height
hinaspacolor
. 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
Bootstrap huk “nativo fuente pila” utaq “sistema fuente pila” llamk’achin allin qillqa ruwanapaq sapa dispositivo kaqpi chaymanta OS kaqpi. Kay sistema letrakuna ruwasqa kanku kunan pacha dispositivokuna yuyaypi, pantallakunapi allinchasqa ruwaywan, tikraq letra yanapakuywan chaymanta aswan. Astawan ñawiriy nativo qillqa pilakunamanta kay Smashing Magazine qillqasqapi .
$font-family-sans-serif:
// Cross-platform generic font family (default user interface font)
system-ui,
// Safari for macOS and iOS (San Francisco)
-apple-system,
// Windows
"Segoe UI",
// Android
Roboto,
// Basic web fallback
"Helvetica Neue", Arial,
// Linux
"Noto Sans",
"Liberation Sans",
// Sans serif fallback
sans-serif,
// Emoji fonts
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
Reparay, fuente pila emoji letrakuna kasqanrayku, achka común símbolo/dingbat unicode qillqakuna achka llimp'iyuq pictografokuna hina ruwasqa kanqa. color
Rikchayninku hukniray kanqa, maskaq/plataformapa nativo emoji qillqa mayt'unpi llamk'achisqa estilomanhina, chaymanta mana mayqin CSS estilokunawanpas afectasqachu kanqa .
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></h1> |
h1. Bootstrap nisqa umalliq |
<h2></h2> |
h2. Bootstrap nisqa umalliq |
<h3></h3> |
h3. Bootstrap nisqa umalliq |
<h4></h4> |
h4. Bootstrap nisqa umalliq |
<h5></h5> |
h5. Bootstrap nisqa umalliq |
<h6></h6> |
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
. Hinallataqmi padding-left
on <ul>
y <ol>
elementos nisqakunatapas musuqmanta churarqanchik.
- Llapan listakunam hawa margenninkuta hurqusqa kachkan
- Hinaspa margen inferiorninku normalizasqa
- Anidado nisqa listakunaqa manam uray margenniyuqchu
- Chay hinapin aswan kaqlla rikch’ayniyoq kanku
- Astawanraqmi aswan lista nisqapi kaqkuna qatiptin
- Lloq’e acolchado nisqapas kutichisqañan kashan
- Kaypi huk kamachisqa lista kachkan
- Iskay kimsa lista nisqapi kaqkunawan
- Tukuyninpi kaqlla rikchayniyuqmi
- Ñawpaq mana kamachisqa lista hina
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.
- Kamachiy
- Definición para el término.
- Iskay kaq sut’inchay kikin simipaq.
- Huk término
- Kay huk simipaq definición.
Chirupi kaq código
Chiru ukhupi chirusqakunata <code>
. Aswan allinta HTML k'uchu corchetekunamanta ayqiyta.
<section>
inline hinam wankusqa kanan.
For example, <code><section></code> should be wrapped as inline.
Bloques de código
<pre>
Achka chiru qillqakunapaq s nisqawan yanapachikuy . Huk kutitawan, allinta ruwanapaq ima k'uchu corchetekunamantapas codigopi ayqiy. Elementoqa <pre>
musuqmanta churasqa kachkan chayta hurqunanpaq chaymanta unidadkunata paypaq margin-top
llamk'achinanpaq .rem
margin-bottom
<p>Sample text here...</p>
<p>And another line of sample text here...</p>
<pre><code><p>Sample text here...</p>
<p>And another line of sample text here...</p>
</code></pre>
Variables nisqakuna
Variables nisqakunata rikuchinapaqqa <var>
etiqueta nisqawanmi llamk'achiy.
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>
Insumo de usuario
Utilizar el <kbd>
para indicar entrada que típicamente se entra a través de teclado.
Ajustes nisqakunata allichanaykipaqqa, ñitiy ctrl + ,
To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>
Salida de muestra
Huk programamanta muestra lluqsiyta rikuchinapaq <samp>
etiquetata llamk'achiy.
<samp>This text is meant to be treated as sample output from a computer program.</samp>
Tablas
Tablakuna pisillata estilo <caption>
s kaqman allichasqa kanku, fronterakuna urmachinku, 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.
Punchaw & llimp'i yaykuy yanapakuy
Yuyaypi hap'iy p'unchaw yaykuykuna mana tukuy maskaqkunawan hunt'asqa yanapasqachu , chaymanta Safari kaqwan.
Punteros en botones
Wakmanta qallariy huk allinchayta churan role="button"
ñawpaqmanta kursuta tikranapaq pointer
. Kay laya elementokunaman yapay, elementokuna interactivo kasqankuta rikuchinapaq yanapanapaq. Kay ruwayqa mana <button>
elementokunapaq necesariochu, chaykuna kikinkumanta cursor
tikrayta jap’inku.
<span role="button" tabindex="0">Non-button element button</span>
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.
Allin riqsisqa cita, huk elemento blockquote nisqapi tarikuq.
Pipas riqsisqa Fuente Titulo nisqapi
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 manukuspa , kay ñawpaqmanta ruwasqamanta allinchayku ruwaspa [hidden] { display: none !important; }
yanapakuypaq harkananpaq chaymanta display
mana qunqayllamanta llallichisqa kananpaq.
<input type="text" hidden>
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.