بوتستراب

كيفية إنشاء أزرار مخصصة في بوتستراب 

بوتستراب

أهلا بكم متابعي ويب تايمز من كل مكان في الوطن العربي اليوم مقال بخصوص لغات البرمجة وخصوصا البوتستراب ولمن لايعلم هذه مكتبة أو اطار أكواد جاهزة بلغات CSS و HTML و JAVASCRIPT وتساعدك في الكثير من الأشياء وتوفر عليك الجهد والوقت في الكثير من الأوقات . وبتعريف ويكيبيديا :-

كان يسمى سابقا “تويتر بوتستراب” (Twitter Bootstrap) هي مجموعة من الأدوات مفتوحة المصدر لإنشاء مواقع الويب وتطبيقاته. قامت شركة تويتر بتطويرها مع Jacob Thornton. وأنشئت لمساعدة المصممين والمطورين على بناء منتجات مذهلة بسرعة وفعالية الهدف منها توفير مكتبة واسعة مرنة وموثقة بشكل جيد للتصاميم “مكررة الاستعمال” المبنية باستخدام HTML وCSS وJavaScript كي يقوم المطورون باستعمالها والإبداع باستخدامها. توسع المشروع ليصبح يعرف بـ Bootstrap ويستقل عن تويتر لأنه كما صرح المسؤولون أصبح مشروعا كبير يتضمن العشرات من العناصر حيث أصبح المشروع الأكثر شعبية على موقع GitHub بعد أن حصل على أكثر من 13,000 متابع و2000 تطوير فرعي.

في مقالنا اليوم سنعرف كيفية إنشاء أزرار مخصصة في بوتستراب ، من المعروف في البوتستراب أن لديها 5 أشكال افتراضية للأزرار وهم default, primary, success, danger, etc ولكن كيف ننشي أزرار مخصصة غير هذه الازرار الافتراضية ؟ هذه هو سؤال اليوم وموضوع اليوم الذي سنتكلم عنه وسنشرحه .

شرح إنشاء أزرار مخصصة في بوتستراب

الشرح

قبل الدخول في أي شرح يجب أن تضع كود اطار بوتستراب في موقعك والطريقة بسيطة جدا فقط ضع هذه الأكواد أسفل الوسم <HAED>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

سأقوم بإنشاء 2 class وهم : .btn-outline و .btn-color-1. ستعمل هذه الفئات على توسيع نمط .btn الافتراضي. في CSS ، سأقوم بتصميم حالتهم الافتراضية وأيضًا: active،: focus،: hover and .active (كل هذه الأشياء تشترك في نفس النمط) عند الانتهاء ، سأكون جاهزًا لاستخدام زر جديد ، على سبيل المثال <a class=”btn btn-outline”> زر جديد </a>

وهذا مثال بسيط للأزرار المخصصة :-

أزرار

كما ترون في الصورة الأزرار من بوتستراب وتم تخصيصها وتعديلها ويمكنك معاينة الأكواد من codepen كل مافعلناه هو قمنا باضافة في HTML زر بوتستراب btn افتراضي ولكن في CSS قمنا بالتعديل عليه

شكرا لمتابعتك للمقال أتمني المقال يفيدك ولاتنسي الاشتراك في الأسفل لكي نرسل لك كلمات رئيسية عالية الزيارة وعالية الربح CPC مجانا ! شكرا لزيارتك ويب تايمز قم بمشاركة الموضوع اذا افادك ولا تنسي الاطلاع علي شهاداتي واذا اردت الاستفسار عن أي شي لاتتردد في كتابته في تعليق .

الصورة الافتراضية
ايهاب زين
مبرمج ومدون مصري حاصل علي شهادة المليون مبرمج عربي في تطوير المواقع وشهادة جوجل للتسويق الالكتروني , وحاصل علي شهادة في ال SEO من SEMRUSH ومنBlue Array Academy , احب التدوين في مجال التقنية و محركات البحث والبرمجة.
المقالات: 130

اترك ردّاً

أربعة عشر + عشرين =