• 0

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

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

بمعني 

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

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

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
  • 1

أهلًا بك،

قم بالتوجة لمجلد 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 الداخلية

مصدر

بالتوفيق...

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
  • 0

السلام عليكم

 

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

مثال 

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

 

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

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

 

1 شخص أعجب بهذا

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
  • 0
بتاريخ 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
}

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

 

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
  • 0

مثال

<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 

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة

يجب أن تكون عضوًا لدينا لتتمكّن من التعليق

انشاء حساب جديد

يستغرق التسجيل بضع ثوان فقط


سجّل حسابًا جديدًا

تسجيل الدخول

تملك حسابا مسجّلا بالفعل؟


سجّل دخولك الآن