Source

Ath-thòisich

Reboot, cruinneachadh de dh’ atharrachaidhean CSS a tha sònraichte do eileamaid ann an aon fhaidhle, kickstart Bootstrap gus bun-loidhne eireachdail, cunbhalach agus sìmplidh a thoirt seachad airson togail air.

Dòigh-obrach

Bidh Reboot a’ togail air Normalize, a’ toirt seachad mòran eileamaidean HTML le stoidhlichean beagan beachdail a’ cleachdadh dìreach taghadairean eileamaid. Chan eil stoidhle a bharrachd air a dhèanamh ach le clasaichean. Mar eisimpleir, bidh sinn ag ath-thòiseachadh cuid de <table>stoidhlichean airson bun-loidhne nas sìmplidh agus nas fhaide air adhart bheir sinn seachad .table, .table-bordered, agus barrachd.

Seo an stiùireadh agus na h-adhbharan againn airson taghadh dè a bu chòir a dhol thairis air ann an Reboot:

  • Ùraich cuid de luachan bunaiteach brabhsair gus s a chleachdadh reman àite ems airson farsaingeachd phàirtean so-ruigsinneach.
  • Seachain margin-top. Faodaidh oirean dìreach tuiteam, a 'toirt seachad toraidhean ris nach robh dùil. Nas cudromaiche ge-tà, tha aon stiùireadh marginna mhodail inntinn nas sìmplidh.
  • Airson sgèileadh nas fhasa thar meudan innealan, bu chòir eileamaidean bloca s a chleachdadh remairson margins.
  • Cùm dearbhaidhean mu fontthogalaichean co-cheangailte ris a’ char as lugha, a’ cleachdadh inheritfar a bheil sin comasach.

Ro-shealladh duilleag

Tha na h-eileamaidean <html>agus <body>na h-eileamaidean air an ùrachadh gus bunaitean nas fheàrr a thoirt seachad air feadh na duilleige. Nas mionaidiche:

  • Tha box-sizingan suidheachadh air feadh na cruinne air gach eileamaid - a’ toirt a-steach *::beforeagus *::after, gu border-box. Bidh seo a’ dèanamh cinnteach nach tèid an leud ainmichte de eileamaid a-riamh thairis air mar thoradh air pleadhag no crìoch.
    • Chan eil bunait sam bith font-sizeair ainmeachadh air an <html>, ach 16pxthathar a 'gabhail ris (bunaiteach a' bhrabhsair). font-size: 1remair a chuir an sàs <body>airson sgèileadh seòrsa freagairteach furasta tro cheistean meadhanan fhad ‘s a tha e a’ toirt urram do roghainnean luchd-cleachdaidh agus a ’dèanamh cinnteach à dòigh-obrach nas ruigsinneach.
  • Tha <body>seo cuideachd a' suidheachadh cruinne font-family, line-height, agus text-align. Tha seo air a shealbhachadh nas fhaide air adhart le cuid de dh’ eileamaidean cruth gus casg a chuir air neo-chunbhalachd cruth-clò.
  • Airson sàbhailteachd, <body>tha suaicheantas dearbhte aig an neach-cleachdaidh background-color, a’ dol gu #fff.

Stack font dùthchasach

Chaidh na clòidean lìn àbhaisteach (Helvetica Neue, Helvetica, agus Arial) a leigeil sìos ann am Bootstrap 4 agus chaidh “stack cruth-clò dùthchasach” a chuir nan àite airson an teacsa as fheàrr a thoirt seachad air gach inneal agus OS. Leugh tuilleadh mu chruachan cruth-clò dùthchasach san artaigil Smashing Magazine seo .

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

Tha seo font-familyair a chuir an sàs <body>agus air a shealbhachadh gu fèin-ghluasadach air feadh na cruinne air feadh Bootstrap. Gus an cruinne atharrachadh font-family, ùrachadh $font-family-baseagus ath-chruinneachadh Bootstrap.

Cinn agus paragrafan

Tha na h-eileamaidean cinn uile - me, <h1>-agus <p>gan ath-shuidheachadh gus an toirt air margin-topfalbh. Tha cinn air margin-bottom: .5remcur ris agus paragrafan margin-bottom: 1remairson farsaingeachd furasta.

Ceann-cinnidh eisimpleir

<h1></h1>

 h1. Ceann-uidhe Bootstrap

<h2></h2>

 h2. Ceann-uidhe Bootstrap

<h3></h3>

 h3. Ceann-uidhe Bootstrap

<h4></h4>

 h4. Ceann-uidhe Bootstrap

<h5></h5>

 h5. Ceann-uidhe Bootstrap

<h6></h6>

 h6. Ceann-uidhe Bootstrap

Liostaichean

Tha na liostaichean uile - <ul>, <ol>, agus <dl>- air an margin-toptoirt air falbh agus margin-bottom: 1rem. Chan eil liostaichean neadachaidh margin-bottom.

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem aig massa
  • Facilisis ann am pretium nisl aliquet
  • Gun a bhith a 'dol a-mach à bith
    • Phasellus iaculis saor an asgaidh
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat aig
  • Faucibus porta lacus fringilla no
  • Aenean sit amet erat nunc
  • Luchdaich a-nuas porttitor lorem
  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem aig massa
  4. Facilisis ann am pretium nisl aliquet
  5. Gun a bhith a 'dol a-mach à bith
  6. Faucibus porta lacus fringilla no
  7. Aenean sit amet erat nunc
  8. Luchdaich a-nuas porttitor lorem

Airson stoidhle nas sìmplidhe, rangachd shoilleir, agus farsaingeachd nas fheàrr, tha liostaichean tuairisgeul air margins. <dd>s ath-shuidheachadh margin-leftgu 0agus cuir ris margin-bottom: .5rem. <dt>s dàna .

