لقد تحدثت المقالة السابقة بالفعل عن بعض الخطوات وبعض الاستخدامات الأساسية لـ Bootstrap. انقر للعرض
تستمر هذه المدونة في تقديم بعض التأثيرات الشائعة لك ، بما في ذلك المكونات التالية بشكل أساسي
1. سحب القائمة لأسفل
2. شريط الملاحة
3. شريط التقدم
4. كائنات الوسائط
5. ترقيم الصفحات
6. قائمة
أولاً ، استيراد CSS و JS من bootstrap
<link rel = "stylesheet" href = "css/bootstrap.min.css"> <!-من الأفضل اقتباس CSS من CDN ، بعض ملفات النمط لا-> <link rel = "stylesheete" src = "js/jquery-33.1.0.min.js"> </script> <script src = "js/bootstrap.min.js"> </script>
1. سحب القائمة لأسفل
يتكون بشكل أساسي من زر و UL ، ويمكنه إضافة ترجمات وخطوط تقسيم
<viv> <button type = "button" data-toggle = "tropdown" aria-expanded = "false"> خط المترو <!-هذا رمز مثلث هبوطي-> <span> </span> </butten> <ul rom = "menu"> <! HREF = "#"> السطر 2 </a> </li> <li> <a href = "#"> السطر 3 </a> </li> <li> <a href = "#"> السطر 4 </a>
2. شريط الملاحة
يعد شريط التنقل المعيار لكل صفحة ويب تقريبًا ، لذلك من الصواب تمامًا تعلم كيفية استخدامه.
هذا هو شريط التنقل في الجزء العلوي من الصفحة
<!-قم بتعيين فئة NAV ليكون أكثر راقية ، تم تعيينها على قمة NAVBAR لإزالة الزوايا المستديرة من شريط النقل وإصلاحها في الأعلى-> <nav roly = "mavigation"> <viv> <!-بداية شريط التنقل ، عادةً ما يكون النص أو الصورة-> <div> <! data-target = "#bs-example-navbar-collapse-1"> <span> تبديل الملاحة </span> </span> <span> </span> <span> </span> <span> </span> </button> <!-swap brand to img-> <a href = "#" يتم سحبها والنقر فوقها-> <div id = "bs-example-navbar-collapse-1"> <ul> <li> <a href = "#" الإدارة </a> </li> <li> <a href = "#"> إدارة الأعضاء </a> </li> <li> <a href = "#" <li> <a href = "#" data-toggle = "tropdown" rob = "button" aria-expanded = "false"> صيانة النظام <span> </span> </a> <ul rom = "menu"> <li> <a href = "#" href = "#"> فصل </a> </li> <li> <a href = "#"> حذف المستخدم </a> </li> </li> </li> </ul> <!-اكتب NAVBAR-RIGHT FIRSS و THE RISH-> <!-BUNTIN <type type = "text" placeholder = "أدخل محتوى البحث"> </div> <type type = "summit"> البحث </button> </form> </viv> </viv> </far> </far>
عندما نستخدم صفحات الويب لتصفح المدونات أو الملفات ، لدينا مستوى. في هذا الوقت ، إذا أردنا العودة إلى المستوى السابق أو عدة مستويات ، فنحن بحاجة إلى شريط التنقل في الموقع.
<!-شريط الملاحة-> <ol> <li> <a href = "#"> الواجهة الخلفية </a> </li> <li> <a href = "#"> تحليل النظام </a> </li> <!-لا يمكن النقر فوق الموقع الحالي للقفز-> <li>
3. شريط التقدم
<viv> <!-تحدد الخطوط المتقدمة من الخطوط ، وتكليف الرسوم المتحركة-> <!-تُظهر النسبة المئوية لبرنامج التقدم وفقًا للنسبة المئوية لعرض الأسلوب-> <div real = "progressbar" aria-valuenow = "60" 30 ٪ </div> </viv>
4. كائنات الوسائط
هذه في الأساس نفس الرسالة على Weibo أو Twitter
الصورة الرمزية على اليسار والعنوان والنص على اليمين
<viv> <viv> <img src = "images/1.jpg"> </viv> <viv> <h4> عنوان الوسائط </h4> <p> cras sit amet nibh libero ، في gravida nulla. Nulla vel metus sclerisque ante sollicitudin commodo. كراس بوروس أوديو ، الدهليز في الضعف في ، tempus viverra turpis. fusce condimentum nunc ac nisi pringilla fringilla. Donec Lacinia Congue Felis في Faucibus. </p> </viv> </viv>
5. ترقيم الصفحات
هذه صفحات متعددة
<ul> <li> <a href = "#" aria-label = "previous"> <!-السهام المزدوجة إلى اليسار-> <span aria-hidden = "true"> «</span> </a> </li> <! <li> <a href = "#"> 3 </a> </li> <li> <a href = "#"> 4 </a> </li> <li> <a href = "#"> 5 </a> </li> <li> <li> <li> <a href = "#" href = "#"> 7 </a> </li> <li> <a href = "#"> aria-label = "next"> <!-سهام مزدوجة إلى اليمين-> <span aria-hidden = "true"> »</af> </a> </li> </ul>
هذه هي الصفحة السابقة فقط والصفحة التالية
<ul> <li> <a href = "#"> <span aria-hidden = "true"> ← </span> الصفحة السابقة </a> </li> <li> <a href = "#"> <span aria-hidden = "true"> →
ما سبق مكتوب مع زرين متصل معًا
ما يلي مكتوبة حيث يتم توزيع زرين على كلا الجانبين
<ul> <li> <a href = "#"> <span aria-hidden = "true"> ← </span> الصفحة السابقة </a> </li> <li> <a href = "#"> <span aria-hidden = "true"> →
6. قائمة
تأثير القائمة شائع جدًا وبسيط جدًا للاستخدام
<viv> <!-تم تحديد العنصر الأول-> <a href = "#"> إحصائيات الوصول </a> <a href = "#"> إحصائيات المعلومات </a> <a href = "#"> إحصائيات سجل </a> <a href = "#" إحصائيات المعلومات href = "#"> </a> <a href = "#"
لقد استخدمت المكون أعلاه لإنشاء صفحة ويب ثابتة الواجهة الخلفية
التأثير كما هو موضح في الصورة
إذا كنت لا تزال ترغب في الدراسة بعمق ، فيمكنك النقر هنا لدراسة وإرفاق 3 مواضيع مثيرة لك:
Bootstrap التعلم البرنامج التعليمي
Bootstrap البرنامج التعليمي العملي
تعليمي استخدام المكونات الإضافية Bootstrap
ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.