في المقالة السابقة ، قدمت المعرفة الأساسية لك. بعد ذلك ، سأقدمها لك من خلال هذه المقالة.
يمكننا تنزيل ملفات bootstrap على http://getbootstrap.com
انقر على bootstrap تنزيل على اليسار لتنزيل النسخة المترجمة من CSS و JavaScript و Font Library. انقر فوق مصدر التنزيل في الوسط لتنزيل bootstrap. بشكل عام ، يمكننا استخدام bootstrap للنقر على الإصدار المترجم على اليسار لتنزيله.
إذا تم تنزيل النسخة المترجمة ، فإن الهيكل هو:
إذا كانت بنية رمز المصدر التي تم تنزيلها هي:
المحتويات في مجلد DIST هي نفسها تلك الموجودة في الإصدار المترجم.
إذا كنت بحاجة إلى استخدام Bootstrap ، الإطار الأمامي ، فأنت بحاجة إلى تعيين بعض التنسيقات وتقديم بعض الملفات. هنا قالب أساسي لاستخدام bootstrap.
يستخدم Bootstrap بعض عناصر HTML5 وخصائص CSS. لكي تعمل هذه بشكل صحيح ، تحتاج إلى استخدام نوع مستند HTML5 (Doctype). لذلك ، يتم تضمين مقتطف الكود التالي في بداية الصفحة:
من أجل جعل المتصفحات IE6 أو 7 أو 8 (IE9 أو أدناه) متصفحات متوافقة مع العلامات المضافة حديثًا لـ HTML5 ، يمكن تقديم قالب bootstrap:
<script src = "https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"> </script>
وبالمثل ، من أجل جعل متصفحات IE6 و 7 و 8 متوافقة مع أنماط CSS3 ، يتم تقديم الكود التالي
<script src = "https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"> </script>
يخبر الرمز التالي متصفح IE بأن IE8/9 و SCHELL SCIENT SCINE SCHELL SONS
<meta http-equiv = "x-ua-conmptible" content = "ie = edge"> يتيح الكود التالي للمتصفح عرض الصفحة المقابلة في الحجم الأنسب: <meta name = "viewport" content = "width = width width ، scale scale = 1">
لاستخدام Bootstrap لإنشاء صفحة ويب ، تحتاج إلى تقديم ملف CSS الخاص بـ Bootstrap.
<link href = "~/bootstrap-33.2.0-dist/css/bootstrap.min.css" rel = "stylesheet"/>
لاستخدام مكون JavaScript في Bootstrap ، تحتاج أيضًا إلى تقديم المكون الإضافي JS الخاص بـ Bootstrap. نظرًا لأن المكون الإضافي JS يعتمد على jQuery ، يجب عليك أولاً تقديم نص jQuery. لاحظ أن البرنامج النصي jQuery يجب وضعه أمام المكون الإضافي JS من Bootstrap.
<script src = "~/bootstrap-33.2.0-dist/js/jquery.min.js"> </script> <script src = "~/bootstrap-3.2.0-dist/js/bootstrap.min.js"> </script>
ما ورد أعلاه هو الوصف الكامل لبدء Bootstrap الثاني الذي أدخله المحرر. آمل أن يكون ذلك مفيدًا للجميع. إذا كان لديك أي أسئلة ، فيرجى ترك رسالة لي وسوف يرد المحرر على الجميع في الوقت المناسب. شكرا جزيلا لدعمكم لموقع wulin.com!