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

أمثلة أكواد 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 .الجزء الخامس

أحدث المواضيع الى الآن

منحة جامعة قطر 2022 بتمويل كامل

منحة جامعة قطر 2022 بتمويل كامل

لاتفوت الآن فرصة التسجيل في منحة جامعة قطر المقدمة للطلاب الدوليين الراغبين بالدراسة في احدى اهم الجامعات في قطر تعتبر الدراسة في قطر... قراءة المزيد

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

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

تقدم منحة جامعة برشلونة لدراسة الماجستير في الاقتصاد في  كل عام و تمنح جائزة جامعة برشلونة في اسبانيا حوالي 800000 يورو كمساعدة... قراءة المزيد

ماهي شروط المنحة التركية والاوراق المطلوبة

ماهي شروط المنحة التركية والاوراق المطلوبة

هذه شروط المنحة التركية لمنحة الحكومة التركية 2022 للبكالوريوس والماجستير والدكتوراه شروط الحد الأدنى من التحصيل الدراسي للمتقدمين في... قراءة المزيد

التسجيل في المنحة التركية 2022 مجاناً وشروط القبول

التسجيل في المنحة التركية 2022 مجاناً وشروط القبول

ما هي المنحة التركية؟ ما هي شروط ومتطلبات الحصول على منحة دراسية في تركيا؟ التسجيل في المنح التركية وماهي مواعيد التقديم وماماهو رابط... قراءة المزيد

منحة رومانيا الحكومية

منحة رومانيا الحكومية

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

دراسة الطب في المانيا باللغة الانجليزية

دراسة الطب في المانيا باللغة الانجليزية

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