Bootstrap يشبه إطار الواجهة الأمامية. لقد رتبت بالفعل الكثير من CSS ، ويمكن استدعاؤها مباشرة إذا كان ذلك مطلوبًا للتطوير الأمامي. عنوان الموقع هو http://www.bootcss.com. يمكن أن يؤدي استخدام bootstrap إلى تقليل وقت التصميم في CSS أثناء التطوير الأمامي
تحتاج إلى استخدام bootstrap لتنزيل المكونات على الموقع الرسمي (انقر لفتح الرابط). إصدار bootstrap المستخدم في بيئة الإنتاج (انقر لفتح الرابط). Bootstrap3 غير متوافق مع 2. يوصى باستخدام bootstrap3 مباشرة وفقًا لوثائق التطوير الخاصة به.
بعد إزالة الضغط على bootstrap ، انسخ 3 مجلدات تم الحصول عليها CSS والخطوط و JS إلى دليل الموقع. إذا كان مشروع الويب JSP الخاص بـ Eclipse ، فضعه تحت مجلد Webroot.
بعد ذلك ، يمكنك استدعاء Bootstrap لتصميم الواجهة الأمامية لأي صفحة في هذا الموقع بسرعة.
ومع ذلك ، تجدر الإشارة إلى أن المتصفحات المختلفة لها تفسيرات مختلفة للتمهيد. لا يمكن قراءة بعض الأنماط ، لكن الوظائف الأساسية لا تتأثر ، والصفحة قبيحة بعض الشيء.
فيما يلي مقارنة بين IE و Google Chrome على نفس الصفحة:
1. الأهداف الأساسية
استخدم bootstrap لكتابة صفحة مقصودة جميلة للكمبيوتر الشخصي والكمبيوتر اللوحي والهاتف المحمول.
إذا امتدت على الكمبيوتر ، فإن العناصر المختلفة ستتكيف تلقائيًا مع الشاشة.
إذا قمت بفتح مثل هذه الصفحات على هاتفك ، فسوف تتكيف مباشرة مع شاشة الهاتف دون الحاجة إلى التعديل التلقائي للمستخدم.
2. الأفكار الأساسية
تم تصميم تخطيط الصفحة وفقًا للنمط المتأصل في bootstrap على النحو التالي:
3. عملية الإنتاج
الكود المحدد للصفحة بأكملها كما يلي ، وسيقوم ما يلي بتحليل العلامات الواحدة تلو الأخرى:
<! doctype html public "-// w3c // dtd html 4.01 transitional // en"> <html> <head> <head> صفحة تسجيل الدخول </title> <meta name = "viewport" content = "width = device-width ، scale-scale = 1.0 ، user-scalable = no Rel = "STYLESHEET" media = "screen"> </head> <body> <viv> <viv> <table frame = "void"> <td> <img src = "images/img0.jpg"/> </td> <td> مرحبًا. الرجاء تسجيل الدخول أولاً. </td> </tr> </table> </viv> <viv> <form rom = "form" action = "1.html" method = "post"> <viv> <label for = "username"> username: </label> <div> <inpult type = "text" name = "username" plicholder = "username". كلمة المرور: </label> <iv> <input type = "password" name = "password" placeholder = "password" id = "password"/> </fire> </viv> <viv> <viv> <button type = "submit"> تسجيل الدخول </button> <small> ألا يكون لديك حساب؟ <a href = "http://2.com"> انقر للتسجيل </a> </small> </viv> </viv> </part> </viv> </viv> </viv> </body> </html>
1. <head> علامة
أولاً ، ضع سطرين التاليين من الكود في علامة <head>:
<Head> <title> صفحة تسجيل الدخول </title> <!-اطلب الصفحة للتكيف تلقائيًا مع شاشة المتصفح-> <meta name = "viewport" content = "width = width device ، inials-scale = 1.0 ، user-scalable = no"> <! </head>
2. <body> علامة
(1) اكتب أولاً <Div> </viv> ، ثم ضع الكود فيه. الوصف الأساسي هو كما يلي:
(2) <Div> العلامة
<viv> <!-اضبط الجدول لتخطيط طبقة CSS هذه. ليس من السهل إضافة align = "يسار" إلى علامة IMG. سوف تتدفق الصورة إلى الطبقة-> <!-مثل <table>-> <table frame = "void"> <td> <td> <img src = "images/img0.jpg"/> </td> <td> مرحبًا. الرجاء تسجيل الدخول أولاً. </td> </tr> </table> </viv>
(3) ضمن علامة <viv> ، أولاً ، ضع نموذجًا نموذجًا = "form" Action = "1.html" method = "post">. بالمقارنة مع أشكال HTML العادية ، يحتوي هذا النموذج على سمات فئة وسمات الدور. ليست هناك حاجة لقول الكثير عن سمة الفصل. إذا كانت القيمة نموذجًا ، حتى لو كان النموذج يحتوي على موقع كافٍ ، فلن يكون الملصق الخارجي ومربع الإدخال على نفس الخط. إذا كانت القيمة هي النموذج الحالي أفقيًا ، فسيكون ذلك كما هو موضح في تأثير الشكل. لا تظهر سمة الدور أي تأثير ، ويتم إضافتها فقط وفقًا للوثيقة الصينية لل bootstrap.
بعد ذلك ، العناصر الموجودة أسفل كل نموذج هي كما يلي:
<viv> <form rob or = "form" action = "1.html" method = "post"> <!-تسمية كل خاصية لكل خاصية تشكل مجموعة من مجموعة النماذج مع مربع الإدخال-> <viv> <!-سمة الفئة التالية هي أن يتم تمديدها تلقائيًا وفقًا لحجم الشاشة-> أي شيء ، والتي بالطبع لا يمكن شرحها في IE8. لا يمكنني رؤية أي وظيفة من المعرف ، تتم إضافتها فقط وفقًا لمتطلبات bootstrap المستندات الصينية -> <إدخال type = "text" name = "username" leactroder = "username" id = "username"/> </viffer </viv> <viv> <!-الزر هنا يختلف عن زر إرسال HTML العادي ، لكنه لا يؤثر على تقديم النموذج-> <button type = "submit"> تسجيل الدخول </button> <!-<small> يضمن العلامة أن هذا النص هو نفس سطر زر الإرسال-> <small> لا يوجد حساب؟ <a href = "http://2.com"> انقر للتسجيل </a> </small> </viv> </viv> </part> </viv> </viv>
في هذه المرحلة ، تم الانتهاء من تطوير هذه الصفحة.
إذا كنت لا تزال ترغب في الدراسة بعمق ، فيمكنك النقر هنا لدراسة وإرفاق 3 مواضيع مثيرة لك:
Bootstrap التعلم البرنامج التعليمي
Bootstrap البرنامج التعليمي العملي
تعليمي استخدام المكونات الإضافية Bootstrap
ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.