Source

ગ્રીડ સિસ્ટમ

બાર કૉલમ સિસ્ટમ, પાંચ ડિફૉલ્ટ રિસ્પોન્સિવ ટિયર્સ, 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-fluidwidth: 100%
પંક્તિઓ કૉલમ માટે આવરણો છે. દરેક કૉલમ paddingતેમની વચ્ચેની જગ્યાને નિયંત્રિત કરવા માટે આડી (જેને ગટર કહેવાય છે) ધરાવે છે. આ paddingપછી નકારાત્મક માર્જિન સાથે પંક્તિઓ પર પ્રતિક્રમણ કરવામાં આવે છે. આ રીતે, તમારી કૉલમમાંની બધી સામગ્રી ડાબી બાજુએ દૃષ્ટિની રીતે ગોઠવાયેલ છે.
ગ્રીડ લેઆઉટમાં, સામગ્રીને કૉલમની અંદર મૂકવી આવશ્યક છે અને માત્ર કૉલમ જ પંક્તિઓના તાત્કાલિક બાળકો હોઈ શકે છે.
ફ્લેક્સબૉક્સનો આભાર, ઉલ્લેખિત વિનાના ગ્રીડ કૉલમ્સ widthઆપમેળે સમાન પહોળાઈના કૉલમ તરીકે લેઆઉટ કરશે. ઉદાહરણ તરીકે, વિલના ચાર ઉદાહરણો .col-smદરેક આપમેળે નાના બ્રેકપોઇન્ટથી અને ઉપરથી 25% પહોળા હશે. વધુ ઉદાહરણો માટે સ્વતઃ-લેઆઉટ કૉલમ વિભાગ જુઓ .
કૉલમ વર્ગો પંક્તિ દીઠ સંભવિત 12માંથી તમે ઉપયોગ કરવા માગતા કૉલમની સંખ્યા દર્શાવે છે. તેથી, જો તમને ત્રણ સમાન-પહોળાઈના કૉલમ જોઈએ છે, તો તમે ઉપયોગ કરી શકો છો .col-4.
કૉલમ widths ટકાવારીમાં સેટ કરવામાં આવે છે, તેથી તેઓ હંમેશા પ્રવાહી અને તેમના મૂળ તત્વની તુલનામાં કદના હોય છે.
paddingવ્યક્તિગત કૉલમ વચ્ચે ગટર બનાવવા માટે કૉલમ આડી હોય છે, જો કે, તમે પરની સાથે marginપંક્તિઓમાંથી અને કૉલમમાંથી દૂર કરી શકો છો .padding.no-gutters.row
ગ્રીડને રિસ્પોન્સિવ બનાવવા માટે, પાંચ ગ્રીડ બ્રેકપોઈન્ટ છે, દરેક રિસ્પોન્સિવ બ્રેકપોઈન્ટ માટે એક : બધા બ્રેકપોઈન્ટ્સ (વધારાની નાની), નાની, મધ્યમ, મોટી અને વધારાની મોટી.
ગ્રીડ બ્રેકપોઈન્ટ ન્યૂનતમ પહોળાઈના મીડિયા ક્વેરીઝ પર આધારિત હોય છે, એટલે કે તે એક બ્રેકપોઈન્ટ અને તેની ઉપરના તમામ પર લાગુ થાય છે (દા.ત., .col-sm-4નાના, મધ્યમ, મોટા અને વધારાના મોટા ઉપકરણોને લાગુ પડે છે, પરંતુ પ્રથમ xsબ્રેકપોઈન્ટ નહીં).
તમે વધુ સિમેન્ટીક માર્કઅપ માટે પૂર્વવ્યાખ્યાયિત ગ્રીડ વર્ગો (જેમ .col-4કે ) અથવા સાસ મિક્સન્સનો ઉપયોગ કરી શકો છો.

ફ્લેક્સબોક્સની આજુબાજુની મર્યાદાઓ અને ભૂલોથી વાકેફ રહો , જેમ કે ફ્લેક્સ કન્ટેનર તરીકે કેટલાક HTML ઘટકોનો ઉપયોગ કરવામાં અસમર્થતા .

ગ્રીડ વિકલ્પો

જ્યારે બુટસ્ટ્રેપ મોટા ભાગના કદને વ્યાખ્યાયિત કરવા માટે ems અથવા s નો ઉપયોગ કરે છે, s નો ઉપયોગ ગ્રીડ બ્રેકપોઈન્ટ અને કન્ટેનર પહોળાઈ માટે થાય છે. આ એટલા માટે છે કારણ કે વ્યૂપોર્ટની પહોળાઈ પિક્સેલ્સમાં છે અને ફોન્ટના કદ સાથે બદલાતી નથી .rempx

જુઓ કે કેવી રીતે બુટસ્ટ્રેપ ગ્રીડ સિસ્ટમના પાસાઓ હાથવગા ટેબલ સાથે બહુવિધ ઉપકરણો પર કામ કરે છે.

	વધારાનું નાનું <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. તમને જોઈતા દરેક બ્રેકપોઈન્ટ માટે ગમે તેટલા એકમ-ઓછા વર્ગો ઉમેરો અને દરેક કૉલમ સમાન પહોળાઈની હશે.

2 માંથી 1

2 માંથી 2

3 માંથી 1

3 માંથી 2

3 માંથી 3

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

એક કૉલમ પહોળાઈ સુયોજિત કરી રહ્યા છીએ

