Hmachhawn

Bootstrap siam leh enkawl dan tur kaihhruaina principle, strategy leh technique te zir la, chutiang chuan awlsam zawkin nangmah ngeiin i customize thei ang a, i tizau thei ang.

Getting started page-ah hian project leh a thil pekte inhriattirna tour a awm laiin, he document hian Bootstrap-a kan thil tihte kan tih chhan a tarlang a ni. Midangte’n kan hnen atanga an zir theih nan, kan thawhpui theih nan leh kan hmasawnna tur min puih theih nan web-a kan insiam dan tur kan philosophy a hrilhfiah a ni.

Thil ri dik lo tak tak i hmu a, a nih loh leh a tha zawka tih theih pawh a ni mai thei? Issue pakhat hawng rawh —kan sawiho duh khawp ang.

Khaihtawi

Heng zawng zawngah hian kan dive tam zawk ang a, mahse level sang takah chuan, hetah hian kan kalphung kaihruaitu chu a ni.

• Components te chu responsive leh mobile-first an ni tur a ni
• Component te chu base class hmanga siam tur a ni a, modifier class hmanga tihzauh tur a ni
• Component state-te chuan z-index scale hman tlanglawn tak an zawm tur a ni
• A theih phawt chuan JavaScript aiin HTML leh CSS implementation duh zawk ang che
• A theih phawt chuan custom style aia utilities hmang zawk ang che
• A theih phawt chuan HTML thil phut khauh tak tak (naupang thlan thiam) tihpuitlin loh tur .

Chhanna pe thei

Bootstrap-a responsive styles te hi responsive tura siam a ni a, hei hi mobile-first tia sawi a ni fo thin . He thumal hi kan docs-ah kan hmang a, a tam zawkah chuan kan pawm a, mahse a chang chuan a zau lutuk thei bawk. Bootstrap-ah hian component zawng zawng hi a pum puia responsive vek tur a ni lo nain, he responsive approach hi viewport a lian chhoh zel chuan style add turin nawr a, CSS override tihtlem a ni.

Bootstrap pumpuiah hian kan media zawhnaah hian hei hi chiang berin i hmu ang. A tam zawkah chuan min-widthbreakpoint bik atanga apply tan a, breakpoint sang zawk kal tlanga carry up thin query kan hmang thin. Entirnan, a .d-nonehian from min-width: 0to infinity a hmang a. A lehlamah chuan a .d-md-nonechu medium breakpoint atanga a chung lam thlengin a apply bawk.

A châng max-widthchuan component pakhat inherent complexity-in a mamawh hunah kan hmang ang. A châng chuan, heng override-te hi kan component aṭanga core functionality ziah thar ai chuan functional leh mentally-ah implement leh support-ah a chiang zawk. Hetiang kalphung hi tihtlem kan tum a, mahse a hun hunah kan hmang ang.

Class hrang hrang te

Kan Reboot, cross-browser normalization stylesheet tih loh chu kan style zawng zawng hian class te chu selector atan hman kan tum vek a ni. input[type="text"]Hei hian style selector (eg, ) leh extraneous parent class (eg, ) atanga steering clear tihna a ni a, .parent .childchu chuan style hrang hrangte chu awlsam taka override theih loh khawpa specific lutuk a siam a ni.

Chutiang a nih avang chuan components te chu common, not-to-be overridden property-value pairs awmna base class nen siam tur a ni. Entirnan, .btnleh .btn-primary. .btnStyle hman tlanglawn zawng zawng atan kan hmang a display, padding, leh border-width. Chumi hnuah chuan modifier kan hmang .btn-primarya, chu chu color, background-color, border-color, etc. te add ang chi te hi a ni.

Modifier class hi variant hrang hranga property emaw value thlak tur tam tak a awm hunah chauh hman tur a ni. Modifier hi a tul ngai lo va, chuvangin code line i save tak tak a, a tul lo override i siam dawn lo tih hria ang che. Modifier entirnan tha tak chu kan theme color class leh size variant te hi a ni.

z-index hmanga teh theih a ni

Bootstrap ah hian scale pahnih a awm a z-index—component pakhat chhunga element awm te leh overlay component te.

Component element hrang hrangte

• Bootstrap-a component thenkhat chu borderproperty siam danglam ngai lovin double border awm loh nan overlapping elements hmanga siam a ni. Entirnan, button group te, input group te, leh pagination te.
• Heng component te hian standard z-indexscale of 0through an insem a 3ni.
• 0chu default (initial) a ni a, 1a ni :hover, 2a ni :active/ a ni .activea, 3a ni :focusbawk.
• Hetiang approach hian user priority sang ber kan beisei nen a inmil hle. Element pakhat chu focus a nih chuan in view leh user ngaihvenah a awm a ni. Active elements te hi state an lantir avangin pahnihna an ni. Hover hi user intent a lantir avangin a sang ber pathumna a ni a, mahse engkim deuhthaw hi hover theih a ni.

