بادئ ذي بدء ، أود أن أشكر جميع أصدقائي على دعمهم. سأستمر في تحديث ملخص دراستي على bootstrap. إذا كان هناك شيء خاطئ في الكتابة ، فالرجاء تصحيحني. فيما يتعلق بالمقال السابق ، يعد التصميم الثابت وتخطيط البث أمرًا مهمًا للغاية. إذا لم تكن واضحًا حيال ذلك ، فيمكنك إلقاء نظرة على ما كتبته: ملاحظات دراسة Bootstrap: تصميم نمط CSS (1)
هذه المرة ، دعونا نلقي نظرة على بعض الفصول المحددة والمبنية حول الأنماط في bootstrap وكيفية استخدام هذه الفئات ، والاختلافات بين الفصول الدراسية ، وبعض الفئات ذات الصلة المعنية ، والتي يتم شرحها عند إدراجها.
1. الشكل
1. فئة السيطرة: عرض علامات <pection> <select> <evideara> التي تحتوي على هذه الفئة ستصبح عرضًا: 100 ٪ ، وفي النموذج ، عادة ما يتم تضمين عنصر التحكم في مجموعة النموذج مع علامة التسمية.
<form rom = "form"> <!-جميع المدخلات ، textarea ، حدد العناصر مع مجموعة فئة السيطرة على النماذج سيتم التخلف عن العرض: 100 ٪-> <div>-form-group: بشكل عام ، يتم استخدام الملصقات ولف المساحة في form-group <label = "exampleInputeMail" <label for = "exampleInputEmail"> اسم البريد الإلكتروني </label> <evidearea> 11111 </textarea> </viv> <div> <label for = "select"> تحديد نموذج </label> <select> <tort> 111 </soph> <borting> 222 </soph> </select
وفقًا للرمز أعلاه ، يمكننا أن ننظر إليه واحدًا تلو الآخر. إضافة فئة في الخط (ضع التحكم في سطر واحد) | فئة الشكل الأفقية (الملصق موجود على اليسار والتحكم على اليمين) ، والذي يستخدم مساعدة الملصق.
<!-فئة النماذج في الخط تجعل النموذج موجودًا أفقيًا-> <Porm>-ثانية هناك سطر تسجيل الوصول ، إذاعة خط ، إلخ <viv>@</viv> </viv> </viv> <button type = "submit"> Search </utton> </form>
الآثار هي كما يلي:
إذا لم تتم إضافته ، فسيتم الضغط على الزر إلى السطر التالي. لا يتم نشر المزيد من الصور هنا ، يمكنك لصق الرمز واختباره بنفسك.
<!-طرف التحكم في النموذج المرتب بشكل حار: يعني أن النص محاذاة يميني-> <Porm> <viv> <label for = "inputeMail" النائب = "password"> </viv> </viv> </viv> </form>
الآثار هي كما يلي:
( ملاحظة: يجب أن يكون مربع نص الإدخال هنا 5/6 ، لقد قمت بتخصيص عرضه إلى 20 ٪)
هنا ، فيما يتعلق بالشكل الأفقي ، يجب تنفيذها بالتزامن مع نظام شبكة Bootstrap.
يحتوي استخدام اسم الفصل "Form Formsontal" على العنصر <Form> على الوظائف التالية:
1: اضبط قيم الحشو والهامش للتحكم في النموذج. يمكن رؤية الرمز أعلاه في وحدة التحكم في التصحيح ، الحشو اليساري: 50 بكسل.
2: تغيير تعبير "مجموعة الشكل" ، على غرار "الصف" لنظام الشبكة.
2. وظيفة التسمية
<label for = "hello1"> hello </billy> <input type = "text" id = "hello"> <br> --- يتم إنشاء الهالة الزرقاء <label for = "1111"> hello </billy> <input type = "text" id = "jiang"> <br> --- لا يتوافق معرفه ، لا يوجد استجابة. فقط عندما يتم وضع الماوس على عنصر التحكم ، سيكون هناك هالة زرقاء
بناءً على الكود أعلاه ، راجع: يجب أن تتوافق السمة في التسمية مع المعرف في عنصر التحكم. الوظيفة: تأكد من أنه عند وضع الماوس على الملصق ، فإن التحكم المقابل سيؤدي إلى هالة زرقاء.
3. دور الدور
هل تجد أنه من الغريب لماذا تحتاج إلى إضافة دور عند كتابة النماذج أو بعض عناصر التحكم؟
الوظيفة: تأكد من التعرف على برنامج قراءة الشاشة. برنامج قراءة الشاشة هو برنامج يساعد الأشخاص المتخفيين عقلياً في الوصول إلى الإنترنت. إنه ينقل الصور والنص وما إلى ذلك إلى الأشخاص المتخلفين عقلياً في شكل صوت. لذلك ، من أجل ضمان إمكانية التعرف على برنامج قراءة الشاشة ، لا توجد عادة علامات أو علامات دلالية مع وظائف خاصة يجب كتابتها عليها. على سبيل المثال:
<a href = "#" rod = "button"> link </a> <!-إذا تم استخدام الرابط A كزر ويتم استخدامه لإثارة وظائف معينة على الصفحة الحالية ، بدلاً من الاتصال بالصفحات الأخرى أو بقية الصفحة الحالية ، تأكد من تعيين دور = "زر"-> في الأصل ، تمثل العلامة رابطًا ، ولكن يتم استخدامها هنا كزر. لا يمكن لبرنامج قراءة الشاشة التعرف عليه ، لذلك يجب إضافة دور = "زر" لإعلام برنامج قراءة الشاشة أن هذا زر زر.
4. ما هو الفرق بين الملصقات ، العلامة التجارية ، المسمى أريا؟
<div> <input type = "text" id = "idcard" aria-label = "id card"> <p> مثال على مستوى الكتلة </p>-help-block: النص المستخدم لإطالة التفسير </div> <b> <label for = "idcard"> بطاقة الهوية </label
الآثار هي كما يلي:
السابق لا يحتوي على كلمة "بطاقة الهوية" المرئية ، وكلاهما هو لراحة برنامج قراءة الشاشة لتحديده. إنه مجرد أن يكون العلامات الأريا مخفية.
دعونا نلقي نظرة على كيفية استخدام العلامات التجارية. عادةً ، عندما يكون نص التسمية موجودًا بالفعل في عنصر معين ، استخدم علامة ARIA ، وقيمته هي معرف جميع عناصر القراءة. دعونا نلقي نظرة على الغواصات التالية:
<div> <button type = "button" id = "sropdownmenu1" data-toggle = "sropdown"> حدد الخيارات التالية </span> </button> <ul rom = "menu" aria-labelledby = "href =" li> <li> 1111> <li rol = rob = "العرض التقديمي"> <a aro = "menuitem" tabindex = "-1" href = "#"> 22222 </a> </li> <li rom = "العرض التقديمي"> <a reb = "menuitem" tabindex = "-1" "href ="#" href = "#"> 33333 </a> </li> </ul> </viv>
في هذا الوقت ، يحتوي UL على LI ويتم التحكم فيه في الزر ، لذلك من الأنسب استخدام ARIA-Labelledby في هذا الوقت. ببساطة ، فإن نطاق الاستخدام بين الثلاثة مختلف ، والوظائف الأساسية هي نفسها ، كل ذلك لراحة التعرف على برنامج قراءة الشاشة. عندما يتعلق الأمر بالفصول الخفية ، نحتاج إلى ذكر فئة SR فقط. دعونا نلقي نظرة.
<label for = "inputeMail"> البريد الإلكتروني: </label>
<label for = "inputeMail"> البريد الإلكتروني: </label>
التأثير في هذا الوقت هو: النص أعلاه مخفي ، وسيظل هذا الاختلاف فقط دون تغيير.
5. فئة تعطيل
في النموذج ، تحتاج إلى الانتباه إلى هذه الفئة ، دعنا نقارنها هنا.
<!-قدم نموذجًا مع Fieldset ، الوظيفة: قم بتضمين النموذج في كتلة-> <form rob = "form"> <fieldset upabled> <iv> <label for = "distabledtextinput"> مربع الإدخال المعمول به </label> <type type = "text" id = "distabledTextInput". <حدد ID = "disabledseSelect"> <borte> تعطيل غير قابل للتحديد </option> </select> </fire> <viv> <blable> <input type = "checkbox"> لا يمكن تحديد </label> </div> <butty type = "submit"> إرسال </button> </fieldset> </form>
إذا قمت بإضافة فئة معطلة إلى مجموعة الملفات ، فلن يتم تعطيل النموذج المعطل إلا لزر الإدخال ، وما إلى ذلك ، ولن يعمل مع سمات أسطورة العناصر الأخرى. بالمقارنة ، أضف سمة الأسطورة
<!-تمت إضافة خاصية مطولة-> <form rob = "form"> <fieldset upabled> <legend> <input type = "text" extraled = "color color layed Out ، ولكن غير معطل"> </legend>-هنا يمكن وضع الماوس في مربع الإدخال <div> <label for = "distabledTextInput"> مربع الإدخال المعاق </label </". placeholder = "upipated"> </viv> <viv> <label for = "distabledselect"> مربع المنسدلة المعمول به </label> <حدد ID = "distabledseSelect"> <torting> غير قابل للتحديد </emption> </select> </div> <label> <label> <input type = "checkbox" <!-يتم تعطيل النماذج المعطلة فقط لزر الإدخال ، وما إلى ذلك ، ولا تعمل مع العناصر الأخرى Legend->
6.DATA-TOGGLE السمة التي تستهدف البيانات
يسمح HTML5 للمطورين بإضافة سمات بحرية إلى علاماتهم ، وتبدأ هذه السمة المخصصة بشكل عام بـ "البيانات-".
بيانات البيانات: تشير إلى تفاعل البيانات. انقر فوق الزر في العمود أعلاه للتبديل إلى القائمة المنسدلة.
يشير تجسس البيانات: المراقبة
بيانات البيانات: الهدف.
يتضمن ذلك أحداثًا في JS ، ولن أشرحها بالتفصيل. سألقي نظرة على هذه المشكلات عندما أدخل تعلم JS في bootstrap. لا يزال هناك العديد من الأشياء المتضمنة في النموذج ، وهناك ما يقرب من العديد من الملخصات. هناك أيضا إضافات. من فضلك اترك لي رسالة أدناه.
2. فئة زر
هذا ليس بالأمر الصعب ، فقط تذكر فئة السمات ، من السهل فهمها.
<a href = "#" rob = "button"> الرابط </a> <button type = "إرسال" distabled = "disabled"> الافتراضي </button> <button type = "president"> pricial </button> <button type = "substr"> النجاح </button> <button> type = "prident" value = "input"> <input type = "button" value = "submit">
الآثار هي كما يلي:
3. فئة الصورة
<!-مركز كتلة المركز: مركز المحتوى لعرض IMG-ronded: مع زوايا مستديرة IMG-Circle: Ring Img-Thumbnail: أضف حدًا خارجيًا إلى الصورة->
<img src = "111.png">
<img src = "111.png">
<img src = "111.png">
الآثار هي كما يلي:
خلاصة القول ، أشعر شخصياً أن دور الأشكال لا يزال مهمًا للغاية. من الأسهل شرح بعض الفئات الأساسية الأخرى هنا. سيتم نقل المقالة التالية إلى تعلم مكون CSS: Notes Bootstrap Notes CSS (3)
إذا كنت لا تزال ترغب في الدراسة بعمق ، فيمكنك النقر هنا لدراسة وإرفاق 3 مواضيع مثيرة لك:
Bootstrap التعلم البرنامج التعليمي
Bootstrap البرنامج التعليمي العملي
تعليمي استخدام المكونات الإضافية Bootstrap
ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.