Source

Rindizni

Rindizni, një koleksion ndryshimesh CSS specifike për elementë në një skedar të vetëm, nis Bootstrap për të ofruar një bazë elegante, të qëndrueshme dhe të thjeshtë për t'u ndërtuar mbi të.

Qasje

Rindezja bazohet në Normalize, duke siguruar shumë elementë HTML me stile disi të mendimit duke përdorur vetëm përzgjedhës elementësh. Stilimi shtesë bëhet vetëm me klasa. Për shembull, ne rinisim disa <table>stile për një bazë më të thjeshtë dhe më vonë ofrojmë .table, .table-bordered, dhe më shumë.

Këtu janë udhëzimet dhe arsyet tona për të zgjedhur atë që të anashkaloni në Reboot:

Përditësoni disa vlera të paracaktuara të shfletuesit për të përdorur rems në vend të ems për ndarje të shkallëzueshme të komponentëve.
Shmangni margin-top. Kufijtë vertikale mund të shemben, duke dhënë rezultate të papritura. Megjithatë, më e rëndësishmja, një drejtim i vetëm i marginështë një model mendor më i thjeshtë.
Për shkallëzim më të lehtë në përmasat e pajisjes, elementët e bllokut duhet të përdorin rems për margins.
Mbani fontnë minimum deklaratat e pronave të lidhura, duke i përdorur inheritsa herë që është e mundur.

Parazgjedhjet e faqes

Elementet <html>dhe <body>janë përditësuar për të ofruar parazgjedhje më të mira në të gjithë faqen. Më specifikisht:

Është box-sizingvendosur globalisht në çdo element—duke përfshirë *::beforedhe *::after, në border-box. Kjo siguron që gjerësia e deklaruar e elementit të mos tejkalohet kurrë për shkak të mbushjes ose kufirit.
Asnjë bazë nuk font-sizeështë deklaruar në <html>, por 16pxsupozohet (parazgjedhja e shfletuesit). font-size: 1remzbatohet në <body>për shkallëzim të lehtë të përgjegjshëm të tipit nëpërmjet pyetjeve të medias duke respektuar preferencat e përdoruesve dhe duke siguruar një qasje më të aksesueshme.
Gjithashtu <body>vendos një globale font-family, line-heightdhe text-align. Kjo trashëgohet më vonë nga disa elementë të formës për të parandaluar mospërputhjet e shkronjave.
Për siguri, <body>ka një të deklaruar background-color, duke mos u vendosur në #fff.

Stafi i shkronjave origjinale

Shkronjat e parazgjedhura të uebit (Helvetica Neue, Helvetica dhe Arial) janë hequr në Bootstrap 4 dhe janë zëvendësuar me një "stivë të shkronjave vendase" për interpretimin optimal të tekstit në çdo pajisje dhe OS. Lexoni më shumë rreth grupeve të shkronjave vendase në këtë artikull të Revistës Smashing .

$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;

Kjo font-familyaplikohet <body>dhe trashëgohet automatikisht globalisht në të gjithë Bootstrap. Për të ndërruar versionin global font-family, përditësoni $font-family-basedhe rikompiloni Bootstrap.

Titujt dhe paragrafët

Të gjithë elementët e titullit - p.sh. - <h1>dhe <p>janë rivendosur për t'u margin-tophequr. Titujt janë margin-bottom: .5remshtuar dhe paragrafët margin-bottom: 1rempër ndarje të lehtë.

Drejtimi	Shembull
`<h1></h1>`	h1. Titulli i bootstrap
`<h2></h2>`	h2. Titulli i bootstrap
`<h3></h3>`	h3. Titulli i bootstrap
`<h4></h4>`	h4. Titulli i bootstrap
`<h5></h5>`	h5. Titulli i bootstrap
`<h6></h6>`	h6. Titulli i bootstrap

Listat

Të gjitha listat— <ul>, <ol>, dhe <dl>— janë margin-tophequr dhe një margin-bottom: 1rem. Listat e mbivendosura nuk kanë margin-bottom.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Lehtësimi në pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Enean sit amet erat nunc
Eget porttitor lorem

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Lehtësimi në pretium nisl aliquet
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
Enean sit amet erat nunc
Eget porttitor lorem

Për stilim më të thjeshtë, hierarki të qartë dhe ndarje më të mirë, listat e përshkrimeve kanë përditësuar margins. <dd>s rivendoset margin-leftnë 0dhe shtoni margin-bottom: .5rem. <dt>s janë të guximshme .

Listat e përshkrimeve: Një listë përshkrimi është e përkryer për përcaktimin e termave.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem.; Donec id elit non mi porta gravida at eget metus.
Malesuada porta: Etiam porta sem malesuada magna mollis euismod.