A component hrang hrangte chu overlay rawh

Bootstrap hian component engemaw zat a keng tel a, chu chu eng emaw zat overlay angin a thawk a ni. Hei hian, a sang ber z-index, dropdown, fixed leh sticky navbar, modal, tooltips, leh popovers te a huam a ni. Heng component te hian anmahni z-indexscale an nei a, chu chu 1000. He starting number hi duh duh thlan a ni a, kan style leh i project-a custom style hrang hrangte inkara buffer te tak te angin a thawk a ni.

Overlay component tin hian an value chu tlem an tisang a z-index, chutiang chuan common UI principles chuan user focused emaw hovered elements te chu engtik lai pawha hmuh theih turin a phalsak a ni. Entirnan, modal chu document blocking a ni (eg, modal-a action tih loh chu action dang i la thei lo), chuvangin chu chu kan navbars chungah kan dah a ni.

z-indexHemi chungchang hi kan layout page ah hian zir belh rawh .

JS hmanga HTML leh CSS

A theih phawt chuan JavaScript aiin HTML leh CSS ziah kan duh zawk. A tlangpuiin HTML leh CSS hi a prolific zawk a, experience level hrang hrang nei mi tam zawk tan pawh a awlsam zawk. HTML leh CSS te pawh hi JavaScript aiin i browser-ah a chak zawk a, i browser hian a tlangpuiin i tan functionality nasa tak a pe a ni.

dataHe principle hi attribute hmanga kan JavaScript API class hmasa ber a ni. Kan JavaScript plugins hman tur chuan JavaScript tluk zeta ziah a ngai lo; chu ai chuan HTML ziak zawk rawh. Hemi chungchang hi kan JavaScript overview page ah hian chhiar la .

A tawp berah chuan kan style te hian web element tlanglawn tak takte nungchang bulpui (fundamental behaviors) atanga siam a ni. A theih phawt chuan browser-in a pek ang kha hman kan duh zawk. Entirnan, .btnelement eng pawhah class i dah thei a, mahse element tam zawk chuan semantic value emaw browser functionality emaw an pe lo. <button>Chuvangin s leh s kan hmang zawk a <a>ni.

Chutiang bawkin component complex zawkte tan pawh a ni. Input pakhat dinhmun atanga thlirin parent element-a class dah belh turin kan form validation plugin kan ziak thei a, chu chuan text chu red tih style turin min phalsak a, mahse browser tinte min pek / pseudo-elements hman kan duh zawk :valid.:invalid

Utilities te pawh a awm

Utility class—Bootstrap 3-a ṭanpuitu hlui—te hi CSS bloat leh page performance ṭha lo dona kawngah ṭangrual chak tak an ni. Utility class chu a tlangpuiin property-value pairing pakhat, danglam thei lo, class anga sawi chhuah a ni (eg, .d-blockrepresents display: block;). An appeal ber chu HTML ziah laiin hman chak dan leh custom CSS ziah tur zat tihtlem hi a ni.

A bik takin custom CSS chungchangah chuan utilities te hian i property-value pairs repeated tam ber te chu class pakhata tihtlem hmangin file size tihpun dona kawngah a pui thei a ni. Hei hian i project-ah te scale-ah nghawng nasa tak a nei thei a ni.

HTML pawh a inthlak danglam thei

A theih reng loh laiin, component hrang hrangte tana HTML kan mamawhnaah hian dogmatic lutuk lo turin kan bei thin. Chutiang chuan kan CSS selector-ah single class kan ngaihtuah a, naupang selector nghal mai loh kan tum a ( >). Hei hian i implementation-ah flexibility a pe zawk che a, kan CSS chu awlsam zawk leh specific lo zawka siam turin a pui bawk.

Code convention hrang hrangte

Code Guide (Bootstrap co-creator, @mdo atanga lak) hian Bootstrap huam chhunga kan HTML leh CSS kan ziah dan a document a. General formatting, common sense default, property leh attribute order leh thil dang tam tak hman dan tur kaihhruaina a tarlang a ni.

Kan Sass/CSS-ah hian heng standard leh a dangte hi tihhlawhtlin nan Stylelint kan hmang thin . Kan custom Stylelint config hi open source a ni a, midangte hman leh tihzauh theih a ni.

Standard leh semantic HTML enforce nan vnu-jar kan hmang a, chubakah common error te kan hmuchhuak bawk.