إن إنشاء تخطيط مثل هذا بدون إطار عمل CSS مثل Bootstrap سيكون تحديًا كبيرًا. مع Bootstrap يصبح الأمر أسهل بكثير.
تخطيط موقع الويب مع Bootstrap
بشكل افتراضي ، يتم ترتيب عناصر HTML بطريقتين:
تبدأ عناصر الكتلة دائمًا في سطر جديد. أمثلة من العناصر كتلة هي <div>، <h1>، <p>، و <li>.
يتم عرض العناصر المضمنة في سطر. أمثلة من العناصر المضمنة هي <span>، <a>، <strong>، <em>، و <img>.
ومع ذلك ، فإن هذين الخيارين ليسا كافيين لإنشاء تخطيط مناسب لصفحة ويب.
تحتوي معظم مواقع الويب إما على تخطيط يتكون من عمودين ...
... أو لديهم تخطيط من ثلاثة أعمدة .
إن إنشاء تخطيط مثل هذا بدون إطار عمل CSS مثل Bootstrap سيكون تحديًا كبيرًا. مع Bootstrap يصبح الأمر أسهل بكثير.
بالإضافة إلى ذلك ، يتم ضبط التخطيط في Bootstrap تلقائيًا حسب حجم الشاشة (ما يسمى بالتخطيط المتجاوب ). على سبيل المثال ، يمكننا تحديد عرض الأعمدة أسفل بعضها البعض على شاشات صغيرة ، لأنها لن تتناسب إذا تم عرضها أفقيًا.
شبكة التمهيد
يستخدم Bootstrap نظام شبكة مكون من 12 عمودًا للتخطيط (راجع شبكة Bootstrap ). يمكن اعتبار الشبكة كجدول غير مرئي يحتوي على اثني عشر عمودًا.
نحدد الأعمدة الخاصة بنا من خلال تحديد عدد الأعمدة من بين 12 ممكنًا نرغب في استخدامها.
مثال لتخطيط عمودين
في هذا المثال ، نحدد العمود الأيسر بعرض 4 والعمود الأيمن بعرض 8. على اليسار يمكننا التنقل بينما على اليمين نضع محتوى الصفحة.
في كود HTML لهذا التخطيط سيبدو كما يلي:
<div class="container">
<div class="row">
<div class="col-sm-4">
Content of the left column.
</div>
<div class="col-sm-8">
Content of the right column.
</div>
</div>
</div>
تلميحات حول شبكة Bootstrap
- يجب أن تكون الشبكة دائمًا في a <div>مع containerالفصل. (لاستخدام حاوية كاملة العرض ، استخدم container-fluidالفئة لتمديد العرض الكامل لإطار العرض .)
- داخل الحاوية <div>مع فئة row. بهذا نحدد صفًا في الشبكة.
- داخل الصف نحدد الأعمدة colبالفئات المختلفة .
أحجام الشاشة
تحتوي كل فئة عمود Bootstrap على إشارة إلى حجم الشاشة. هناك أربعة أحجام للشاشة :
- col - عمود للأجهزة الصغيرة جدًا (الهواتف الذكية ، أقل من 576 بكسل)
- col-sm - عمود للأجهزة الصغيرة (الهواتف الذكية ، 576 بكسل وما فوق)
- col-md - عمود للأجهزة المتوسطة (الأجهزة اللوحية ، 768 بكسل وما فوق)
- col-lg - عمود للأجهزة الكبيرة (أجهزة كمبيوتر سطح المكتب ، 992 بكسل وما فوق)
- col-xl - عمود للأجهزة الكبيرة جدًا (أجهزة كمبيوتر سطح المكتب الكبيرة ، 1200 بكسل وما فوق)
col-sm-4يعني التحديد في المثال أعلاه ، أنه سيتم عرض عمود بعرض 4 على الشاشات التي لا يقل حجمها عن حجم الكمبيوتر اللوحي.
في جميع الشاشات الأصغر حجمًا ، سيتم تكديس الأعمدة رأسيًا تلقائيًا.
هذه هي الطريقة التي سيبدو بها مثالنا الخاص بالتخطيط المكون من عمودين على الهاتف الذكي:
مثال على تخطيط ثلاثي الأعمدة
في هذا المثال ، نحدد ثلاثة أعمدة.
في كود HTML ، سيبدو هذا التنسيق كما يلي:
<div class="container">
<div class="row">
<div class="col-sm-3">
Content of the left column.
</div>
<div class="col-sm-6">
Content of the middle column.
</div>
<div class="col-sm-3">
Content of the right column.
</div>
</div>
</div>
تطبيقه على مدونة الخاصة بنا
في البرنامج التعليمي لـ الدرس الاول ، قمنا بتطوير صفحة مدونة. يوضح المثال التالي تخطيطًا من عمودين لصفحة المدونة. يحتوي العمود الأيسر على قائمة إدخالات المدونة. في العمود الأيمن ، لدينا الآن مساحة لأشياء مثل قائمة الروابط.
blog / index.html
<div class="container">
<h1 class="title">Blog</h1>
<p>I write about things I encounter while learning web programming.</p>
<div class="row">
<div class="col-sm-8">
<h2>Blog Entries</h2>
<ul>
<li>More entries will follow...</li>
<li><a href="second-entry/">Second Entry</a></li>
<li><a href="first-entry/">First Entry</a></li>
</ul>
</div>
<div class="col-sm-3 offset-sm-1">
<h3>Links</h3>
<p>
Have a look at the following blogs of my friends:
</p>
<ul class="list-unstyled">
<li><a href="#">Blog 1</a></li>
<li><a href="#">Blog 2</a></li>
<li><a href="#">Blog 3</a></li>
<li><a href="#">Blog 4</a></li>
</ul>
</div>
</div>
</div>
تفسيرات
- في العمود الأيمن ، أضفت فئة CSS ثانية تسمى offset-sm-1. يؤدي هذا إلى نقل العمود موضعًا واحدًا إلى اليمين. وهكذا نحصل على مسافة أكبر قليلاً بين العمودين.
- اختبر التنسيق عن طريق تغيير حجم نافذة المتصفح.
- list-unstyledيزيل الفصل النقاط النقطية لعناصر القائمة (انظر قوائم التمهيد ).
سننتقل الآن إلى الدرس التالي، والذي يتحدّث عن جلب الأيقونات على مواقع الويب .
wesam developer
إذا أعجبك المقال أو كان مفيدًا - ضع "أعجبني". اشترك في المدونة اوشارك برأيك في التعليقات! أراك لاحقا
COMMENTS