ગ્રીડ સિસ્ટમ
બાર કૉલમ સિસ્ટમ, પાંચ ડિફૉલ્ટ રિસ્પોન્સિવ ટિયર્સ, Sass ચલો અને મિક્સિન્સ અને ડઝનેક પૂર્વવ્યાખ્યાયિત વર્ગોને આભારી તમામ આકારો અને કદના લેઆઉટ બનાવવા માટે અમારી શક્તિશાળી મોબાઇલ-ફર્સ્ટ ફ્લેક્સબોક્સ ગ્રીડનો ઉપયોગ કરો.
તે કેવી રીતે કામ કરે છે
બુટસ્ટ્રેપની ગ્રીડ સિસ્ટમ સામગ્રીને લેઆઉટ અને સંરેખિત કરવા માટે શ્રેણીબદ્ધ કન્ટેનર, પંક્તિઓ અને કૉલમનો ઉપયોગ કરે છે. તે flexbox સાથે બનેલ છે અને સંપૂર્ણપણે જવાબદાર છે. નીચે એક ઉદાહરણ છે અને ગ્રીડ કેવી રીતે એકસાથે આવે છે તેના પર ઊંડાણપૂર્વકનો દેખાવ છે.
ફ્લેક્સબોક્સ માટે નવા અથવા અજાણ્યા છો? પૃષ્ઠભૂમિ, પરિભાષા, માર્ગદર્શિકા અને કોડ સ્નિપેટ્સ માટે આ CSS ટ્રિક્સ ફ્લેક્સબોક્સ માર્ગદર્શિકા વાંચો .
<div class="container">
<div class="row">
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
</div>
</div>
ઉપરોક્ત ઉદાહરણ અમારા પૂર્વવ્યાખ્યાયિત ગ્રીડ વર્ગોનો ઉપયોગ કરીને નાના, મધ્યમ, મોટા અને વધારાના મોટા ઉપકરણો પર ત્રણ સમાન-પહોળાઈના કૉલમ બનાવે છે. તે કૉલમ પેરેન્ટ સાથે પૃષ્ઠમાં કેન્દ્રિત છે .container
.
તેને તોડીને, તે કેવી રીતે કાર્ય કરે છે તે અહીં છે:
- કન્ટેનર તમારી સાઇટના સમાવિષ્ટોને કેન્દ્રમાં અને આડા પેડ કરવા માટેનું સાધન પ્રદાન કરે છે. રિસ્પોન્સિવ પિક્સેલ પહોળાઈ માટે
.container
અથવા તમામ વ્યૂપોર્ટ અને ડિવાઇસના કદ માટે ઉપયોગ કરો ..container-fluid
width: 100%
- પંક્તિઓ કૉલમ માટે આવરણો છે. દરેક કૉલમ
padding
તેમની વચ્ચેની જગ્યાને નિયંત્રિત કરવા માટે આડી (જેને ગટર કહેવાય છે) ધરાવે છે. આpadding
પછી નકારાત્મક માર્જિન સાથે પંક્તિઓ પર પ્રતિક્રમણ કરવામાં આવે છે. આ રીતે, તમારી કૉલમમાંની બધી સામગ્રી ડાબી બાજુએ દૃષ્ટિની રીતે ગોઠવાયેલ છે. - ગ્રીડ લેઆઉટમાં, સામગ્રીને કૉલમની અંદર મૂકવી આવશ્યક છે અને માત્ર કૉલમ જ પંક્તિઓના તાત્કાલિક બાળકો હોઈ શકે છે.
- ફ્લેક્સબૉક્સનો આભાર, ઉલ્લેખિત વિનાના ગ્રીડ કૉલમ્સ
width
આપમેળે સમાન પહોળાઈના કૉલમ તરીકે લેઆઉટ કરશે. ઉદાહરણ તરીકે, વિલના ચાર ઉદાહરણો.col-sm
દરેક આપમેળે નાના બ્રેકપોઇન્ટથી અને ઉપરથી 25% પહોળા હશે. વધુ ઉદાહરણો માટે સ્વતઃ-લેઆઉટ કૉલમ વિભાગ જુઓ . - કૉલમ વર્ગો પંક્તિ દીઠ સંભવિત 12માંથી તમે ઉપયોગ કરવા માગતા કૉલમની સંખ્યા દર્શાવે છે. તેથી, જો તમને ત્રણ સમાન-પહોળાઈના કૉલમ જોઈએ છે, તો તમે ઉપયોગ કરી શકો છો
.col-4
. - કૉલમ
width
s ટકાવારીમાં સેટ કરવામાં આવે છે, તેથી તેઓ હંમેશા પ્રવાહી અને તેમના મૂળ તત્વની તુલનામાં કદના હોય છે. padding
વ્યક્તિગત કૉલમ વચ્ચે ગટર બનાવવા માટે કૉલમ આડી હોય છે, જો કે, તમે પરની સાથેmargin
પંક્તિઓમાંથી અને કૉલમમાંથી દૂર કરી શકો છો .padding
.no-gutters
.row
- ગ્રીડને રિસ્પોન્સિવ બનાવવા માટે, પાંચ ગ્રીડ બ્રેકપોઈન્ટ છે, દરેક રિસ્પોન્સિવ બ્રેકપોઈન્ટ માટે એક : બધા બ્રેકપોઈન્ટ્સ (વધારાની નાની), નાની, મધ્યમ, મોટી અને વધારાની મોટી.
- ગ્રીડ બ્રેકપોઈન્ટ ન્યૂનતમ પહોળાઈના મીડિયા ક્વેરીઝ પર આધારિત હોય છે, એટલે કે તે એક બ્રેકપોઈન્ટ અને તેની ઉપરના તમામ પર લાગુ થાય છે (દા.ત.,
.col-sm-4
નાના, મધ્યમ, મોટા અને વધારાના મોટા ઉપકરણોને લાગુ પડે છે, પરંતુ પ્રથમxs
બ્રેકપોઈન્ટ નહીં). - તમે વધુ સિમેન્ટીક માર્કઅપ માટે પૂર્વવ્યાખ્યાયિત ગ્રીડ વર્ગો (જેમ
.col-4
કે ) અથવા સાસ મિક્સન્સનો ઉપયોગ કરી શકો છો.
ફ્લેક્સબોક્સની આજુબાજુની મર્યાદાઓ અને ભૂલોથી વાકેફ રહો , જેમ કે ફ્લેક્સ કન્ટેનર તરીકે કેટલાક HTML ઘટકોનો ઉપયોગ કરવામાં અસમર્થતા .
ગ્રીડ વિકલ્પો
જ્યારે બુટસ્ટ્રેપ મોટા ભાગના કદને વ્યાખ્યાયિત કરવા માટે em
s અથવા s નો ઉપયોગ કરે છે, s નો ઉપયોગ ગ્રીડ બ્રેકપોઈન્ટ અને કન્ટેનર પહોળાઈ માટે થાય છે. આ એટલા માટે છે કારણ કે વ્યૂપોર્ટની પહોળાઈ પિક્સેલ્સમાં છે અને ફોન્ટના કદ સાથે બદલાતી નથી .rem
px
જુઓ કે કેવી રીતે બુટસ્ટ્રેપ ગ્રીડ સિસ્ટમના પાસાઓ હાથવગા ટેબલ સાથે બહુવિધ ઉપકરણો પર કામ કરે છે.
વધારાનું નાનું <576px |
નાનું ≥576px |
મધ્યમ ≥768px |
મોટું ≥992px |
વધારાનું મોટું ≥1200px |
|
---|---|---|---|---|---|
મહત્તમ કન્ટેનર પહોળાઈ | કોઈ નહીં (ઓટો) | 540px | 720px | 960px | 1140px |
વર્ગ ઉપસર્ગ | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
કૉલમનો # | 12 | ||||
ગટરની પહોળાઈ | 30px (સ્તંભની દરેક બાજુએ 15px) | ||||
નેસ્ટેબલ | હા | ||||
કૉલમ ક્રમ | હા |
સ્વતઃ-લેઆઉટ કૉલમ્સ
જેમ કે સ્પષ્ટ ક્રમાંકિત વર્ગ વિના સરળ કૉલમ કદ બદલવા માટે બ્રેકપોઇન્ટ-વિશિષ્ટ કૉલમ વર્ગોનો ઉપયોગ કરો .col-sm-6
.
સમાન-પહોળાઈ
ઉદાહરણ તરીકે, અહીં બે ગ્રીડ લેઆઉટ છે જે દરેક ઉપકરણ અને વ્યૂપોર્ટ પર લાગુ થાય છે, xs
થી xl
. તમને જોઈતા દરેક બ્રેકપોઈન્ટ માટે ગમે તેટલા એકમ-ઓછા વર્ગો ઉમેરો અને દરેક કૉલમ સમાન પહોળાઈની હશે.
<div class="container">
<div class="row">
<div class="col">
1 of 2
</div>
<div class="col">
2 of 2
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col">
2 of 3
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
સમાન-પહોળાઈ બહુ-લાઈન
સમાન-પહોળાઈના કૉલમ્સ બનાવો જે બહુવિધ લાઇનોને ફેલાવે છે .w-100
જ્યાં તમે કૉલમને નવી લાઇનમાં તોડવા માંગતા હોવ ત્યાં દાખલ કરીને. .w-100
કેટલીક રિસ્પોન્સિવ ડિસ્પ્લે યુટિલિટીઝ સાથે મિક્સ કરીને બ્રેક્સને રિસ્પોન્સિવ બનાવો .
ત્યાં એક સફારી ફ્લેક્સબોક્સ બગ હતો જેણે આને સ્પષ્ટ flex-basis
અથવા border
. જૂના બ્રાઉઝર સંસ્કરણો માટે ઉકેલો છે, પરંતુ જો તમારા લક્ષ્ય બ્રાઉઝર બગડેલ વર્ઝનમાં ન આવતા હોય તો તે જરૂરી ન હોવા જોઈએ.
<div class="container">
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div class="w-100"></div>
<div class="col">col</div>
<div class="col">col</div>
</div>
</div>
એક કૉલમ પહોળાઈ સુયોજિત કરી રહ્યા છીએ
ફ્લેક્સબોક્સ ગ્રીડ કૉલમ્સ માટે સ્વતઃ-લેઆઉટનો અર્થ એ પણ છે કે તમે એક કૉલમની પહોળાઈ સેટ કરી શકો છો અને ભાઈ-બહેન કૉલમનું ઑટોમૅટિક રીતે તેની આસપાસ કદ બદલી શકો છો. તમે પૂર્વવ્યાખ્યાયિત ગ્રીડ વર્ગો (નીચે બતાવ્યા પ્રમાણે), ગ્રીડ મિક્સન્સ અથવા ઇનલાઇન પહોળાઈનો ઉપયોગ કરી શકો છો. નોંધ કરો કે મધ્ય કૉલમની પહોળાઈ ગમે તેટલી હોય અન્ય કૉલમનું કદ બદલાશે.
<div class="container">
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-6">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-5">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
ચલ પહોળાઈ સામગ્રી
વર્ગોનો ઉપયોગ col-{breakpoint}-auto
તેમની સામગ્રીની કુદરતી પહોળાઈના આધારે કૉલમના કદ માટે કરો.
<div class="container">
<div class="row justify-content-md-center">
<div class="col col-lg-2">
1 of 3
</div>
<div class="col-md-auto">
Variable width content
</div>
<div class="col col-lg-2">
3 of 3
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-md-auto">
Variable width content
</div>
<div class="col col-lg-2">
3 of 3
</div>
</div>
</div>
રિસ્પોન્સિવ વર્ગો
બુટસ્ટ્રેપના ગ્રીડમાં જટિલ પ્રતિભાવ લેઆઉટ બનાવવા માટે પૂર્વવ્યાખ્યાયિત વર્ગોના પાંચ સ્તરોનો સમાવેશ થાય છે. વધારાના નાના, નાના, મધ્યમ, મોટા અથવા વધારાના મોટા ઉપકરણો પર તમારા કૉલમનું કદ કસ્ટમાઇઝ કરો જો કે તમને યોગ્ય લાગે.
બધા બ્રેકપોઇન્ટ
સૌથી નાના ઉપકરણોથી લઈને મોટામાં સમાન હોય તેવા ગ્રીડ માટે, .col
અને .col-*
વર્ગોનો ઉપયોગ કરો. જ્યારે તમને ખાસ કરીને કદના કૉલમની જરૂર હોય ત્યારે ક્રમાંકિત વર્ગનો ઉલ્લેખ કરો; અન્યથા, વળગી રહેવા માટે મફત લાગે .col
.
<div class="container">
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
</div>
<div class="row">
<div class="col-8">col-8</div>
<div class="col-4">col-4</div>
</div>
</div>
આડા પર સ્ટેક
વર્ગોના એક જ સેટનો ઉપયોગ કરીને .col-sm-*
, તમે એક મૂળભૂત ગ્રીડ સિસ્ટમ બનાવી શકો છો જે સ્ટેકથી શરૂ થાય છે અને નાના બ્રેકપોઇન્ટ ( sm
) પર આડી બને છે.
<div class="container">
<div class="row">
<div class="col-sm-8">col-sm-8</div>
<div class="col-sm-4">col-sm-4</div>
</div>
<div class="row">
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
</div>
</div>
મિક્સ એન્ડ મેચ
શું નથી ઈચ્છતા કે તમારી કૉલમ ફક્ત અમુક ગ્રીડ સ્તરોમાં જ સ્ટેક થાય? જરૂરિયાત મુજબ દરેક સ્તર માટે વિવિધ વર્ગોના સંયોજનનો ઉપયોગ કરો. તે બધું કેવી રીતે કાર્ય કરે છે તેના વધુ સારા વિચાર માટે નીચેનું ઉદાહરણ જુઓ.
<div class="container">
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
<div class="col-6">.col-6</div>
<div class="col-6">.col-6</div>
</div>
</div>
ગટર
ગટરને બ્રેકપોઇન્ટ-વિશિષ્ટ પેડિંગ અને નેગેટિવ માર્જિન યુટિલિટી વર્ગો દ્વારા પ્રતિભાવપૂર્વક એડજસ્ટ કરી શકાય છે. આપેલ પંક્તિમાં ગટર બદલવા માટે, s પર નેગેટિવ માર્જિન યુટિલિટી .row
અને મેચિંગ પેડિંગ યુટિલિટીઝને જોડો .col
. ફરીથી મેચિંગ પેડિંગ યુટિલિટીનો ઉપયોગ કરીને અનિચ્છનીય ઓવરફ્લો ટાળવા માટે .container
અથવા પેરેન્ટને પણ એડજસ્ટ કરવાની જરૂર પડી શકે છે..container-fluid
અહીં મોટા ( lg
) બ્રેકપોઇન્ટ અને ઉપર બુટસ્ટ્રેપ ગ્રીડને કસ્ટમાઇઝ કરવાનું ઉદાહરણ છે. અમે .col
સાથે પેડિંગ વધાર્યું છે, પેરન્ટ .px-lg-5
સાથે તેનો પ્રતિકાર કર્યો છે અને પછી રેપરને ની સાથે એડજસ્ટ કર્યું છે ..mx-lg-n5
.row
.container
.px-lg-5
<div class="container px-lg-5">
<div class="row mx-lg-n5">
<div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
<div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
</div>
</div>
પંક્તિ કૉલમ
.row-cols-*
તમારી સામગ્રી અને લેઆઉટને શ્રેષ્ઠ રીતે પ્રસ્તુત કરતી કૉલમની સંખ્યાને ઝડપથી સેટ કરવા માટે પ્રતિભાવશીલ વર્ગોનો ઉપયોગ કરો . જ્યારે સામાન્ય .col-*
વર્ગો વ્યક્તિગત કૉલમ્સ પર લાગુ થાય છે (દા.ત., .col-md-4
), પંક્તિ કૉલમ વર્ગો માતાપિતા પર .row
શૉર્ટકટ તરીકે સેટ કરવામાં આવે છે.
મૂળભૂત ગ્રીડ લેઆઉટ ઝડપથી બનાવવા અથવા તમારા કાર્ડ લેઆઉટને નિયંત્રિત કરવા માટે આ પંક્તિ કૉલમ વર્ગોનો ઉપયોગ કરો.
<div class="container">
<div class="row row-cols-2">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container">
<div class="row row-cols-3">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container">
<div class="row row-cols-4">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container">
<div class="row row-cols-4">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col-6">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container">
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
તમે સાસ મિક્સિનનો પણ ઉપયોગ કરી શકો છો row-cols()
:
.element {
// Three columns to start
@include row-cols(3);
// Five columns from medium breakpoint up
@include media-breakpoint-up(md) {
@include row-cols(5);
}
}
ગોઠવણી
કૉલમને ઊભી અને આડી રીતે સંરેખિત કરવા માટે ફ્લેક્સબોક્સ સંરેખણ ઉપયોગિતાઓનો ઉપયોગ કરો. ઈન્ટરનેટ એક્સપ્લોરર 10-11 જ્યારે ફ્લેક્સ કન્ટેનરમાં નીચે બતાવ્યા પ્રમાણે હોય ત્યારે ફ્લેક્સ વસ્તુઓની ઊભી ગોઠવણીને સપોર્ટ કરતું નથી . min-height
વધુ વિગતો માટે ફ્લેક્સબગ્સ #3 જુઓ.
વર્ટિકલ ગોઠવણી
<div class="container">
<div class="row align-items-start">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
<div class="row align-items-center">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
<div class="row align-items-end">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col align-self-start">
One of three columns
</div>
<div class="col align-self-center">
One of three columns
</div>
<div class="col align-self-end">
One of three columns
</div>
</div>
</div>
આડી ગોઠવણી
<div class="container">
<div class="row justify-content-start">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-center">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-end">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-around">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-between">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
</div>
ગટર નથી
અમારા પૂર્વવ્યાખ્યાયિત ગ્રીડ વર્ગોમાં કૉલમ વચ્ચેના ગટરને વડે દૂર કરી શકાય છે .no-gutters
. આ તમામ તાત્કાલિક બાળકોના કૉલમમાંથી margin
નકારાત્મક અને .row
આડા દૂર કરે છે.padding
આ શૈલીઓ બનાવવા માટેનો સ્રોત કોડ અહીં છે. નોંધ કરો કે કૉલમ ઓવરરાઇડ્સ માત્ર પ્રથમ ચિલ્ડ્રન કૉલમ્સ માટે સ્કોપ્ડ છે અને વિશેષતા પસંદગીકાર દ્વારા લક્ષ્યાંકિત છે . જ્યારે આ વધુ ચોક્કસ પસંદગીકાર જનરેટ કરે છે, કૉલમ પેડિંગ હજુ પણ અંતર ઉપયોગિતાઓ સાથે વધુ કસ્ટમાઇઝ કરી શકાય છે .
એજ-ટુ-એજ ડિઝાઇનની જરૂર છે? પિતૃ .container
અથવા ડ્રોપ કરો .container-fluid
.
.no-gutters {
margin-right: 0;
margin-left: 0;
> .col,
> [class*="col-"] {
padding-right: 0;
padding-left: 0;
}
}
વ્યવહારમાં, તે કેવી રીતે દેખાય છે તે અહીં છે. નોંધ કરો કે તમે અન્ય તમામ પૂર્વવ્યાખ્યાયિત ગ્રીડ વર્ગો (કૉલમની પહોળાઈ, પ્રતિભાવ સ્તરો, પુનઃક્રમાંકન અને વધુ સહિત) સાથે આનો ઉપયોગ કરવાનું ચાલુ રાખી શકો છો.
<div class="row no-gutters">
<div class="col-sm-6 col-md-8">.col-sm-6 .col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
કૉલમ રેપિંગ
જો એક પંક્તિમાં 12 થી વધુ કૉલમ મૂકવામાં આવે, તો વધારાના કૉલમનું દરેક જૂથ, એક એકમ તરીકે, નવી લાઇન પર લપેટી જશે.
9 + 4 = 13 > 12 થી, આ 4-કૉલમ-વાઇડ ડિવ નવી લાઇન પર એક સંલગ્ન એકમ તરીકે વીંટળાય છે.
અનુગામી કૉલમ નવી લાઇન સાથે ચાલુ રહે છે.
<div class="container">
<div class="row">
<div class="col-9">.col-9</div>
<div class="col-4">.col-4<br>Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
<div class="col-6">.col-6<br>Subsequent columns continue along the new line.</div>
</div>
</div>
કૉલમ વિરામ
ફ્લેક્સબૉક્સમાં કૉલમને નવી લાઇનમાં તોડવા માટે નાના હેકની જરૂર છે: width: 100%
તમે જ્યાં પણ તમારી કૉલમને નવી લાઇનમાં લપેટવા માંગતા હોવ ત્યાં એક ઘટક ઉમેરો. સામાન્ય રીતે આ બહુવિધ .row
s સાથે પરિપૂર્ણ થાય છે, પરંતુ દરેક અમલીકરણ પદ્ધતિ આ માટે જવાબદાર હોઈ શકતી નથી.
<div class="container">
<div class="row">
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<!-- Force next columns to break to new line -->
<div class="w-100"></div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
</div>
</div>
તમે અમારી રિસ્પોન્સિવ ડિસ્પ્લે યુટિલિટીઝ સાથે ચોક્કસ બ્રેકપોઇન્ટ પર પણ આ વિરામ લાગુ કરી શકો છો .
<div class="container">
<div class="row">
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
<!-- Force next columns to break to new line at md breakpoint and up -->
<div class="w-100 d-none d-md-block"></div>
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
</div>
</div>
પુનઃક્રમાંકન
વર્ગો ઓર્ડર કરો
તમારી સામગ્રીના દ્રશ્ય ક્રમને.order-
નિયંત્રિત કરવા માટે વર્ગોનો ઉપયોગ કરો. આ વર્ગો પ્રતિભાવશીલ છે, તેથી તમે બ્રેકપોઇન્ટ દ્વારા સેટ કરી શકો છો (દા.ત., ). તમામ પાંચ ગ્રીડ સ્તરો માટે સપોર્ટનો સમાવેશ થાય છે .order
.order-1.order-md-2
1
12
<div class="container">
<div class="row">
<div class="col">
First in DOM, no order applied
</div>
<div class="col order-12">
Second in DOM, with a larger order
</div>
<div class="col order-1">
Third in DOM, with an order of 1
</div>
</div>
</div>
ત્યાં પ્રતિભાવશીલ .order-first
અને .order-last
વર્ગો પણ છે જે અનુક્રમે અને ( ), order
લાગુ કરીને તત્વને બદલે છે. આ વર્ગોને જરૂર મુજબ નંબરવાળા વર્ગો સાથે પણ મિશ્રિત કરી શકાય છે.order: -1
order: 13
order: $columns + 1
.order-*
<div class="container">
<div class="row">
<div class="col order-last">
First in DOM, ordered last
</div>
<div class="col">
Second in DOM, unordered
</div>
<div class="col order-first">
Third in DOM, ordered first
</div>
</div>
</div>
કૉલમ ઑફસેટિંગ
તમે ગ્રીડ કૉલમને બે રીતે ઑફસેટ કરી શકો છો: અમારા પ્રતિભાવશીલ .offset-
ગ્રીડ વર્ગો અને અમારી માર્જિન ઉપયોગિતાઓ . ગ્રીડ વર્ગો કૉલમ સાથે મેળ ખાય છે જ્યારે માર્જિન ઝડપી લેઆઉટ માટે વધુ ઉપયોગી છે જ્યાં ઑફસેટની પહોળાઈ ચલ હોય છે.
ઑફસેટ વર્ગો
.offset-md-*
વર્ગોનો ઉપયોગ કરીને કૉલમને જમણી તરફ ખસેડો . આ વર્ગો કૉલમ દ્વારા કૉલમના ડાબા માર્જિનમાં વધારો કરે છે *
. ઉદાહરણ તરીકે, ચાર કૉલમ પર .offset-md-4
ખસે છે..col-md-4
<div class="container">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
</div>
<div class="row">
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
</div>
<div class="row">
<div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
</div>
</div>
રિસ્પોન્સિવ બ્રેકપોઇન્ટ્સ પર કૉલમ ક્લિયરિંગ ઉપરાંત, તમારે ઑફસેટ્સ ફરીથી સેટ કરવાની જરૂર પડી શકે છે. ગ્રીડના ઉદાહરણમાં આને ક્રિયામાં જુઓ .
<div class="container">
<div class="row">
<div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
<div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
</div>
<div class="row">
<div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
<div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
</div>
</div>
માર્જિન ઉપયોગિતાઓ
v4 માં ફ્લેક્સબોક્સ પર જવા સાથે, તમે માર્જિન યુટિલિટીઝનો ઉપયોગ કરી શકો છો જેમ કે .mr-auto
ભાઈ-બહેનના કૉલમને એક બીજાથી દૂર કરવા માટે.
<div class="container">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
</div>
<div class="row">
<div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
<div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
</div>
<div class="row">
<div class="col-auto mr-auto">.col-auto .mr-auto</div>
<div class="col-auto">.col-auto</div>
</div>
</div>
માળો
તમારી સામગ્રીને ડિફોલ્ટ ગ્રીડ સાથે નેસ્ટ કરવા માટે, હાલની કૉલમમાં એક નવો .row
અને કૉલમનો સેટ ઉમેરો . નેસ્ટેડ પંક્તિઓમાં કૉલમનો સમૂહ શામેલ હોવો જોઈએ જે 12 અથવા તેથી ઓછા ઉમેરે છે (તે જરૂરી નથી કે તમે બધી ઉપલબ્ધ 12 કૉલમનો ઉપયોગ કરો)..col-sm-*
.col-sm-*
<div class="container">
<div class="row">
<div class="col-sm-9">
Level 1: .col-sm-9
<div class="row">
<div class="col-8 col-sm-6">
Level 2: .col-8 .col-sm-6
</div>
<div class="col-4 col-sm-6">
Level 2: .col-4 .col-sm-6
</div>
</div>
</div>
</div>
</div>
સાસ મિક્સન્સ
બુટસ્ટ્રેપના સ્ત્રોત Sass ફાઇલોનો ઉપયોગ કરતી વખતે, તમારી પાસે કસ્ટમ, સિમેન્ટીક અને રિસ્પોન્સિવ પેજ લેઆઉટ બનાવવા માટે Sass વેરિયેબલ્સ અને મિક્સિનનો ઉપયોગ કરવાનો વિકલ્પ હોય છે. અમારા પૂર્વવ્યાખ્યાયિત ગ્રીડ વર્ગો ઝડપી પ્રતિભાવ લેઆઉટ માટે ઉપયોગમાં લેવા માટે તૈયાર વર્ગોનો સંપૂર્ણ સ્યુટ પ્રદાન કરવા માટે આ જ ચલો અને મિશ્રણોનો ઉપયોગ કરે છે.
ચલો
ચલો અને નકશા કૉલમની સંખ્યા, ગટરની પહોળાઈ અને મીડિયા ક્વેરી પોઈન્ટ કે જ્યાંથી ફ્લોટિંગ કૉલમ શરૂ કરવા તે નક્કી કરે છે. અમે ઉપરોક્ત દસ્તાવેજીકૃત પૂર્વવ્યાખ્યાયિત ગ્રીડ વર્ગો તેમજ નીચે સૂચિબદ્ધ વૈવિધ્યપૂર્ણ મિશ્રણો માટે આનો ઉપયોગ કરીએ છીએ.
$grid-columns: 12;
$grid-gutter-width: 30px;
$grid-breakpoints: (
// Extra small screen / phone
xs: 0,
// Small screen / phone
sm: 576px,
// Medium screen / tablet
md: 768px,
// Large screen / desktop
lg: 992px,
// Extra large screen / wide desktop
xl: 1200px
);
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px
);
મિક્સિન્સ
વ્યક્તિગત ગ્રીડ કૉલમ્સ માટે સિમેન્ટીક CSS જનરેટ કરવા માટે ગ્રીડ વેરીએબલ્સ સાથે મિક્સિનનો ઉપયોગ કરવામાં આવે છે.
// Creates a wrapper for a series of columns
@include make-row();
// Make the element grid-ready (applying everything but the width)
@include make-col-ready();
@include make-col($size, $columns: $grid-columns);
// Get fancy by offsetting, or changing the sort order
@include make-col-offset($size, $columns: $grid-columns);
ઉદાહરણ ઉપયોગ
તમે તમારા પોતાના વૈવિધ્યપૂર્ણ મૂલ્યોમાં ચલોને સંશોધિત કરી શકો છો, અથવા ફક્ત તેમના ડિફોલ્ટ મૂલ્યો સાથે મિક્સિનનો ઉપયોગ કરી શકો છો. વચ્ચેના અંતર સાથે બે-કૉલમ લેઆઉટ બનાવવા માટે ડિફૉલ્ટ સેટિંગ્સનો ઉપયોગ કરવાનું અહીં ઉદાહરણ છે.
.example-container {
@include make-container();
// Make sure to define this width after the mixin to override
// `width: 100%` generated by `make-container()`
width: 800px;
}
.example-row {
@include make-row();
}
.example-content-main {
@include make-col-ready();
@include media-breakpoint-up(sm) {
@include make-col(6);
}
@include media-breakpoint-up(lg) {
@include make-col(8);
}
}
.example-content-secondary {
@include make-col-ready();
@include media-breakpoint-up(sm) {
@include make-col(6);
}
@include media-breakpoint-up(lg) {
@include make-col(4);
}
}
<div class="example-container">
<div class="example-row">
<div class="example-content-main">Main content</div>
<div class="example-content-secondary">Secondary content</div>
</div>
</div>
ગ્રીડ કસ્ટમાઇઝ કરી રહ્યા છીએ
અમારા બિલ્ટ-ઇન ગ્રીડ Sass ચલ અને નકશાનો ઉપયોગ કરીને, પૂર્વવ્યાખ્યાયિત ગ્રીડ વર્ગોને સંપૂર્ણપણે કસ્ટમાઇઝ કરવાનું શક્ય છે. સ્તરોની સંખ્યા, મીડિયા ક્વેરી પરિમાણો અને કન્ટેનરની પહોળાઈ બદલો-પછી ફરીથી કમ્પાઇલ કરો.
સ્તંભો અને ગટર
ગ્રીડ સ્તંભોની સંખ્યા Sass વેરીએબલ દ્વારા સુધારી શકાય છે. $grid-columns
દરેક વ્યક્તિગત કૉલમની પહોળાઈ (ટકામાં) જનરેટ કરવા માટે વપરાય છે જ્યારે $grid-gutter-width
કૉલમ ગટર માટે પહોળાઈ સેટ કરે છે.
$grid-columns: 12 !default;
$grid-gutter-width: 30px !default;
ગ્રીડ સ્તરો
કૉલમ્સથી આગળ વધીને, તમે ગ્રીડ સ્તરોની સંખ્યાને પણ કસ્ટમાઇઝ કરી શકો છો. જો તમે ફક્ત ચાર ગ્રીડ સ્તરો ઇચ્છતા હો, તો તમે આના જેવું કંઈક અપડેટ $grid-breakpoints
કરશો $container-max-widths
:
$grid-breakpoints: (
xs: 0,
sm: 480px,
md: 768px,
lg: 1024px
);
$container-max-widths: (
sm: 420px,
md: 720px,
lg: 960px
);
Sass ચલ અથવા નકશામાં કોઈપણ ફેરફારો કરતી વખતે, તમારે તમારા ફેરફારો સાચવવા અને ફરીથી કમ્પાઈલ કરવાની જરૂર પડશે. આમ કરવાથી કૉલમની પહોળાઈ, ઑફસેટ્સ અને ઑર્ડરિંગ માટે પૂર્વવ્યાખ્યાયિત ગ્રીડ વર્ગોનો એકદમ નવો સેટ આઉટપુટ થશે. કસ્ટમ બ્રેકપોઇન્ટનો ઉપયોગ કરવા માટે રિસ્પોન્સિવ વિઝિબિલિટી યુટિલિટીઝને પણ અપડેટ કરવામાં આવશે. px
(ન rem
, em
, અથવા %
) માં ગ્રીડ મૂલ્યો સેટ કરવાની ખાતરી કરો .