Bootstrap هو إطار أمامي شائع للغاية. ببساطة ، إنها أداة مجموعة لـ HTML و CSS و JavaScript. يمكننا استخدام bootstrap لإنشاء موقع ويب أو برمجيات بسيطة وجديدة. مع Bootstrap ، لم يعد على المطورين الخلفيين القلق بشأن بناء الواجهة الأمامية.
يحتوي Bootstrap (1) على ثروة من مكونات الويب ، استنادًا إلى هذه المكونات ، يمكنك بسرعة بناء موقع ويب جميل ووظائف بالكامل. ويشمل المكونات التالية: القائمة المنسدلة ، مجموعة الأزرار ، القائمة المنسدلة للزر ، التنقل ، شريط التنقل ، فتات الخبز ، الترحيل ، التنضيد ، الصور المصغرة ، حوارات تحذير ، أشرطة التقدم ، حوارات الوسائط ، إلخ.
(2) يأتي مع 13 مكونات إضافية JQery ، والتي تعطي الحياة للمكونات في bootstrap. وتشمل هذه: مربعات الحوار الوضع ، علامات التبويب ، أشرطة التمرير ، مربعات منبثقة ، إلخ.
تم تطوير Bootstrap من قبل مهندسي Twitter في أوقات فراغهم. بعد فتح المصدر على أكبر موقع مفتوح وأكثرها شعبية ، Github ، أصبح Xunsu المشروع الأكثر تحديثًا على الموقع الإلكتروني. ساهم عدد كبير من المهندسين بنشاط في التعليمات البرمجية في المشروع ، وقد ظهر عدد كبير من مواقع الويب التي تم إنشاؤها باستخدام Bootstrap في فترة زمنية قصيرة. لماذا تعتبر سرعة تطوير bootstrap مذهلة للغاية؟ ويرجع ذلك أساسًا إلى الميزات الممتازة لـ Bootstrap:
الأجهزة المحمولة مفضلة: وضع الميزات الموجهة للهاتف المحمول أولاً
دعم المتصفح: تدعم جميع المتصفحات السائدة bootstrap
من السهل البدء: طالما أن لديك أساسيات HTML و CSS ، يمكنك البدء في تعلم bootstrap
التصميم المستجيب: CSS المستجيبة في Bootstrap قابلة للتكيف مع أجهزة الكمبيوتر المكتبية والأجهزة اللوحية والهواتف المحمولة.
أنه يحتوي على مكونات مدمجة قوية لسهولة التخصيص
دعنا نلقي نظرة على أبسط صفحة تم تصميمها باستخدام bootstrap.
<! doctype html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <meta http-equiv = "x-ua-contable" content = "ie = edge"> <meta name = "viewport" content = "width width = 1" قالب </title> <!-bootstrap-> <link href = "css/bootstrap.min.css" rel = "STYLESHEET"> <!-html5 Shim و DreelD.JS ie8 دعم العناصر html5 والاستعلامات على الوسائط-> <! 9]> <script src = "http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"> </cript> <script src = "http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"> <! </p> </viv> <viv> <viv> <h3> العمود 1 </h3> <p> ما تتعلمه ليس فقط التكنولوجيا ، ولكن أيضًا Dream! </p> <p> بغض النظر عن مدى روعة حلمك ، لا يمكن أن تصمد أمام ثباتك الشبيه بالأمراض! </p> </viv> <viv> <h3> العمود 2 </h3> <p> ما تتعلمه ليس فقط التكنولوجيا ، ولكن أيضًا Dream! </p> <p> بغض النظر عن مدى روعة حلمك ، لا يمكن أن تصمد أمام ثباتك الشبيه بالأمراض! </p> </viv> <viv> <h3> العمود 3 </h3> <p> ما تتعلمه ليس فقط التكنولوجيا ، ولكن أيضًا Dream! </p> <p> بغض النظر عن مدى روعة حلمك ، لا يمكن أن تصمد أمام ثباتك الشبيه بالأمراض! </p> </viv> </viv> </viv> </body> </html>
ما سبق هو المقال الأول حول التعرف على bootstrap الذي قدمه لك المحرر. آمل أن يكون ذلك مفيدًا لك. إذا كان لديك أي أسئلة ، فيرجى ترك رسالة لي وسوف يرد المحرر إليك في الوقت المناسب. شكرا جزيلا لدعمكم لموقع wulin.com!