બુટસ્ટ્રેપ ગ્રીડ ઉદાહરણો

બુટસ્ટ્રેપ ગ્રીડ સિસ્ટમમાં બિલ્ડીંગ સાથે તમને પરિચિત કરાવવા માટે મૂળભૂત ગ્રીડ લેઆઉટ.

આ ઉદાહરણોમાં .themed-grid-colકેટલીક થીમિંગ ઉમેરવા માટે કૉલમમાં વર્ગ ઉમેરવામાં આવે છે. આ એવો વર્ગ નથી કે જે મૂળભૂત રીતે બુટસ્ટ્રેપમાં ઉપલબ્ધ હોય.

પાંચ ગ્રીડ સ્તરો

બુટસ્ટ્રેપ ગ્રીડ સિસ્ટમમાં પાંચ સ્તરો છે, અમે સપોર્ટ કરીએ છીએ તે ઉપકરણોની દરેક શ્રેણી માટે એક. દરેક સ્તર ન્યૂનતમ વ્યુપોર્ટ કદથી શરૂ થાય છે અને જ્યાં સુધી ઓવરરાઇડ ન થાય ત્યાં સુધી મોટા ઉપકરણો પર આપમેળે લાગુ થાય છે.

.col-4
.col-4
.col-4
.col-sm-4
.col-sm-4
.col-sm-4
.col-md-4
.col-md-4
.col-md-4
.col-lg-4
.col-lg-4
.col-lg-4
.col-xl-4
.col-xl-4
.col-xl-4

ત્રણ સમાન કૉલમ

ડેસ્કટૉપથી શરૂ થતી અને મોટા ડેસ્કટૉપ પર સ્કેલિંગ કરતી ત્રણ સમાન-પહોળાઈની કૉલમ મેળવો . મોબાઇલ ઉપકરણો, ટેબ્લેટ અને નીચે, કૉલમ્સ આપમેળે સ્ટેક થશે.

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

ત્રણ અસમાન કૉલમ

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

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

બે કૉલમ

ડેસ્કટૉપથી શરૂ થતી અને મોટા ડેસ્કટૉપ પર સ્કેલિંગ કરતી બે કૉલમ મેળવો .

.col-md-8
.col-md-4

સંપૂર્ણ પહોળાઈ, સિંગલ કૉલમ

પૂર્ણ-પહોળાઈના ઘટકો માટે કોઈ ગ્રીડ વર્ગો જરૂરી નથી.


બે નેસ્ટેડ કૉલમ સાથે બે કૉલમ

દસ્તાવેજીકરણ મુજબ, માળખું બનાવવું સરળ છે-માત્ર અસ્તિત્વમાં રહેલા કૉલમમાં કૉલમની પંક્તિ મૂકો. આ તમને ડેસ્કટોપથી શરૂ થતી બે કૉલમ આપે છે અને મોટા ડેસ્કટોપ પર સ્કેલિંગ કરે છે , મોટા કૉલમની અંદર બીજી બે (સમાન પહોળાઈ) સાથે.

મોબાઇલ ઉપકરણના કદ, ટેબ્લેટ અને નીચે, આ કૉલમ્સ અને તેમના નેસ્ટેડ કૉલમ સ્ટેક થશે.

.col-md-8
.col-md-6
.col-md-6
.col-md-4

મિશ્ર: મોબાઇલ અને ડેસ્કટોપ

બુટસ્ટ્રેપ v4 ગ્રીડ સિસ્ટમમાં વર્ગોના પાંચ સ્તરો છે: xs (વધારાની નાની), sm (નાના), md (મધ્યમ), lg (મોટી), અને xl (વધારાની મોટી). તમે વધુ ગતિશીલ અને લવચીક લેઆઉટ બનાવવા માટે આ વર્ગોના લગભગ કોઈપણ સંયોજનનો ઉપયોગ કરી શકો છો.

વર્ગોનું દરેક સ્તર વધે છે, એટલે કે જો તમે xs અને sm માટે સમાન પહોળાઈ સેટ કરવાની યોજના બનાવો છો, તો તમારે માત્ર xs નો ઉલ્લેખ કરવાની જરૂર છે.

.col-12 .col-md-8
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6
.col-6

મિશ્ર: મોબાઇલ, ટેબ્લેટ અને ડેસ્કટોપ

.col-12 .col-sm-6 .col-lg-8
.col-6 .col-lg-4
.col-6 .col-sm-4
.col-6 .col-sm-4
.col-6 .col-sm-4