in English

Ñepyrũ jey

Reboot, peteĩ colección CSS elemento específico ñemoambue peteĩ vore’ípe, kickstart Bootstrap ome’ẽ hag̃ua peteĩ línea base elegante, constante ha simple oñemopu’ã hag̃ua hese.

Ñemboja

Reboot oñemopuꞌa Normalize rehe, omeꞌe heta HTML elemento estilokuéra oguerekóva peteĩ mbaꞌe opensáva oipurúvo elemento poravoha añoite. Estilo adicional ojejapo umi clase reheve añoite. Techapyrã, ñamoñepyrũ jey peteĩ <table>estilo peteĩ línea base isensíllovape g̃uarã ha upéi ñame’ẽ .table, .table-bordered, ha hetave mba’e.

Ko’ápe oĩ ore ñe’ẽmondo ha mba’érepa reiporavo mba’épa remboykéta Reboot-pe:

  • Embopyahu peteĩva kundahára valor por defecto eipuru hag̃ua rems s rangue emespaciado componente escalable-pe g̃uarã.
  • Ejehekýi margin-top. Umi márgen vertical ikatu ho'a, ome'ê resultado oñeha'ãrõ'ÿva. Péro iñimportantevéva, peteĩ dirección añoite de marginhaʼe peteĩ modelo mental isensíllova.
  • Ojejapo hag̃ua escala ndahasýiva tembipuru tuichakue rupi, umi elemento bloque rehegua oipuruvaꞌerã rems margins-pe g̃uarã.
  • Eñongatu declaración umi fontpropiedad ojoajúva rehegua mínimo-pe, eipuru inheritikatu jave.

Página ñembohekorã

Umi <html>ha <body>elemento oñembopyahu ome’ẽ hag̃ua iporãvéva página tuichakue javeve ñemboheko. Oje’e porãve hag̃ua:

  • Pe box-sizingoñemohenda globalmente opaite elemento rehe —oikehápe *::beforeha *::after, to border-box. Péva oasegura araka'eve ndojehasái elemento ancho ojedeclaráva acolchado térã borde rupive.
  • Ndaipóri base font-sizeojedeclaráva <html>, ha 16pxkatu oñeimo’ã (kundahára por defecto). font-size: 1remojeporu pe-pe <body>g̃uarã pe tipo-escalamiento ndahasýiva ombohovái hag̃ua umi consulta medios rupive oñemombaꞌe aja puruhára rembipota ha oasegura peteĩ enfoque ojeikekuaavéva.
  • Pe <body>avei omoĩ peteĩ global font-family, line-height, ha text-align. Kóva ojehereda upe rire algunos elementos de forma rupive ani hag̃ua umi inconsistencia letra rehegua.
  • Seguridad-pe guarã, pe <body>oreko peteĩ declarado background-color, incumplimiento a #fff.

Pila de fuente nativa rehegua

Umi fuente web por defecto (Helvetica Neue, Helvetica ha Arial) ojeity Bootstrap 4-pe ha oñemyengovia peteĩ “pila de letras nativas” rehe ojejapo porãve hag̃ua jehaipyre opaite tembipuru ha SO-pe. Emoñe’ẽve umi pila fuente nativa rehegua ko Smashing Magazine artículo -pe .

$font-family-sans-serif:
  // Safari for macOS and iOS (San Francisco)
  -apple-system,
  // Chrome < 56 for macOS (San Francisco)
  BlinkMacSystemFont,
  // 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;

Eñamindu’u pe pila de fuente-pe oguerekógui umi fuente emoji, heta karameg̃ua Unicode símbolo/dingbat jepivegua oñembohasáta ta’ãngamýi heta sa’y rehegua ramo. Iñambuéta iñambuéta, ojehechávo estilo ojeporúva kundahára/plataforma emoji fuente nativa-pe, ha ndojehúi mba’eveichagua colorestilo CSS rehe.

Kóva font-familyojeporu pe <body>ha ojehereda ijeheguiete globalmente Bootstrap pukukue javeve. Oñemoambue hag̃ua global font-family, embopyahu $font-family-baseha embojoaju jey Bootstrap.

Umi rubro ha párrafo

