Source

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 rems rantipi emescalable componente espaciamiento kaqpaq.
Karunchakuychu margin-top. Margenes verticales nisqakunaqa urmarunmanmi, chaymi mana suyasqa ruwaykunata qunman. Ichaqa aswan importanteqa, huk dirección de margines un modelo mental más simple.
Aswan facil escalapaq dispositivo sayaykunapi, bloque elementokuna rems s kaqpaq llamk'achinanku tiyan margin.
-wan fonttupaq kaqninkunamanta willaykunata aswan pisi kaqpi waqaychay, inheritatikuqtin 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-sizingnisqaqa tukuy elementopi churasqa kachkan —hinallataq chaymanta *::before, *::aftera border-box. Kayqa elementomanta willasqa ancho mana hayk'aqpas acolchado utaq borderayku pasasqa kananpaq qhawan.
- Mana ima sapsi font-sizewillasqachu <html>, ichataq 16pxhap'isqa (navegadorpa ñawpaqmanta churasqa). font-size: 1remllamk'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-heighthinaspa text-align. Kayqa qhipaman wakin formulario elementokuna herenciayuqmi, letrakuna mana tupaqninkunata hark'anapaq.
Seguridadpaq, chay <body>huk willasqa background-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 .

$font-family-sans-serif:
  // Safari for OS X and iOS (San Francisco)
  -apple-system,
  // Chrome < 56 for OS X (San Francisco)
  BlinkMacSystemFont,
  // Windows
  "Segoe UI",
  // Android
  "Roboto",
  // Basic web fallback
  "Helvetica Neue", Arial, sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;

Kayqa chaymanta kikinmanta herencia globalmente tukuy Bootstrap kaqpi ruwasqa font-family. <body>Tukuypaq font-family, musuqchay $font-family-basechaymanta musuqmanta huñuy Bootstrap kaqmanta.

Titulos y parrafos

Llapan umalliq elementokuna —kayhina, <h1>—hinallataq <p>musuqmanta churasqa kanku paykunap margin-tophurqusqa kananpaq. Titulokuna margin-bottom: .5remyapasqa kanku chaymanta parrafokuna margin-bottom: 1remfacil 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-tophurqusqa 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 margins musuqchasqayuq kanku. <dd>s kaqmanta churay margin-lefthinaspa 0yapay 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-topllamk'achinanpaq .remmargin-bottom

.ejemplo-elemento { .
  margen-urapi: 1rem;
} .

Tablas

Tablakuna pisilla allichasqa kanku estilo <caption>s kaqman, urmachiy fronterakuna kaqman, chaymanta text-aligntukuyninpi huklla kaqta qhawanku. Yapa tikraykuna fronterakunapaq, acolchadopaq, chaymanta aswan.table hamun clasewan .

Kayqa huk ejemplo tabla, kaytaqmi paypa captionnin imakuna kasqanmanta willanapaq.
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 churanankupaq display: inline-blocksaqinankupaq margin.
<input>s, <select>s, <textarea>s, chaymanta <button>s aswanta Normalize kaqwan allichasqa kanku, ichaqa Reboot paykunap marginchaymanta churan line-height: inherit, chaymanta.
<textarea>s tikrasqa kanku sayaqlla sayayniyuq kanankupaq imaynachus horizontal sayaynin sapa kuti “p’akikun” p’anqa churayta.

Kay tikrakuykuna, chaymanta aswan, kay urapi rikuchisqa kachkan.

Misc elementos

Tarikuynin

Elementoqa <address>musuqchasqam kachkan, maskaqpa ñawpaqmanta churasqanmanta font-stylekaqmanta italicchuranapaq normal. line-heighthinallataqmi kunan herenciata chaskisqa, margin-bottom: 1remyapasqañataqmi. <address>s nisqakunaqa aswan qaylla tayta mamapaq (utaq llapan llamkaypa kurkunpaq) tupanachiy willakuykunata qawachinapaqmi. nisqawan chirukunata tukuchispa formato nisqa waqaychay <br>.

Twitter, Inc.
1355 qhatu ñan, Suite 900
San Francisco, CA 94103
P: (123) 456-7890

Tukuy Suti
ñ[email protected]

Bloqueo nisqa

marginBlockquotes kaqpi ñawpaqmanta churasqa 1em 40px, chayrayku chayta 0 0 1remwak elementokunawan aswan tupaq imapaqpas kutichiyku.

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

Pipas riqsisqa Fuente Titulo nisqapi

Inline elementokuna

Chay <abbr>elementoqa estilo básico nisqatam chaskikun, chaynapi parrafo qillqamanta aswan riqsisqa kananpaq.

Nulla attr vitae elit libero, huk pharetra augue.

Pisiyachisqa

cursorResumenpi ñawpaqmanta churasqa text, chayrayku chayta kaqmanta pointerchurayku 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 displaymana qunqayllamanta llallichisqa kananpaq. Mana [hidden]nativamente IE10 kaqwan yanapasqa kaptinpas, CSSniykupi sut'i willakuy chay sasachakuy muyuriqpi tarikun.

<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 displayde elementos kamachiypaq.

Huk elementopa rikuynintalla tikranapaq, niyta munan su displaymana tikrasqachu chaymanta elemento documentopa puriyninta afectanmanraq, chaypa rantinpi .invisibleclaseta llamk'achiy.