Source

Ñ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, sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;

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ñembojoapy 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.

  • Lorem ipsum dolor oguapy amet
  • Consectetur adipiscing rehegua elit
  • Entero molestie lorem en masa rehegua
  • Facilisis en aliquet nisl de pretio rehegua
  • Nulla volutpat aliquam rehegua
    • Fasello iaculis neque rehegua
    • Purus sodales ultricies rehegua
    • Vestibulo laoreet porttitor sem rehegua
    • Ac tristique libero volutpat rehegua
  • Faucibus porta lacus fringilla vel rehegua
  • Aenegua oguapy amet erat nunc
  • Eget porttitor lorem rehegua
  1. Lorem ipsum dolor oguapy amet
  2. Consectetur adipiscing rehegua elit
  3. Entero molestie lorem en masa rehegua
  4. Facilisis en aliquet nisl de pretio rehegua
  5. Nulla volutpat aliquam rehegua
  6. Faucibus porta lacus fringilla vel rehegua
  7. Aenegua oguapy amet erat nunc
  8. Eget porttitor lorem rehegua

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.
Euismod rehegua
Vestibulo id ligula porta felis euismod semper eget lacinia odio sem rehegua.
Donec id elit ndaha'éiva mi porta gravida eget metus-pe.
Malesuada porta rehegua
Etiam porta sem malesuada magna mollis euismod rehegua.

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 ñemoambue 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

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.

Lorem ipsum dolor oguapy amet, consectetur adipiscing elit. Entero posuere erat peteĩ ante.

Alguien famoso en Título de Fuente

Umi elemento en línea rehegua

Pe <abbr>elemento ohupyty estilo básico ojedestaca haguã 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 pe 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 .