موقع المنح الدراسية العربي الأول

القائمة ☰

التسجيل

أمثلة أكواد HTML و CSS في Bootstrap – الجزء الرابع –

أمثلة أكواد HTML و CSS في Bootstrap – الجزء الرابع –


شارك هذه الفرصة مع الأصدقاء

أمثلة أكواد HTML و CSS في Bootstrap التي سنتستخدمها بشكل شائع والكلاسات Classes في الثيم أي قالب الموقع الذي سنقوم بانشاءه في وورد بريس .

اليك كل مثال وشرحه و كذلك صورة العرض لهذا المثال.

المثال الأول : أمثلة أكواد HTML و CSS في Bootstrap

<div class="overflow-hidden">
   <div class="container">
 <h2> المثال الأول </h2> 
   </div>
</div>

 الصورة التي توضح الكود

المثال الأول : أمثلة أكواد HTML و CSS في Bootstrap

المثال الثاني : أمثلة أكواد HTML و CSS في Bootstrap

<div class="overflow-hidden">
    <div class="container">
        <h2> المثال  الثاني  </h2><br><br>
        <div class="row">
            <div class="col-lg-4">
                أنا العمود الأول تستطيع ادخال أي شيئ تريده هنا 
            </div>
            <div class="col-lg-4">
                أنا العمود الثاني تستطيع ادخال أي شيئ تريده هنا
            </div>
            <div class="col-lg-4">
                أنا العمود الثالث تستطيع ادخال أي شيئ تريده هنا
            </div>
        </div>
        </div>
</div>

 الصورة التي توضح الكود

المثال الثاني : أمثلة أكواد HTML و CSS في Bootstrap

المثال الثالث :

<div class="overflow-hidden">
<div class="container">
        <h2>المثال الثالث </h2> 
    <div class="row">
        <div class="col-lg-6">
 			<img src="https://studyshoot.com/wp-content/uploads/2020/04/unnamed.jpg" class="rounded float-left" alt="Responsive image" >
        </div>
            <div class="col-lg-6">
            <img src="https://studyshoot.com/wp-content/uploads/2020/04/unnamed.jpg" class="rounded float-left" alt="Responsive image" >
            </div> 
    </div>
</div>
</div>

 الصورة التي توضح الكود

أمثلة أكواد bootstrap  - الجزء الرابع -

المثال الرابع :

<div class="overflow-hidden">
    <div class="container">
    <div class="row"> 
     	<div class="col-lg-8" style="background-color: #F0F8FF;">
     		<h2>المثال الرابع </h2> <br>
     			هنا يمكنك كتابة محتوى ما 
 		</div>
        <div class="col-lg-4" style="background-color: #F5F5F5;"> 
                هنا ستجد مكان الشريط الجانبي 
        </div>
    </div>	
    </div> 		 
</div>

 الصورة التي توضح الكود

المثال الثاني : أمثلة أكواد HTML و CSS في Bootstrap

وهكذا .,.  كما لاحظنا في السابق هي تتمة لما قمنا بشرحه في درسنا السابق  الذي تحدثنا به عن كلاسات boostrap  واساسيات العمل , تستطيع مراجعة الدرس الثالث من هنا 

اما عن القسم الثاني من درسنا اليوم فهو كيفية اضافة تنسيقنا الخاص على كلاسات Bootstrap  ,

بمعنى آخريمكن أن ترغب بالتعديل على تنسيق كودات ب Bootstrap المحاذاة او الفواصل او المسافة بين المحتوى و الالوان , الى ما ذلك , وهذا ما سنتعلمه في الدرس الخامس من هذه السلسلة ,

وسيكون المحتوى عن كيفية ضمّ style.css الموجودة في ملف الثيم الخاص بنا الى function.php و بدء العمل بـ css .

اتمنى أن تكون قدّ استفدت في هذا الدرس من بعض أمثلة أمثلة أكواد HTML و CSS في Bootstrap

الدرس التالي :

ضمّ style.css الموجودة في ملف الثيم الخاص بنا الى function.php و بدء العمل بـ css .الجزء الخامس



شارك هذه الفرصة مع الأصدقاء

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *



الزوار قاموا بقراءة ما يلي أيضاً

اضافة خطوط جوجل العربية في ووردبريس في 3 خطوات |Arabic Webfonts

إضافة خطوط جوجل العربية في ووردبريس تحتاج فقط الى استخدام كود بسيط جداً والذي سوف يقوم بدوره تغير نوع الخط وهذا الكود سوف تقوم بلصقه في... قراءة المزيد

تخصيص القالب في ووردبريس customizer الدرس السادس عشر

تخصيص القالب في ووردبريس customizer هو ما يعرف عند الذهاب الى قسم مظهر , ثم الضغط على تخصيص , ستجد عادة في كل ثيم منصب اقسام معينة مثل التحكم... قراءة المزيد

انشاء صفحة الأرشيف في وورد بريس الدرس الخامس عشر

انشاء صفحة الأرشيف في وورد بريس نعني بها تلك الصفحة التي تظهر كل المقالات المضافة في الموقع , مثال : شخص ما قام بالضغط على اسم كاتب... قراءة المزيد

اضافة عداد تنازلي بموقعك في ووردبريس باستخدام جافا سكريبت و php

اضافة عداد تنازلي بموقعك WordPress Countdown Timer في ووردبريس باستخدام جافا سكريبت و php , لربما تستغرب من انك تستطيع انشاء عداد تنازلي في ووردبريس... قراءة المزيد

اظهار المقالات في وورد بريس الدرس الرابع عشر

في هذا الدرس سوف نتعلم كيف نقوم بـ اظهار المقالات في وورد بريس التي قمنا بانشائها في الدرس السابق, وكذلك سنقوم بتخصص اظهار عدد المقالات... قراءة المزيد

انشاء المقالات المخصصة والتصنيفات المخصصة في وورد بريس الدرس الثالث عشر

انشاء المقالات المخصصة والتصنيفات المخصصة في وورد بريس الدرس الثالث عشر في الدرس السابق تعلمنا كيف نقوم باظهار المنشورات التي نقوم... قراءة المزيد

انظر المنح التالية

القائمة الشاملة ←

منحة جامعة قطر

قدّم الان مجاناً على منحة جامعة قطر للدراسة المجانية بحيث سيتم اختيار المرشحين على أساس الجدارة الأكاديمية. تتوفر

منحة جامعة أفيرو لدراسة البكالوريوس الماجستير في البرتغال

يمكن الآن التقديم للحصول على طلب منحة جامعة أفيرو لدراسة الماجستير في البرتغال. تحتفظ  جامعة أفيرو كل عام

منحة جامعة ألغوما لدراسة البكالوريوس في كندا

تقدم جامعة ألغوما الدولية الكندية منحة دراسية لكل الطلاب الدوليين الراغبين بدراسة البكالوريوس في كندا, وفقاً لكل المعلومات

منحة ماجستير في المانيا من GISMA Business School

ستتاح الفرصة لكل الطلاب المتقدمين للحصول على منحة ماجستير في المانيا لادارة الأعمال. سيحصل المتقدمون الناجحون في منحة

STUDYSHOOT ©