Opaite elemento iñakãrapuꞌa rehegua—techapyrã, <h1>—ha <p>oñembopyahu ojepeꞌa hag̃ua chuguikuéra margin-top. Oñemoĩma umi título margin-bottom: .5remha párrafo margin-bottom: 1remndahasýi hag̃ua ojeespacia.

Ñe’ẽryru Tembiecharã
<h1></h1> h1 rehegua. Ñe’ẽmondo bootstrap rehegua
<h2></h2> h2 rehegua. Ñe’ẽmondo bootstrap rehegua
<h3></h3> h3 rehegua. Ñe’ẽmondo bootstrap rehegua
<h4></h4> h4 rehegua. Ñe’ẽmondo bootstrap rehegua
<h5></h5> h5 rehegua. Ñe’ẽmondo bootstrap rehegua
<h6></h6> h6 rehegua. Ñe’ẽmondo bootstrap rehegua

Umi lista rehegua

Opaite lista— <ul>, <ol>, ha <dl>—oguereko ijepe’a margin-topha peteĩ margin-bottom: 1rem. Umi lista anidado ndorekói margin-bottom.

  • Opaite lista oguereko imargen yvate ojeipe’áva
  • Ha pe margen inferior orekóva hikuái oñenormalisa
  • Umi lista anidado ndorekói margen inferior
    • Péicha oreko hikuái peteĩ apariencia jojavéva
    • Particularmente hapykuéri hetave elemento lista-pe
  • Avei oñembopyahu jey pe acolchado izquierdo
  1. Ko'ápe oime peteî lista ordenada
  2. Mbovymi mba’e lista rehegua reheve
  3. Oreko peteĩchagua jehecha general
  4. Pe lista noñeordenaiva’ekue yma guaréicha

Estilo isensíllova, jerarquía hesakãva ha espaciado iporãvévape g̃uarã, umi lista descripción rehegua oguereko margins oñembopyahúva. <dd>s emoĩjey margin-leftha 0emoĩve margin-bottom: .5rem. <dt>s ha'e negrita .

Umi lista descripción rehegua
Peteĩ lista descripción rehegua iporãiterei ojedefini hag̃ua umi término.
Ñe'ẽ
Definición para el término rehegua.
Mokõiha definición upe término-pe guarã.
Ambue término
Definición ko ambue ñe’ẽme g̃uarã.

Jehaipyre oñemboheko mboyveva’ekue

Pe <pre>elemento oñembopyahu ojeipeꞌa hag̃ua iha margin-topha ojepuru remhag̃ua unidadkuéra margin-bottom.

.techapyrã-elemento { .
  margen-inferior: 1rem rehegua;
} rehegua .

Tabla-kuéra rehegua

Umi cuadro oñemboheko michĩmi estilo <caption>s-pe, oñemboty umi frontera ha ojeasegura peteĩchaite text-alignopaite jave. Umi cambio adicional umi frontera, acolchado ha hetave mba’épe g̃uarã oúva clase .tablendive .

Kóva haꞌehína peteĩ cuadro techapyrãva, ha kóva haꞌehína iñeꞌẽryru oñemombeꞌu hag̃ua umi mbaꞌe oĩva ipype.
Tabla rubro rehegua Tabla rubro rehegua Tabla rubro rehegua Tabla rubro rehegua
Célula de mesa rehegua Célula de mesa rehegua Célula de mesa rehegua Célula de mesa rehegua
Célula de mesa rehegua Célula de mesa rehegua Célula de mesa rehegua Célula de mesa rehegua
Célula de mesa rehegua Célula de mesa rehegua Célula de mesa rehegua Célula de mesa rehegua

Umi formulario rehegua

