آخر مرة كتبت فيها "Bootstrap تكتب صفحة نمط الشاشة العملاقة للجمهور متوافقة مع المتصفحات السائدة" (انقر لفتح الرابط) قد لا تكون بعض احتياجات الجيل الأقدم راضية عن هذا النمط ما بعد الحداثة. لا يهم ، يمكننا تغيير التصميم بالكامل إلى نمط البوابة ، وقبلوه على الفور:
بادئ ذي بدء ، يجب أن تكون واضحًا بشأن تخطيط البوابة. هذا سيساعدنا على التخطيط بسرعة. البداية هي شاشة عملاقة أصغر ، تليها شريط تنقل ، ويتم استخدام مجموعة الأزرار هنا ، تليها أعمدة مختلفة. فيما يلي عن استخدام نظام وألواح شبكة Bootstrap ، وأخيراً معلومات حقوق الطبع والنشر ، وهنا لا تزال لوحة.
على أي حال ، أعتقد شخصياً أن أسلوب تخطيط البوابة هذا هو فوضى ، لكنني لا أعرف لماذا يبدو أنه يحظى بشعبية كبيرة.
نحن بحاجة إلى إعداد شيء ما ، مجرد شريط التدرج مع ارتفاع 1 في Photoshop. أولاً ، افتح Photoshop وإنشاء صورة جديدة من 1024 × 1. العرض مجاني ، فقط حاول أن تكون واسعًا قدر الإمكان. الصورة هي 1. اللون الأمامي هو الأخضر الداكن R: 0 G: 140 B: 0 ، لون الخلفية خضراء فاتحة R: 100 G: 200 B: 100. استخدم أداة التدرج لسحب الصورة التالية. بغض النظر عن كيفية سحبها ، يمكنك سحبها إلى اليسار واليمين ، وإلى المنتصف والجانبين ، اعتمادًا على تفضيلاتك الشخصية:
هذه هي الصورة الوحيدة التي نحتاجها للتحضير. يمكنك إغلاق Photoshop ، ورميها جانباً ، وحفظ هذه الصورة في مجلد مشروع الموقع. هذه الصورة هي حوالي 6 كيلو واحد فقط ولا تؤثر على التحميل على الإطلاق.
بعد ذلك ، يكون رمز صفحة الويب المحدد كما يلي. المبدأ هو بالضبط نفس الأجزاء في "Bootstrap اكتب صفحة نمط الشاشة العملاقة للجمهور متوافقة مع المتصفحات الرئيسية" (انقر لفتح الرابط) ، باستثناء أن موقع الكود مختلف ، لذلك لن أصفه هنا.
<! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3 xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "text/html ؛ charset = utf-8"/> content = "width = width device ، scal-scale = 1.0 ، ster-scalable = no"> <link href = "css/bootstrap.css" rel = "stylesheet" media = "screen"> <script type = "text/javascript" src = "js/jquery-1.1.1.js src = "js/bootstrap.js"> </script> <style type = "text/css"> h1 ، h2 ، h3 ، h4 ، h5 {font-family: W3 "،" Wenquanyi Micro Hei "، Sans-Serif ؛ } </style> </head> <body> <viv> <div style = "probrection-image: url (صور/bg.jpg) </h2> </viv> <viv> <viv> <viv> <a href = "#"> button1 </a> </viv> <viv> <a href = "#"> button2 </a> </viv> <div> <button type = "button" data-toggle = "spultdown" <span> </span> HREF = "#"> button1 </a> </li> <li> <a href = "#"> button2 </a> </li> </ul> </viv> <viv> <button type = "button" data-toggle = "dropdown"> spanddown2 <span> </span> </ul button> <a href = "#"> button2 </a> </li> <li> <a href = "#"> button3 </a> </li> <li> </li> <li> <a href = "#"> button4 </a> </li> ... </p> <p> <a href = "#"> button4 </a> </li></ul> </viv> </viv> </viv> <viv> <viv> <viv> <viv> <viv> <h3> column1 </h3> <p> ... </p> <p> <p> زر rob = "button"> </a> </p> </viv> </viv> </viv> </viv> <viv> <viv> <viv> <h3> column2 </h3> <p> ... </viv> </viv> </viv> <viv> <viv> <viv> <h3> column3 </h3> <p> ... </p> <p> <a href = "#" role = "button"> زر </a> </p> </p> </p> </p> <p> <a href = "#" rod = "button"> button </a> <a href = "#" rob = "button"> </a> </p> </viv> </viv> </viv> </viv> </viv> </viv> <viv> <div style = "text-aliNs: center"إذا كنت لا تزال ترغب في الدراسة بعمق ، فيمكنك النقر هنا لدراسة وإرفاق 3 مواضيع مثيرة لك:
Bootstrap التعلم البرنامج التعليمي
Bootstrap البرنامج التعليمي العملي
تعليمي استخدام المكونات الإضافية Bootstrap
ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.