كيف يمكن التعديل علي العناصر في bootstrab 4؟

أحمد عبدالوهاب · 12 مايو 2019

كيف يمكن التعديل علي العناصر في bootstrab 4 ؟

بمعني

اذا قمت باستخدام navbar من bootstrab ولاكن اريد تعديل الخطوط و الالوان كيف يمكن فعل ذالك

لقد قمت بمحاولة اضافة class للعناصر و التعديل عليها لاكن لا تقبل التعديل في بعض الأمور مثل الالوان و تقبل في اخري مثل الطول و العرض و الحشوات الخارجية و الداخلية

Entesar Khaled · 12 مايو 2019

أهلًا بك،

قم بالتوجة لمجلد css داخل مجلد bootstrap في مشروعك وأنشئ ملف سمِّه custom.css

قم بتضمين هذا الملف داخل صفحة html لديك أسفل الشيفرة الإفتراضية المضمن بها ملف bootstrap.min.css

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

<head>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/custom.css">
</head>

قم بإضافة تنسيقات css التي تريدها داخل ملف custom.css فمثلًا إذا أردت أن تكون جميع الأزرار دائرية بدلا من مستطيلة جرب وضع

.btn {
	border-radius: 50%;
}

المفترض الأن أن تصبح جميع الأزرار مدورة وتم ذلك بدون التغيير على ملفات bootstrap الداخلية

مصدر

بالتوفيق...

أحمد عبدالوهاب · 12 مايو 2019

حاولت فعل هذا لاكن لا يستجيب للتغيرات

index.html

costom.css

bootstrap.min.css

Sherif Elsharkawy · 14 مايو 2019

السلام عليكم

لا يقبل التعديلات في بعض الأحيان بسبب عدم كتابه الكلاس بشكل صحيح

مثال

.class1 .class2{
//css here
	padding-left: 10px;
	margin-right:50px
}

تحاول التعديل على class2 يجب كتابه الكلاس هكذا في ملف custom.css

.class1 .class2{
//css here
padding-right: 10px;
margin-left:50px
}

أحمد عبدالوهاب · 21 مايو 2019

بتاريخ On 5/14/2019 at 14:49 قال Sherif Elsharkawy:
السلام عليكم

لا يقبل التعديلات في بعض الأحيان بسبب عدم كتابه الكلاس بشكل صحيح

مثال
.class1 .class2{
//css here
	padding-left: 10px;
	margin-right:50px
}
تحاول التعديل على class2 يجب كتابه الكلاس هكذا في ملف custom.css
.class1 .class2{
//css here
padding-right: 10px;
margin-left:50px
}
ممكن شرح اكتر لو سمحت علشا المشكله دي موقفاني بقالي فترة

Sherif Elsharkawy · 22 مايو 2019

مثال

<nav>
  <div class="navbar logo">
    <img src="logo.png" class="img">
  </div>
</nav>

لو انت عاوز تعدل على الاطار المحيط بالصوره هتعدل على كلاس logo مثلا الصوره مكانها يمين او يسار مثال لكتابه الكود بشكل صحيح

.navbar .logo {
padding-right: 20px;
}

مثال لكتابه الكود بشكل خاطئ

.logo .img {
padding-right: 20px;
}

او

.navbar .img{
padding-right: 20px;
}

مثال اخر للتعديل على الصوره نفسها

.navbar .logo img {
//هيتم التعديل على الصوره فقط
border-radius: 50%;
}

لو لغيت .logo
و كتبت الكلاس بالشكل ده 

.navbar img {
//هيتم التعديل على كل الصور الموجوده في نفس div الكلاس
border-radius: 50%;
}

علشان يكون التعديل ماشي بشكل صحيح لازم تكتب مسار الكلاس بشكل صحيح و يكون رابط custom.css اسفل رابط bootstrap

كيف يمكن التعديل علي العناصر في bootstrab 4؟

السؤال

أحمد عبدالوهاب

5 أجوبة على هذا السؤال

Recommended Posts

Entesar Khaled

أحمد عبدالوهاب

Sherif Elsharkawy

أحمد عبدالوهاب

Sherif Elsharkawy

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية