أحتاج إلى إنشاء صفحة ويب بسيطة مؤخرًا.
بالنظر إلى عدم وجود خبرة في الواجهة الأمامية ، من أجل الإنتاج بسرعة ، فإن المشروع مجرد أداة وليس له أي متطلبات للمشروع ، لذلك اخترت Bootstrap كإطار الويب.
النية الأصلية للكتابة لتعلم bootstrap من الصفر:
بعد قراءة وثائق bootstrap لفترة طويلة ، بما في ذلك المسؤول (http://v3.bootcss.com/getting-started/) و The Unofficial (http://www.runoob.com/bootstrap/bootstrap-tutorial.html) ، بالإضافة إلى مدونة مقدمة بسيطة كتبها (http://www.cnblogs.com/fnng/p/44460 47.html) ، والتعليقات على bootstrap على Zhihu (https://www.zhihu.com/question/35237472 ، https://www.zhu. يجب أن يكون Bootstrap إطارًا مفيدًا للغاية ، وليس من الصعب التعلم. إنها أداة للإنتاج عالي السرعة ، لكن مرونتها لا تكفي للمطورين للعب معها كما يحلو لهم. علاوة على ذلك ، هناك الكثير من الأشياء على الواجهة الأمامية. إذا لم يكن لديك هدف وتعلم واضح ، فيمكنك الوقوع بسهولة في تفاصيل لا نهاية لها وليس لديك إخراج مماثل ، وسوف تشعر بالإحباط. لذلك ، قررت تسجيل مسار التعلم الخاص بي حتى أتمكن من مراجعة نفسي والبدء في غالبية المبتدئين.
لنبدأ بأبسط قالب bootstrap:
<! doctype html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <meta http-equiv = "x-ua- contablate" content = "ie = edge"> <meta name = "viewport" content = "width = width ، وأي محتوى آخر * يجب * متابعتها! -> <title> bootstrap 101 قالب </title> <!-bootstrap-> <link href = "css/bootstrap.min.css" rel = "stylesheet"> <!-html5 shim و dreelD.js لدعم IE8 لعناصر html5 و media Quieries-> <! <!-[if lt ie 9]> <script src = "// cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"> </script> <script src = "// cdn.bootcss.com/respond.js/1.4 <! </h1> <!-jQuery (ضروري لمكونات JavaScript الخاصة بـ BootStrap)-> <script src = "// cdn.bootcss.com/jquery/1.11.3/jquery.min.js"> </script> <!-تضمين جميع المكونات الإضافية المترجمة (أدناه) ، أو تضمين الملفات الفردية-> < src = "js/bootstrap.min.js"> </script> </body> </html>
دعونا نلقي نظرة عليه واحدًا تلو الآخر (أستخدم # للتوضيح):
<! doctype html> # يعني أن هذه صفحة html5
<html lang = "zh-cn"> #lang تعني "لغة" ، وهي سمة لعلامة HTML. تخبر هذه السمة محركات البحث بأن صفحتي هي صفحة صينية ، وهي مريحة لمحركات البحث لتضمينها ، وليس لها أي تأثير على عرض الصفحة. "ZH-CN" هي طريقة كتابة لمعايير ISO ، والتي تعني الصينية. "ZH" هي أول رسالتين من "Zhongwen" (إذا كنت تريد أن تخبر المتصفح بأنها واجهة إنجليزية ، تتوافق Lang = "EN" و "EN" مع أول حرفين من "الإنجليزية") ، و "CN" هو رمز البلد. (
<meta charset = "utf-8"> #meta علامة تسهل المتصفح إلى تحليل ملفات HTML. تخبر سمة charset المستعرض أن طريقة الترميز لملف HTML هذا هي UTF-8.
<meta http-equiv = "x-ua compatible" content = "ie = edge"> تخبر السمة #http-equiv المتصفح ما هو التوافق والتفاصيل الأخرى المنصوص عليها في هذه html. (//www.vevb.com/web/70787.html) #القيمة المتوافقة مع X-UA هي علامة لا تسري إلا في IE8 والإصدارات الأحدث من IE (IE9 ، IE10 ، 11 ، ...). يتم استخدامه لتحديد المتصفح لمحاكاة طريقة التقديم لإصدار معين من متصفح IE. (تقول بعض المقالات على الإنترنت في الواقع أن X-UA متوافقة مع علامة خاصة لـ IE8 ، وهي ببساطة مضللة!)
#لماذا تفعل هذا؟ نظرًا لأن IE السابق لـ Microsoft (IE6 ، IE7) لم يمتثل لمعيار W3C ، فإن رموز بعض مواقع الويب تستخدم معايير IE القديمة بدلاً من معايير W3C. بدءًا من IE8 ، اعتمدت Microsoft معيار W3C.
#يمكنك استخدام قيمة السمة هذه لإجبار طريقة تقديم المتصفح. عند تعيين content = "ie6" ، يمكن للمستخدمين أيضًا عرض صفحات الويب HTML ضمن معيار IE6 عادة في متصفحات IE8 وما فوق.
#content = "ie = edge" يفرض المتصفح على تقديم أحدث إصدار من معايير IE التي يمكن دعمها. لماذا هذا؟ نظرًا لأن بعض متصفحات بعض المستخدمين قد يتم تعيينها على "وضع التوافق" ، فإنها تقدم ملفات HTML استنادًا إلى معيار IE القديم ، وستحدث الأخطاء عند مواجهة رمز HTML القياسي W3C. لذلك ، عندما يكون الكود الخاص بي معيارًا لـ W3C ولا ينظر في دعم معيار IE القديم ، فإن إجبار أحدث إصدار من عرض IE الذي يمكن دعمه في المتصفح يمكنه تجنب أخطاء العرض الناتجة عن "وضع التوافق". (أي ، لا يحتاج المستخدم إلى تغيير وضع عرض المتصفح يدويًا) <meta name = "viewport" content = "width = width device ، sciale = 1"> #ViewPort يحدد الإعدادات ذات الصلة لنافذة العرض. هنا يحدد العرض في المحتوى عرض العرض ، ويحدد النطاق الأولي نسبة التحجيم الأولية. (حول الوظائف الأخرى: تعيين ما إذا كان يمكن للمستخدم أن يتوسع ، أو نسبة القياس القصوى ، ونسبة التحجيم الدنيا ، وما إلى ذلك ، راجع: http://my.oschina.net/liangrockman/blog/380727)
<!-[إذا lt ie 9]>
<script src = "// cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"> </script>
<script src = "// cdn.bootcss.com/respond.js/1.4.2/respond.min.js"> </script>
<! [endif]->
#مكان هو حكم تعليق مشروط. عندما يكون إصدار IE أصغر من IE9 ، يأخذ SCRPIT SRC موارد CDN أعلاه.
<script src = "// cdn.bootcss.com/jquery/1.11.3/jquery.min.js"> </script>
<script src = "js/bootstrap.min.js"> </script>
# هنا هو ملف JS الذي يربط jQuery و Bootstrap. يتم وضعه في النهاية لتسريع تحميل صفحة الويب ، أي أولاً عرض محتوى صفحة الويب ثم قم بتحميل ملف JS. إذا تم وضعها في المقدمة ، كما هو الحال في علامة الرأس ، عندما تكون سرعة الإنترنت غير جيدة ، فسيتم تعليقها في ملف التحميل JS ، ولا يمكن عرض محتوى صفحة الويب بسرعة ، مما يؤثر على تجربة المستخدم.
ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.
إذا كنت لا تزال ترغب في التعلم بعمق ، فيمكنك النقر هنا للتعلم وإرفاق موضوعين مثيرين لك: Bootstrap التعلم التعليمي التعليمي التعليمي العملي