Ñ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
rem
s s rangueem
espaciado 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 demargin
haʼe peteĩ modelo mental isensíllova. - Ojejapo hag̃ua escala ndahasýiva tembipuru tuichakue rupi, umi elemento bloque rehegua oipuruvaꞌerã
rem
smargin
s-pe g̃uarã. - Eñongatu declaración umi
font
propiedad ojoajúva rehegua mínimo-pe, eipuruinherit
ikatu jave.
Umi mbaꞌekuaarã CSS rehegua
Oñemoĩve v5.1.1-pe
v5.1.1 rupive, romohenda ore @import
s oñeikotevẽva opaite ore CSS ryru rupi (oikehápe bootstrap.css
, bootstrap-reboot.css
, ha bootstrap-grid.css
oike hag̃ua _root.scss
. Kóva omoĩve :root
CSS mbaꞌekuaarã nivel opaite ryrúpe, tahaꞌe haꞌeva mboýpa ojepuru upe ryrúpe. Ipahápe Bootstrap 5 osegíta ehecha hetave CSS mba’ekuaarã oñembojoapýva ára ohasávape.
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-sizing
oñemohenda globalmente opaite elemento rehe —oikehápe*::before
ha*::after
, toborder-box
. Péva oasegura araka'eve ndojehasái elemento ancho ojedeclaráva acolchado térã borde rupive.- Ndaipóri base
font-size
ojedeclaráva<html>
, ha16px
katu oñeimo’ã (kundahára por defecto).font-size: 1rem
ojeporu 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. Ko kundahára ñepyrũrã ikatu oñemboyke oñemoambuévo pe$font-size-root
mba’e’oka.
- Ndaipóri base
- Pe
<body>
avei omoĩ peteĩ globalfont-family
,font-weight
,line-height
, hacolor
. Kóva ojehereda upe rire algunos elementos de forma rupive ani hag̃ua umi inconsistencia letra rehegua. - Seguridad-pe guarã, pe
<body>
oreko peteĩ declaradobackground-color
, incumplimiento a#fff
.
Pila de fuente nativa rehegua
Bootstrap oipuru peteĩ “pila de fuente nativa” térã “pila de fuente sistema” ojejapo porãve hag̃ua jehaipyre opaite tembipuru ha SO-pe. Koꞌã fuente sistema rehegua ojejapo específicamente oguerekóva en cuenta umi dispositivo koꞌag̃agua, oñemyatyrõva renderización pantalla-pe, soporte fuente variable rehegua ha hetave mbaꞌe. Emoñe’ẽve umi pila fuente nativa rehegua ko Smashing Magazine artículo -pe .
$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;
Eñamindu’u pe pila 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 color
estilo CSS rehe.
Kóva font-family
ojeporu pe <body>
ha ojehereda ijeheguiete globalmente Bootstrap pukukue javeve. Oñemoambue hag̃ua global font-family
, embopyahu $font-family-base
ha embojoaju jey Bootstrap.
Umi mbaꞌekuaarã CSS rehegua
Bootstrap 5 okakuaavévo ohóvo, hetave ha hetave estilo oñemopuꞌavaꞌerã CSS mbaꞌekuaarã reheve peteĩ tape ramo oñemeꞌe hag̃ua hetave jeporupyre tiempo real-pe tekotevẽꞌỹre akóinte oñembojoaju jey Sass. Ore enfoque haꞌehína jagueraha ñande fuente Sass variable ha ñamoambue CSS variable-pe. Péicha, ndereiporúiramo jepe CSS mbaꞌekuaarã, reguereko gueteri opaite Sass puꞌae. Péva oñemotenonde gueteri ha ohasáta tiempo oñemboguata haguã plenamente.
Techapyrã, ehecha ko’ã CSS mba’ekuaarã umi estilo :root
común -pe g̃uarã:<body>
@if $font-size-root != null {
--#{$variable-prefix}root-font-size: #{$font-size-root};
}
--#{$variable-prefix}body-font-family: #{$font-family-base};
--#{$variable-prefix}body-font-size: #{$font-size-base};
--#{$variable-prefix}body-font-weight: #{$font-weight-base};
--#{$variable-prefix}body-line-height: #{$line-height-base};
--#{$variable-prefix}body-color: #{$body-color};
@if $body-text-align != null {
--#{$variable-prefix}body-text-align: #{$body-text-align};
}
--#{$variable-prefix}body-bg: #{$body-bg};
En práctica, umi variable upéi ojeporu Reboot-pe péicha:
body {
margin: 0; // 1
font-family: var(--#{$variable-prefix}body-font-family);
@include font-size(var(--#{$variable-prefix}body-font-size));
font-weight: var(--#{$variable-prefix}body-font-weight);
line-height: var(--#{$variable-prefix}body-line-height);
color: var(--#{$variable-prefix}body-color);
text-align: var(--#{$variable-prefix}body-text-align);
background-color: var(--#{$variable-prefix}body-bg); // 2
-webkit-text-size-adjust: 100%; // 3
-webkit-tap-highlight-color: rgba($black, 0); // 4
}
Ohejáva ndéve rejapo hag̃ua personalización tiempo real-pe ndegustáramo jepe:
<body style="--bs-body-color: #333;">
<!-- ... -->
</body>
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: .5rem
ha párrafo margin-bottom: 1rem
ndahasý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-top
ha peteĩ margin-bottom: 1rem
. Umi lista anidado ndorekói margin-bottom
. Avei romoĩjey umi elemento padding-left
on <ul>
ha .<ol>
- 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
- Ko'ápe oime peteî lista ordenada
- Mbovymi mba’e lista rehegua reheve
- Oreko peteĩchagua jehecha general
- 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 margin
s oñembopyahúva. <dd>
s emoĩjey margin-left
ha 0
emoĩ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ã.
Código en línea rehegua
Embojere umi fragmento código rehegua línea ryepýpe <code>
. Ejesareko ekañy hag̃ua umi paréntesis ángulo HTML-gui.
<section>
oñembojeguava’erã línea-peguáicha.
For example, <code><section></code> should be wrapped as inline.
Umi bloque código rehegua
Eipuru <pre>
s heta línea código rehegua. Peteĩ jey, eñangareko ekañy hag̃ua oimeraẽva corchete ángulo rehegua oĩva código-pe ojejapo porã hag̃ua. Pe <pre>
elemento oñembopyahu ojeipeꞌa hag̃ua iha margin-top
ha ojepuru rem
hag̃ua unidadkuéra 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 rehegua
Ohechauka hag̃ua umi mbaꞌekuaarã ojepuru <var>
etiqueta.
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>
Pojoapy puruhára rehegua
Eipuru pe <kbd>
ehechauka hag̃ua jeike ojeike jepi teclado rupive.
Oñemohenda hag̃ua ñemboheko, eity 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 rehegua
Ohechauka hag̃ua muestra osëva peteĩ programa-gui eipuru <samp>
etiqueta.
<samp>This text is meant to be treated as sample output from a computer program.</samp>
Tabla-kuéra rehegua
Umi cuadro oñemboheko michĩmi estilo <caption>
s-pe, oñemboty umi frontera ha ojeasegura peteĩchaite text-align
opaite jave. Umi ñemoambue adicional umi frontera, acolchado ha hetave mba’épe g̃uarã oúva clase .table
ndive .
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ñemohendadisplay: inline-block
to ohejamargin
haguã ojeporu.<input>
s,<select>
s,<textarea>
s, ha<button>
s oñembohovakevéva Normalize rupive, ha katu Reboot oipeꞌa imargin
ha omohendaline-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 oguerekocursor: pointer
jave:not(:disabled)
.
Ko’ã cambio, ha hetave mba’e, ojehechauka ko’ápe.
Ára & color jeike pytyvõ
Eñongatu ne akãme umi ára jeike ndojeguerohorýipaite opaite kundahára, ha’éva Safari.
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 cursor
iñambue ijehegui.
<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-style
guive 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 .normal
line-height
margin-bottom: 1rem
<address>
<br>
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ã margin
blockquotes-pe haꞌehína 1em 40px
, upévare ñamoĩjey upéva 0 0 1rem
peteĩ 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 haguã texto párrafo apytépe.
Mombyky
Pe por defecto cursor
resumen 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: none
por defecto. Ojegueru peteĩ temiandu PureCSS -gui , romoporãve ko por defecto rojapóvo [hidden] { display: none !important; }
roipytyvõ hag̃ua ani display
hag̃ua oñemboyke accidentalmente.
<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 display
de elementos.
Oñembohasa hag̃ua peteĩ elemento jehechauka añoite, heꞌiséva i display
noñemoambuéi ha pe elemento ikatu gueteri oityvyro kuatia osyryha, eipuru mboꞌepy .invisible
hendaguépe .