واصلت كتابة تخطيط المقالة السابقة. في المقالة السابقة ، أكملت تخطيط شريط التنقل والإعلان.
ابدأ في وضع:
أعتقد أن التقديم النهائي مثل هذا ، على النحو التالي: لقد انقسمت إلى ثلاث لقطات شاشة ، وهي كبيرة جدًا:
ثم ، سيتم استمرار آخر واحد غير مكتمل:
الخطوة 5: إضافة نظام الشبكة ، اخترت تخطيط ثلاثة أعمدة Col-MD-4 ؛ الشبكة الكاملة هي 12 ، و 4 هي ثلث 12. يمكنك أيضًا تخطيط وضبط شبكات متعددة:
<div id = "tag_container"> <viv> <viv> <img src = "image/3.jpg"> <h2> animal1 </h2> <p> قال فندق Linka للتو فقط Fenghan شاهد Fenghan مؤسسة هدية كبيرة </div> </div> </div> src = "image/3.jpg"> <h2> animal1 </h2> <p> قال فندق Linka للتو فقط فينغان رأى مؤسسة هدية تذكارية كبيرة تم إرسالها إلى الخلف </p> <p> <a href = "#"> انقر me </a> شاهد هذا فينغان مؤسسة بحث كبيرة عن المنزل أرسلت من قبلي </p> <p> <a href = "#"> انقر فوق </a> </p> </viv> </viv> </viv> </viv> </viv>
1) يجب أن تكون الشبكة في حاوية أو حاوية سائلة ، بحيث يمكن تعيين المحاذاة المناسبة والحشو تلقائيًا.
2) اجعل المعرف "TAG_CONTAINER" والجزء مع Coll-MD-4 يتركز ومحاذاة:
#tag_container .col-md-4 {text-align: center ؛ }الخطوة 6: اضبط تباعد الخط وقسم الأجزاء العلوية والسفلية
<hr> </hr>
CSS هو
Hr .Divider {margin: 40px ؛ }الخطوة 7: إنشاء صفحة علامة التبويب. الصورة التالية هي عروض صفحات علامة التبويب الثلاث:
1) مبدأ علامة التبويب:
<ul rod = "tableist"> <li> <a href = "#an1" rob = "tab" data-toggle = "tab"> animal1 </a> </li> <li> <a href = "#an2" rol "=" tab "data-toggle =" tab "> animal2 </a> <li> <a href = data-toggle = "tab"> animal3 </a> </li></ul> <viv> <div id = "an1"> </div> <div id = "an2"> </viv> <div id = "an3"> </viv> </viv>
بنية صفحة العلامة هي: UL List تعلن العلامة والعلامات class = "Nav-tabs" rob = "tableist"
يتم وضع علامة على الرابط الموجود في علامة LI = "TAB" Data-toggle = "علامة التبويب" بحيث يمكن تحقيق وظيفة فتح صفحة صفحة علامة التبويب. يتم ربط HREF = "#AN1" من كل صفحة تبويب بتخطيط العرض التالي.
بنية التصميم الموسعة: في <div> ، تحتوي كل صفحة على لوحة. لاحظ أن المعرف يخلع صفحة علامة التبويب أعلاه ، بحيث يمكن فتح الصفحة. <div id = "an3">
2) أضف التصميم في صفحة العلامات
<ul rod = "tableist"> <li> <a href = "#an1" rob = "tab" data-toggle = "tab"> animal1 </a> </li> <li> <a href = "#an2" rol "=" tab "data-toggle =" tab "> animal2 </a> <li> <a href = data-toggle = "tab"> animal3 </a> </li> </ul> <viv> <div id = "an1"> <viv> <liv> <h2> Animal1 <span> zootopia </span> </h2> <p> ajdkgjfd يرى أن سعر تقنية الوقت التي تم تطويرها في مجال التكنولوجيا الزمنية. إذا تكلفة نتائج يوم شرطة السفارة Shiguo ، فإن سعر Song Ka Mourning Irjeigrugitajdokgijrgi </p> </viv> <viv> <img src = "image/1.jpg"> </viv> يرى <p> AJDKGJFD سعر طائرة Time Technology التي تم تطويرها بواسطة طائرة Time Technology. إذا تكلفة نتائج يوم شرطة السفارة Shiguo ، فإن سعر Song Ka Mourning Irjeigrugitajdokgijrgi </p> </viv> <viv> <img src = "image/2.jpg"> </div> </fiv> <div> <div id = "an3" <span> Zootopia </span> </h2> <p> AJDKGJFD يرى سعر طائرة Time Technology. إذا كانت نتائج يوم شرطة السفارة Shiguo ، فإن سعر Song Ka Mourning Irjeigrugitajdokgijrgi </p> </viv> <viv> <img src = "image/3.jpg"> </viv> </viv> </div> </div>
1) اضبط الهامش العلوي لصفحة علامة التبويب
.
2) اضبط خطوط العنوان لصفحة علامة التبويب ، إلخ.
. اللون:#2A6496 ؛ الهامش: 120 بكسل ؛ }
3) اضبط تنسيق الترجمة في صفحة علامة التبويب:
. اللون: #999 ؛ }
الخطوة 8: أضف إشعار حقوق الطبع والنشر السفلي ، والأداءات هي كما يلي:
<TOTER> <P> <A HREF = "#TOP"> العودة إلى الأعلى </a> </p> <p>@2016 Rongyu System </p> </tower>
ملاحظة: يمكن لـ Class = "السحب اليمين" سحب العنصر إلى اليمين ، وهي ميزة من CSS في Bootstrap.
الخطوة 9: أضف الزر المنبثق حول:
<div id = "about"> <viv> <viv> <viv> <button type = "button" data-dismiss = "modal" aria-label = "close"> <span aria-hidden = "true" Bush ، التي عبر عنها Ginnifer Goodwin ، Jason Bateman ، Shakira ، Allen Tuddick ، Idris Elba ، J.K. /.
1) تنقسم النافذة المنبثقة الثابتة إلى ثلاثة أجزاء وعنوان وشكل وزر ؛ من بينها ، نحتاج فقط إلى زر واحد والآخر علق. وإضافة معرف = على وشك تسهيل تحديد المواقع أدناه ؛
2) في شريط القائمة حول شريط التنقل ، أضف ارتباط التبديل ، وبيانات toggle = "Modal" ، والمعرف يتوافق مع Target = "#about":
<li> <a href = "#" data-toggle = "modal" data-target = "#about"> about </a> </li>
الخطوة 10 ، وضع القائمة
انقر على عمود ميزة شريط التنقل وسيتم فتح صفحة التبويب المقابلة ؛ مطلوب جزء من رمز JS لتنفيذه
<script> $ (document) .Ready (function () {$ ("#demo-navbar .dropdown-menu a"). انقر فوق (function () {var href = $ (this) .attr ('href') ؛ // alert (href) ؛ $ ( </script>1) التنقل من خلال تحديد المواقع $ ("#Demo-Navbar .Dropdown-Menu A") وقم بتعيين حدث النقر ؛
2) علامة التبويب ("" Show ") لفتح صفحة علامة التبويب من $ ("#tab-list a [href = '" + href +"'] ").
وبهذه الطريقة ، بدأ تعلم Bootstrap للتو.
إذا كنت لا تزال ترغب في الدراسة بعمق ، فيمكنك النقر هنا للتعلم وإرفاق موضوع رائع لك: Bootstrap التعلم التعليمي
ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.