ढेर हो गइल बा
आशुलिपि हेल्पर जवन हमनी के फ्लेक्सबॉक्स उपयोगिता के ऊपर से बनावेला ताकि घटक लेआउट पहिले से तेज आ आसान बनावल जा सके।
स्टैक बूटस्ट्रैप में जल्दी आ आसानी से लेआउट बनावे खातिर कई गो फ्लेक्सबॉक्स गुण लागू करे खातिर एगो शॉर्टकट देला। अवधारणा अउरी कार्यान्वयन के सारा श्रेय ओपन सोर्स पाइलन प्रोजेक्ट के जाला .
खड़ा
.vstack
ऊर्ध्वाधर लेआउट बनावे खातिर इस्तेमाल करीं । ढेर कइल आइटम डिफ़ॉल्ट रूप से पूरा-चौड़ाई के होला। .gap-*
आइटम के बीच जगह जोड़े खातिर उपयोगिता के इस्तेमाल करीं ।
<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-*
आइटम के बीच जगह जोड़े खातिर उपयोगिता के इस्तेमाल करीं ।
<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
स्पेसर के रूप में जइसन क्षैतिज मार्जिन उपयोगिता के इस्तेमाल कइल:
<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>
आ ऊर्ध्वाधर नियमन के साथे :
<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
बटन आ अउरी तत्व सभ के ढेर करे खातिर इस्तेमाल करीं :
<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
:
<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;
}