يتيح لك الغرض الرئيسي من هذه المقالة تعلم استخدام Twitter Bootstrap لإنشاء موقع في غضون 20 دقيقة. يتم تقديم كيفية إنشاء موقع أدناه:
أول شيء يقوله هو أن Twitter Bootstrap هو إطار عمل ممتاز مفتوح المصدر. إنه يوفر حالات استخدام مفصلة لجميع المجموعات الرئيسية ، مما يتيح لك أن تعلق بسهولة على التصميم الخاص بك عن طريق النسخ واللصق.
قوالب HTML الأساسية
نحتاج إلى استخدام قالب HTML أساسي حتى نتمكن من تضمين ملف bootstrap الذي نحتاجه. فيما يلي بداية مشروع Twitter Bootstrap الخاص بنا ، نسخ هذه الرموز إلى ملف وتسميته IT INDEX.HTML.
<! doctype html> <head> <title> Twitter Bootstrap Tutorial - برنامج تعليمي للتخطيط المستجيب </title> <type type = 'text/css'> body {background -color: #ccc ؛ } </style> </head> <body> </body> </html>في هذا الرمز ، أضفنا بعض CSS لجعل خلفية الصفحة رمادية زاهية ، لأنه بهذه الطريقة يمكننا بسهولة رؤية أعمدة مختلفة في تصميمنا ، مما يسهل فهمه.
تقديم ملف twitter bootstrap
من أجل استخدام Twitter Bootstrap ، نحتاج فقط إلى إدخال ملف في قالبنا. هناك العديد من الطرق لتقديم الملفات. إذا كنت تريد معرفة هذه الأساليب ، فيرجى استشارة المستندات ذات الصلة.
استنادًا إلى نقطة انطلاق هذا البرنامج التعليمي ، سنقدم ملف bootstrap-combline.min.css من خلال CDN دون تنزيل أي ملفات.
نسخة الكود كما يلي: href = "http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel = "stylesheet">
Twitter Bootstrap CSS يسري حيز التنفيذ في قوالبنا.
حاوية Twitter Bootstrap
فئة الحاوية من bootstrap مفيدة للغاية. يمكن أن ينشئ منطقة مركزية في الصفحة ، وبعد ذلك يمكننا وضع محتويات المواقع الأخرى في الداخل. تعادل فئة الحاويات إنشاء مربع DIV مركز مع عرض ثابت وقيمة ماجين من السيارات. تتمثل ميزة فئة الحاويات في Bootstrap Twitter في أنها تستجيب ، وهي تحسب أفضل عرض بناءً على عرض الشاشة الحالي لأغراض عملية.
في علامة الجسم ، استخدم فئة الحاوية لإنشاء Div. سيكون بمثابة الغلاف الخارجي الرئيسي للرموز الأخرى على الصفحة.
إذا قمت بضبط ارتفاع هذا div وضبط لون الخلفية على اللون الأبيض ، فسيكون التأثير الذي تراه هكذا:
العنوان والملاحة
الآن بعد أن أصبح لدينا مكان لإضافة رمز HTML إضافي ، يمكننا إضافة نص العنوان ثم إنشاء شريط التنقل الرئيسي للموقع.
أضف النص التالي أو النص الذي حددته إلى علامة DIV لفئة الحاوية.
<h1> Twitter Bootstrap Tutorial </h1>
ليس هناك الكثير الآن ، إنه مجرد عنوان ، دعنا ننتقل إلى الجانب الأكثر إثارة للاهتمام من التنقل في Twitter Bootstrap.
يحتوي Bootstrap على فئة NAV تسمح لنا بإنشاء عناصر التنقل المختلفة. يمكنك إضافة الرمز التالي بعد علامة H1.
<div class = 'navbar navbar-on-on'> <div class = 'nav-collapse' style = "height: auto ؛"> <ul> <li> <a href = "#"> home </a> </li> <li> <li> <a href = "#"
تحتوي الطبقات المتعلقة بالبحرية على جميع أنماط شريط الملاحة. ستطبق إضافة فئة NavBar ذات النموذج الأسود الرائع ، وهو مزيج شائع من Bootstrap Twitter. أقترح التوسع على هذا النمط لإنشاء التنقل الفريد الخاص بك. ولكن في هذا البرنامج التعليمي ، سنظل نستخدم نمط bootstrap الأساسي.
في Div مع Class Navbar ، نضيف Div آخر مع Class Nav-Collapse ونضيف ارتفاع النمط inline: Auto ؛ هذا يخبر Bootstrap أنه عندما تكون هذه الصفحة في نافذة متصفح بعرض أقل من 970 بكسل ، فإنها ستوفر طريقة عرض مفتاح مضغوط.
إذا قمت بحفظ ملف index.html وفتحه في المتصفح ، فستتمكن من رؤية هذا التغيير عند ضبط عرض نافذة المتصفح ، كما هو موضح في الشكل.
أكبر من 979px:
أقل من 979px:
بالإضافة إلى ذلك ، يمكننا إضافة فئة NAV إلى عنصر قائمة HTML غير المرتبة لتطبيق المزيد من الأنماط من ملف Bootstrap CSS ، أو يمكننا إضافة فئة نشطة إلى عنصر قائمة "الصفحة الرئيسية".
شارك مقالات رائعة حول ملاحة bootstrap: "التنقل الذي يجب تعلمه كل يوم بواسطة bootstrap" ، "التنقل الذي يجب تعلمه كل يوم عن طريق bootstrap"
المحتوى الرئيسي والشريط الجانبي
لقد انتهينا من التنقل الرئيسي للموقع ، والآن نحتاج إلى إضافة منطقة المحتوى الرئيسية والشريط الجانبي لدعم المزيد من الروابط أو مسارات التنقل. الرجاء إضافة الرمز التالي إلى شريط التنقل.
<div id = 'content' class = 'row-fluid'> <div class = 'span9 main'> <h2> قسم المحتوى الرئيسي </h2> </viv> <div class = 'span3 الشريط الجانبي'> <h2> الشريط الجانبي </h2> </viv> </div>
هذا هو بالضبط ما نحتاج إلى فهمه حول نظام Bootstrap النقطي. بالطبع ، تغطي وثائق Bootstrap الرسمية مزيدًا من التفاصيل ، لكننا سنبدأ بالأساسيات ونتيح لك فهمها بشكل أفضل.
يستخدم النظام النقطي تخطيطًا 12 عمودًا ، مما يعني أنه يمكن تقسيم الصفحة إلى 12 عمودًا متطابقًا. الصورة التالية التي تم الحصول عليها من وثيقة bootstrap الرسمية تعطي عرضًا جيدًا.
في الكود الذي لصقه للتو في شريط التنقل ، يمكنك رؤية الفصول المسماة SPAN9 و SPAN3. سيقومون بتقسيم الصفحة إلى جزأين من الأعمدة التسعة الموجودة على اليسار و 3 أعمدة على اليمين ، وتشكيل منطقة المحتوى والشريط الجانبي. أحد فوائد استخدام نظام النقطية هو أنه يحسب ديناميكيًا عرض العمود بناءً على عرض النافذة ، لذلك لا تحتاج إلى كتابة أي استعلامات إعلامية لجعل موقعك يعمل في أي دقة شاشة.
يمكنك مراقبة تأثيرها عن طريق تغيير عدد المسافات وضبط حجم متصفحك. ستلاحظ أنه عندما تكون منطقة المحتوى أقل من 724 بكسل ، يتم تكديس هذه الأعمدة عموديًا.
الآن نضع النص التالي أو أي نص آخر خلف علامة H2 في منطقة المحتوى الرئيسية ، فقط لإطالة الصفحة قليلاً.
انسخ الكود على النحو التالي: psum dolor sit amet ، exectuer adipiscing elit ، sed diam nibh nibh euismod tincidunt ut laoreet dolore magna alliquam erat volutpat. ut wisi enim ad minimly Veniam ، quis nostrud exercise sta ulamcorper suscipit lobortis nisl et aliquip ea ea commodo. DUIS Autem vel eum iriure dolor in Hendrerit in Gulptate Velit Esse molestie نتيجة ، Vel Illum dolore Eu feugiat nulla facilisis at vero eros et accumsan et iusto odio qui qui plandit gailtit lumtatum zzril delenit ugue dola te feagaila nula. Nam Liber Tempor cum soluta nobis eleifend خيار congue nihil imperdiet doming id quod mazim placerat possim. </p>
<p> typi non habent clariitatem insitam ؛ EST USUS Legitis في IIS QUI Facit eorum Clariitatem. التحقيقات perfectraestraverunt Clariitres Legende me lius quod II Legunt Saepius. Claritas est etiam Process Dynamicus ، Qui Sequencer Mutationem consuetudium legorum. mirum est notame quam littera gothica ، quam nunc putamus parum Claram ، anteposuerit litterarum format humanitatis لكل seacula quarta decima et quinta decima. eodem modo typi ، qui nunc nobis videntur parum Clari ، fiant sollemnes in futurum. </p>
الآن سيظهر الموقع على النحو التالي:
ملاحة الشريط الجانبي
يمكنك رؤية جميع عناصر التنقل التي يوفرها لنا Twitter Bootstrap هنا (twitter.github.com/bootstrap/components.html#navs).
سوف نستخدم علامة التبويب العمودي لإنشاء منطقة تنقل إضافية. نسخ والصق الرمز التالي في علامة H2 الشريط الجانبي.
<ul> <li> <a href = '#'> رابط آخر 1 </a> </li> <li> <a href = '#'> ارتباط آخر 2 </a> </li> <li> <a href = '#'> رابط آخر 3 </a> </li> </li>
هذا عرض بسيط! الكود أعلاه هو حرفيًا مجرد قائمة غير مرتبة مع فصول Nav-tabs و Nav-Stacked ، لكنها تنشئ لوحة تنقل لنا.
بالنظر إلى التأثير النهائي ، تم الانتهاء من صفحة تستند إلى Twitter Bootstrap.
بعد قراءة هذا البرنامج التعليمي ، يجب أن تكون قادرًا على استخدام Bootstrap لإنشاء صفحة تخطيط أساسية مستجيبة ، وفهم نظام الشبكة ، وأن تكون قادرًا على استخدام Bootstrap للتنقل ، وملاحة قضبان وفهم أساسيات التصميم المستجيب.
يمكن أيضًا العثور على المزيد من المحتوى حول bootstrap في مواضيع خاصة: "Bootstrap التعلم التعليمي"
كل ما سبق هي المعرفة اللازمة لاستخدام Twitter Bootstrap. آمل أن يكون ذلك مفيدًا لتعلم الجميع. آمل أن تتمكن من قضاء المزيد من الوقت وجعلها مثالية. في المستقبل القريب ، يمكنك أن تصبح خبيرًا في Bootstrap.