in English

સ્ટેક્સ

શૉર્ટહેન્ડ સહાયકો કે જે ઘટકોના લેઆઉટને પહેલા કરતાં વધુ ઝડપી અને સરળ બનાવવા માટે અમારી ફ્લેક્સબોક્સ ઉપયોગિતાઓની ટોચ પર બનાવે છે.

આ પૃષ્ઠ પર

બૂટસ્ટ્રેપમાં ઝડપથી અને સરળતાથી લેઆઉટ બનાવવા માટે સંખ્યાબંધ ફ્લેક્સબોક્સ પ્રોપર્ટીઝ લાગુ કરવા માટે સ્ટેક્સ શોર્ટકટ ઓફર કરે છે. ખ્યાલ અને અમલીકરણનો તમામ શ્રેય ઓપન સોર્સ પાયલોન પ્રોજેક્ટને જાય છે .

હેડ અપ! ફ્લેક્સબોક્સ સાથે ગેપ યુટિલિટીઝ માટે સપોર્ટ તાજેતરમાં સફારીમાં ઉમેરવામાં આવ્યો હતો, તેથી તમારા હેતુવાળા બ્રાઉઝર સપોર્ટને ચકાસવાનું વિચારો. ગ્રીડ લેઆઉટમાં કોઈ સમસ્યા હોવી જોઈએ નહીં. વધુ વાંચો .

વર્ટિકલ

.vstackવર્ટિકલ લેઆઉટ બનાવવા માટે ઉપયોગ કરો. સ્ટૅક્ડ આઇટમ્સ ડિફૉલ્ટ રૂપે પૂર્ણ-પહોળાઈ છે. .gap-*વસ્તુઓ વચ્ચે જગ્યા ઉમેરવા માટે ઉપયોગિતાઓનો ઉપયોગ કરો .

પ્રથમ વસ્તુ

બીજી વસ્તુ

ત્રીજી વસ્તુ

html

<div class="vstack gap-3">
  <div class="bg-light border">First item</div>
  <div class="bg-light border">Second item</div>
  <div class="bg-light border">Third item</div>
</div>

આડી

.hstackઆડી લેઆઉટ માટે ઉપયોગ કરો . સ્ટૅક્ડ આઇટમ્સ ડિફૉલ્ટ રૂપે ઊભી રીતે કેન્દ્રિત હોય છે અને માત્ર તેમની જરૂરી પહોળાઈ લે છે. .gap-*વસ્તુઓ વચ્ચે જગ્યા ઉમેરવા માટે ઉપયોગિતાઓનો ઉપયોગ કરો .

પ્રથમ વસ્તુ

બીજી વસ્તુ

ત્રીજી વસ્તુ

html

<div class="hstack gap-3">
  <div class="bg-light border">First item</div>
  <div class="bg-light border">Second item</div>
  <div class="bg-light border">Third item</div>
</div>

સ્પેસર તરીકે આડી માર્જિન ઉપયોગિતાઓનો ઉપયોગ કરવો .ms-auto:

પ્રથમ વસ્તુ

બીજી વસ્તુ

ત્રીજી વસ્તુ

html

<div class="hstack gap-3">
  <div class="bg-light border">First item</div>
  <div class="bg-light border ms-auto">Second item</div>
  <div class="bg-light border">Third item</div>
</div>

અને વર્ટિકલ નિયમો સાથે :

પ્રથમ વસ્તુ

બીજી વસ્તુ

ત્રીજી વસ્તુ

html

<div class="hstack gap-3">
  <div class="bg-light border">First item</div>
  <div class="bg-light border ms-auto">Second item</div>
  <div class="vr"></div>
  <div class="bg-light border">Third item</div>
</div>

ઉદાહરણો

.vstackબટનો અને અન્ય ઘટકોને સ્ટેક કરવા માટે ઉપયોગ કરો:

html

<div class="vstack gap-2 col-md-5 mx-auto">
  <button type="button" class="btn btn-secondary">Save changes</button>
  <button type="button" class="btn btn-outline-secondary">Cancel</button>
</div>

આની સાથે ઇનલાઇન ફોર્મ બનાવો .hstack:

html

<div class="hstack gap-3">
  <input class="form-control me-auto" type="text" placeholder="Add your item here..." aria-label="Add your item here...">
  <button type="button" class="btn btn-secondary">Submit</button>
  <div class="vr"></div>
  <button type="button" class="btn btn-outline-danger">Reset</button>
</div>

સસ

.hstack {
  display: flex;
  flex-direction: row;
  align-items: center;
  align-self: stretch;
}

.vstack {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-self: stretch;
}