Ejupi contenido principal-pe Eike docs jeguatahápe
Check
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.

Ko páhinape

Ñemboja

Reboot oñemopuꞌa Normalize rehe, omeꞌe heta HTML elemento estilokuéra oguerekóva peteĩ hemiandu’imi 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.

Umi mbaꞌekuaarã CSS rehegua

Oñemoĩve v5.2.0-pe

v5.1.1 rupive, romohenda ore @imports reikotevẽ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 :rootumi mbaꞌekuaarã CSS nivel rehegua opaite paquete-pe, tahaꞌe haꞌeháicha mboýpa ojepuru upe paquete-pe. Ipahápe Bootstrap 5 ohechasevéta hetave CSS mbaꞌekuaarã oñembojoapýva ára ohasávape, ikatu hag̃uáicha omeꞌe hetave jeporupyre tiempo real-pe tekotevẽꞌỹre akóinte oñembojoaju jey Sass. Ñande 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 :rootcomún -pe g̃uarã:<body>

  @if $font-size-root != null {
    --#{$prefix}root-font-size: #{$font-size-root};
  }
  --#{$prefix}body-font-family: #{$font-family-base};
  @include rfs($font-size-base, --#{$prefix}body-font-size);
  --#{$prefix}body-font-weight: #{$font-weight-base};
  --#{$prefix}body-line-height: #{$line-height-base};
  --#{$prefix}body-color: #{$body-color};
  @if $body-text-align != null {
    --#{$prefix}body-text-align: #{$body-text-align};
  }
  --#{$prefix}body-bg: #{$body-bg};

En práctica, umi variable upéi ojeporu Reboot-pe péicha:

body {
  margin: 0; // 1
  font-family: var(--#{$prefix}body-font-family);
  @include font-size(var(--#{$prefix}body-font-size));
  font-weight: var(--#{$prefix}body-font-weight);
  line-height: var(--#{$prefix}body-line-height);
  color: var(--#{$prefix}body-color);
  text-align: var(--#{$prefix}body-text-align);
  background-color: var(--#{$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>

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. Ko kundahára ñepyrũrã ikatu oñemboyke oñemoambuévo pe $font-size-rootmba’e’oka.
  • Pe <body>avei omoĩ peteĩ global font-family, font-weight, line-height, ha color. 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

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,
  // older macOS and iOS
  "Helvetica Neue"
  // Linux
  "Noto Sans",
  "Liberation Sans",
  // Basic web fallback
  Arial,
  // 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

Regla horizontal rehegua

Pe <hr>elemento oñesimplifikáma. Ojoguaite kundahára ñepyrũrãme, <hr>s oñemboheko vía rupive border-top, oguereko peteĩ ñepyrũrã opacity: .25, ha ohupyty ijeheguiete ivía border-color, coloroikehápe araka’épa coloroñemohenda túva rupive. Ikatu oñemoambue umi utilidad jehaipyre, border ha opacidad reheve.

html rehegua 
<hr>

<div class="text-success">
  <hr>
</div>

<hr class="border border-danger border-2 opacity-50">
<hr class="border border-primary border-3 opacity-75">

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. Avei romoĩjey umi elemento padding-lefton <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
  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ã.

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.

Techapyrã, <section>ojejokuava’erã en línea ramo.
html rehegua 
For example, <code>&lt;section&gt;</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-topha ojepuru remhag̃ua unidadkuéra margin-bottom.

<p>Sample text here...</p>
<p>And another line of sample text here...</p>
html rehegua 
<pre><code>&lt;p&gt;Sample text here...&lt;/p&gt;
&lt;p&gt;And another line of sample text here...&lt;/p&gt;
</code></pre>

Variables rehegua

Ohechauka hag̃ua umi mbaꞌekuaarã ojepuru <var>etiqueta.

y = m x + b rehegua
html rehegua 
<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ñemoambue hag̃ua kundaha, ehai cdhapykuéri kundaha réra.
Oñemohenda hag̃ua ñemboheko, eity ctrl + ,
html rehegua 
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.

Ko jehaipyre ojeꞌe ojeguereko hag̃ua muestra osëvaicha peteĩ programa informático-gui.
html rehegua 
<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-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
html rehegua 
<table>
  <caption>
    This is an example table, and this is its caption to describe the contents.
  </caption>
  <thead>
    <tr>
      <th>Table heading</th>
      <th>Table heading</th>
      <th>Table heading</th>
      <th>Table heading</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
    <tr>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
    <tr>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
  </tbody>
</table>

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

Á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ĩ ñembotuichave 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
html 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.

Pe elemento HTML ñemombykyrã.

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.

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