مكونات تخطيط bootstrap
1. أيقونة خط bootstrap
(1) رابط قائمة أيقونة الخط
http://www.runoob.com/bootstrap/boostrap-glyphicons.html
(2) الاستخدام
لاستخدام الرموز ، ما عليك سوى استخدام الرمز التالي. يرجى الاحتفاظ بالمسافة المناسبة بين الرمز والنص. لا غليفيكون CSS.
<span> </span>
(3) رمز الخط المخصص
لقد رأينا كيفية استخدام أيقونات الخط ، وبعد ذلك سنرى كيفية تخصيص أيقونات الخطوط.
نبدأ بالمثال أعلاه وتخصيص الرمز عن طريق تغيير حجم الخط ولون وتطبيق ظلال النص.
أ. الرموز المخصصة
<button type = "button"> <span> </span> المستخدم </button>
ب. حجم الخط المخصص
عن طريق زيادة أو تقليل حجم الخط للرمز ، يمكنك جعل الرمز يبدو أكبر أو أصغر.
<button type = "button" style = "font-size: 60px"> <span> </span> المستخدم </button>
C. تخصيص لون الخط
<button type = "button" style = "color: RGB (212 ، 106 ، 64) ؛"> </span> user </utton>
D. تطبيق ظلال النص
<button type = "button" style = "text-shadow: Black 5px 3px 3px ؛"> <span> </span> مستخدم </button>
2. القائمة المنسدلة bootstrap
(1) القائمة المنسدلة قابلة للتبديل وهي قائمة سياق تعرض الرابط بتنسيق قائمة. يمكن تحقيق ذلك من خلال التفاعل مع المكون الإضافي JavaScript القائمة المنسدلة (القائمة المنسدلة).
لاستخدام القائمة التالية ، ما عليك سوى إضافة قائمة منسدلة في Class .DropDown.
<div> <button type = "button" id = "sropdownmenu1" data-toggle = "sropdown"> topic <span> </span> </utton> <ul rom = "menu" aria-labelledby = "rolddownmen1"> <li rol = rob = "العرض التقديمي"> <a aro = "menuitem" tabindex = "-1" href = "#"> تعدين البيانات </a> </li> <li rob = "العرض التقديمي"> <a reb = "menuitem" tabindex = "-1" href = "#" rob = "menuitem" tabindex = "-1" href = "#"> الروابط المنفصلة </a> </li> </ul> </viv>
(2) محاذاة
قم بمحاذاة القائمة المنسدلة مباشرة عن طريق إضافة فئة .pull-right إلى .dropdown-menu.
(3) العنوان
يمكنك استخدام Class Solddown Header لإضافة عنوان إلى منطقة التسمية في القائمة المنسدلة.
3. مجموعة زر bootstrap
(1) يسمح Button Group بتكديس أزرار متعددة على نفس الخط. هذا مفيد جدًا عندما تريد محاذاة الأزرار معًا.
(2) التعشيش
يمكنك تعشق مجموعة زر أخرى داخل مجموعة زر واحدة ، أي ، مجموعة أخرى .BTN-Group داخل مجموعة .BTN-Group. يتم استخدام هذا عند استخدام القائمة المنسدلة مع سلسلة من الأزرار.
4. القائمة المنسدلة زر Bootstrap
استخدم فئة bootstrap لإضافة قائمة منسدلة إلى الزر. لإضافة قائمة منسدلة إلى زر ، ما عليك سوى وضع الزر والقائمة المنسدلة في مجموعة. يمكنك أيضًا استخدام <span> </span> للإشارة إلى أزرار كقوائم منسدلة.
<div> <button type = "button" data-toggle = "spelddow"> الافتراضي <span> </span> </butting> <ul rob = "menu"> <li> <a href = "#" href = "#"> other </a> </li> <li> </li> <li> <a href = "#"
(1) القائمة المنسدلة زر الانقسام
تستخدم القائمة المنسدلة للزر المنقسمة نفس النمط تقريبًا مثل زر القائمة المنسدلة ، ولكنه يضيف وظائف أصلية إلى القائمة المنسدلة. على الجانب الأيسر من زر الانقسام ، توجد الوظيفة الأصلية ، وعلى اليمين هي التبديل الذي يعرض القائمة المنسدلة.
<div> <button type = "button"> الافتراضي </button> <button type = "button" data-toggle = "speldown"> </span> <span> قم بتبديل القائمة المنسدلة </span> </button> <ul rob = "menu"> <li> <li> <a href = "#" href = "#"> other </a> </li> <li> </li> <li> <a href = "#"
(2) حجم القائمة المنسدلة للزر
يمكنك استخدام القائمة المنسدلة مع أزرار بأحجام مختلفة: .BTN-LARGE ، .BTN-SM ، أو .BTN-XS.
(3) قائمة السحب للأزرار
يمكن أيضًا تمديد القائمة للأعلى ، ما عليك سوى إضافة .Dropup إلى حاوية مجموعة الأصل .BTN-Group.
<viv> </viv>
5. مجموعة مربع الإدخال bootstrap
أدخل مجموعة المربع. تمتد مجموعة مربع الإدخال من التحكم في النموذج. مع مجموعات مربع الإدخال ، يمكنك بسهولة إضافة نص أو أزرار كبادئات وتلويحات إلى مربعات الإدخال المستندة إلى النص.
عن طريق إضافة محتويات البادئة واللواحق إلى حقل الإدخال ، يمكنك إضافة عناصر مشتركة إلى إدخال المستخدم. على سبيل المثال ، يمكنك إضافة علامة بالدولار ، أو إضافة @ قبل اسم مستخدم Twitter ، أو العناصر العامة الأخرى التي تتطلبها واجهة التطبيق.
خطوات إضافة بادئة أو عنصر لاحقة إلى .form-control هي كما يلي:
أ. ضع عنصر البادئة أو اللاحقة في <div> مع فئة. إنثاء المجموعة.
ب. ثم ، في نفس <Div> ، ضع محتوى إضافيًا في <spl> من الفئة.
C. ضع <span> في المقدمة أو خلف عنصر <pection>.
للحفاظ على توافق المتصفح عبر ، تجنب استخدام <select> عناصر ، لأنها لا تجعل التأثير بالكامل في متصفح WebKit. أيضًا ، لا تقم بتطبيق فئة مجموعة مربع الإدخال مباشرة على مجموعة النماذج ، فإن مجموعة مربع الإدخال هي مكون معزول.
<form rob = "form"> <viv> <span> $ </span> <input type = "text" placeholder = "twitterhandle"> <span> .00 </span> </viv> </mapp>
(1) أدخل حجم مجموعة الصندوق
يمكنك تغيير حجم مجموعة مربع الإدخال عن طريق إضافة فئات من أحجام النماذج النسبية إلى مجموعة. في المجموعة (مثل .inpt-group-lg ، مجموعة الإدخال-SM ، مجموعة الإدخال-x) إلى. سيتم تغيير حجم المحتويات في مربع الإدخال تلقائيًا.
(2) ، خانات الاختيار والمكونات الإضافية للراديو
يمكنك استخدام خانات الاختيار والإضافات الراديوية كبادئات أو عناصر لاحقة لمجموعات مربع الإدخال
<viv> <span> <input type = "checkbox"> </span> <input type = "text"> </viv>
(3) الزر المكون الإضافي
يمكنك أيضًا استخدام الزر كعنصر بادئة أو لاحقة في مجموعة مربع الإدخال. في هذا الوقت ، لا تضيف. تحتاج إلى استخدام فئة. Input-Group-BTN لالتفاف الزر. هذا مطلوب لأن نمط المتصفح الافتراضي لن يتم إعادة كتابة.
<viv> <span> <button type = "button"> اذهب! </button> </span> <input type = "text"> </viv>
(4) زر مع القائمة المنسدلة
إضافة زر مع قائمة منسدلة إلى مجموعة مربع الإدخال ببساطة ملفوفة في فئة. في مجموعة BTN.
<viv> <viv> <button type = "button" data-toggle = "sropdown"> القائمة المنسدلة <span> </span> </ultrate> <ul> <li> <a href = "#" href = "#"> other </a> </li> <li> </li> <li> <a href = "#"> الرابط المنفصل </a> </li> </viv> <input type = "text"> </div>
(5) زر القائمة المنسدلة
أضف زر تقسيم مع قائمة منسدلة في مجموعة الإدخال ، باستخدام نفس النمط تقريبًا مثل زر القائمة المنسدلة ، ولكن إضافة الميزات الرئيسية إلى القائمة المنسدلة ،
<div> <viv> <button type = "button" tabindex = "-1"> القائمة المنسدلة </button> <button type = "button" data-toggle = "sprofdown" tabindex = "-1"> </span> <span> تبديل القائمة المنسدلة </span> </ul> <ul> <li> href = "#"> other </a> </li> <li> <a href = "#"> other </a> </li> <li> </li> <li> <a href = "#"
6. عناصر الملاحة bootstrap
استخدم نفس العلامات والفئة الأساسية .NAV. يوفر Bootstrap أيضًا فئة مساعد لمشاركة العلامات والولايات. قم بتغيير الفئة المعدلة ويمكن تبديلها بين أنماط مختلفة.
(1) ، ملاحة الجدول أو العلامة
قم بإنشاء قائمة تنقل معلمة:
A. ابدأ بقائمة غير مرتبة مع الفصل .NAV.
B. إضافة فئة .NAV-TABS.
<ul> <li> <a href = "#"> home </a> </li> <li> <li> <a href = "#"> svn </a> </li> <li> <a href = "#"> ios </a> </li> <li> <a href = "#" href = "#"> java </a> </li> <li> <a href = "#"> php </a> </li> </ul>
(2) قائمة التنقل على غرار الكبسولة
A. قائمة التنقل في الكبسولة الأساسية
إذا كنت بحاجة إلى تغيير الملصق إلى نمط الكبسولة ، فأنت بحاجة فقط إلى استخدام الفئة. NAV-PODS بدلاً من .NAV-TABS ، والخطوات الأخرى هي نفسها كما هو موضح أعلاه.
<ul> <li> <a href = "#"> home </a> </li> <li> <li> <a href = "#"> svn </a> </li> <li> <a href = "#"> ios </a> </li> <li> <a href = "#" href = "#"> java </a> </li> <li> <a href = "#"> php </a> </li> </ul>
ب. قائمة التنقل في الكبسولة العمودية
يمكنك استخدام فئة .nav-stacked أثناء استخدام الفئة .NAV و .NAV-PODS لجعل الكبسولات مكدسًا رأسياً.
<ul> <li> <a href = "#"> home </a> </li> <li> <li> <a href = "#"> svn </a> </li> <li> <a href = "#"> ios </a> </li> <li> <a href = "#" href = "#"> java </a> </li> <li> <a href = "#"> php </a> </li> </ul>
(3) الملاحة مع كلا الطرفين محاذاة
يمكنك جعل قائمة التنقل الموسومة أو الكبسولة على قدم المساواة على قدم المساواة مع العنصر الأصل باستخدام الفئة .NAV بشكل عادل أثناء استخدام .NAV ، .NAV-TABS ، أو .NAV ، و .NAV-PODS ، على التوالي ، عندما يكون عرض الشاشة أكبر من 768 بكسل. على شاشة أصغر ، يتم تكديس روابط التنقل.
<ul> <li> <a href = "#"> home </a> </li> <li> <li> <a href = "#"> svn </a> </li> </ul> <ul> <li> <a href = "#"> home </a> </li> </li> <li>
(4) تعطيل الرابط
لكل فئة .NAV ، إذا تمت إضافة فئة معقولة ، يتم إنشاء رابط رمادي ، و: يتم تعطيل حالة التحوم للرابط.
<ul> <li> <a href = "#"> home </a> </li> <li> <li> <a href = "#"> svn </a> </li> <li> <a href = "#" href = "#"> svn </a> </li> <li> <a href = "#"> vb.net (disable link) </a> </li> </ul>
(5) سحب القائمة لأسفل
تستخدم قائمة التنقل بناء جملة مماثلة للقائمة المنسدلة. بشكل افتراضي ، يعمل مرساة عنصر القائمة بالتزامن مع بعض خصائص البيانات لتشغيل قائمة غير مرتبة مع فئة .dropdown-menu.
A. العلامات مع القائمة المنسدلة
الخطوات لإضافة قائمة منسدلة إلى علامة هي كما يلي:
ابدأ بقائمة غير مرتبة مع الفصل .NAV.
أضف فئة .NAV-TABS.
إضافة قائمة غير مرتبة مع .Dropdown-Menu فئة.
<ul> <li> <a href = "#"> home </a> </li> <li> <li> <a href = "#"> svn </a> </li> <li> <a data-toggle = "tropown" <li> <a href = "#"> swing </a> </li> <li> <a href = "#"> swing </a> </li> <li> <a href = "#"
كبسولات مع القائمة المنسدلة
الخطوات هي نفسها إنشاء علامة مع قائمة منسدلة ، باستثناء أنك تحتاج إلى تغيير فئة .NAV-TABS إلى .NAV-PILLS.
7. شريط التنقل في Bootstrap
يعد شريط التنقل ميزة جيدة وهو ميزة بارزة لموقع Bootstrap. يعمل شريط التنقل كمكون أساسي مستجيب لرأس التنقل في طلبك أو موقع الويب الخاص بك. ينهار شريط التنقل في عرض الجهاز المحمول ويتوسع شريط التنقل أفقياً مع زيادة عرض منفذ العرض المتاح. في جوهر شريط التنقل في Bootstrap ، يتضمن شريط التنقل اسم الموقع وأنماط تعريف التعريف الأساسية للملاحة.
(1) شريط التنقل الافتراضي
خطوات إنشاء شريط التنقل الافتراضي هي كما يلي:
A. أضف فئة .navbar و .navbar-default إلى علامة <v>.
B. إضافة دور = "التنقل" إلى العناصر المذكورة أعلاه سيساعد على زيادة إمكانية الوصول.
C. أضف فئة العنوان .Navbar-Header إلى عنصر <viv> ، والذي يحتوي على العنصر <a> مع علامة Navbar Brand. هذا سيجعل النص يبدو أكبر.
D. من أجل إضافة روابط إلى شريط التنقل ، تحتاج فقط إلى إضافة قائمة غير مرتبة مع Class .NAV و .Navbar-Nav.
<nav rol = "navigation"> <viv> <a href = "#"> w3cschool </a> </viv> <viv> <ul> <li> <a href = "#"> iOS </a> </li> <li> <li> <li> <li> <li> <li> <li> <li> <li> HREF = "#" data-toggle = "sropdown"> java <b> </b> </a> <ul> <li> </li> <li> <A Href = "#"
(2) شريط التنقل المستجيب
لإضافة ميزات مستجيبة إلى شريط التنقل ، يجب لف المحتوى الذي تريد انهياره في <div> مع الفصول. شريط التنقل المنهار هو في الواقع زر مع فئة .Navbar-toggle وعناصر بيانات. الأول هو بيانات البيانات ، التي تخبر JavaScript بما يجب فعله مع الزر ، والثاني هو هدف البيانات ، مما يشير إلى العنصر الذي يجب التبديل إليه. ثلاثة <span> مع فئة .icon-bar تنشئ زر البرجر المزعوم. هذه سوف تتحول إلى عناصر في .nav-collapse <viv>. لتحقيق هذه الوظائف ، يجب تضمين المكون الإضافي لانهيار bootstrap.
<nav rol = "sevigation"> <viv> <button type = "button" data-toggle = "collapse" data-arget = "#example-navbar-collapse"> <span> switch switch </span> <span> </span> </span> </span> </span> </span> </span> </span> </a href = " id = "example-navbar-collapse"> <ul> <li> <a href = "#"> ios </a> </li> <li> <a href = "#"> svn </a> </li> <li> <a href = "#" data-toggle = "sropdown"> java </b> href = "#"> jmeter </a> </li> <li> </li> <li> <li> <a href = "#"> الرابط المنفصل </a> </li> <li> </li> <li> <a href = "#"
(3) النماذج في شريط الملاحة
لا يستخدم النموذج الموجود في شريط التنقل الفئة الافتراضية المذكورة في فصل نموذج bootstrap ، ويستخدم فئة .Navbar-Form. هذا يضمن المحاذاة الرأسية المناسبة للشكل وسلوك الطي في مُعرف عرض أضيق. استخدم خيارات المحاذاة (سيتم شرح ذلك بالتفصيل في قسم محاذاة المكون) لتحديد مكان وضع المحتويات في شريط التنقل.
<nav rol = "navigation"> <viv> <a href = "#"> w3cschool </a> </div> <div> <form rob = "search"> <viv> <input type = "text" placeholder = "search">//div> <button type = "submit"
(4) أزرار في شريط التنقل
يمكنك استخدام Class .NavBar-BTN لإضافة زر إلى عنصر <Nutton> الذي لا يكون في <Porm> ، والذي يتركز رأسياً على شريط التنقل. يمكن استخدام navbar-btn على عناصر <a> و <input>. لا تستخدم .navbar-btn على عناصر داخل .Navbar-Nav ، لأنها ليست فئة زر قياسية.
<nav rom = "navigation"> <viv> <a href = "#"> w3cschool </a> </viv> <div> <form rob = "searr
(5) نص في شريط التنقل
إذا كنت بحاجة إلى تضمين سلاسل نصية في التنقل الخاص بك ، فاستخدم النص. navbar-text. عادة ما يستخدم هذا مع علامات <p> ، وضمان الرائدة واللون المناسبة.
<nav rob = "navigation"> <viv> <a href = "#"> w3cschool </a> </viv> <viv> <p> تم توقيعه في Thomas </p> </viv> </v>
(6) رابط عدم الإنارة
إذا كنت لا ترغب في استخدام الروابط القياسية في مكون التنقل في شريط التنقل العادي ، فاستخدم Class Navbar-Link لإضافة الألوان المناسبة إلى خيارات شريط التنقل الافتراضي والمقلوب.
<nav roly = "navigation"> <viv> <a href = "#"> w3cschool </a> </viv> <viv> <p> تم توقيعه في <a href = "#"
(7) محاذاة المكون
يمكنك استخدام فئة الأداة المساعدة .NAVBAR-LEFT أو .NAVBAR-right لمحاذاة روابط التنقل أو النماذج أو الأزرار أو المكونات النصية في شريط التنقل الأيسر أو اليمين. يضيف كلتا الفئتين عوامات CSS في الاتجاه المحدد.
(8) ثابتة إلى الأعلى
يمكن أن يكون شريط التنقل في Bootstrap موجودًا بشكل ديناميكي. بشكل افتراضي ، إنه عنصر على مستوى الكتلة ، والذي يتم وضعه على أساس الموقع الموضع في HTML. مع بعض فئات المساعدة ، يمكنك وضعها في الجزء العلوي أو أسفل الصفحة ، أو يمكنك جعلها شريط تنقل ثابت يتمحور مع الصفحة. إذا كنت تريد أن يتم تثبيت شريط التنقل في الجزء العلوي من الصفحة ، فأضف الفئة. Navbar-Fixed Top to .Navbar. يوضح المثال التالي هذا: لمنع شريط التنقل من التشابك مع الجزء العلوي من المحتوى الآخر في جسم الصفحة ، وإضافة ما لا يقل عن 50 بكسل من الحشو إلى علامة <Body> ، ويمكن ضبط قيمة الحشو وفقًا لاحتياجاتك.
<nav rol = "savigation">
</nav>
(9) ثابتة في الأسفل
إذا كنت تريد أن يتم تثبيت شريط التنقل في أسفل الصفحة ، فأضف مجموعة من الفئة.
<nav rol = "savigation"> </v>
(10) ، قمة ثابتة
لإنشاء شريط التنقل الذي يلفت مع الصفحة ، أضف .Navbar-Static-Top Class. لا تتطلب هذه الفئة إضافة الحشوة إلى <Body>.
<nav rol = "savigation">
</nav>
(11) ، شريط الملاحة المقلوب
لإنشاء شريط تنقل مقلوب مع نص أبيض للخلفية أسود ، ما عليك سوى إضافة فئة. نافبار إلى فئة .Navbar ، كما هو موضح في المثال التالي:
لمنع شريط التنقل من التشابك مع الجزء العلوي من المحتوى الآخر في نص الصفحة ، أضف ما لا يقل عن 50 بكسل من الحشو إلى علامة <Body> ، ويمكن ضبط قيمة الحشو وفقًا لاحتياجاتك.
<nav rol = "savigation"> </v>
8
Breadcrumbs هي طريقة عرض تستند إلى معلومات على مستوى الموقع. خذ مدونة كمثال ، يمكن لملاحة Breadcrumb أن يعرض تاريخ الإصدار أو الفئة أو العلامة. أنها تمثل موقع الصفحة الحالية داخل التسلسل الهرمي للتنقل.
فتات الخبز في bootstrap هي قائمة بسيطة غير مرتبة مع. breadcrumb. سيتم إضافة المحدد تلقائيًا عبر الفئة الموضحة أدناه في CSS (bootstrap.min.css):
<ol>
<li> <a href = "#"> الصفحة الرئيسية </a> </li>
<li> <a href = "#"> 2013 </a> </li>
<li> نوفمبر </li>
</ol>
9. ترقيم ترقيم الأسطح
(1) ترقيم الصفحات هي قائمة غير مرتبة. Bootstrap يتولى ترقيم تراجع مثل عناصر الواجهة الأخرى.
(2) بدوره الصفحة (Pager)
إذا كنت ترغب في إنشاء رابط ترحيل بسيط لتوفير التنقل للمستخدمين ، فيمكن القيام به عن طريق قلب الصفحة. مثل ارتباطات الترحيل ، فإن بدوره هو أيضًا قائمة غير مرتبة. بشكل افتراضي ، يتمركز الرابط. يسرد الجدول التالي الفئة التي يتولى صفحة Bootstrap.
10. علامات bootstrap
علامة bootstrap. يمكن استخدام العلامات للعد أو المطالبة أو عرض علامات أخرى على الصفحة. يمكنك استخدام تسمية الفئة المعدلة ، و PROMARY-PRIMARY ، وعلم التسمية ، وملصقات الملصقات ، وإعادة التسمية ، ودخل التسمية لتغيير مظهر التسمية.
<span> العلامة الافتراضية </span>
<span> العلامات الرئيسية </span>
<span> علامة النجاح </span>
<span> علامة المعلومات </span>
<span> علامات التحذير </span>
<span> علامة الخطر </span>
11. شارات bootstrap
(1) الشارة تشبه الملصق ، والفرق الرئيسي هو أن زوايا الشارة أكثر سلاسة.
تستخدم الشارات بشكل أساسي لتسليط الضوء على عناصر جديدة أو غير مقروءة. لاستخدام الشارات ، ما عليك سوى إضافة <span> إلى الروابط ، والتنقل في bootstrap والعناصر الأخرى. عندما لا تكون هناك عناصر جديدة أو غير مقروءة ، سيتم طي الشارة من خلال: المحدد الفارغ من CSS للإشارة إلى أنه لا يوجد محتوى في الداخل.
<a href = "#"> صندوق البريد <span> 50 </span> </a>
(2) تنشيط حالة التنقل
يمكنك وضع الشارات في التنقل في الكبسولة وإدراج التنقل في الحالة النشطة. قم بتفعيل الرابط باستخدام <span>.
<H4> حالة التنشيط في التنقل في الكبسولة </h4> <ul> <li> <a href = "#"> الصفحة الرئيسية <span> 42 </span> </a> </li> <li> <A Href = "#"> مقدمة </a> </li> <li>
12. شاشة Bootstrap Super كبيرة (Jumbotron)
شاشة كبيرة سوبر (jumbotron). كما يوحي الاسم ، يمكن لهذا المكون زيادة حجم العنوان وإضافة المزيد من الهوامش إلى محتوى صفحة تسجيل الدخول. خطوات استخدام jumbotron هي كما يلي:
A. إنشاء حاوية <div> مع فئة .jumbotron.
B. بالإضافة إلى أكبر <H1> ، يتم تقليل وزن الخط الفتحة إلى 200 بكسل.
<viv> <viv> <h1> مرحبًا بك في تسجيل الدخول! </h1> <p> هذا مثيل ل jumbotron. </p> <p> <a rob = "button"> تعرف
للحصول على شاشة ضخمة تشغل كل عرض بدون زوايا مستديرة ، استخدم فئة .jumbotron خارج كل فئة. -container.
13. عنوان صفحة bootstrap (رأس الصفحة)
رأس الصفحة هو ميزة جيدة ، تضيف التباعد المناسب حول عنوان الصفحة. تكون وظيفة عنوان الصفحة مفيدة بشكل خاص عندما تكون هناك عناوين متعددة في صفحة ويب ويجب إضافة تباعد معين بين كل عنوان. لاستخدام رأس الصفحة ، ضع عنوانك في <div> مع الفصل.
<viv> <h1> مثال على عنوان الصفحة <small> العنوان الفرعي </small> </h1> </viv>
14. Thumbnail Bootstrap
(1) thumbnail bootstrap. تحتاج معظم المواقع إلى تخطيط الصور ومقاطع الفيديو والنص ، وما إلى ذلك في الشبكة. يوفر Bootstrap طريقة سهلة للقيام بذلك باستخدام الصور المصغرة. الخطوات اللازمة لإنشاء الصور المصغرة باستخدام bootstrap هي كما يلي:
A. أضف علامة <a> مع الفصل .thumbnail حول الصورة.
سيؤدي هذا إلى إضافة أربعة بكسل حشوة وحدود رمادية.
ج. عندما يحوم الماوس فوق الصورة ، سيتم عرض الخطوط العريضة للصورة.
<viv> <a href = "#"> <img src = "/wp-content/uploads/2014/06/kittens.jpg"> </a> </viv>
(2) إضافة محتوى مخصص
الآن بعد أن أصبح لدينا صورة مصغرة أساسية ، يمكننا إضافة العديد من محتوى HTML إلى الصورة المصغرة ، مثل العناوين أو الفقرات أو الأزرار. الخطوات المحددة هي كما يلي:
أ. قم بتغيير العلامة <a> مع الفئة .thumbnail إلى <viv>.
ب. في هذا <div> ، يمكنك إضافة أي شيء تريد إضافته. نظرًا لأن هذا هو <viv> ، يمكننا استخدام قواعد التسمية الافتراضية المستندة إلى Span لتغيير حجمها.
ج. إذا كنت ترغب في تجميع صور متعددة ، فضعها في قائمة غير مرتبة ، وكل عنصر قائمة يطفو على اليسار.
15. تحذير bootstrap (تنبيهات)
التنبيهات والفئة التي توفرها bootstrap للتحذيرات. توفر تنبيهات المستخدمين طريقة لتحديد أنماط الرسائل. أنها توفر ملاحظات المعلومات السياقية لعمليات المستخدم النموذجية. يمكنك إضافة زر إغلاق اختياري إلى مربع التحذير. لإنشاء مربع تحذير قابل للإلغاء مضمّن ، استخدم المكون الإضافي JQuery التنبيهات.
يمكنك إضافة مربع تحذير أساسي عن طريق إنشاء <viv> وإضافة واحدة من فئة Alrt وأربعة فئات سياق (أي ناجحة.
<Div> النجاح! تم التقديم بشكل جيد للغاية. </div>
<div> المعلومات! يرجى ملاحظة هذه المعلومات. </div>
<div> تحذير! من فضلك لا ترسل. </div>
<Div> خطأ! يرجى إجراء بعض التغييرات. </div>
(1) تحذير يمكن إلغاؤه (تنبيهات الفصل)
الخطوات اللازمة لإنشاء تحذير قابل للإلغاء (تنبيه الفصل) هي كما يلي:
A. أضف مربع تحذير أساسي عن طريق إنشاء <viv> وإضافة واحدة من فئة .alert وأربعة فئات سياق (أي ناجحة.
في الوقت نفسه ، أضف اختياري.
C. إضافة زر إغلاق.
<viv> <button type = "button" data-dismiss = "Alert" Aria-Hidden = "True"> × </button> النجاح! تم التقديم بشكل جيد للغاية. </div>
(2) روابط في التنبيهات
خطوات إنشاء رابط في التنبيهات هي كما يلي:
A. أضف مربع تحذير أساسي عن طريق إنشاء <viv> وإضافة واحدة من فئة .alert وأربعة فئات سياق (أي ناجحة.
B. استخدم فئة كيان. Alert-Link لتوفير الروابط بسرعة مع ألوان مطابقة.
<viv>
<a href = "#"> النجاح! تم التقديم بشكل جيد للغاية. </a>
</div>
16. شريط التقدم في bootstrap
سيشرح هذا الفصل شريط التقدم في Bootstrap. في هذا البرنامج التعليمي ، سترى كيفية استخدام Bootstrap لإنشاء أشرطة تقدم للتحميل أو إعادة التوجيه أو حالات الإجراء.
يستخدم شريط التقدم Bootstrap انتقالات CSS3 والرسوم المتحركة للحصول على هذا التأثير. لا تدعم Internet Explorer 9 والإصدارات السابقة والإصدارات القديمة من Firefox هذه الميزة ، ولا تدعم Opera 12 الرسوم المتحركة.
(1) شريط التقدم الافتراضي
الخطوات اللازمة لإنشاء شريط تقدم أساسي هي كما يلي:
أ. أضف <div> مع فئة. progress.
ب. بعد ذلك ، أضف <div> مع فئة.
إضافة سمة نمط بعرض يمثلها النسبة المئوية ، مثل النمط = "60 ٪" ؛ للإشارة إلى أن شريط التقدم يبلغ 60 ٪.
<viv> <div rol = "progressbar" aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100"> <span> 40 ٪ كاملة </span> </viv> </viv>
(2) شريط التقدم بالتناوب
خطوات إنشاء أشرطة التقدم ذات الأنماط المختلفة هي كما يلي:
أ. أضف <div> مع فئة. progress.
بعد ذلك ، في ما سبق <Div> ، أضف <Div> مع فئة. progress-bar و class progress-bar-*. من بينها ، * يمكن أن يكون النجاح ، والمعلومات ، والتحذير ، والخطر.
إضافة سمة نمط بعرض يمثلها النسبة المئوية ، مثل النمط = "60 ٪" ؛ للإشارة إلى أن شريط التقدم يبلغ 60 ٪.
<viv> <div rol = "progressbar" aria-valuenow = "60" aria-valuemin = "0" aria-valueMax = "100"> span> 90 ٪ مكتملة (ناجحة) </span> </viv> </div>
(3) شريط التقدم من المشارب
الخطوات لإنشاء شريط التقدم المتطرف هي كما يلي:
A. أضف <div> مع الطبقة.
بعد ذلك ، في ما سبق <Div> ، أضف <Div> مع فئة. progress-bar و class progress-bar-*. من بينها ، * يمكن أن يكون النجاح ، والمعلومات ، والتحذير ، والخطر.
إضافة سمة نمط بعرض يمثلها النسبة المئوية ، مثل النمط = "60 ٪" ؛ للإشارة إلى أن شريط التقدم يبلغ 60 ٪.
<viv> <div rol = "progressbar" aria-valuenow = "60" aria-valuemin = "0" aria-valueMax = "100"> span> 90 ٪ مكتملة (ناجحة) </span> </viv> </div>
(4) شريط التقدم في الرسوم المتحركة
الخطوات لإنشاء شريط تقدم الرسوم المتحركة هي كما يلي:
A. أضف <div> مع الطبقة. إضافة أيضا فئة.
ب. بعد ذلك ، أضف <div> مع فئة.
إضافة سمة نمط بعرض يمثلها النسبة المئوية ، مثل النمط = "60 ٪" ؛ للإشارة إلى أن شريط التقدم يبلغ 60 ٪.
هذا سوف يعطي المشارب شعور الحركة من اليمين إلى اليسار.
<viv> <div rol = "progressbar" aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100"> <span> 40 ٪ كاملة </span> </viv> </viv>
(5) شريط التقدم المكدس
يمكنك حتى تكديس أشرطة التقدم المتعددة. يمكنك تكديس أشرطة تقدم متعددة في نفس.
17. Bootstrap multimedia كائن (كائن الوسائط)
كائن الوسائط المتعددة في bootstrap (كائن الوسائط). يتم استخدام أنماط الكائنات المجردة هذه لإنشاء أنواع مختلفة من المكونات (مثل تعليقات المدونة). يمكننا استخدام الخلط الرسومي والنصوص في المكونات ، ويمكن محاذاة الصور أو اليمين. يمكن لكائنات الوسائط استخدام كود أقل لتحقيق الترتيب المختلط لكائنات الوسائط والنص.
يتم تحقيق علامات خفيفة الوزن وخصائص سهلة التقييم لكائنات الوسائط من خلال تطبيق فئة على علامات بسيطة. يمكنك إضافة النموذجين التاليين إلى علامة HTML لإعداد كائن الوسائط:
A. الوسائط: تتيح هذه الفئة الوسائط المتعددة (الصورة ، الفيديو ، الصوت) في كائن الوسائط أن تطفو على اليسار أو يمين كتلة المحتوى.
قائمة الوسائط: إذا كنت بحاجة إلى قائمة ، فإن كل عنصر جزء من قائمة غير مرتبة ، يمكنك استخدام هذه الفئة. يمكن استخدامها لقوائم التعليقات وقوائم المقالات.
<viv> <a href = "#"> <img src = "/wp-content/uploads/2014/06/64.jpg"> </a> <viv> <h4> عنوان الوسائط </h4> فيما يلي بعض نص عينة. فيما يلي بعض نص عينة. </viv> </viv>
18. مجموعة قائمة bootstrap
يتم استخدام مكونات القائمة لتقديم محتوى مخصص ومخصص في نموذج القائمة. الخطوات لإنشاء مجموعة قائمة أساسية هي كما يلي:
A. أضف فئة. قائمة المجموعة إلى العنصر <ul>.
B. إضافة فئة. القائمة مجموعة العناصر إلى <li>.
<ul> <li> تسجيل اسم المجال المجاني </li> <li> استضافة مساحة نافذة مجانية </li> </ul>
(1) إضافة شارة إلى مجموعة القائمة
يمكننا إضافة مكون شارة إلى أي عنصر قائمة ، والذي سيتم وضعه تلقائيًا على اليمين. فقط أضف <span> إلى العنصر <li>.
<ul> <li> تسجيل اسم المجال المجاني </li> <li> <span> جديد </span> 24*7 دعم </li> </ul>
(2) أضف رابطًا إلى مجموعة القائمة
باستخدام علامات المرساة بدلاً من عناصر القائمة ، يمكننا إضافة روابط إلى مجموعات قائمة. نحتاج إلى استخدام <viv> بدلاً من عنصر <ul>.
<a href = "#"> 24*7 دعم </a>
<a href = "#"> استضافة مساحة نافذة مجانية </a>
(3) إضافة محتوى مخصص إلى مجموعة القائمة
يمكننا إضافة أي محتوى HTML إلى مجموعة القائمة التي تمت إضافتها إلى الرابط أعلاه.
19. لوحات bootstrap (لوحات)
لوحات bootstrap (لوحات). يتم استخدام مجموعة اللوحة لإدخال مجموعة DOM في مربع. لإنشاء لوحة أساسية ، ما عليك سوى إضافة فئة .panel و class .panel-default إلى عنصر <viv> ،
<viv> <viv> هذه لوحة أساسية </div> </viv>
(1) عنوان اللوحة
يمكننا إضافة عناوين لوحة بطريقتين:
A. يمكن باستخدام فئة Panel-heading إضافة حاوية العنوان بسهولة إلى اللوحة.
B. استخدم <h1>-<h6> مع فئة .panel-title لإضافة عنوان النمط المحدد مسبقًا.
<viv> <viv> عنوان النظام الأساسي بدون عنوان </div> <div> محتوى النظام الأساسي </div> </viv>
(2) حواشي اللوحة
يمكننا إضافة حواشي إلى اللوحة ، فقط ضع الزر أو النص الفرعي في <viv> مع فئة .panel-footer.
<viv> <viv> هذه لوحة أساسية </div> <viv> حاشية panboard </div> </viv>
(3) لوحة ذات لون سياقي
استخدم سياق فئات حالة السياق ، وناجحة اللوحة ، وملفقة اللوحة ، وحرص اللوحة ، وجد اللوحة لإعداد لوحة بألوان سياقية.
<viv> <viv> <h3> عنوان النظام الأساسي </h3> </viv> <viv> هذه لوحة أساسية </div> </viv>
(4) لوحة مع الجدول
لإنشاء جدول بلا حدود في اللوحة ، يمكننا استخدام الفئة. على افتراض وجود <viv> يحتوي على .panel-body ، يمكننا إضافة حدود إضافية إلى أعلى الجدول لفصله. إذا لم يكن هناك <Div> يحتوي على .panel-body ، ينتقل المكون من رأس اللوحة إلى الجدول دون انقطاع.
<viv> <viv> <h3> عنوان النظام الأساسي </h3> </viv> <viv> هذه لوحة أساسية </div> <table> <th> المنتج </th> <th> السعر </th> <tr>
(5) لوحة مع مجموعة قائمة
يمكننا تضمين مجموعات القوائم في أي لوحة ، وإنشاء لوحات عن طريق إضافة فئات .panel و .panel-default في عنصر <viv> ، وإضافة مجموعات قائمة في اللوحة.
<viv> <viv> عنوان النظام الأساسي </div> <v> <p> هذا هو محتوى لوحة أساسي. </p> </viv> <ul> <li> تسجيل اسم المجال المجاني </li> <li> تكلفة التحديث السنوية </li> </ul> </viv>
20. bootstrap جيدا
حسنًا ، حاوية تسبب تأثيرًا توضيحيًا على المحتوى <Div>. لإنشاء بئر ، ما عليك سوى وضع المحتوى في <div> مع فئة. حسنًا.
<viv> مرحبًا ، أنا بخير! </div>
(1) الحجم
يمكنك استخدام الفئات الاختيارية جيدًا أو SM لتغيير حجم البئر. يتم استخدام هاتين الفئتين بالتزامن مع فئة. -well. تؤثر هاتان الفئتان على الحشو ، واعتمادًا على الفصل المستخدم ، سيظهر جيدًا أكبر أو أصغر.
<viv> مرحبًا ، أنا في بئر كبيرة! </div>
<viv> مرحبًا ، أنا في حالة جيدة! </div>
ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.