Bootstrap ، من Twitter ، هو الإطار الأمامي الأكثر شعبية في الوقت الحاضر. يعتمد Bootstrap على HTML و CSS و JavaScript. إنها بسيطة ومرنة ، مما يجعل تطوير الويب أسرع.
النقاط الرئيسية للتعلم:
1. مكون رمز صغير
2. مكون القائمة المنسدلة
3. مكون مجموعة الأزرار
4. القائمة المنسدلة على غرار الأزرار
في هذا الدرس ، سوف نتعرف بشكل أساسي على وظائف المكونات الثلاث في bootstrap: مكون رمز صغير ، مكون القائمة المنسدلة ومكونات الزر المختلفة.
واحد. مكون رمز صغير
يوفر Bootstrap 263 أيقونات صغيرة مجانية (يتم حسابها مرتين). للحصول على التفاصيل ، يرجى الرجوع إلى رابط المكون من الموقع الرسمي الصيني:
http://v3.bootcss.com/components/#glyphicons.
بعض الرموز هي كما يلي:
يمكنك استخدام علامات <i> أو <span> للاستخدام ، على النحو التالي:
// استخدم أيقونة صغيرة <i> </i> <span> </span> // يمكنك أيضًا دمج الأزرار مع <button> <span> </span> </button> <button> <button> <span> </span> </utton> <butting> <butt> </span> </nutn>
اثنين. مكون القائمة المنسدلة
القائمة المنسدلة هي النقر فوق عنصر أو زر لتشغيل القائمة المخفية المراد عرضها.
// التنسيق الأساسي <div> <button data-toggle = "tropown"> القائمة المنسدلة <span> </span> </ultr button> <ul> <li> <a href = "#"> home </a> </li> <li> <li> <a href = "#" </a> </li> </ul> </viv>
يجب أن يتم لف الأزرار والقوائم في حاوية. بالنسبة لقسم القائمة ، يمكن للإعدادات إخفاء وإضافة أنماط ثابتة تلقائيًا. اضبط السهم ليكون أعلى أو لأسفل.
// يتم إعداد عناصر القائمة <div> // // يتم محاذاة عن عناصر القائمة مع اليمين ، والقيمة الافتراضية هي القائمة المنسدلة-left <ul> // قم بتعيين عنوان القائمة ، ولا تقم بإضافة ارتباطات تشعبية <li> موقع الويب الخاص بالمواقع </li> // قم بتعيين القائمة لعرض <Div> افتراضيًا
ثلاثة. مكون مجموعة الأزرار
مجموعة الأزرار هي التأثير الفريد لدمج أزرار متعددة في حاوية.
// التنسيق الأساسي <div> <button type = "button"> left </utton> <button type = "button"> middle </utton> <button type = "button"> rewise </button> </div> // دمج أزرار متعددة لتسهيل الإدارة <div> <div> <button type = "button" اكتب = "زر"> </button> <butten> <button type = "button"> </button> <button> <button> <type type = "button"> </button> <button> <button type = "button"> </utton> <button> <button type = "button> </button> <button type =" button "> btn-group-sm "> <viv> // nest مجموعة ، مثل القائمة المنسدلة <div> <button type =" button "> اليسار </button> <button type =" button "> middle </butting> <button type =" button> </li> </ul> <div> href = "#"> home </a> </li> <li> <a href = "#"> المعلومات </a> </li> <li> <a href = "#"
ملاحظة: لم يتم تنفيذ هذا في <viv>. من خلال تحليل رمز المصدر ، أنت تعلم أن العش نفسه لديه موقع ، لذلك لا تحتاج إلى إعداده. وأضف فقط زاوية مدورة أخرى على اليمين.
// قم بتعيين مجموعة الأزرار مرتبة رأسياً <viv> // قم بتعيين مجموعة الأزرار المحاذاة في كلا الطرفين ، استخدم علامة <A> <iv> <a type = "button"> left </a> <a type = "button"> middle </a> <a type = "button"> right </a> </a div> // إذا كنت بحاجة إلى استخدام <button> اكتب = "زر"> اليسار </button> </viv> <viv> <button type = "button"> right </button> </viv>
أربعة. القائمة المنسدلة على غرار الأزرار
هذه القائمة المنسدلة هي في الواقع هي نفس نقطة المعرفة الثانية ، باستثناء أن هذه في المجموعة وليس هناك حاجة لإعلان class = "المنسدلة".
// Group Button Button Menu Srop-Down Menu <viv> <button type = "button" data-toggle = "sropdown"> القائمة المنسدلة </span> </utron> <ul> <ul> <li> <a href = "#" href = "#"> حول </a> </li> </ul> </ul> </viv> // تقسيم زر القائمة المنسدلة <div> <button type = "button"> القائمة المنسدلة </button> <button type = "button" data-toggle = "dropdow المعلومات href = "#"> </a> </li> <li> <a href = "#"> المنتج </a> </li> <li> <a href = "#" about </a> </li> </ul> </liv> // pop-up <viv>
المحتوى أعلاه هو مكون رمز زر القائمة لمكون bootstrap الذي قدمه لك المحرر. آمل أن يكون ذلك مفيدًا للجميع!