ફ્લેક્સબોક્સ ગ્રીડ કૉલમ્સ માટે ઑટો-લેઆઉટનો અર્થ એ પણ છે કે તમે એક કૉલમની પહોળાઈ સેટ કરી શકો છો અને ભાઈ-બહેન કૉલમ્સનું ઑટોમૅટિક રીતે તેની આસપાસનું કદ બદલી શકો છો. તમે પૂર્વવ્યાખ્યાયિત ગ્રીડ વર્ગો (નીચે બતાવ્યા પ્રમાણે), ગ્રીડ મિક્સન્સ અથવા ઇનલાઇન પહોળાઈનો ઉપયોગ કરી શકો છો. નોંધ કરો કે મધ્ય કૉલમની પહોળાઈ ગમે તેટલી હોય અન્ય કૉલમનું કદ બદલાશે.

3 માંથી 1

3માંથી 2 (વિશાળ)

3 માંથી 3

3 માંથી 1

3માંથી 2 (વિશાળ)

3 માંથી 3

<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તેમની સામગ્રીની કુદરતી પહોળાઈના આધારે કૉલમના કદ માટે કરો.

3 માંથી 1

ચલ પહોળાઈ સામગ્રી

3 માંથી 3

3 માંથી 1

ચલ પહોળાઈ સામગ્રી

3 માંથી 3

<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.

કર્નલ

કોલ-8

કોલ-4

<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) પર આડી બને છે.

col-sm-8

col-sm-4

col-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>

મિક્સ એન્ડ મેચ

શું નથી ઈચ્છતા કે તમારી કૉલમ ફક્ત અમુક ગ્રીડ સ્તરોમાં જ સ્ટેક થાય? જરૂરિયાત મુજબ દરેક સ્તર માટે વિવિધ વર્ગોના સંયોજનનો ઉપયોગ કરો. તે બધું કેવી રીતે કાર્ય કરે છે તેના વધુ સારા વિચાર માટે નીચેનું ઉદાહરણ જુઓ.

.col-md-8

.col-6 .col-md-4

.col-6

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

વ્યવહારમાં, તે કેવી રીતે દેખાય છે તે અહીં છે. નોંધ કરો કે તમે અન્ય તમામ પૂર્વવ્યાખ્યાયિત ગ્રીડ વર્ગો (કૉલમની પહોળાઈ, પ્રતિભાવ સ્તરો, પુનઃક્રમાંકન અને વધુ સહિત) સાથે આનો ઉપયોગ કરવાનું ચાલુ રાખી શકો છો.

.col-sm-6 .col-md-8

.col-6 .col-md-4

<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 થી વધુ કૉલમ મૂકવામાં આવે, તો વધારાના કૉલમનું દરેક જૂથ, એક એકમ તરીકે, નવી લાઇન પર લપેટી જશે.

.col-9

.col-4
9 + 4 = 13 > 12 થી, આ 4-કૉલમ-વાઇડ ડિવ નવી લાઇન પર એક સંલગ્ન એકમ તરીકે વીંટળાય છે.

.col-6
અનુગામી કૉલમ નવી લાઇન સાથે ચાલુ રહે છે.

<div class="container">
  <div class="row">
    <div class="col-9">.col-9</div>
    <div class="col-4">.col-4<br>Since 9 + 4 = 13 &gt; 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%તમે જ્યાં પણ તમારી કૉલમને નવી લાઇનમાં લપેટવા માંગતા હોવ ત્યાં એક ઘટક ઉમેરો. સામાન્ય રીતે આ બહુવિધ .rows સાથે પરિપૂર્ણ થાય છે, પરંતુ દરેક અમલીકરણ પદ્ધતિ આ માટે જવાબદાર હોઈ શકતી નથી.

.col-6 .col-sm-3

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

તમે અમારી રિસ્પોન્સિવ ડિસ્પ્લે યુટિલિટીઝ સાથે ચોક્કસ બ્રેકપોઇન્ટ પર પણ આ વિરામ લાગુ કરી શકો છો .

.col-6 .col-sm-4

<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-2112

DOM માં પ્રથમ, કોઈ ઓર્ડર લાગુ થયો નથી

DOM માં બીજા, મોટા ઓર્ડર સાથે

DOM માં ત્રીજું, 1 ના ઓર્ડર સાથે

<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: -1order: 13order: $columns + 1.order-*

DOM માં પ્રથમ, છેલ્લે આદેશ આપ્યો

DOM માં બીજું, અવ્યવસ્થિત

DOM માં ત્રીજું, પ્રથમ આદેશ આપ્યો

<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

.col-md-4

.col-md-4 .offset-md-4

.col-md-3 .offset-md-3

.col-md-6 .offset-md-3

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

રિસ્પોન્સિવ બ્રેકપોઇન્ટ્સ પર કૉલમ ક્લિયરિંગ ઉપરાંત, તમારે ઑફસેટ્સ ફરીથી સેટ કરવાની જરૂર પડી શકે છે. ગ્રીડના ઉદાહરણમાં આને ક્રિયામાં જુઓ .

.col-sm-5 .col-md-6

.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0

.col-sm-6 .col-md-5 .col-lg-6

.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0

<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ભાઈ-બહેનના કૉલમને એક બીજાથી દૂર કરવા માટે.

.col-md-4

.col-md-4 .ml-auto

.col-md-3 .ml-md-auto

.col-auto .mr-auto

.col-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-*

સ્તર 1: .col-sm-9

સ્તર 2: .col-8 .col-sm-6

સ્તર 2: .col-4 .col-sm-6

<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 {
  width: 800px;
  @include make-container();
}

.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, અથવા %) માં ગ્રીડ મૂલ્યો સેટ કરવાની ખાતરી કરો .