تحليل شامل للمعرفة الأساسية لتخطيط صفحة bootstrap

بصفتها مكونًا إضافيًا للواجهة الأمامية يدعم التصميم المستجيب ، يلعب Bootstrap دورًا مهمًا. سواء كنت تصفح الويب على هاتفك أو جهازك اللوحي أو الكمبيوتر الشخصي ، يمكنك تحقيق نتائج جيدة. كل هذا يتم تقديمه إلينا بواسطة bootstrap!

اليوم سأتحدث بشكل أساسي عن تخطيط الصفحة. هذا هو الشيء الأساسي. عندما نقوم بتصميم موقع ، يجب علينا تصميم صفحة قياسية عالمية وموحدة لذلك. نسمي هذا النوع من صفحات تخطيط الصفحة ، وما ينعكس على الصفحة هو عناصر التخطيط ، والتي لا غنى عنها بالطبع في bootstrap.

تصميم Bootstrap هو نظام نقطي ، أي أنه يتكون من صفوف وأعمدة. عند استخدامه ، يحتاج إلى لف حاوية. container لمحتوى الصفحة ونظام النقطية.

يتم استخدام فئة A.Container للحاويات ذات العرض الثابت ودعم التخطيطات المستجيبة.

 <viv> ... </div> يتم استخدام فئة.-container-fluid للحاويات بعرض 100 ٪ ، وتحتل جميع مواليد المشاهد. <viv> ... </div>

في Bootstrap ، يتم تمثيل الصفوف والأعمدة بواسطة Row و Col ، وهناك ما يصل إلى 12 وحدة عمود على التوالي. يمثل Col-MD-1 عرض وحدة واحدة ، ويمثل Col-MD-7 عرض سبع وحدات. تتم إضافتها معًا لتكون ما يصل إلى 12 وحدة.

 <viv> <viv> .col-md-1 </viv> <viv> .col-md-1 </viv> <viv> .col-md-1 </viv> <viv> .col-md-1 </viv> <viv> .col-md-1 </viv> <viv> .col-md-1 </di v> <viv> .col-md-1 </viv> <viv> .col-md-1 </viv> <viv> .col-md-1 </fiv> div> .col-md-1 </viv> <viv> .col-md-1 </viv> > </viv> <viv> <viv> .col-md-4 </viv> </viv> <viv> <viv> .col-md-4 </viv> <viv> .col-md-4 </viv> <viv> .col-md-4 </viv> </div>

السطران الثاني والثالث يظهران تأثيرات مماثلة

ثلاثة أعمدة متداخلة ، يمكن أن يكون هناك أيضًا أعمدة في العمود . نحن بحاجة إلى تغيير MD إلى SM في هذا التعشيش

 <viv> <viv> المستوى 1: .col-sm-9 <viv> <viv> المستوى 2: .col-xs-8 .col-sm-6 </viv> <viv> المستوى 2: .col-xs-4 .col-sm-6 </viv> </viv> </div>

التأثير مشابه لهذا

ما سبق هو المعرفة الأساسية لتخطيط صفحة bootstrap التي قدمها لك المحرر. آمل أن يكون ذلك مفيدًا لك. إذا كان لديك أي أسئلة ، فيرجى ترك رسالة لي وسوف يرد المحرر إليك في الوقت المناسب. شكرا جزيلا لدعمكم لموقع wulin.com!