Opaichagua elemento forma rehegua oñemboguata jey umi estilo base isensíllovape g̃uarã. Koʼápe oĩ umi kámbio ojehecharamovéva:

  • <fieldset>s ndoguerekói frontera, acolchado térã margen ikatu hag̃uáicha ojepuru pyaꞌete envoltura ramo umi insumo peteĩteĩvape g̃uarã térã umi insumo atykuérape g̃uarã.
  • <legend>s, umi campo conjunto-icha, avei oñemboheko jey ojehechauka hag̃ua peteĩ iñakãrapuꞌa ramo.
  • <label>s oñemohenda display: inline-blockto oheja marginhaguã ojeporu.
  • <input>s, <select>s, <textarea>s, ha <button>s oñembohovakevéva Normalize rupive, ha katu Reboot oipeꞌa i marginha omohenda line-height: inherit, avei.
  • <textarea>s oñemoambue ikatu hag̃uáicha oñembotuichave verticalmente añoite pe tamaño horizontal heta jey “oity” página ñemohenda.
  • <button>s ha <input>umi elemento botón rehegua oguereko cursor: pointerjave :not(:disabled).

Ko’ã cambio, ha hetave mba’e, ojehechauka ko’ápe.

Tembiecharã leyenda rehegua

100 rehegua

Umi puntero oĩva umi botón rehe

Reboot oguereko peteĩ mba’e’apopyrã role="button"oñemoambue hag̃ua mboajepyréva ñepyrũrãme g̃uarã pointer. Emoĩ ko atributo umi elemento rehe oipytyvõ hag̃ua ohechauka hag̃ua umi elemento haꞌeha interactivo. Ko rol natekotevêi umi <button>elemento-pe guarã, ohupytyva'ekue cursoriñambue ijehegui.

Botón elemento ndaha’éiva botón rehegua 
<span role="button" tabindex="0">Non-button element button</span>

Misc elemento-kuéra rehegua

Oñe'ẽ chupe

Pe <address>elemento oñembopyahu oñembopyahu hag̃ua kundahára ñepyrũrã font-styleguive italic. avei ko’ágã ojehereda, ha oñembojoapy. s ha’e oñepresenta haguã marandu oñemboja haguã ypy hi’aguĩvévape g̃uarã (térã peteĩ tembiapo retepy tuichakue). Oñongatu formato omohu’ãvo línea .normalline-heightmargin-bottom: 1rem<address><br>

Twitter, Inc.
1355 Mercado St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890. Ojekuaa avei ko'ã mba'e ojehúva ko'ã árape
Héra
tee [email protected]

Bloqueo rehegua

Pe ñepyrũrã marginblockquotes-pe haꞌehína 1em 40px, upévare ñamoĩjey upéva 0 0 1rempeteĩ mbaꞌe ojoajuvévape g̃uarã ambue elemento ndive.

Peteĩ cita ojekuaáva, oguerekóva peteĩ elemento blockquote-pe.

Alguien famoso en Título de Fuente

Umi elemento en línea rehegua

Pe <abbr>elemento ohupyty estilo básico ojedestaca hagua texto párrafo apytépe.

Nulla attr vitae elit libero, peteĩ pharetra augue.

Mombyky

Pe por defecto cursorresumen rehegua haꞌehína text, upévare ñamoĩjey upéva to pointer-pe ñambohasa hag̃ua elemento ikatuha oñembojoaju hendive ojepysóramo hese.

Algunos detalles rehegua

Hetave marandu umi detalle rehegua.

Hetave detalle jepe

Koʼápe oĩve jepe umi detálle oñeʼẽva umi detállere.

[hidden]Atributo HTML5 rehegua

HTML5 omoĩ peteĩ atributo global pyahu hérava[hidden] , oñembohekoháicha display: nonepor defecto. Ojegueru peteĩ temiandu PureCSS -gui , romoporãve ko por defecto rojapóvo [hidden] { display: none !important; }roipytyvõ hag̃ua ani displayhag̃ua oñemboyke accidentalmente. Ndojeguerohorýiramo jepe [hidden]nativamente IE10 rupive, pe declaración explícita ñande CSS-pe ojere upe problema rehe.

<input type="text" hidden>
jQuery ndojoguerahái

[hidden]ndojoguerahái jQuery $(...).hide()ha umi $(...).show()método ndive. Upévare, ko’áĝa ndoro’endosái especialmente [hidden]ambue técnica ári ojegestiona haĝua umi displayde elementos.

Oñembohasa hag̃ua peteĩ elemento jehechauka añoite, heꞌiséva i displaynoñemoambuéi ha pe elemento ikatu gueteri oityvyro kuatia osyryha, eipuru mboꞌepy .invisiblehendaguépe .