Liostaichean tuairisgeul
Tha liosta tuairisgeul foirfe airson teirmean a mhìneachadh.
Eusmod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem.
Donec id elit non mi porta gravida agus eget metus.
Port-adhair Malesuada
Etiam porta sem malesuada magna mollis euismod.

Teacs ro-chruthaichte

Tha an <pre>eileamaid air ath-shuidheachadh gus na h-aonadan aige a thoirt air falbh margin-topagus remaonadan a chleachdadh airson a faidhle margin-bottom.

.example-element {
  iomall-bhonn: 1rem;
}

Clàir

Tha bùird air an atharrachadh beagan a rèir stoidhle <caption>s, tuiteam crìochan, agus dèanamh cinnteach gu bheil iad cunbhalach text-alignair feadh. Bidh atharrachaidhean a bharrachd airson crìochan, pleadhag, agus barrachd a’ tighinn leis a’ .tablechlas .

Is e seo clàr eisimpleir, agus seo an tiotal aige airson cunntas a thoirt air na th’ ann.
Ceann clàr Ceann clàr Ceann clàr Ceann clàr
Clàr cealla Clàr cealla Clàr cealla Clàr cealla
Clàr cealla Clàr cealla Clàr cealla Clàr cealla
Clàr cealla Clàr cealla Clàr cealla Clàr cealla

Foirmean

Chaidh diofar eileamaidean cruth ath-thòiseachadh airson stoidhlichean bunaiteach nas sìmplidh. Seo cuid de na h-atharrachaidhean as ainmeil:

  • <fieldset>s chan eil crìochan, pleadhag no iomall aca gus am bi iad furasta an cleachdadh mar phasganan airson cuir a-steach fa leth no buidhnean de chuir a-steach.
  • <legend>s, mar raointean-raoin, cuideachd air an ath-sgrìobhadh gus a bhith air an taisbeanadh mar cheann de sheòrsa.
  • <label>s air an suidheachadh gus display: inline-blockan tèid marginan cur an sàs.
  • <input>Bidh Normalize sa mhòr-chuid a’ dèiligeadh ri s, <select>s, <textarea>s, agus <button>s, ach bidh Reboot a’ toirt air falbh an cuid marginagus na seataichean line-height: inherit, cuideachd.
  • <textarea>s air an atharrachadh gus nach gabh ath-mheudachadh ach gu dìreach leis gu bheil ath-mheudachadh còmhnard gu tric a’ “briseadh” cruth na duilleige.

Tha na h-atharrachaidhean sin, agus barrachd, air an taisbeanadh gu h-ìosal.

Uirsgeul eisimpleir

100

Eileamaidean measgaichte

Seòladh

Tha an <address>eileamaid air ùrachadh gus am brabhsair bunaiteach ath-shuidheachadh font-stylebho italicgu normal. line-heighttha e nis mar an ceudna air a sealbhachadh, agus margin-bottom: 1remair a chur ris. <address>s airson fiosrachadh conaltraidh a thaisbeanadh don sinnsear as fhaisge (no buidheann obrach gu lèir). Glèidh cruth le bhith a’ crìochnachadh loidhnichean le <br>.

Twitter, Inc.
1355 Sràid a' Mhargaidh, Suite 900
San Francisco, CA 94103
P: (123) 456-7890
Ainm slàn
[email protected]

Blockquote

Is e an rud bunaiteach marginair blockquotes 1em 40px, agus mar sin bidh sinn ag ath-shuidheachadh sin 0 0 1remairson rudeigin nas cunbhalaiche ri eileamaidean eile.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Tha an t-iomlan posuere erat ante.

Cuideigin ainmeil ann an Source Title

Feartan in-loidhne

Bidh an <abbr>eileamaid a’ faighinn stoidhle bunaiteach gus toirt air seasamh a-mach am measg teacsa paragraf.

Nulla attr vitae elit libero, a pharetra augue.

Geàrr-chunntas

cursorIs e an geàrr-chunntas bunaiteach text, agus mar sin bidh sinn ag ath-shuidheachadh sin pointergus innse gum faodar eadar-obrachadh leis an eileamaid le bhith a’ cliogadh air.

Beagan mion-fhiosrachaidh

Tuilleadh fiosrachaidh mun fhiosrachadh.

Fiù 's barrachd mion-fhiosrachaidh

Seo eadhon barrachd fiosrachaidh mun fhiosrachadh.

[hidden]Feartan HTML5

Tha HTML5 a’ cur feart cruinne ùr ris an canar[hidden] , a tha air a chomharrachadh mar display: nonegu bunaiteach. Le bhith a’ faighinn beachd air iasad bho PureCSS , leasaichidh sinn air a’ bhunait seo le bhith a’ dèanamh [hidden] { display: none !important; }gus cuideachadh le casg a displaychuir air gun fhiosta fhaighinn. Ged [hidden]nach eil IE10 a’ faighinn taic bho thùs, tha an dearbhadh soilleir san CSS againn a’ faighinn timcheall air an duilgheadas sin.

<input type="text" hidden>
jQuery neo-fhreagarrachd

[hidden]$(...).hide()chan eil e co-chòrdail ri modhan agus modhan jQuery $(...).show(). Mar sin, chan eil sinn gu sònraichte a’ toirt taic [hidden]do dhòighean eile airson riaghladh displaynan eileamaidean.

Gus dìreach faicsinneachd eileamaid a thogail, a’ ciallachadh displaynach eil e air atharrachadh agus gum faod an eileamaid fhathast buaidh a thoirt air sruthadh na sgrìobhainn, cleachd an .invisibleclas na àite.