تتضمن العناصر الشائعة للنماذج بشكل أساسي: مربعات إدخال النص ، وصناديق التحديد المنسدلة ، وصناديق الراديو ، وخانات الاختيار ، وحقول النص ، والأزرار ، وما إلى ذلك.
أقل: forms.less
Sass: _forms.scss
Bootstrap فقط تخصيص علامات الحقول والأسطورة والتسمية في النموذج
Fieldset {Min-Width: 0 ؛ Padding: 0 ؛ Margin: 0 ؛ Border: 0 ؛} Legend {Display: Width: 100 ٪ ؛ Padding: 0 ؛ Margin-Bottom: 20px ؛ Font-Size: 21px ؛ line-height: ernerit ؛ color: #333 ؛ الحدود: 0 ؛ كتلة مضمنة ؛ الهامش القاع: 5px ؛ الخط الفاصل: BOLD ؛}بالإضافة إلى هذه العناصر ، هناك أيضًا إدخال واختيار ونص وعناصر أخرى. في إطار bootstrap ، يتم تحقيق التأثير عن طريق تخصيص اسم الفصل.
1. يصبح العرض 100 ٪ ؛
2. اضبط حدود رمادية فاتحة (#CCC)
3. زوايا مستديرة مع 4 بكسل
4. اضبط تأثير الظل ويحصل العنصر على التركيز ، وسيتغير تأثيرات الظل والحدود.
5. اضبط لون الحامل على رقم 999
شكل مضمّن
إذا كنت ترغب في إضافة علامة تسمية قبل الإدخال ، فسوف يتسبب ذلك في عرض كسر سطر الإدخال ؛ إذا كان عليك إضافة علامة التسمية هذه ولا تريد كسر سطر الإدخال ، فأنت بحاجة إلى وضع علامة التسمية في مجموعة الحاوية.
<viv> <label> عنوان البريد الإلكتروني </label> </div> <viv> <إدخال type = "البريد الإلكتروني" placeholder = "الرجاء إدخال رقم بريدك الإلكتروني"> </div>
الآثار هي كما يلي:
لتحقيق تأثير الانضمام إلى النماذج ، ما عليك سوى إضافة اسم الفصل. مبدأ التنفيذ هو:
قم بتعيين عنصر التحكم في النموذج على عنصر كتلة مضمّن (العرض: كتلة مضمّنة) لعرض التحكم في النموذج في سطر واحد.
مثال:
<Porm> <viv> <label> البريد الإلكتروني </label> <input type = "البريد الإلكتروني" placeholder = "الرجاء إدخال رقم البريد الإلكتروني"> </div> <viv> <label> كلمة المرور </label> <إدخال type = "password" placeholder = "الرجاء إدخال كلمة المرور"> </div> <label>
الآثار هي كما يلي:
هل وجدت أن الكود يحتوي بوضوح على علامة تسمية ولا يتم وضعه في مجموعة الحاوية. الأمر الأكثر غرابة هو أنه لم يتم عرض محتوى علامة التسمية! في الواقع ، إذا نظرت بعناية ، فقد أضافت علامة التسمية اسم الفصل. دعونا نلقي نظرة على رمز المصدر الخاص به:
.sr -only {الموضع: مطلق ؛ العرض: 1px ؛ الارتفاع: 1px ؛ الحشو: 0 ؛ الهامش: -1px ؛ فائض: مخفي ؛ مقطع: rect (0 ، 0 ، 0 ، 0) ؛ الحدود: 0 ؛}منذ إضافة علامة التسمية وتم إضافة اسم فئة .SR فقط لإخفاء التسمية ، أليس هذا غير ضروري؟ ؟ ؟ ولكن هذا هو بالضبط واحدة من مزايا إطار bootstrap. إذا لم يتم تعيين الملصق للتحكم في الإدخال ، فلن يتم التعرف على قارئ الشاشة بشكل صحيح ، ولديه أيضًا اعتبارات معينة للأشخاص ذوي الإعاقة.
شكل أفقي
يتطلب تطبيق تأثيرات الشكل الأفقي في bootstrap الشرطين التاليين:
1. استخدم اسم الفئة.
2. نظام الشبكة مع إطار bootstrap (التفاصيل: شرح مفصل لنظام شبكة bootstrap)
استخدم اسم الفئة.
1. اضبط قيم الحشوة والهامش من أدوات التحكم في النموذج
2. تغيير شكل التعبير عن مجموعة. من مجموعة ، على غرار صف نظام الشبكة
رمز المصدر CSS:
. {min-height: 27px ؛} يمين ؛}}مثال:
<Porm> <viv> <label> البريد الإلكتروني </label> <div> <input type = "البريد الإلكتروني" placeholder = "الرجاء إدخال بريدك الإلكتروني"> </div> </div> <viv> <blabe> كلمة المرور </label> <viv> <provie type = "password" placeholder = "الرجاء إدخال كلمة المرور الخاصة بك" كلمة المرور </label> </viv> </viv> <viv> <viv> <butren> أدخل بريدك الإلكتروني </button> </viv> </poth>
الآثار هي كما يلي:
مربع إدخال خط واحد
عند استخدام الإدخال في bootstrap ، يجب أيضًا إضافة نوع النوع. إذا لم تحدد نوع النوع ، فلن تحصل على النمط الصحيح ، لأن إطار bootstrap يحدد الأنماط من خلال شكل الإدخال [type = "؟"] ، مثل: نوع النص ، الذي يتوافق مع الإدخال [type = "text"]
لجعل عناصر التحكم تبدو جيدة في أنماط أشكال مختلفة ، تحتاج إلى إضافة اسم الفصل.
<form rob = "form"> <viv> <input type = "email" placeholder = "elect elem
مربع اختيار الانسحاب حدد
يحدد التحديد متعدد الخطوط قيمة السمة المتعددة إلى متعددة
<form rob = "form"> <viv> <evel> <point> 1 </point> <borting> 2 </bortion> <spoint> 3 </bortion> <borting> 4 </bortion> <borting> 5 </soph> </reveld> </viv> <div> <تحديد MOUNTION> <SPOTION> 1 </SPOTION> <STONTS> 2 </OPTION> <SPOTION> 3 </SPOTION> <NOPTION> 4 </SPOTION> <NOPTION> 5 </SPOTION> </3DENT> </VIL> </POTING>
نص حقل النص
حقل النص هو نفس طريقة الاستخدام الأصلية. يمكن أن يحدد ضبط الصفوف ارتفاعه ، حيث يمكن أن يحدد تعيين العلف عرضه. إذا تمت إضافة اسم الفئة. -form-control إلى عنصر Textarea ، فليست هناك حاجة لتعيين سمة Cols ، لأن عرض المساحة لهدف نمط .form-control في إطار bootstrap هو 100 ٪ أو تلقائي.
<form rob = "form"> <viv> <textarea rows = "3"> </textarea> </viv> </part>
مربع الاختيار وراديو مربع الراديو
سيكون هناك بعض المشكلات البسيطة في مربع الاختيار والراديو بالتزامن مع علامات التسمية (مثل مشكلات المحاذاة)
<Porm> <viv> <label> <input type = "checkbox"> تذكر كلمة المرور </label> </viv> <viv> <blabel> <input type = "radio" name = "ebeactradios" id = "ebearchRadiOS1" exced> مثل </labl مثل </label> </viv> </part>
1. سواء كان مربع الاختيار أو الراديو ، فهي ملفوفة في الملصقات.
2. يتم وضع مربع الاختيار وعلامة التسمية في حاوية تسمى .ckeckbox
3. يتم وضع الراديو والتسمية في حاوية تدعى .Radio. يستخدم Bootstrap بشكل أساسي. checkbox و .radio أنماط للتعامل مع محاذاة خانات الاختيار وأزرار الراديو والعلامات.
.radio ، .checkbox {display: block ؛ min-height: 20px ؛ padding-left: 20px ؛ margin-top: 10px ؛ margin-bottom: 10px ؛}. تسمية الراديو ، .Checkbox label {display: input [type = "checkbox"] ،.خانات الاختيار وأزرار الراديو أفقيا
1. إذا كان مربع الاختيار يحتاج إلى ترتيب أفقيًا ، فأنت بحاجة فقط إلى إضافة اسم الفصل على التسمية.
2. إذا كان الراديو يحتاج إلى ترتيب أفقي ، فما عليك سوى إضافة اسم الفصل.
هنا هو رمز مصدر CSS:
.radio-inline ، .checkbox-inline {display: inline block ؛ padding-left: 20px ؛ margin-bottom: 0 ؛ font-weight: normal ؛ alsal-align: middle ؛ cursor: pointer ؛}. <div> <label> <input type = "radio" name = "sex" value = "option1"> ذكر </label> <label> <input type = "radio" name = "sex"حالة التحكم في النموذج
1. حالة التركيز:
يتم تنفيذ حالة التركيز من خلال الفئة الزائفة: التركيز. تحذف حالة التركيز في عنصر التحكم في نموذج bootstrap النمط الافتراضي للمخطط التفصيلي ويضيف تأثير الظل مرة أخرى. ما يلي
رمز المصدر CSS:
.form-control: Focus {border-color: #66afe9 ؛ Outline: 0 ؛ -Webkit-box-shadow: inset 0 1px 1pxrgba (0،0،0 ، .075) ، 0 0 8px rgba (102 ، 175 ، 233 ، .6) ؛ box-shadow: 8px RGBA (102 ، 175 ، 233 ، .6) ؛}كما يتضح من الكود المصدري ، من أجل جعل عنصر التحكم له تأثير النمط أعلاه في حالة التركيز ، تحتاج إلى إضافة اسم الفصل إلى عنصر التحكم.
<Porm> <viv> <viv> <type type = "text" placeholder = "ليس تأثيرًا في التركيز"> </div> <viv> <div> <input type = "text" placeholder = "effect in focus"> </viv> </viv> </form>
يختلف تأثير عناصر التحكم في الملفات والراديو ومربع الاختيار في التركيز أيضًا عن تأثير عناصر التحكم في الإدخال العادية. ما يلي هو رمز المصدر
الإدخال [type = "file"]: التركيز ، الإدخال [type = "radio"]: التركيز ، الإدخال [type = "checkbox"]: Focus {Outline: Thin Dotted ؛ Outline: 5px Auto -Webkit-Focus-Ring-Color ؛ Outline Outline: -2px ؛}2. تعطيل الحالة:
ما عليك سوى إضافة الخاصية المعطلة على عنصر التحكم في النموذج المقابل ، والما يلي هو رمز مصدر CSS:
.form-control [upabled] ،. الإدخال [type = "radio"] [تعطل] ، إدخال [type = "checkbox"] [تعطيل] ، راديو [تعطيل] ،. .Radio-Inline ، Fieldset [معطل] .Checkbox ، Fieldset [معطل] .Checkbox-inline {cursor: notaled ؛}مثال:
<input type = "text" placeholder = "form upabled" معطل>
إذا قام Fieldset بتعيين الخاصية المعوقة ، فسيتم تعطيل المجال بأكمله
مثال:
<form rom rom = "form"> <fieldset up uppluded> <viv> <blabe> يتم تعطيل مربع الإدخال </label> <input type = "text" placeholder = "disable input > <إدخال type = "checkbox"> مربع الخيار يتم تعطيله </label> </div> <button type = "submit"> إرسال </button> </fieldset> </poth>
التأثير على النحو التالي: (يظهر رمز معاق عند تحريك الماوس. فيما يلي لقطة شاشة مباشرة لا يمكن رؤيتها)
3. حالة التحقق
يوفر Bootstrap التأثيرات التالية:
1. has-warning: حالة التحذير أصفر
2. هاسر: حالة الخطأ الأحمر
3.
عند استخدامه ، ما عليك سوى إضافة اسم فئة الحالة إلى حاوية مجموعة النماذج. التأثيرات هي نفسها في الحالات الثلاث ، ولكن الألوان مختلفة.
مثال:
<Porm> <viv> <label> حالة النجاح </label> <input type = "text" placeholder = "success status"> </viv> <viv> <label> حالة خطأ </label> <إدخال type = "text" placeholder = "error status"> </fire> <div> <siv> حالة تحذير </label
الآثار هي كما يلي:
في بعض الأحيان ، توفر حالات مختلفة أيقونات مختلفة عند التحقق من صحة النموذج. إذا كنت ترغب في عرض الرمز في الحالة المقابلة ، فأنت بحاجة فقط إلى إضافة اسم الفصل. لاحظ أنه يجب استخدامه مع .has-error ، .has-success ،.
كل الرموز الصغيرة من bootstrap مصنوعة باستخدام @font-face. يحب:
<span class = "Glyphicon-warning form-control-fedback"> </span>
مثال:
<Porm> <viv> <label> حالة النجاح </label> <input type = "text" placeholder = "success status"> <span> </span> </viv> <viv> <label> حالة خطأ </label> <type type = "text" text "text" الحالة "> <span> </span> </viv> </form>
الآثار هي كما يلي:
شكل معلومات سريعة
بشكل عام ، عند إجراء التحقق من النماذج ، يلزم وجود معلومات موجهة مختلفة. استخدم. help-block في إطار bootstrap لعرض معلومات المطالبة في الكتل وعرضها في أسفل عنصر التحكم.
هنا هو رمز مصدر CSS:
.help-block {display: block ؛ margin-top: 5px ؛ margin-bottom: 10px ؛ color: #737373 ؛}مثال:
<Porm> <viv> <label> الحالة الناجحة </label> <input type = "text" placeholder = "status spected"> <span> تكون معلومات الإدخال صحيحة </span> <span> </span> </viv> <siv> <blabe> حالة خطأ </label> <input type = "text" texh " الحالة </label> <input type = "text" placeholder = "تحذير حالة التحذير"> <span> الرجاء إدخال المعلومات الصحيحة </span> <span> </span> </viv> </form>
الآثار هي كما يلي:
إذا كنت لا ترغب في إضافة الكود الخاص بك إلى bootstrap.css ، والتصميم يحتاج إلى ذلك ، يمكنك استخدام نظام شبكة Bootstrap ، على سبيل المثال:
<form rob rom = "form"> <viv> <label for = "inputsuccess1"> حالة النجاح </label> <viv> <viv> <div> <input type = "text" id = "inputsuccess1" placeholder = "success status"> </viv> المعلومات التي أدخلتها صحيحة </span> </div> </form>
ما سبق هو المحتوى ذي الصلة لمكون نموذج bootstrap الذي قدمه لك المحرر. آمل أن يكون ذلك مفيدًا لك!