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

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

આ ઉદાહરણોમાં .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-xxl-4
.col-xxl-4
.col-xxl-4

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

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

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

ત્રણ સમાન કૉલમ વૈકલ્પિક

વર્ગોનો ઉપયોગ કરીને .row-cols-*, તમે સમાન કૉલમ સાથે સરળતાથી ગ્રીડ બનાવી શકો છો.

.colના બાળક .row-cols-md-3
.colના બાળક .row-cols-md-3
.colના બાળક .row-cols-md-3

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

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

.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 (વધારાની મોટી). તમે વધુ ગતિશીલ અને લવચીક લેઆઉટ બનાવવા માટે આ વર્ગોના લગભગ કોઈપણ સંયોજનનો ઉપયોગ કરી શકો છો.

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

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

ગટર

વર્ગો સાથે .gx-*, આડી ગટર ગોઠવી શકાય છે.

.col.gx-4ગટર સાથે
.col.gx-4ગટર સાથે
.col.gx-4ગટર સાથે
.col.gx-4ગટર સાથે
.col.gx-4ગટર સાથે
.col.gx-4ગટર સાથે

.gy-*વર્ટિકલ ગટરને નિયંત્રિત કરવા માટે વર્ગોનો ઉપયોગ કરો .

.col.gy-4ગટર સાથે
.col.gy-4ગટર સાથે
.col.gy-4ગટર સાથે
.col.gy-4ગટર સાથે
.col.gy-4ગટર સાથે
.col.gy-4ગટર સાથે

વર્ગો સાથે .g-*, બંને દિશામાં ગટર ગોઠવી શકાય છે.

.col.g-3ગટર સાથે
.col.g-3ગટર સાથે
.col.g-3ગટર સાથે
.col.g-3ગટર સાથે
.col.g-3ગટર સાથે
.col.g-3ગટર સાથે

કન્ટેનર

બુટસ્ટ્રેપ v4.4 માં ઉમેરાયેલ વધારાના વર્ગો ચોક્કસ બ્રેકપોઇન્ટ સુધી 100% પહોળા કન્ટેનરને મંજૂરી આપે છે. v5 એક નવો xxlબ્રેકપોઇન્ટ ઉમેરે છે.

કન્ટેનર
.container-sm
.container-md
.container-lg
.container-xl
.container-xxl
કન્ટેનર-પ્રવાહી