لقد اكتشفت مؤخرًا شيئًا جيدًا يسمى Bootstrap ، وهو إطار CSS الأكثر شعبية في الوقت الحاضر ، والذي يعطي الأولوية للأجهزة المحمولة ويمكن أن يتكيف بسرعة مع الأجهزة المختلفة. استخدمه لكتابة صفحات مستجيبة بسرعة وبشكل مريح ، وحظر اختلافات المتصفح. مع Bootstrap ، لم يعد بإمكانك تخيل الحياة المأساوية لكتابة صفحات الويب في CSS الأصلية في الماضي.
بعد التعلم ، وجدت أنه كان لدي أيضًا القدرة على تطوير صفحة راقية في دقائق. ستقدم هذه المقالة bootstrap لك وقيادتك إلى تنفيذ صفحة سريعة الاستجابة معًا.
الشكل 1. الأولوية المحمولة ، تم تكييفها مع أجهزة مختلفة
1. التثبيت
أسهل طريقة هي الإشارة مباشرة إلى bootstrap التي توفرها شبكة توزيع المحتوى (CDN) في صفحة الويب. عندما يصل المستخدم إلى صفحة الويب ، سيحصل على موارد من الخادم القريب.
قائمة 1. احصل على bootstrap من شبكة توزيع المحتوى
<!-أحدث CSS المترجمة والمُصغِّل-> <Link Rel = "STYLESHEET" href = "bootstrap/3.3.4/css/bootstrap.min.css"> <!-موضوع اختياري-> <link rel = "stylesheet" href = "bootstrap/3.3.4/css/bootstrap-theme. JavaScript -> <script src = "bootstrap/3.3.4/js/bootstrap.min.js"> </script>
يمكنك أيضًا اختيار تنزيل Bootstrap للنشر محليًا. يمكن للمستخدمين تنزيل bootstrap الكامل على الصفحة ، أو يمكنهم تحديد الوظائف المستخدمة في المشروع وفقًا لاحتياجات المشروع في الصفحة المخصصة ، وتجميع وتنزيل نسخة مبسطة من bootstrap. بعد الانتهاء من التنزيل ، يتم الحصول على ملف مضغوط. هيكل الدليل المقلوب هو كما يلي:
قائمة 2. بنية دليل bootstrap
bootstrap/
├ CSS/
│ ├ bootstrap.css
│ ├ bootstrap.css.map
│ ├ bootstrap.min.css
│ ├ bootstrap-theme.css
│ ├ bootstrap-theme.css.map
│ └ bootstrap-theme.min.css
├ JS/
│ ├ bootstrap.js
│ └ bootstrap.min.js
└ الخطوط/
├ glyphicons-halflings-regular.eot
├ glyphicons-halflings-regular.svg
├ glyphicons-halflings-regular.ttf
├ glyphicons-halflings-regular.woff
└ الغليفية Halflings-regular.woff2
نركز هنا بشكل أساسي على ثلاثة ملفات مبسطة: bootstrap.min.css هو المكون الرئيسي للتمهيد ويحتوي على عدد كبير من فئات CSS لاستخدامها ؛ Bootstrap-theme.min.css يحتوي على موضوعات bootstrap اختيارية ؛ Bootstrap.min.js يوفر بعض طرق JavaScript. تجدر الإشارة إلى أن bootstrap يعتمد على jQuery ، لذلك يجب تقديم jQuery قبل استخدام bootstrap.min.js. مثل استخدام شبكات توزيع المحتوى ، نستخدم المسارات النسبية لتقديم CSS و JavaScript المقابل في صفحاتنا. في التطوير الفعلي ، غالبًا ما نستخدم القالب الذي يوفره Bootstrap كنقطة انطلاق. يقدم هذا القالب البيانات الوصفية والتمهيد المطلوبة من خلال الصفحات المستجيبة. يمكن للمطورين كتابة صفحاتهم المستجيبة على هذا الأساس:
قائمة 3. القالب الأساسي bootstrap
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <meta http-equiv = "x-ua content" content = "ie = edge"> <meta name = "viewport" content = "width = width device = 1" يجب أن يأتي أي محتوى رأس آخر * بعد * هذه العلامات-> <title> pootstrap 101 قالب </title> <!-bootstrap-> <link Href = إذا قمت بعرض الصفحة عبر ملف: //-> <!-[إذا lt ie 9]> <script src = "https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"> </ src = "https://oss.maxcdn.com/respond/1.4.2/respond.min.js"> </script> <! src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"> </script> <!-قم بتضمين جميع الإضافات المترجمة (أدناه) ، أو تضمين الملفات الفردية حسب الحاجة->
2. CSS
Bootstrap هو أولاً إطار عمل CSS ، والذي حدد العديد من فئات CSS. يحتاج المطورون فقط إلى إضافة فئات CSS المناسبة إلى عناصر HTML للحصول على النمط المطلوب ، والذي يمكنه إكمال تخطيط الصفحة والتخطيط والوظائف الأخرى. CSS التي توفرها Bootstrap قوية للغاية. ستركز هذه المقالة على نظام الشبكة الذي توفره. بالنسبة للوظائف الأخرى ، لن يتم ذكرها إلا بالمناسبة عند تطبيقها. إذا كنت تريد معرفة المزيد عن الوظائف ، فيرجى الرجوع إلى الوثائق الرسمية.
حاوية
عند استخدام تخطيط bootstrap ، تحتاج إلى تضمين عناصر HTML في حاوية (.Container). يوفر Bootstrap حاوين:. container و.-container-fluid. يركز السابق على المحتوى بالعرض الثابت ، بينما يسمح الأخير للمحتوى بملء نافذة المتصفح بالكامل ، كما هو موضح أدناه:
قائمة 4.
<viv> <p> "عندما كنت طفلاً ، كانت والدتي تصنع فنجانًا من القهوة لي كلما كنت مريضًا. قالت بلطف ،" أجانب يشربون هذا. "" كنت دائمًا خائفًا من القهوة ، وكانت الحموضة والمرارة متشابكة. الآن لا يمكنني العثور على الذوق الذي شربته عندما كنت طفلاً عندما كنت طفلاً ، حتى في ذلك اليوم ، شربت كوبًا من الإيزاتيس. قالت بلطف: "الأجانب يشربون هذا". "عندما كنت صغيراً ، كنت دائمًا خائفًا من القهوة ، والمرارة المتشابكة. الآن لا يمكنني العثور على الذوق الذي شربته عندما كنت طفلاً عندما كنت طفلاً ، حتى ذلك اليوم شربت كوبًا من الإيزاتيين". </p> </viv>
تُظهر الصورة التالية ما يبدو في المتصفح:
الشكل 2. الحاوية
نظام الشبكة
مثل نظام الشبكة الذي قمنا بتصميمه في كتابة الصفحة الأولى المستجيبة ، يقسم Bootstrap الصفحة إلى صفوف (.ROW) ، مع 12 عمودًا لكل صف (.COL-MD-*). يجب تضمين الصفوف في الحاوية. وفقًا لحجم الشاشة ، تنقسم الأعمدة إلى .col-xs- ، .col-sm- ، .col-md- ، و .col-lg- ، على التوالي ، المقابلة للهواتف المحمولة (<768px) ، وأجهزة كمبيوتر كبيرة (≥768px) ، وأجهزة كمبيوتر متوسطة الشاشة (≥992px) وأجهزة الكمبيوتر الكبيرة (≥1200px). وتسمى هذه وحدات البكسل التي تظهر فيه النقاط الحرجة. كلما يصل حجم المتصفح أو حجم الشاشة إلى نقطة حرجة أخرى ، ستعمل فئة CSS المقابلة وسيتغير تخطيط الصفحة. انظر الرقم التالي للحصول على التفاصيل:
الشكل 3. نظام الشبكة
كيف تفهم الجدول أعلاه؟ إذا كنت بحاجة إلى حفر الصفحة إلى ثلاثة أعمدة عند تصفح صفحة على جهاز كمبيوتر ، والذي يمثل 1/4 و 2/4 و 1/4 من عرض الصف ، يمكنك كتابة الرمز على النحو التالي:
قائمة 5. يتم تقسيم صف واحد إلى ثلاثة أعمدة
<viv> <viv> .col-md-3 </viv> <viv> .col-md-6 </viv> <viv> .col-md-3 </viv> </viv>>. col-md-3 </viv> </viv>
افتح المتصفح ويمكنك أن ترى أنه يشغل كل منهم 3 و 6 و 3 من الأعمدة الـ 12 ، والتي تضيف ما يصل إلى 12 عمودًا بالضبط. إذا قمنا بتضييق نافذة المتصفح حتى يكون أقل من 970 بكسل ، فسنجد أنه أصبح ثلاثة أسطر ، مكدسة معًا لعرضها. باستثناء .col-xs- ، تتصرف فئات CSS الأخرى نفس الشيء. عندما يكون حجم الشاشة أصغر من نقطته الحرجة ، سيتم عرضه مكدسة. سيتم عرضه فقط في الأعمدة عندما يكون حجم الشاشة أكبر من نقطة الأمر الحرجة ، ويتم عرض .col-XS- في الأعمدة في أي حال.
يمكن استخدام فئات CSS المقابلة لأحجام الشاشة المختلفة بطريقة مختلطة. على سبيل المثال ، إذا أردت أن تعرض صفحة 3 أعمدة على الكمبيوتر وعمودان على الهاتف ، يمكنني كتابة الرمز على النحو التالي. على الهاتف ، سيتم عرض العمود الثالث على السطر التالي وسيشغل نصف عرض الخط:
سرد 6. إظهار أرقام مختلفة من الأعمدة على أجهزة الكمبيوتر والهواتف
<viv> <viv> .col-md-3 </viv> <viv> .col-md-6 </viv> <viv> .col-md-3 </viv> </viv>>. col-md-3 </viv> </viv>
إذا كنت ترغب في عرض نفس العمود على جميع الأجهزة ، فأنت بحاجة فقط إلى تحديد الحد الأدنى للحجم .col-xs- ، وسيتم توسيع التصميم تلقائيًا إلى حجم أكبر ، وإلا فلن يكون ذلك:
قائمة 7. يتم عرض نفس عدد الأعمدة على جميع الأجهزة
<viv> <viv> .col-xs-6 </viv> <viv> .col-xs-6 </viv> </viv>
يمكنك أيضًا إعطاء إزاحة معينة للعمود ، على سبيل المثال ، يمثل العمود الأول 1/4 من عرض الصف ، ونريد أن يعوض العمود الثاني 6 أعمدة إلى اليمين ، حيث يشغل 3 أعمدة في نهاية الصف:
قائمة 8. إزاحة العمود
<viv> <viv> .col-md-3 </viv> <viv> .col-md-3 </iv> </viv>
يمكن أيضًا تعديل ترتيب الأعمدة بواسطة .col-md-push-* و .col-md-pull-*. معناها هو دفع عنصر للخلف أو سحب عدة أعمدة للأمام. يمكن للمطورين استخدام هذه الميزة لسحب محتوى مهم إلى المقدمة عند عرضه على الهاتف:
قائمة 9. دفع وسحب العمود
<viv> <viv> .col-md-9 .col-md-push-3 </viv> <viv> .col-md-3 .col-md-pull-9 </viv> </viv>
الأمر الأكثر إثارة هو أن هذا النظام الشبكي يمكن أن يتم أيضًا تجديده ، بحيث يمكن تنفيذ العديد من التخطيطات المعقدة:
قائمة 10. التعشيش
<viv> <viv> المستوى 1: .col-sm-9 <viv> <viv> المستوى 2: .col-xs-8 .col-sm-6 </viv> <viv> المستوى 2: .col-xs-4 .col-sm-6 </viv> <viv>
يتم تقسيم الكود أعلاه عمومًا إلى عمودين ، ويحتوي العمود الأول على عمودين متداخلان.
توفر وظيفة شبكة Bootstrap إمكانيات مختلفة لتخطيط صفحة الويب وهي بسيطة للغاية للاستخدام. دعنا نأخذ حالة لنرى مدى بساطة كتابة صفحة استجابة باستخدام bootstrap.
3. القتال الفعلي
افترض أنك تريد تنفيذ صفحة ويب كما هو موضح في الصورة التالية:
الشكل 4. تصميم الويب
أولاً ، نقوم بتقسيم عناصر صفحة الويب إلى صفوف وأعمدة مقابلة. يوضح الشكل التالي تقسيم المؤلف:
الشكل 5. تقسيم تصميم الويب إلى صفوف وأعمدة
وفقًا لذلك ، حدد بنية HTML الخاصة بنا وأضف فئة CSS المناسبة:
إدراج 11. تحديد هيكل HTML
<viv> <viv> <img src = "http://placehold.it/150x150"> </viv> <viv> <h1> jane doette </h1> <h3> ninja الواجهة الأمامية </h3> </viv> <div> <div> <img src = "http://placehold.it/950x350"> </viv> <viv> <viv> <h2> عمل مميز </h2> </viv> <viv> <viv> <img src = "http://placehold.it/250x250"> <h2> applify </h2> <a href = "https://github.com/udacity/applify"> https://github.com/udacity/applify </a> </viv> <viv> <img src = "http://plachold.it/250x250"> <h2> href = "https://github.com/udacity/sunflower"> https://github.com/udacity/sunflower </a> </viv> <viv> <img src = "http://placehold.it/250x250"> <h2> bokeh </h2> href = "https://github.com/udacity/bokeh"> https://github.com/udacity/bokeh </a> </viv> </viv>
استغرق الأمر أقل من 10 دقائق لكي يكتب المؤلف الرمز أعلاه ، وبما أنه لم تكن هناك صور ، فقد استخدم المؤلف الصور النائبة المقدمة عبر الإنترنت. إن فتح هذه الصفحة في متصفح قريب من التصميم ، لكن الخط والأحرف الكبيرة والأحرف الكبيرة والمحرف لا يزال غير متسق مع التصميم. بعد ذلك ، تحتاج إلى ضبط وتصفح وثيقة bootstrap لاكتشاف فصول CSS ذات الصلة. يظهر التأثير النهائي في الشكل أدناه:
الشكل 6. تأثير الإدراك
والأكثر إثارة للاهتمام هو أنه عندما تضيق نافذة المتصفح ، أو الوصول إلى الصفحة من هاتفك ، ستجد أنها بالفعل صفحة مستجيبة بسيطة ، ولم نضيف أي رمز إضافي! بالنظر إلى ذلك الوقت ، استغرق الأمر أقل من 20 دقيقة في المجموع ، وقد واجهت أيضًا وعدي بكتابة صفحة سريعة الاستجابة في دقائق.