Tekst i paraformatuar

Elementi <pre>rivendoset për të hequr margin-topdhe për të përdorur remnjësitë për të margin-bottom.

.shembull-element {
  marzh-fundi: 1rem;
}

Tabelat

Tabelat janë përshtatur paksa për të stiluar <caption>s, kolapsin kufijtë dhe sigurojnë konsistencë në të text-aligngjithë. Ndryshime shtesë për kufijtë, mbushjet dhe më shumë vijnë me klasën.table .

Kjo është një tabelë shembull, dhe ky është titulli i saj për të përshkruar përmbajtjen.
Titulli i tabelës	Titulli i tabelës	Titulli i tabelës	Titulli i tabelës
Qelizë tavoline	Qelizë tavoline	Qelizë tavoline	Qelizë tavoline
Qelizë tavoline	Qelizë tavoline	Qelizë tavoline	Qelizë tavoline
Qelizë tavoline	Qelizë tavoline	Qelizë tavoline	Qelizë tavoline

Format

Elementë të ndryshëm të formës janë rindezur për stile bazë më të thjeshta. Këtu janë disa nga ndryshimet më të dukshme:

<fieldset>Nuk kanë kufij, mbushje ose diferencë, kështu që ato mund të përdoren lehtësisht si mbështjellës për hyrje individuale ose grupe hyrjesh.
<legend>s, si grupet e fushave, gjithashtu janë ristrukturuar për t'u shfaqur si një lloj lloji.
<label>s janë caktuar për display: inline-blocktë lejuar marginqë të aplikohen.
<input>s, <select>s, <textarea>s dhe <button>s trajtohen kryesisht nga Normalize, por Reboot i heq ato margindhe vendos line-height: inheritgjithashtu.
<textarea>s janë modifikuar që të mund të ndryshohen vetëm vertikalisht pasi ndryshimi i madhësisë horizontale shpesh "prish" paraqitjen e faqes.
<button>s dhe <input>elementet e butonit kanë cursor: pointerkur :not(:disabled).

Këto ndryshime, dhe më shumë, janë demonstruar më poshtë.

Elemente të ndryshme

Adresë

Elementi <address>përditësohet për të rivendosur parazgjedhjen e shfletuesit font-stylenga italicnë normal. line-heighttani është trashëguar dhe margin-bottom: 1remështë shtuar. <address>s janë për paraqitjen e informacionit të kontaktit për paraardhësin më të afërt (ose një pjesë të tërë të punës). Ruani formatimin duke i përfunduar rreshtat me <br>.

Twitter, Inc.
1355 Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890

Emri i plotë
[email protected]

Bllokquote

Parazgjedhja marginnë kuotat e bllokut është 1em 40px, kështu që ne e rivendosim atë në 0 0 1rempër diçka më të qëndrueshme me elementët e tjerë.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Numri i plotë posuere erat a ante.

Dikush i famshëm në Titullin e Burimit

Elementet inline

Elementi <abbr>merr një stil bazë për ta bërë atë të dallohet mes tekstit të paragrafit.

Nulla attr vitae elit libero, një pharetra augue.

Përmbledhje

Përmbledhja e parazgjedhur cursorështë text, kështu që ne e rivendosim atë në pointerpër të përcjellë se elementi mund të ndërveprohet duke klikuar mbi të.

Disa detaje

Më shumë informacion rreth detajeve.

Edhe më shumë detaje

Këtu janë edhe më shumë detaje rreth detajeve.

`[hidden]`atribut HTML5

HTML5 shton një atribut të ri global të quajtur[hidden] , i cili është stiluar si display: noneparazgjedhje. Duke huazuar një ide nga PureCSS , ne përmirësojmë këtë parazgjedhje duke bërë [hidden] { display: none !important; }për të ndihmuar në parandalimin e displayanashkalimit të tij aksidental. Ndonëse [hidden]nuk mbështetet në mënyrë origjinale nga IE10, deklarata e qartë në CSS-në tonë e zgjidh këtë problem.

<input type="text" hidden>

papajtueshmëri jQuery

[hidden]nuk është në përputhje me jQuery $(...).hide()dhe $(...).show()metodat. Prandaj, ne aktualisht nuk i miratojmë veçanërisht [hidden]teknikat e tjera për menaxhimin displaye elementeve.

Thjesht për të ndryshuar dukshmërinë e një elementi, që do të thotë se displayai nuk është modifikuar dhe elementi mund të ndikojë ende në rrjedhën e dokumentit, përdorni klasën në vend të.invisible kësaj.