Agwedd

Er bod y tudalennau cychwyn arni yn rhoi taith ragarweiniol o'r prosiect a'r hyn y mae'n ei gynnig, mae'r ddogfen hon yn canolbwyntio ar pam rydyn ni'n gwneud y pethau rydyn ni'n eu gwneud yn Bootstrap. Mae'n esbonio ein hathroniaeth i adeiladu ar y we fel y gall eraill ddysgu oddi wrthym, cyfrannu gyda ni, a'n helpu i wella.

Gweld rhywbeth nad yw'n swnio'n iawn, neu efallai y gellid ei wneud yn well? Agorwch fater - byddem wrth ein bodd yn ei drafod gyda chi.

Crynodeb

Byddwn yn plymio i mewn i bob un o'r rhain yn fwy trwy gydol, ond ar lefel uchel, dyma sy'n llywio ein hymagwedd.

• Dylai cydrannau fod yn ymatebol ac yn symudol yn gyntaf
• Dylid adeiladu cydrannau gyda dosbarth sylfaen a'u hymestyn trwy ddosbarthiadau addaswyr
• Dylai cyflyrau cydran ufuddhau i raddfa mynegai z gyffredin
• Lle bynnag y bo modd, mae'n well gennych weithrediad HTML a CSS dros JavaScript
• Lle bynnag y bo modd, defnyddiwch gyfleustodau dros arddulliau arferol
• Lle bynnag y bo modd, osgoi gorfodi gofynion HTML llym (detholwyr plant)

Ymatebol

Mae arddulliau ymatebol Bootstrap wedi'u hadeiladu i fod yn ymatebol, dull y cyfeirir ato'n aml fel symudol-yn-gyntaf . Rydym yn defnyddio'r term hwn yn ein dogfennau ac yn cytuno i raddau helaeth ag ef, ond ar adegau gall fod yn rhy eang. Er nad oes rhaid i bob cydran fod yn gwbl ymatebol yn Bootstrap, mae'r dull ymatebol hwn yn ymwneud â lleihau gwrthwneud CSS trwy eich gwthio i ychwanegu arddulliau wrth i'r olygfan ddod yn fwy.

Ar draws Bootstrap, fe welwch hyn yn fwyaf clir yn ein hymholiadau cyfryngau. Yn y rhan fwyaf o achosion, rydym yn defnyddio min-widthymholiadau sy'n dechrau cymhwyso ar dorbwynt penodol ac yn mynd i fyny trwy'r torbwyntiau uwch. Er enghraifft, mae a yn .d-noneberthnasol min-width: 0i anfeidredd. Ar y llaw arall, mae a yn .d-md-noneberthnasol o'r torbwynt canolig ac i fyny.

Ar adegau byddwn yn defnyddio max-widthpan fydd cymhlethdod cynhenid ​​cydran yn gofyn am hynny. Ar adegau, mae'r gwrthwneud hyn yn gliriach yn swyddogaethol ac yn feddyliol i'w gweithredu a'u cefnogi nag ailysgrifennu swyddogaethau craidd o'n cydrannau. Rydym yn ymdrechu i gyfyngu ar y dull hwn, ond byddwn yn ei ddefnyddio o bryd i'w gilydd.

Dosbarthiadau

Ar wahân i'n Reboot, taflen arddull normaleiddio traws-borwr, nod ein holl arddulliau yw defnyddio dosbarthiadau fel detholwyr. Mae hyn yn golygu llywio'n glir o ddetholwyr math (ee, input[type="text"]) a dosbarthiadau rhieni allanol (ee, .parent .child) sy'n gwneud arddulliau'n rhy benodol i'w diystyru'n hawdd.

O'r herwydd, dylai cydrannau gael eu hadeiladu gyda dosbarth sylfaen sy'n gartref i barau cyffredin, na ddylid eu diystyru, o werth eiddo. Er enghraifft, .btna .btn-primary. Rydym yn defnyddio .btnar gyfer yr holl arddulliau cyffredin fel display, padding, a border-width. Yna byddwn yn defnyddio addaswyr fel .btn-primaryi ychwanegu'r lliw, lliw cefndir, lliw ffin, ac ati.

Dim ond pan fo priodweddau neu werthoedd lluosog i'w newid ar draws amrywiadau lluosog y dylid defnyddio dosbarthiadau addaswyr. Nid yw addaswyr bob amser yn angenrheidiol, felly gwnewch yn siŵr eich bod mewn gwirionedd yn arbed llinellau o god ac yn atal diystyru diangen wrth eu creu. Enghreifftiau da o addaswyr yw ein dosbarthiadau lliw thema ac amrywiadau maint.

graddfeydd z-mynegai

Mae dwy z-indexraddfa yn Bootstrap - elfennau o fewn cydran a chydrannau troshaen.

Elfennau cydran

• Mae rhai cydrannau yn Bootstrap wedi'u hadeiladu gydag elfennau sy'n gorgyffwrdd i atal ffiniau dwbl heb addasu'r bordereiddo. Er enghraifft, grwpiau botwm, grwpiau mewnbwn, a thudaleniad.
• Mae'r cydrannau hyn yn rhannu z-indexgraddfa safonol o 0drwodd 3.
• 0yn ddiofyn (cychwynnol), 1yn :hover, 2yn :active/ .active, ac 3yn :focus.
• Mae'r dull hwn yn cyd-fynd â'n disgwyliadau o ran y flaenoriaeth uchaf i ddefnyddwyr. Os yw elfen wedi'i ffocysu, mae mewn golwg ac at sylw'r defnyddiwr. Mae elfennau gweithredol yn ail uchaf oherwydd eu bod yn dynodi cyflwr. Hofran yw'r trydydd uchaf oherwydd ei fod yn dynodi bwriad y defnyddiwr, ond gellir hofran bron unrhyw beth .

