U guuraya v4
Bootstrap 4 waa dib-u-qoris weyn oo mashruuca oo dhan ah. Isbeddelada ugu caansan ayaa lagu soo koobay hoos, oo ay ku xigto isbeddello gaar ah oo lagu sameeyo qaybaha khuseeya.
Isbeddellada deggan
Ka guurista Beta 3 una guuraya v4.x sii daynteena deggan, ma jiraan wax isbeddelo ah, laakiin waxaa jira isbeddello muuqda.
Daabacaadda
-
Utility daabac go'an. Markii hore, isticmaalka
.d-print-*
fasalka ayaa si lama filaan ah u burinaya.d-*
fasal kasta. Hadda, waxay ku habboon yihiin agabkayada kale ee bandhigga waxayna khuseeyaan oo keliya warbaahintaas (@media print
). -
Utility bandhigay daabac ee la heli karo oo la fidiyay si ay ugu dhigmaan yutiilitida kale. Beta 3 iyo wixii ka weyn waxay lahaayeen kaliya
block
,inline-block
,inline
, iyonone
. Xasilooni v4 lagu darayflex
,inline-flex
,table
,table-row
iyotable-cell
. -
Daabacado go'an oo horudhac u ah samaynta daalacashada oo dhan leh qaabab daabac cusub oo tilmaamaya
@page
size
.
Beta 3 isbedel
Halka Beta 2 uu arkay badi isbeddelladayada jabintu intii lagu jiray marxaladdii beta, laakiin waxaan weli haysanaa kuwa yar oo u baahan in wax laga qabto siideynta Beta 3. Isbeddelladani waxay khuseeyaan haddii aad u cusboonaysiinayso Beta 3 ka Beta 2 ama nooc kasta oo ka weyn Bootstrap.
Kala duwan
- Meesha laga saaray
$thumbnail-transition
doorsoomaha aan la isticmaalin Waxba ma aannu wareejin, markaa waxay ahayd kood dheeraad ah. - Xirmada npm kuma jiraan wax faylal ah oo aan ka ahayn ishayada iyo faylalka fogaanta; Haddii aad iyaga ku tiirsan tahay oo aad ku socodsiinaysay qoraalladayada
node_modules
galka, waa inaad la qabsato socodkaaga shaqada.
Foomamka
-
Dib u qor sanduuqyada saxda ah iyo kuwa caadiga ah iyo raadiyaha. Hadda, labaduba waxay leeyihiin qaab-dhismeed u dhigma HTML (dibeed
<div>
oo walaal<input>
iyo<label>
) iyo qaabab isku mid ah (qaab la isku dhejiyay, oo la jaan qaadaya fasalka beddelka). Tani waxay noo ogolaanaysaa in aan qaabaynno summada ku salaysan gobolka gelinta, fududaynta taageeradadisabled
sifada (horey u baahnayd fasalka waalidka) iyo si wanaagsan u taageerta ansixinta foomka.Iyada oo qayb ka ah tan, waxaan u bedelnay CSS si loogu maareeyo
background-image
sanduuqyada qaab-caadi ah ee sanduuqyada iyo raadiyaha. Markii hore, curiyaha hadda la saaray.custom-control-indicator
wuxuu lahaa midabka asalka, gradient, iyo astaanta SVG. Habaynta jaan-goynta asalka waxay la macno tahay inaad bedesho dhammaan kuwan mar kasta oo aad u baahato inaad beddesho mid keliya. Hadda, waxaanu haysanaa.custom-control-label::before
buuxinta iyo gradient oo waxaanu.custom-control-label::after
gacanta ku haynaa astaanta.Si aad u samayso jeeg khaas ah khadka, ku dar
.custom-control-inline
. -
Xulashada la cusboonaysiiyay ee kooxaha badhanka ku-salaysan. Halkii laga
[data-toggle="buttons"] { }
isticmaali lahaa qaabka iyo dhaqanka, waxaan u isticmaalnaadata
sifada kaliya dabeecadaha JS waxaanan ku tiirsanahay.btn-group-toggle
fasal cusub qaabeynta. -
Waa laga saaray
.col-form-legend
iyadoo loo hiilinayo wax yar oo la hagaajiyay.col-form-label
. Habkan.col-form-label-sm
iyo.col-form-label-lg
waxaa loo isticmaali karaa on<legend>
curiyeyaasha si fudud. -
Gelida faylka gaarka ah waxay heshay isbeddel ku yimid
$custom-file-text
doorsoomahooda Sass. Hadda ma ahan khariidad Sass buul leh oo hadda waxay awoodaysaa hal xadhig -Browse
badhanka maadaama uu hadda yahay walxaha been abuurka ah ee laga soo saaray Sass-keena. QoraalkuChoose file
hadda wuxuu ka yimid.custom-file-label
.
Kooxaha wax gelinta
-
Addons-ka kooxda gelinta ayaa hadda gaar u ah meelayntooda marka loo eego gelinta Waxaan ka tagnay
.input-group-addon
iyo.input-group-btn
laba fasal oo cusub,.input-group-prepend
iyo.input-group-append
. Waa inaad si cad u isticmaashaa lifaaqa ama prepend hadda, adoo fududaynaya in badan oo CSS ah. Gudaha lifaaqa ama diyaarinta, dhig badhamada sida ay uga jiraan meel kale, laakiin ku duub qoraalka.input-group-text
. -
Qaababka xaqiijinta hadda waa la taageerayaa, si la mid ah agabyo badan (inkasta oo aad hal koox kaliya xaqiijin karto).
-
Casharrada cabbiridda waa in ay ahaadaan waalidka ee
.input-group
maaha in ay ku jiraan qaybaha gaarka ah.
Beta 2 ayaa isbedelay
Inta aan ku jirno beta, waxaan hiigsaneynaa inaanan helin wax isbedel ah. Si kastaba ha ahaatee, arrimuhu had iyo jeer uma socdaan sidii la qorsheeyay. Hoos waxaa ah isbeddelada jebinta ee maskaxda lagu hayo markaad ka guurayso Beta 1 una socoto Beta 2.
Jebinta
- Doorsoomayaasha meesha laga saaray
$badge-color
iyo isticmaalkeeda.badge
. Waxaan isticmaalnaa shaqada ka soo horjeedka midabka si aan u soo qaadannocolor
iyadoo ku saleysanbackground-color
, markaa doorsoomuhu waa mid aan loo baahnayn. - Shaqada dib loo magacaabay
grayscale()
sigray()
looga fogaado jabinta isku dhacagrayscale
shaandhada CSS ee asalka ah. - Dib loo magacaabay
.table-inverse
,.thead-inverse
, iyo.thead-default
ilaa.*-dark
iyo.*-light
, oo ku habboon nidaamyadayada midabka ee meelo kale lagu isticmaalo. - Miisaska ka jawaabaya hadda waxay abuuraan xiisado goob kasta oo jajab ah. Tani waxay ka jebisay Beta 1 in ka
.table-responsive
aad isticmaalaysay uu la mid yahay.table-responsive-md
. Waxaad hadda isticmaali kartaa.table-responsive
ama.table-responsive-{sm,md,lg,xl}
haddii loo baahdo. - Taageerada Bower ee la tuuray maadaama maareeyaha xirmada loo diiday beddelka (tusaale, Yarn ama npm). Faahfaahinta eeg qaansada/ qaansada#2298
- Bootstrap wali waxay u baahan tahay jQuery 1.9.1 ama ka sareeya, laakiin waxaa lagugula talinayaa inaad isticmaasho nooca 3.x maadaama v3.x daalacashada ay taageerto ay yihiin kuwa Bootstrap ay taageerto oo lagu daray v3.x ayaa leh qaar hagaajin amniga ah.
.form-control-label
Laga saaray fasalka aan la isticmaalin . Haddii aad isticmaashay fasalkan, waxa uu ahaa nuqul ka mid ah.col-form-label
fasalka kaas oo si toos ah u dhexeyay a<label>
oo ay la socoto wax gelinta la xidhiidha qaab-dhismeedka qaab toosan.- Waxa uu ka beddelay
color-yiq
isku-dhafka ay ku jirtocolor
hantida una beddelo shaqo soo celisa qiime, taas oo kuu oggolaanaysa inaad u isticmaasho hanti kasta oo CSS ah. Tusaale ahaan, halkiicolor-yiq(#000)
aad ka qori lahaydcolor: color-yiq(#000);
.
Tilmaamaha
- Soo bandhigay
pointer-events
isticmaalka cusub ee moodooyinka. Banaanka.modal-dialog
wuxuu dhex maraa dhacdooyinka iyadoopointer-events: none
si gaar ah loogu maamulayo dhageysiga (ka dhigaysa in la dhageysto kaliya.modal-backdrop
dhagsi kasta), ka dibna wuxuu ka hortagaa sida dhabta.modal-content
ahpointer-events: auto
.
Soo koobid
Waa kuwan waxyaabaha tigidhada waaweyn ee aad rabto inaad ka warqabto markaad ka guureyso v3 una guureyso v4.
Taageerada browserka
- La tuuray taageerada IE8, IE9, iyo iOS 6. v4 hadda waa kaliya IE10+ iyo iOS 7+. Goobaha u baahan midkoodna, isticmaal v3.
- Waxaa lagu daray taageerada rasmiga ah ee Android v5.0 Lollipop's Browser iyo WebView. Noocyadii hore ee Browser-ka Android iyo WebView waxa ay ahaanayaan kaliya si aan rasmi ahayn oo la taageero.
Isbeddellada caalamiga ah
- Flexbox si toos ah ayaa loo dajiyay. Guud ahaan tani waxay la macno tahay ka guurista sabbaynta iyo in badan oo ka mid ah qaybahayada.
- Waxa laga beddelay wax ka yar oo loo beddelay Sass ilahayaga faylasha CSS.
- Loo beddeley
px
sidiirem
unuggayaga CSS-ta aasaasiga ah, in kasta oo pixels weli loo isticmaalo weydiimaha warbaahinta iyo hab-dhaqanka khadka maaddaama qalabka daawashada aanay saamaynin cabbirka nooca. - Cabbirka farta caalamiga ah ayaa laga soo
14px
bilaabo16px
. - Heerarka shabakadaha dib loo habeeyey si loogu daro ikhtiyaarka shanaad (iyaga oo wax ka qabanaya aaladaha yaryar ee
576px
hoos iyo hoos) oo laga saaray-xs
infix-ka fasalladaas. Tusaale.col-6.col-sm-4.col-md-3
:. - Ku beddeshay mawduuca ikhtiyaariga ah ee goonida ah oo leh xulashooyin la habeyn karo iyada oo loo marayo doorsoomayaasha SCSS (tusaale,
$enable-gradients: true
). - Dhis nidaamka dib-u-habaynta lagu sameeyay si loo isticmaalo taxane taxane ah npm halkii Grunt. Eeg
package.json
dhammaan qoraallada, ama akhrinta mashruucayaga baahiyaha horumarinta deegaanka. - Isticmaalka aan jawaab-celinta lahayn ee Bootstrap hadda lama taageero.
- U tuuray Customizer-ka khadka tooska ah isaga oo door biday dukumeenti dejineed aad u ballaadhan iyo dhismo la habeeyey.
- Waxaa lagu daray daraasiin fasallo tasiilaad ah oo loogu talagalay lammaane-qiimaha hantida CSS ee caadiga ah iyo marinnada kala dheereynta ee margin/padding.
Nidaamka grid
- Loo guuray flexbox
- Taageerada lagu daray flexbox ee isku dhafka shabakadaha iyo fasallada horay loo sii qeexay.
- Iyada oo qayb ka ah flexbox, ay ku jirto taageerada fasalada toosinta toosan iyo toosan.
- Magacyada fasalka la cusboonaysiiyay iyo heer cusub
- Hoos waxaa lagu daray heer cusub oo
sm
shabaq ah768px
si loo xakameeyo granular dheeraad ah. Hadda waxaan haysanaaxs
,sm
,md
,lg
iyoxl
. Tani waxay sidoo kale ka dhigan tahay in heer kasta uu kor u kacay hal heer (marka.col-md-6
v3 hadda waxay.col-lg-6
ku jirtaa v4). xs
fasalada grid waa la bedelay si aan loogu baahnayn infix si ay si sax ah u matalaan inay bilaabayaan ku dhaqanka qaababka eemin-width: 0
maaha qiime go'an. Halkii.col-xs-6
, hadda waa.col-6
. Dhammaan heerarka kale ee shabakada waxay u baahan yihiin infix (tusaale,sm
).
- Hoos waxaa lagu daray heer cusub oo
- La cusboonaysiiyay cabbirada shabakada, isku darka, iyo doorsoomayaasha
- Biyo-mareenada xadhkaha goostay hadda waxay leeyihiin khariidad Sass si aad u qeexdo ballaadhka mareenka goynta kasta.
- Isku darka shabakadaha la cusboonaysiiyay si loo isticmaalo isku darka
make-col-ready
udiyaarinta iyo amake-col
si loo dejiyoflex
iyomax-width
cabbirka tiirka gaarka ah. - Beddelay habka grid-ka baraha warbahinta iyo ballaadhka weelka si loogu xisaabtamo heerka cusub ee shabakada iyo in la hubiyo in tiirarku si siman loo qaybsan karo marka loo
12
eego ballaca ugu badan. $grid-breakpoints
Baraha goynta iyo ballaadhka weelka waxaa hadda lagu xalliyaa khariidadaha$container-max-widths
Sass Kuwani waxay beddelaan@screen-*
doorsoomayaasha gabi ahaanba waxayna kuu oggolaanayaan inaad si buuxda u habayso heerarka xadhkaha.- Weydiimaha warbaahinta ayaa sidoo kale isbeddelay. Halkii aan ku celcelin lahayn ku dhawaaqida weydiimaha warbaahinta ee leh qiime isku mid ah mar kasta, hadda waxaan haysanaa
@include media-breakpoint-up/down/only
. Hadda, halkii aad wax qori lahayd@media (min-width: @screen-sm-min) { ... }
, waad qori kartaa@include media-breakpoint-up(sm) { ... }
.
Qaybaha
- Dabaqyada la tuuray, sawir-gacmeedka, iyo ceelasha qayb cusub oo dhan walba ka kooban, kaadhadh .
- Soo tuuray farta summada Glyphicons Haddii aad u baahan tahay calaamado, xulashooyinka qaar waa:
- nooca sare ee Glyphicons
- Octobar
- Font Cajiib
- Ka eeg bogga Extend liiska beddelka. Ma haysaa talooyin dheeraad ah? Fadlan fur arrin ama PR.
- Soo tuuray Affix jQuery plugin
- Waxaan ku talinaynaa in la isticmaalo
position: sticky
beddelkeeda. Fiiri HTML5 Fadlan geli faahfaahinta iyo talooyinka gaarka ah ee buuxinta. Mid soo jeedin ah ayaa ah in la isticmaalo@supports
xeer si loo hirgeliyo (tusaale,@supports (position: sticky) { ... }
) - Haddii aad isticmaalaysay Affix si aad u codsato qaabab dheeraad ah oo aan ahayn
position
, polyfill-yada waxaa laga yaabaa inaanay taageerin kiiskaaga isticmaal. Mid ka mid ah ikhtiyaarka isticmaalka noocaas ah waa maktabadda ScrollPos-Styler qolo saddexaad .
- Waxaan ku talinaynaa in la isticmaalo
- Hoos u dhigay qaybta pager-ka maadaama ay asal ahaan ahayd badhamada wax yar la habeeyey.
- Dib-u-habayn lagu sameeyay ku dhawaad dhammaan qaybaha si loo isticmaalo xulashooyin badan oo fasallo aan buul lahayn halkii laga isticmaali lahaa xulashooyinka gaarka ah ee carruurta.
Qayb ahaan
Liiskani wuxuu muujinayaa isbeddellada muhiimka ah ee qayb ahaan u dhexeeya v3.xx iyo v4.0.0.
Dib u bilow
Ku cusub Bootstrap 4 waa Reboot - ka, xaashi cusub oo qaab cusub oo ku dhista Caadiye oo leh qaabab dib-u-dejin oo xoogaa ra'yi ah noo gaar ah. Xulashooyinka ka muuqda faylkan waxay isticmaalaan oo keliya curiyayaasha — halkan wax fasallo ah ma jiraan. Tani waxay ka soocdaa qaababkayada dib u dajinta ee qaababka qaybahayaga si loo helo hab habaysan. Qaar ka mid ah dib-u-dejinta ugu muhiimsan tan waxaa ka mid ah box-sizing: border-box
isbeddelka, ka guurista em
unugyo rem
walxo badan, qaababka isku xirka, iyo dib-u-dejinta walxaha badan.
Qoraalka qoraalka
- U raray dhammaan
.text-
utility-_utilities.scss
ga faylka - Hoos u dhaca
.page-header
sida qaabkeeda lagu dabaqi karo adeegyada .dl-horizontal
waa la tuuray. Taa beddelkeeda, isticmaal.row
oo<dl>
isticmaal fasallada tiirarka (ama isku-dhafka) iyada<dt>
iyo<dd>
carruurtooda.- Xigashooyinka dib-u-qaabaynta, oo qaabkooda ka guuraya curiyaha una guuraya
<blockquote>
hal fasal,.blockquote
. U tuuray wax ka.blockquote-reverse
beddelka agabka qoraalka .list-inline
Hadda waxay u baahan tahay in carruurteedu ay liis gareeyaan alaabta.list-inline-item
fasalka cusub lagu dabaqo.
Sawirada
- Loo
.img-responsive
magacaabay.img-fluid
. - Loo
.img-rounded
magacaabay.rounded
- Loo
.img-circle
magacaabay.rounded-circle
Miisaska
- Ku dhawaad dhammaan xaaladaha
>
doorashada waa la saaray, taasoo la micno ah in miisaska buulka ah ay hadda si toos ah uga dhaxli doonaan qaababka waalidkood. Tani waxay si weyn u fududaynaysaa doorashadeena iyo habaynta suurtagalka ah. - Waxaa
.table-condensed
loogu.table-sm
magac daray joogteynta .table-inverse
Lagu daray doorasho cusub- Wax ka beddelayaasha miiska madaxa ee lagu daray:
.thead-default
iyo.thead-inverse
. - Dib loo magacaabay fasallada macnaha guud si loo yeesho
.table-
horgale. Sidaa darteed.active
,.success
, iyo ku.warning
, , , iyo ..danger
.info
.table-active
.table-success
.table-warning
.table-danger
.table-info
Foomamka
- Cunsurka la guuray wuxuu dib u dejinayaa
_reboot.scss
faylka. - Loo
.control-label
magacaabay.col-form-label
. - La magacaabay
.input-lg
iyo.input-sm
ku.form-control-lg
,.form-control-sm
siday u kala horreeyaan. - Fasalada loo tuuray fudaydnimada
.form-group-*
awgeed. Isticmaal.form-control-*
fasalada hadda. - Hoos
.help-block
u dhigay oo ku beddelay.form-text
qoraalka caawinta heerka xannibaadda. Si aad u hesho qoraalka caawinta khadka ah iyo xulashooyinka kale ee dabacsan, isticmaal fasallada utility sida.text-muted
. - Soo dhacay
.radio-inline
iyo.checkbox-inline
. - Isku-dhafka
.checkbox
iyo.radio
galay iyo fasallada.form-check
kala duwan ..form-check-*
- Qaababka toosan ayaa dib loo habeeyay:
- Hoos u dhigay
.form-horizontal
shuruudii fasalka .form-group
mar dambe ma khusayso qaabab ka.row
mixin-ka, markaa.row
hadda waxaa looga baahan yahay qaab-dhismeedka jaantuska (tusaale,<div class="form-group row">
).- Lagu daray
.col-form-label
fasal cusub oo lagu dhejiyay summada dhexe ee toosan oo leh.form-control
s. - Lagu daray cusub
.form-row
oo loogu talagalay qaabaynta qaabka is haysta oo leh fasallada grid (ku beddel.row
oo.form-row
tag).
- Hoos u dhigay
- Taageerada foomamka gaarka ah ee lagu daray (loogu talagalay sanduuqyada hubinta, raadiyaha, xulashada, iyo galitaanka faylka).
- Waxaa lagu bedelay
.has-error
,.has-warning
, iyo.has-success
fasallo leh HTML5 foomka ansaxinta iyadoo loo sii marayo fasallada CSS:invalid
iyo:valid
been-abuurka. - Loo
.form-control-static
magacaabay.form-control-plaintext
.
Badhamada
- Loo
.btn-default
magacaabay.btn-secondary
. .btn-xs
Gebi ahaanba fasalka waa la tuuray sida saami.btn-sm
ahaan aad uga yar v3's.- Habka badhanka gobolka ee
button.js
plugin jQuery waa la tuuray. Tan waxaa ku jira hababka$().button(string)
iyo$().button('reset')
hababka. Waxaan kugula talineynaa in la isticmaalo waxoogaa yar oo JavaScript ah, taas oo faa'iido u yeelan doonta inaad u dhaqdo sida saxda ah ee aad rabto.- Ogsoonow in sifooyinka kale ee plugin (badhannada hubinta, raadiyaha badhanka, badhamada hal toggle) lagu hayo v4.
- U beddel badhamada sida IE9+
[disabled]
u taageerto . Si kastaba ha ahaatee wali waa lagama maarmaan sababtoo ah goobaha naafada ee asalka ah ayaa wali ku dhibtoonaya IE11 .:disabled
:disabled
fieldset[disabled]
Kooxda badhanka
- Dib ugu qor qaybta flexbox
- Waa laga saaray
.btn-group-justified
. Beddel ahaan waxaad u isticmaali kartaa<div class="btn-group d-flex" role="group"></div>
sida duub oo ku wareegsan walxaha leh.w-100
. - Gebi
.btn-group-xs
ahaanba fasalka la saaray.btn-xs
. - Waxa meesha laga saaray kala fogaanshiyaha cad ee u dhexeeya kooxaha badhanka ee badhanka aaladaha; isticmaal margin utilities hadda.
- Dukumeenti la wanaajiyay si loogu isticmaalo qaybaha kale.
Hoos u dhac
- Waxa laga bedelay doorayaasha waalidka oo loo beddelay fasallo keli ah dhammaan qaybaha, beddelayaasha, iwm.
- Hababka hoos u dhigista ee la fududeeyay si aan mardambe loo rarin fallaadho kor ama hoos u jeeda oo ku xidhan liiska hoos u dhaca.
- Hoosudhaca waxaa lagu dhisi karaa
<div>
s ama<ul>
s hadda. - Dib-u-dhisay qaababka hoos u dhaca iyo calaamadaynta si ay u bixiso taageero fudud, ku dhex dhisan
<a>
iyo<button>
walxaha hoos u dhaca. - Loo
.divider
magacaabay.dropdown-divider
. - Alaabooyinka soo-dejinta hadda waxay u baahan yihiin
.dropdown-item
. - Toogashooyinka soo dejinta uma baahna cad
<span class="caret"></span>
; Tan hadda si toos ah ayaa loogu bixiyaa CSS's::after
on.dropdown-toggle
.
Nidaamka grid
- Waxaa lagu soo daray barta
576px
jabinta sharoogga cusub sidasm
, taasoo la micno ah inay hadda jiraan shan heerar (xs
,sm
,md
,lg
iyoxl
). - Waxaa loo magacaabay fasalada wax ka beddelka shabakadaha wax ka beddelka ah ee ka jawaabaya fasallada grid ka
.col-{breakpoint}-{modifier}-{size}
fudud.{modifier}-{breakpoint}-{size}
. order
Riix oo jiid fasalada wax ka beddelka ee fasalada cusub ee ku shaqeeya flexbox Tusaale ahaan, halkii.col-8.push-4
iyo.col-4.pull-8
, waxaad isticmaali lahayd.col-8.order-2
iyo.col-4.order-1
.- Fasalada utility flexbox ee lagu daray nidaamka grid iyo qaybaha
Liiska kooxaha
- Dib ugu qor qaybta flexbox
- Lagu bedelay
a.list-group-item
fasal cad,.list-group-item-action
, habaynta isku xirka iyo badhanka noocyada liiska walxaha kooxda. - Fasalka lagu daray
.list-group-flush
isticmaalka kaararka.
Modal
- Dib ugu qor qaybta flexbox
- Marka la eego u guuritaanka sanduuqa flexbox, toosinta sumadaha shaqada ee madaxa waa la jabiyay maadaama aynaan hadda isticmaalin sabbooyin. Waxyaabaha sabbaynaya ayaa marka hore imanaya, laakiin leh flexbox taasi hadda maahan kiis. Cusbooneysii summadaada cayrinta si ay u yimaadaan cinwaannada qaab-dhismeedka si loo hagaajiyo.
- Doorashada
remote
(kaas oo loo isticmaali karo in si toos ah loogu shubo oo lagu durayo nuxurka dibadda hab) iyoloaded.bs.modal
dhacdada u dhiganta waa laga saaray. Waxaan kugula talineynaa in aad isticmaasho qaabaynta dhinaca macmiilka ama qaab-dhismeedka xogta, ama wac jQuery.load naftaada.
Navs
- Dib ugu qor qaybta flexbox
- U tuuray ku dhawaad dhammaan
>
xulashooyinka qaabaynta fudud iyadoo loo marayo fasallo aan buul lahayn. - Halkii laga dooran lahaa HTML-ga u gaarka ah sida
.nav > li > a
, waxaan u isticmaalnaa fasallo gaar ah.nav
s,.nav-item
s, iyo.nav-link
s. Tani waxay ka dhigaysa HTML-kaaga mid dabacsan iyadoo la kordhinaysa kordhinta.
Navbar
Navbar-ka gabi ahaanba waxa dib loogu qoray flexbox iyada oo la wanaajiyay taageerada toosinta, ka jawaabista, iyo habaynta.
- Dabeecadaha navbar ee ka jawaabaya ayaa hadda lagu dabaqay
.navbar
fasalka iyada oo loo marayo baahida.navbar-expand-{breakpoint}
meesha aad ka dooranayso meesha aad ku duminayso navbar. Markii hore tani waxay ahayd beddelaad doorsoomare yar oo loo baahnaa dib u habeyn. .navbar-default
hadda waa.navbar-light
, in kastoo.navbar-dark
weli sidii hore. Mid ka mid ah kuwan ayaa looga baahan yahay navbar kasta. Si kastaba ha ahaatee, fasalladani hadda ma dhigayaanbackground-color
s; taas bedelkeeda waxay saameyn ku yeelanayaan oo kaliyacolor
.- Navbars hadda waxay u baahan yihiin caddaynta asalka ah nooc ka mid ah. Ka dooro adeegyadayada asalka ah (
.bg-*
) ama u deji kuwaaga fasallada iftiinka/rogadka ah ee kor ku xusan si loo habeeyo waalan . - Marka la eego qaababka flexbox, navbars hadda waxay isticmaali karaan yutiilitida flexbox si ay u fududaato isku xidhka.
.navbar-toggle
waa hadda.navbar-toggler
oo waxa uu leeyahay qaabab kala duwan iyo calaamad gudaha ah (aan ka badan saddex<span>
s).- Gebi
.navbar-form
ahaanba fasalka ayuu dhigay. Looma baahna hadda; halkii, kaliya isticmaal.form-inline
oo ku dalbo utility margin sida loo baahdo. - Navbars hadda kuma jiraan
margin-bottom
ama asalborder-radius
ahaan. Isticmaal utility sida loo baahdo. - Dhammaan tusaalooyinka muujinaya navbars waa la cusboonaysiiyay si loogu daro calaamadayn cusub.
Pagination
- Dib ugu qor qaybta flexbox
- Fasalo cad (
.page-item
,.page-link
) ayaa hadda looga baahan yahay faraca.pagination
s - Gebi ahaanba waa la tuuray
.pager
qaybta maadaama ay ka yara badnayd badhamada sharraxaadda la habeeyey.
Burburka rootiga
- Fasal cad,
.breadcrumb-item
, ayaa hadda looga baahan yahay faraca.breadcrumb
s
Calaamadaha iyo calaamadaha
- Isku dhafka
.label
iyo.badge
in laga saaro<label>
curiyaha oo la fududeeyo qaybaha la xidhiidha. - Lagu darey
.badge-pill
sidii wax ka beddelka muuqaalka "pill" wareegsan. - Calaamadaha si toos ah uguma sabbeeyaan kooxaha liiska iyo qaybaha kale. Fasallada utility hadda waa loo baahan yahay taas.
.badge-default
waa la tuuray oo.badge-secondary
lagu daray fasalada wax ka beddelka qaybta u dhigma ee meelo kale loo isticmaalo.
Panels, thumbnails, iyo ceelasha
Gebi ahaanba loo tuuray qaybta kaadhka cusub.
baalal
.panel
ku.card
, hadda lagu dhisay flexbox..panel-default
meesha laga saaray oo la waayay..panel-group
meesha laga saaray oo la waayay..card-group
maaha bedel, waa ka duwan yahay..panel-heading
ku.card-header
.panel-title
ku.card-title
. Iyada oo ku xidhan muuqaalka la doonayo, waxa kale oo aad rabi kartaa in aad isticmaasho curiyeyaasha ciwaanka ama fasalada (tusaale<h3>
,.h3
) ama walxo dhiirran ama fasalo (tusaale<strong>
,<b>
).font-weight-bold
. Ogsoonow.card-title
, iyadoo si isku mid ah loo magacaabay, waxay soo saartaa muuqaal ka duwan kii.panel-title
..panel-body
ku.card-body
.panel-footer
ku.card-footer
.panel-primary
..panel-success
_.panel-info
_.panel-warning
_.panel-danger
_.bg-
_.text-
_.border
_$theme-colors
_
Horumar
.progress-bar-*
Fasallada macnaha guud lagu beddelay.bg-*
agabka. Tusaale ahaan,class="progress-bar progress-bar-danger"
waxay noqotaaclass="progress-bar bg-danger"
.- Lagu bedelay
.active
baararka horumarka firfircoon ee leh.progress-bar-animated
.
Carousel
- Dib-u-habayn lagu sameeyay dhammaan qaybta si loo fududeeyo naqshadaynta iyo habaynta. Waxa aanu kuu haynaa habab yar oo aad kaga gudbi karto, tilmaameyaal cusub, iyo astaamo cusub.
- Dhammaan CSS waa la buunbuuniyay oo dib baa loo magacaabay, iyadoo la hubinayo in fasal kasta lagu horgalay
.carousel-
.- Alaabta carousel,
.next
,.prev
,.left
iyo.right
hadda.carousel-item-next
,.carousel-item-prev
,.carousel-item-left
, iyo.carousel-item-right
. .item
sidoo kale hadda.carousel-item
.- Koontaroolada hore/xiga,
.carousel-control.right
iyo.carousel-control.left
hadda.carousel-control-next
iyo.carousel-control-prev
, taasoo la macno ah inaysan u baahnayn fasal sal gaar ah.
- Alaabta carousel,
- Meesha laga saaray dhammaan qaabaynta jawaabaha leh, dib u dhigista yutiilitiyada (tusaale, muujinta qoraalada meelaha daawashada qaarkood) iyo qaababka caadada u ah hadba sida loogu baahdo.
- Sawirka meesha laga saaray wuxuu meesha ka saarayaa sawirada alaabta carousel-ka, dib u dhigista tamarta
- Wuxuu hagaajiyay tusaalaha Carousel si loogu daro calaamadaynta cusub iyo qaababka.
Miisaska
- Taageerada meesha laga saaray ee miisaska buulka leh ee qaabaysan. Dhammaan qaababka miiska ayaa hadda laga dhaxlay v4 ee xulashada fudud.
- Lagu daray kala duwanaanshiyaha miiska rogan.
Utility
- Muuji, qarsoon, iyo in ka badan:
- Utility bandhigay wuxuu sameeyay jawaab celin (tusaale,
.d-none
iyod-{sm,md,lg,xl}-none
). - Utility-yada ugu badan ayaa u tuuray agabka soo bandhiga
.hidden-*
cusub . Tusaale ahaan, halkii aad isticmaali lahayd . Waxaa loo magacaabay yutiilitida si ay u isticmaalaan nidaamka magac bixinta utility-ga. Macluumaad dheeraad ah oo hoos timaada qaybta utility Responsive ee boggan..hidden-sm-up
.d-sm-none
.hidden-print
- Casharro lagu daray sabbaynaysa
.float-{sm,md,lg,xl}-{left,right,none}
jawaab-celin ah oo laga saaray.pull-left
iyo.pull-right
mar haddii ay ka badan yihiin.float-left
iyo.float-right
.
- Utility bandhigay wuxuu sameeyay jawaab celin (tusaale,
- Nooca:
- Lagu daray kala duwanaansho jawaab celin ah fasaladayada toosinta qoraalka
.text-{sm,md,lg,xl}-{left,center,right}
.
- Lagu daray kala duwanaansho jawaab celin ah fasaladayada toosinta qoraalka
- Toosinta iyo kala dheeraynta:
- Waxaa lagu daray margin cusub oo ka jawaabaya iyo yutiilitida suufka ee dhinacyada oo dhan, oo lagu daray gacmo gaaban oo toosan iyo toosan.
- Raashin doon oo lagu daray agabka flexbox
- Loo dhigay fasalka
.center-block
cusub ..mx-auto
- Clearfix waa la cusboonaysiiyay si ay u tuurto taageerada noocyadii browserka hore.
Horgalayaasha iibiyaha isku darka
Bootstrap 3's prefix mixins iibiyaha, kuwaas oo laga saaray v3.2.0, ayaa laga saaray Bootstrap 4. Tan iyo markii aan isticmaalno Autoprefixer , hadda lagama maarmaan maaha.
Waxaa meesha animation
laga saaray animation-delay
isku dhafkan : ,,,,,,,,,,,,,,,,,,, animation-direction
_ animation-duration
_ animation-fill-mode
_ animation-iteration-count
_ animation-name
_ animation-timing-function
_ backface-visibility
_ box-sizing
_ content-columns
_ hyphens
_ opacity
_ perspective
_ perspective-origin
_ rotate
_ rotateX
_ rotateY
_ scale
_ scaleX
_ scaleY
_ skew
_ transform-origin
_ transition-delay
_ transition-duration
_transition-property
transition-timing-function
transition-transform
translate
translate3d
user-select
Dukumeenti
Dukumeentiyadayadu sidoo kale waxay heleen kor u kaca guud ahaan guddiga. Hoos waxaa ku qoran:
- Waxaan wali isticmaaleynaa Jekyll, laakiin waxaan ku leenahay plugins isku dhafka:
bugify.rb
waxaa loo isticmaalaa in si hufan loo liis gareeyo gelinta boggayaga cilladaha browserka .example.rb
waa fargeeto caadadii ahhighlight.rb
plugin-ka caadiga ah, taas oo u oggolaanaysa in si fudud loo maareeyo kood-ku-gudbinta.callout.rb
waa fargeeto caadadii la mid ah taas, laakiin loogu talagalay wicitaanadayada dukumeentiyada gaarka ah.- jekyll-toc waxa loo isticmaalaa in lagu soo saaro tusmadayada.
- Dhammaan dokumentiyada ku jira waxa dib loogu qoray Markdown (halkii HTML) si fudud loogu tafatiro.
- Bogagga ayaa dib loo habeeyey si ay u helaan xog fudud iyo kala sareyn la taaban karo.
- Waxaan ka soo guurnay CSS-ta caadiga ah una guurnay SCSS si aan si buuxda uga faa'iidaysano doorsoomayaasha Bootstrap, isku darka, iyo in ka badan.
Utility ka jawaabaya
Dhammaan @screen-
doorsoomayaasha waa laga saaray v4.0.0. Isticmaal media-breakpoint-up()
, media-breakpoint-down()
, ama media-breakpoint-only()
Sass mixins ama $grid-breakpoints
khariidadda Sass beddelkeeda.
Fasalladayada utility ee ka jawaaba ayaa inta badan meesha laga saaray iyadoo loo door bidaayo display
yutiilitida cad.
- Fasallada
.hidden
iyo.show
fasallada waa laga saaray sababtoo ah waxay khilaafeen jQuery's$(...).hide()
iyo$(...).show()
hababka. Taa beddelkeeda, isku day inaad beddesho sifada[hidden]
ama isticmaal qaababka khadka sidastyle="display: none;"
iyostyle="display: block;"
. - Dhammaan
.hidden-
fasallada waa laga saaray, marka laga reebo yutiilitida daabacaadda ee magaca beddelka lagu sameeyay.- Laga saaray v3:
.hidden-xs
.hidden-sm
.hidden-md
.hidden-lg
.visible-xs-block
.visible-xs-inline
.visible-xs-inline-block
.visible-sm-block
.visible-sm-inline
.visible-sm-inline-block
.visible-md-block
.visible-md-inline
.visible-md-inline-block
.visible-lg-block
.visible-lg-inline
.visible-lg-inline-block
- Laga saaray v4 alphas:
.hidden-xs-up
.hidden-xs-down
.hidden-sm-up
.hidden-sm-down
.hidden-md-up
.hidden-md-down
.hidden-lg-up
.hidden-lg-down
- Laga saaray v3:
- Daabacadu hadda kuma bilawdo
.hidden-
ama.visible-
, laakiin waxay ku bilaabmaysaa.d-print-
.- Magacyadii hore :
.visible-print-block
,.visible-print-inline
,.visible-print-inline-block
.hidden-print
- Fasalo cusub :
.d-print-block
,.d-print-inline
,.d-print-inline-block
.d-print-none
- Magacyadii hore :
Halkii aad isticmaali lahayd .visible-*
fasallo cad, waxaad samaysaa shay la arki karo adiga oo aan si fudud ugu qarin cabbirkaas shaashadda. Waxaad isku dari kartaa hal .d-*-none
fasal iyo hal .d-*-block
fasal si aad u muujiso curiye kaliya inta u dhaxaysa cabbirka shaashadda (tusaale .d-none.d-md-block.d-xl-none
wuxuu ku tusayaa curiyaha kaliya aaladaha dhexe iyo kuwa waaweyn).
Ogsoonow in isbeddelada ku yimaadda dhibcaha goynta ee v4 ay ka dhigan tahay inaad u baahan doonto inaad tagto hal dhibic ka weyn si aad u gaadho natiijooyin isku mid ah. Fasalada tamarta cusub ee wax ka qabata iskuma dayaan in ay soo dhaweeyaan kiisas aan caadi ahayn halka muuqaalka curiyaha aan lagu tilmaami karin mid iskuxiran oo cabbirrada daawashada; waxaad u baahan doontaa inaad isticmaasho CSS caado ah xaaladahan oo kale.