اذهب إلى المحتوى
  • 0

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

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

السؤال

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

بمعني 

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

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

رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 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
}

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 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 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

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

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...