Cydrannau troshaen

Mae Bootstrap yn cynnwys sawl cydran sy'n gweithredu fel troshaen o ryw fath. Mae hyn yn cynnwys, yn nhrefn uchaf z-index, cwymplenni, barrau llywio sefydlog a gludiog, moddau, cynghorion offer, a popovers. Mae gan y cydrannau hyn eu z-indexgraddfa eu hunain sy'n dechrau ar 1000. Dewiswyd y rhif cychwyn hwn yn fympwyol ac mae'n gweithredu fel byffer bach rhwng ein harddulliau ac arddulliau arferol eich prosiect.

Mae pob cydran troshaen yn cynyddu z-indexychydig ar ei werth fel bod egwyddorion UI cyffredin yn caniatáu i elfennau sy'n canolbwyntio ar y defnyddiwr neu sy'n hofran aros yn y golwg bob amser. Er enghraifft, blocio dogfennau yw moddol (ee, ni allwch gymryd unrhyw gamau eraill heblaw am weithred y modd), felly rydyn ni'n rhoi hynny uwchben ein barrau llywio.

Dysgwch fwy am hyn yn ein z-indextudalen gosodiad .

HTML a CSS dros JS

Lle bynnag y bo modd, mae'n well gennym ni ysgrifennu HTML a CSS dros JavaScript. Yn gyffredinol, mae HTML a CSS yn fwy toreithiog ac yn hygyrch i fwy o bobl o bob lefel profiad gwahanol. Mae HTML a CSS hefyd yn gyflymach yn eich porwr na JavaScript, ac yn gyffredinol mae eich porwr yn darparu llawer iawn o swyddogaethau i chi.

Yr egwyddor hon yw ein API JavaScript o'r radd flaenaf gan ddefnyddio datapriodoleddau. Nid oes angen i chi ysgrifennu bron unrhyw JavaScript i ddefnyddio ein ategion JavaScript; yn lle hynny, ysgrifennwch HTML. Darllenwch fwy am hyn yn ein tudalen trosolwg JavaScript .

Yn olaf, mae ein harddulliau yn adeiladu ar ymddygiadau sylfaenol elfennau gwe cyffredin. Lle bynnag y bo modd, mae'n well gennym ddefnyddio'r hyn y mae'r porwr yn ei ddarparu. Er enghraifft, gallwch chi roi .btndosbarth ar bron unrhyw elfen, ond nid yw'r rhan fwyaf o elfennau yn darparu unrhyw werth semantig nac ymarferoldeb porwr. Felly yn lle hynny, rydyn ni'n defnyddio <button>s ac <a>s.

Mae'r un peth yn wir am gydrannau mwy cymhleth. Er y gallem ysgrifennu ein ategyn dilysu ffurflen ein hunain i ychwanegu dosbarthiadau at elfen rhiant yn seiliedig ar gyflwr mewnbwn, a thrwy hynny ganiatáu i ni arddullio'r testun i ddweud coch, mae'n well gennym ddefnyddio'r :valid/ :invalidffug-elfennau y mae pob porwr yn eu darparu i ni.

Cyfleustodau

Mae dosbarthiadau cyfleustodau - cynorthwywyr Bootstrap 3 yn flaenorol - yn gynghreiriad pwerus wrth frwydro yn erbyn chwyddiad CSS a pherfformiad tudalennau gwael. Mae dosbarth cyfleustodau fel arfer yn baru sengl, angyfnewidiol gwerth eiddo a fynegir fel dosbarth (ee, yn .d-blockcynrychioli display: block;). Eu prif apêl yw cyflymder defnyddio wrth ysgrifennu HTML a chyfyngu ar faint o CSS personol y mae'n rhaid i chi ei ysgrifennu.

Yn benodol o ran CSS arferol, gall cyfleustodau helpu i frwydro yn erbyn cynyddu maint ffeiliau trwy leihau eich parau gwerth eiddo a ailadroddir amlaf yn ddosbarthiadau sengl. Gall hyn gael effaith ddramatig ar raddfa yn eich prosiectau.

HTML Hyblyg

Er nad yw bob amser yn bosibl, rydym yn ymdrechu i osgoi bod yn rhy ddogmatig yn ein gofynion HTML ar gyfer cydrannau. Felly, rydym yn canolbwyntio ar ddosbarthiadau sengl yn ein dewiswyr CSS ac yn ceisio osgoi dewiswyr plant uniongyrchol ( >). Mae hyn yn rhoi mwy o hyblygrwydd i chi yn eich gweithrediad ac yn helpu i gadw ein CSS yn symlach ac yn llai penodol.

Confensiynau cod

Mae Code Guide (gan gyd-grëwr Bootstrap, @mdo) yn dogfennu sut rydym yn ysgrifennu ein HTML a CSS ar draws Bootstrap. Mae'n nodi canllawiau ar gyfer fformatio cyffredinol, diffygion synnwyr cyffredin, gorchmynion eiddo a phriodoledd, a mwy.

Rydym yn defnyddio Stylelint i orfodi'r safonau hyn a mwy yn ein Sass/CSS. Mae ein cyfluniad Stylelint arferol yn ffynhonnell agored ac ar gael i eraill ei ddefnyddio a'i ymestyn.

Rydym yn defnyddio vnu-jar i orfodi HTML safonol a semantig, yn ogystal â chanfod gwallau cyffredin.