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