() translation by (you can also view the original English article)
تصميم الويب هو مهنة متطورة. في حين أن العين الحادة للون ، والطباعة ، والتخطيط ستكون دائما مهمة ، فإن هذه المهارات تتفوق عليها الحاجة لفهم دوافع المستخدم. لا يكفي إنشاء موقع والانتظار لحركة المرور - يجب أن تساعد المواقع المستخدمين على تحقيق أهدافهم ، مع الحد الأدنى من الاحتكاك المعرفي. يمكن أن يساعد Bootstrap محترفي الويب على تحديد هذه الأهداف وإنشاء تجربة قاتلة أيضًا.
نحن لا نصنع الصفحات ، نحن نصنع الأفلام
أود أن أقول إننا لا نصنع الصفحات ، فنحن نصنع الأفلام. يتوقع المستخدمون تحميل المواقع بسرعة وتوفير محتوى جذاب والتفاعل الذكي. مثلما تعتمد الأفلام على التخفيضات السريعة والإضاءة والمزاج لجذب المستخدمين ، تعتمد مواقع الويب على التحولات والتفاعل والتوقيت.غالباً ما يتم فقدان هذه التفاصيل أثناء مرحلة التصميم - أو ما هو أسوأ من ذلك ، لا يتم حسابها أبداً. في حين أن الانتقال الذي يستغرق 0.5 ثانية عندما يستغرق 0.25 ثانية لن يؤدي إلى غرق تطبيق ما ، فإن هذا المستوى من التفاصيل يفصل بين الجيد والرائع.
سأوضح لك كيف يمكن أن يحل Bootstrap محل wireframes ثابت ويجلب هذه التفاصيل إلى الواجهة في وقت سابق وبجهد أقل.
الخطوة 1: إعداد المشروع
تتمثل الخطوة الأولى في تنزيل أحدث إصدارات Bootstrap و jQuery المستقرة .
على الرغم من أن jQuery يستضيفه عدد من شبكات CDN ، إلا أنني أفضل تضمين جميع الملفات محليًا حتى أتمكن من العمل مع أو بدون الوصول إلى الويب. استمر وقم بإعداد بنية دليل مثل الهيكل أدناه ، وانسخ ملفات Bootstrap CSS ، و Bootstrap Responsive CSS ، و Javascript. تعديل الأسماء والمواقع حسب الحاجة ، ولكن باستخدام هذه البنية يعني أنه يمكنك أيضًا الاستفادة من نموذج HTML الخاص بي في الخطوة التالية.
الآن سيكون الوقت مناسبًا لإنشاء ورقة أنماط ثالثة ، والتي سأدعوها باسم user.css .سيتم استخدام هذا الملف لتجاوز أنماط Bootstrap حسب الحاجة.
الخطوة 2: إنشاء index.html والتحقق من المسارات
هذا هو الإعداد الآخر الوحيد المطلوب لبدء إنشاء إطار عمل تفاعلي. قم بإنشاء ملف في جذر دليل المشروع الخاص بك ، واسمه index.html . بعد قيامك بإنشاء الملف ، انسخ هذا الرمز واحفظه.
1 |
<!DOCTYPE> |
2 |
<html lang="en"> |
3 |
<head>
|
4 |
<meta http-equiv="Content-type" content="text/html; charset=utf-8"> |
5 |
|
6 |
<title>Interactive Bootstrap Wireframes</title> |
7 |
|
8 |
<link rel="stylesheet" href="css/bootstrap.css" type="text/css" media="screen" title="master" charset="utf-8"> |
9 |
<link rel="stylesheet" href="css/bootstrap.css" type="text/css" media="screen" title="master" charset="utf-8"> |
10 |
<link rel="stylesheet" href="css/bootstrap.css" type="text/css" media="screen" title="master" charset="utf-8"> |
11 |
</head>
|
12 |
|
13 |
<body>
|
14 |
<div class="container"> |
15 |
Your layout will go here. |
16 |
</div>
|
17 |
|
18 |
<script src="js/vendor/jquery-1.8.2.min.js" type="text/javascript"></script> |
19 |
<script src="js/bootstrap/bootstrap.js" type="text/javascript"></script> |
20 |
</body>
|
21 |
</html>
|
افتح متصفح ويب واسحب ملف index.html المحفوظ فيه. إذا تم تحميل جميع العناصر بشكل صحيح ، فيجب أن تشاهد شيئًا مشابهًا لشاشة الصورة أدناه. إذا كنت لا ترى مربع التنبيه ، فافتح وحدة التحكم أو عارض الويب وشاهد ما إذا كان أحد الملفات قد فشل في التحميل. بعد استكشاف الأخطاء وإصلاحها ، قم بإزالة سطر التنبيه أو التعليق عليه في $ (المستند). ready الدالة في أسفل الصفحة والاستعداد لإنشاء wireframes Bootstrap.
الخطوة 3: خردة في كتل المحتوى الخاص بك
مع كل الملفات الضرورية في مكانها ، يمكننا أن نبدأ التخشين في كتل المحتوى الرئيسية.ستحتوي معظم المواقع (التطبيقات) على رأس وملاحة رئيسية ومحتوى رئيسي جيدًا وشريط جانبي وتذييل. أنا عمدا الحفاظ على تخطيط بسيط ، لتوضيح بسرعة قوة نظام الشبكة Bootstrap ل.
الترميز الهيكلي الوحيد على الصفحة حتى الآن هو div مع "حاوية" الفصل.
ملاحظة: هذا div هو قالب احتواء مطلوب لـ Bootstrap؛ سنبني تطبيق wireframe بالكامل بداخله.
يتطلب Bootstrap أيضًا نوع HTML الجديد ، وينشئ قواعد نمطه مع الفئات ، بدلاً من أسماء العلامات. تعني هذه القرارات أنه يمكننا استخدام بعض عناصر HTML5 الجديدة: الرأس ، والتنقل ، والقسم ، والمقالة ، والجانب ، والتذييل. تجدر الإشارة إلى ما إذا كنت تخطط لاختبار تصميمك في Internet Explorer ، فستحتاج إلى تنزيل وتضمين Modernizr أو HTML5 Shim. الإصدارات الحديثة من Firefox و Chrome و Safari تدعم معيار HTML5.
Bootstrap مبني على شبكة عمود 12. ويستخدم فئتين، الصف و تمتد إلى إنشاء حاويات على مستوى الكتلة. من خلال تطبيق فئة الصف على حاوية مثل div أو header ، فإنها تمتد تلقائيًا عبر العرض الكامل 940px. بإضافة حاويات مع الطبقة تمتد N ( N كونه نائبا لعدد من الأعمدة)، يمكنك بسهولة إنشاء الآبار المحتوى، الجانبية، وكتل تخطيط أخرى دون الحاجة إلى إدارة يطفو أو انحرافات أخرى.
لكي تنهض وتعمل بسرعة ، سوف أقوم بإنشاء عنوان أساسي ، شريط تنقل ، بئر رئيسي ، جانباً ، وتذييل. استبدل "تخطيطك سيذهب هنا" مع التعليمة البرمجية التالية.
1 |
<header class="row"> |
2 |
<h1 id="banner">My Awesome App</h1> |
3 |
</header>
|
4 |
|
5 |
<nav id="primary-navigation" class="row"> |
6 |
<div class="span12"> |
7 |
<ul>
|
8 |
<li class="selected"><a href="#">Home</a></li> |
9 |
<li><a href="#">Features</a></li> |
10 |
<li><a href="#">About</a></li> |
11 |
<li><a href="#">Contact Us</a></li> |
12 |
</ul>
|
13 |
</div>
|
14 |
</nav>
|
15 |
|
16 |
<section class="row"> |
17 |
<article class="span9"> |
18 |
<h2>This is the main content well</h2> |
19 |
<p>This is a short paragraph to highlight where the general content will go.</p> |
20 |
</article>
|
21 |
|
22 |
<aside class="span3"> |
23 |
<h3>This is the sidebar</h3> |
24 |
<p>Good content items include blogrolls, featured news, Twitter updates, etc.</p> |
25 |
</aside>
|
26 |
</section>
|
27 |
|
28 |
<footer class="row"> |
29 |
<div class="span12"> |
30 |
<h4>This is the footer</h4> |
31 |
</div>
|
32 |
</footer>
|
أضفت أيضًا بعض القواعد الأساسية إلى user.css ، لتسهيل التعرف على مجموعات المحتوى. إذا سار كل شيء بشكل جيد ، يجب أن تشاهد عددًا من الفدرات الرمادية مع نص وصفي أسود بالداخل.
1 |
/* Basic style rule to outline and space block-level elements */
|
2 |
[class*="span"] { |
3 |
background: #eee; |
4 |
margin-bottom: 10px; |
5 |
}
|
الخطوة 4: ثابت ، السوائل ، مستجيبة!
لقد كانت التصميمات الثابتة والسائلة موجودة منذ فترة طويلة. تعد التصميمات المتجاوبة جديدة نسبيًا ، وتجمع بين أفضل الأجزاء في كليهما. فهو يمنح المصممين أدوات لتحسين تصاميمهم لأحجام الأجهزة المتعددة (الهواتف الذكية والأجهزة اللوحية والشاشات الضيقة والعريضة) دون الحاجة إلى الاحتفاظ بتنسيق منفصل لكل منهم. تغيير حجم نافذة المتصفح لمشاهدة ورقة أنماط استجابة Bootstrap في العمل ، والتعود على القدرة الرائعة على الكتابة مرة واحدة واختبار الأطر في عدد من البيئات.
تستفيد المتصفحات من نقاط انقطاع CSS لتحديد كيفية عرض صفحة ، استنادًا إلى الحد الأدنى والحد الأقصى لقياسات العرض. تبدأ نقاط الفاصل المتعلقة بعرض المستعرض دائمًا بـmedia (وسيطة العرض) وتكون سهلة القراءة. ويمكن أن تحتوي أيضًا على وسيطة ثانية في مجموعة أخرى من الأقواس ، مما يتيح قدرًا كبيرًا من المرونة للأجهزة المتعددة.
في نموذج التعليمة البرمجية أدناه ، لقد قمت بإنشاء العديد من القواعد التي تحدد ألوان الخلفيةلأربعة نقاط استراحة شائعة في Bootstrap ، وتعديلها بشكل طفيف لإظهار انتقال سلس من لون إلى آخر.
1 |
/* Basic background colors for responsive break points */
|
2 |
/* Max-width 480px landscape phone and down */
|
3 |
@media (max-width: 480px) { |
4 |
.container { |
5 |
background: #f1ea81; |
6 |
}
|
7 |
|
8 |
.container:after { |
9 |
content: "Max-width 480px landscape phone and down"; |
10 |
}
|
11 |
}
|
12 |
|
13 |
/* Min-width 481px and max-width 767px landscape phone to portrait tablet */
|
14 |
@media (min-width: 481px) and (max-width: 767px) { |
15 |
.container { |
16 |
background: #a7f7e5; |
17 |
}
|
18 |
|
19 |
.container:after { |
20 |
content: "Min-width 481px and max-width 767px landscape phone to portrait tablet"; |
21 |
}
|
22 |
}
|
23 |
|
24 |
/* Min-width 768px and max-width 979px portrait tablet to landscape */
|
25 |
@media (min-width: 768px) and (max-width: 979px) { |
26 |
.container { |
27 |
background: #c4deff; |
28 |
}
|
29 |
|
30 |
.container:after { |
31 |
content: "Min-width 768px and max-width 979px, portrait tablet to landscape"; |
32 |
}
|
33 |
}
|
34 |
|
35 |
/* Min-width 980px widescreen display */
|
36 |
@media (min-width: 980px) and (max-width: 1199px) { |
37 |
.container { |
38 |
background: #fde3ff; |
39 |
}
|
40 |
|
41 |
.container:after { |
42 |
content: "Min-width 980px, max-width 1199px, desktop format"; |
43 |
}
|
44 |
}
|
45 |
|
46 |
/* Min-width 1200px widescreen display */
|
47 |
@media (min-width: 1200px) { |
48 |
.container { |
49 |
background: #ffc4c4; |
50 |
}
|
51 |
|
52 |
.container:after { |
53 |
content: "Min-width 1200px, widescreen format"; |
54 |
}
|
55 |
}
|
لقد أنشأنا تخطيطًا متجاوبًا تمامًا ، ولكننا لا نزال نفتقد الأشياء الجيدة. سيوضح لك الجزء المتبقي من هذا البرنامج التعليمي كيفية إضافة الاهتمام المرئي من خلال المحتوى والتفاعل.
الخطوة 5: الصوت معطلة!
بعد أن أصبحت السقالات جاهزة ، يمكننا البدء في إضافة محتوى. إنني أبقي على حفظ هذه الآراء بشكل عام - فالصناديق الرمادية ذات الأساليب البسيطة تشجع مستخدمي الإصدار التجريبي على التركيز بشكل مباشر على التفاعل ، وعدم التعلق بالأسلوب المرئي.
تم تصميم وحدة البطل لإنشاء دعوة للوجهة الأمامية والوسط. تعد تنزيلات الرموز ، أو التطبيقات الجديدة ، أو الأخبار العاجلة من بين المرشحين الجيدين. لأغراضنا ، سوف استخدمه للإعلان عن ترقية برامج رئيسية. استبدل علامات h2 و p الموجودة في المحتوى الرئيسي بشكل جيد باستخدام الكود أدناه وقم بتحديث المتصفح لرؤية البطل أثناء العمل.
1 |
<div class="hero-unit"> |
2 |
<hgroup>
|
3 |
<h1>Version 2.0 Is Here!</h1> |
4 |
<h2>All new features, lots of improvements</h2> |
5 |
</hgroup>
|
6 |
|
7 |
<h4>A more perfect package you’re not likely to find</h4> |
8 |
<p>Our team has been busy this past year, completely revamping the inner workings of our
|
9 |
application. Faster page loads, better search, and mobile integration.</p>
|
10 |
<p><a href="#" class="btn btn-primary btn-large">Download Now</a></p> |
11 |
</div>
|
وحدة البطل هي بداية جيدة ، ولكن الناس يريدون أن يروا أين سيذهب وقتهم وأموالهم. يمثل معرض الصور متابعة قوية ، وهو عبارة عن تطبيق سريع. يتم وضع الصور باستخدام نفس الشبكةspanN التي تحدد كتل التخطيط ، ويمكن توسيعها بسهولة لتشمل العناوين أو العلامات أو التسميات التوضيحية أو البيانات الجزئية . في الوقت الحالي ، سنستخدم Placehold.itلإنشاء ثلاث مربعات رمادية أسفل وحدة البطل لدينا.
أنا مؤمن كبير في الترميز الدلالي، ولذا فإننا سوف يكون باستخدام HTML5 الرقم وfigcaption العلامات ل زيادة السياق . حتى إذا لم يكن أي من المستخدمين لديك يتصفح باستخدام قارئ الشاشة أو أي جهاز مساعد آخر ، فإن الترميز الوصفي يعد من أفضل الممارسات لتطوير UX وتطوير الواجهة الأمامية.
أضف قائمة غير مرتبة وبعض الصور داخل المحتوى الرئيسي جيدًا ، أسفل عنصر بطلك كما يلي:
1 |
<ul class="thumbnails"> |
2 |
<li class="span3"> |
3 |
<figure>
|
4 |
<img src="http://placehold.it/300x200" alt="3 column placeholder" /> |
5 |
<figcaption>
|
6 |
<h5>Image 1 title</h5> |
7 |
<p>This is a short caption.</p> |
8 |
</figcaption>
|
9 |
</figure>
|
10 |
</li>
|
11 |
|
12 |
<li class="span3"> |
13 |
<figure>
|
14 |
<img src="http://placehold.it/300x200" alt="3 column placeholder" /> |
15 |
<figcaption>
|
16 |
<h5>Image 2 title</h5> |
17 |
<p>This is a short caption.</p> |
18 |
</figcaption>
|
19 |
</figure>
|
20 |
</li>
|
21 |
|
22 |
<li class="span3"> |
23 |
<figure>
|
24 |
<img src="http://placehold.it/300x200" alt="3 column placeholder" /> |
25 |
<figcaption>
|
26 |
<h5>Image 3 title</h5> |
27 |
<p>This is a short caption.</p> |
28 |
</figcaption>
|
29 |
</figure>
|
30 |
</li>
|
31 |
</ul>
|
يجب أن ينتج تحديث آخر للمتصفح تخطيطًا مشابهًا لهذا ، عند عرض الشاشة العريضة.
الخطوة 6: التنقل المبوب
تضيف وحدة البطل والصور الكثير من الاهتمام البصري ، ولكنها تبرز التحدي التالي: الروابط ذات النقاط النقطية تقف في عنصر ملاحة مناسب.
يحتوي Bootstrap على العديد من أساليب التنقل المضمنة ، لذلك يتم تشجيع التجريب. سأقوم بتسليط الضوء على التنقل المبوب هنا. أول ترتيب لنا هو استبدال قائمة التنقل الأساسية:
1 |
<nav id="primary-navigation" class="row"> |
2 |
<div class="span12 tabbable"> |
3 |
<ul class="nav nav-tabs"> |
4 |
<li class="active"><a href="#tab1" data-toggle="tab">Home</a></li> |
5 |
<li><a href="#tab2" data-toggle="tab">Features</a></li> |
6 |
<li><a href="#tab3" data-toggle="tab">About</a></li> |
7 |
<li><a href="#tab4" data-toggle="tab">Contact Us</a></li> |
8 |
</ul>
|
9 |
</div>
|
10 |
</nav>
|
بعد ذلك، دعونا إزالة خلفية رمادية من وجهة نظرنا رأس و الملاحة العناصر. أضف الأسطر الأربعة التالية إلى نهاية ملف user.css .
1 |
header [class*="span"], |
2 |
nav [class*="span"] { |
3 |
background: #fff; |
4 |
}
|
نحتاج أيضًا إلى تحديث المحتوى الرئيسي جيدًا. لقد أضفت فئة من محتوى علامة التبويبإلى عنصر القسم ، ولففت البطل والصور في div مع class = "tab-pane active" و id = "tab1". أضفت ثلاثة عناصر div إضافية أدناه ، مع مطابقة ID لعلامات ارتباط التنقل. هذه الكتل الثلاث عبارة عن أحواض يتم تعبئتها لاحقًا ، ولكنها ستكون مفيدة للاختبار. تحديث ترميز القسم وتحديث المتصفح. إذا سار كل شيء بشكل صحيح ، فستتمكن من التبديل بين علامات التبويب وعرض المحتوى الذي تم إيقافه.
الخطوة 7: Tooltips و Popovers
علامات التبويب رائعة ، ولكنها أيضًا مجرد بداية. على الرغم من أن الإنترنت أصبح سريعًا مقسمًا إلى شرائح ومظهر تشبه التطبيقات ، إلا أنه لا يزال مدفوعًا بروابط من مورد إلى آخر. يتم استخدام الارتباطات لربط الصفحات معًا ، وتوفير سياق إضافي ، وأحيانًا ، لاستضافة وظائف ثانوية. تعتبر تلميحات الأدوات والشاشات أمثلة جيدة على الوظيفة الثانوية ؛ يتم تنفيذها بسهولة مع سمات البيانات المخصصة.
ما هي سمات البيانات؟ لكل جون رسق ، الذي كتب عن هذه الأجهزة واضحة في عام 2008:
ببساطة ، تنص مواصفات سمات البيانات المخصصة على أن أي سمة تبدأ بـ "data-" سيتم التعامل معها كمنطقة تخزين للبيانات الخاصة (خاصة بمعنى أن المستخدم النهائي لا يمكنه رؤيتها - لا يؤثر على التخطيط أو عرض تقديمي).
هذا يعني أنه يمكننا إضافة بيانات مخصصة إلى علامات الربط الخاصة بنا ، وسيقوم Bootstrap بالتعامل معها وفقًا لذلك.
لنفترض أن معرض الصور الخاص بنا يتكون من معلومات فنية. قد تتضمن الأوصاف مصطلحات غير واضحة للمستخدم العادي. قم بتنشيط تلميحات الأدوات عن طريق استبدال HTML لمعرض الصور ، بدءًا بالقائمة غير المرتبة ، وإضافة وظيفة $ jQuery (مستند). ready ووظيفة تلميح الأدوات في Bootstrap إلى أسفل الصفحة.
1 |
<ul class="thumbnails"> |
2 |
<li class="span3"> |
3 |
<figure>
|
4 |
<img src="http://placehold.it/300x200" alt="3 column placeholder" /> |
5 |
<figcaption>
|
6 |
<h5>Image 3 title</h5> |
7 |
<p>This is a short caption. It contains some technical language like
|
8 |
domain-specific terms like <a href="#" |
9 |
class="tooltips" |
10 |
data-placement="top" |
11 |
data-trigger="hover" |
12 |
data-title="HTML: Hyper Text Markup Language" |
13 |
>HTML</a></p> |
14 |
</figcaption>
|
15 |
</figure>
|
16 |
</li>
|
17 |
|
18 |
<li class="span3"> |
19 |
<figure>
|
20 |
<img src="http://placehold.it/300x200" alt="3 column placeholder" /> |
21 |
<figcaption>
|
22 |
<h5>Image 3 title</h5> |
23 |
<p>This is a short caption. It contains some technical language like
|
24 |
domain-specific terms like <a href="#" |
25 |
class="tooltips" |
26 |
data-placement="top" |
27 |
data-trigger="hover" |
28 |
data-title="CSS: Cascading Style Sheets" |
29 |
>CSS</a></p> |
30 |
</figcaption>
|
31 |
</figure>
|
32 |
</li>
|
33 |
|
34 |
<li class="span3"> |
35 |
<figure>
|
36 |
<img src="http://placehold.it/300x200" alt="3 column placeholder" /> |
37 |
<figcaption>
|
38 |
<h5>Image 3 title</h5> |
39 |
<p>This is a short caption. It contains some technical language like
|
40 |
domain-specific terms like <a href="#" |
41 |
class="tooltips" |
42 |
data-placement="top" |
43 |
data-trigger="hover" |
44 |
data-title="JS: Javascript—The fresh language" |
45 |
>JS</a></p> |
46 |
</figcaption>
|
47 |
</figure>
|
48 |
</li>
|
49 |
</ul>
|
1 |
// Add just above the closing body tag
|
2 |
// Activate the tooltips
|
3 |
<script type="text/javascript" charset="utf-8"> |
4 |
var tooltips = $('a.tooltips'); |
5 |
|
6 |
$(tooltips).tooltip(); |
7 |
</script> |
باستخدام HTML وجافا سكريبت ، قم بتحديث المتصفح وتحريك روابط المعرض لتكشف عن تلميحات الأدوات.
سنقوم الآن بإضافة المشاركة إلى معرض الصور الخاص بنا (على الأقل في طريقة wireframe-y) مع popovers. يتم تنشيط Popovers من خلال تضمين سمات البيانات في الترميز ومقطوعة أخرى من جافا سكريبت.
أولاً ، دعنا نضيف زر مشاركة لكل تعليق من صورنا. إضافة كتلة التعليمات البرمجية أسفل علامة الفقرة الختامية في كل figcaption .
1 |
<p>
|
2 |
<a href="#" |
3 |
id="test" |
4 |
class="btn btn-primary popover-link" |
5 |
data-placement="right" |
6 |
data-html="true" |
7 |
data-content=" |
8 |
<a href='#'>Facebook</a><br/>
|
9 |
<a href='#'>Twitter</a><br/>
|
10 |
<a href='#'>Tumblr</a><br/>
|
11 |
<a href='#'>Flickr</a><br/>
|
12 |
"
|
13 |
data-title="Share this image" |
14 |
>Share</a> |
15 |
</p>
|
قد يبدو من الغريب وضع كل بند على سطره الخاص ، لكنني وجدت أن Bootstrap هو نوع من الإرضاء إلى حد ما حول الترميز المركب جيدًا ، ومن الأسهل اكتشاف أخطاء سطر واحد في كل مرة. نحتاج أن نكتب بضعة أسطر من جافا سكريبت وأن يكون popovers جاهزًا.
1 |
// Prevent default links actions and page jumping
|
2 |
var links = $('a'); |
3 |
links.on('click', function (e){ |
4 |
e.preventDefault(); |
5 |
});
|
6 |
|
7 |
// Activate the popovers
|
8 |
var popovers = $('a.popover-link'); |
9 |
|
10 |
popovers.popover(); |
هذه المرة قمنا بإضافة وظيفة وصلات عامة لمنع الشاشة من القفز عندما ينقر المستخدمون على زر المشاركة. دون الخوض في التفاصيل ، يسجل كل إجراء على صفحة الويب حدثًا ، يتم التقاطه هنا كوسيطة الدالة "e". من خلال اعتراض هذا الحدث واستبداله بجافا سكريبت المخصص لدينا ، تبقى الصفحة في المكان الذي يجب أن تظهر فيه ، وسيظهر ظهورنا كما هو متوقع.
الخطوة 8: إنشاء Modal Windows
يا للعجب. بعد كل ذلك ، ستكون النوافذ المشروطة بمثابة نزهة. يوفر Bootstrap إطارات مشروطة عن طريق إضافة كتلة HTML إلى الجزء العلوي من الحاوية ، وزر أو ارتباط مع href يطابق معرف النافذة الشرطية. أولا ، HTML مشروط.
1 |
<!-- Add this directly below div class="container"> -->
|
2 |
<!-- Modal -->
|
3 |
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" |
4 |
aria-labelledby="myModalLabel" aria-hidden="true"> |
5 |
<div class="modal-header"> |
6 |
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> |
7 |
<h3 id="myModalLabel">Catchy modal header here</h3> |
8 |
</div>
|
9 |
<div class="modal-body"> |
10 |
<p><label for="username">Username</label><input type="text" name="username" value="" |
11 |
placeholder="Enter username" id="username"> |
12 |
</p>
|
13 |
<p><label for="password">Password</label><input type="password" name="password" |
14 |
value="" placeholder="Enter password" id="password"> |
15 |
</p>
|
16 |
</div>
|
17 |
<div class="modal-footer"> |
18 |
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button> |
19 |
<button class="btn btn-primary">Save changes</button> |
20 |
</div>
|
21 |
</div>
|
الشيء الآخر الوحيد الذي عليك القيام به هو إضافة الزناد. بما أن هذا تطبيق ، فسنكون على حق في افتراض أنه سيكون هناك تسلسل تسجيل دخول. لقد قمت بتعديل الرأس لتقصير مساحة البانر ، وأضف زر تسجيل الدخول بجوار مربع البحث. غيّر HTML التالي ، وأضف CSS إلى نهاية ملف user.css .
1 |
<header class="row"> |
2 |
<div class="span7"> |
3 |
<h1 id="banner">My Awesome App</h1> |
4 |
</div>
|
5 |
|
6 |
<div class="span5"> |
7 |
<input type="search" placeholder="Enter search term" data-provide="typeahead" |
8 |
id="search"/> |
9 |
<a href="#myModal" role="button" class="btn" data-toggle="modal">Login</a> |
10 |
</div>
|
11 |
</header>
|
1 |
/* Search box */
|
2 |
header input { |
3 |
margin-top: 20px; |
4 |
width: 70%; |
5 |
float: left; |
6 |
}
|
7 |
|
8 |
/* Login button */
|
9 |
header a { |
10 |
float: right; |
11 |
margin: 20px 0 0 20px; |
12 |
}
|
قم بتحديث وانقر فوق زر تسجيل الدخول. يجب أن تتم مكافأتك مع رسم متحرك سريع ، ونافذة مشروطة تقدم المقدمة والوسط.
الخطوة 9: كيف سأجد أي شيء؟
هذا wireframe التفاعلية تأتي على طول بشكل جيد. لدينا نظام تنقل يعمل ، ويحتوي على الكثير من القطع لإضافة محتوى ، وتفاعلية ، وتخطيط سريع الاستجابة. ما ليس لدينا هو طريقة للبحث عن الأشياء ، حتى في اختبار المستخدم. مرة أخرى ، لقد غطينا Bootstrap.
اعتاد المستخدمون على مربع البحث الذي يتم عرضه بشكل بارز في الركن العلوي الأيسر من شاشات سطح المكتب ، وأقل أسفل العنوان على شاشات العرض الأضيق. سنبدأ بتجزئةعنصر العنوان إلى قسمين ، وإضافة مدخلات مفردة إلى الأصغر:
1 |
<header class="row"> |
2 |
<div class="span9"> |
3 |
<h1 id="banner">My Awesome App</h1> |
4 |
</div>
|
5 |
|
6 |
<div class="span3"> |
7 |
<input type="search" placeholder="Enter search term" data-provide="typeahead" |
8 |
id="search"/> |
9 |
</div>
|
10 |
</header>
|
سنضيف أيضًا بضعة أسطر من CSS إلى ملف user.css ، لدفع مربع البحث إلى أعلى الصفحة.
1 |
/* Search box */
|
2 |
header input { |
3 |
margin-top: 20px; |
4 |
width: 90%; |
5 |
}
|
سنكتب أيضًا كمية أكبر قليلاً من جافا سكريبت لجعل الكتابة الآلية تعمل بشكل صحيح. سأبقيها إلى الحد الأدنى ، وشرح ما يفعله كل نص.
أتصور أن البعض منكم يفكر "أنا مصمم ويب ، وليس مطورًا. نقطة عادلة ، ولكن يتعين علينا على الأقل اختبار مياه جافا سكريبت لفتح قوة Bootstrap الكاملة. وإلى جانب ذلك ، يبهر العملاء عندما يبدأ مربع الإدخال في عرض النتائج من الحرف الأول الذي يكتبونه.
أضف مقتطف JavaScript أدناه إلى علامة البرنامج النصي الموجودة لديك ، واضغط على Refresh. إذا كان يعمل بشكل صحيح ، يجب أن تشاهد قائمة منسدلة تحتوي على نتائج مقترحة بعد كتابة حرف واحد أو أكثر في مربع البحث.
1 |
var search = $('input#search'); |
2 |
|
3 |
$(search).typeahead({ |
4 |
source: [ |
5 |
'Dave Mustaine', |
6 |
'Tom Morello', |
7 |
'Jim Root', |
8 |
'Kirk Hammett', |
9 |
'Joe Perry', |
10 |
'Jimi Hendrix', |
11 |
'Eric Clapton', |
12 |
'Billy Duffy', |
13 |
'Johnny Hickman', |
14 |
'Eddie Van Halen', |
15 |
'Dimebag Darrell', |
16 |
'Noel Gallagher' |
17 |
],
|
18 |
items: 5 |
19 |
});
|
حسنًا ، إليك ما تفعله الشفرة. و بحث فار = $ ( '# مدخلات البحث') يقول مسج لتخزين إشارة إلى مربع البحث في متغير اسمه البحث. ثم نقوم باستدعاء أو استدعاء الدالة jQuery على متغير البحث الخاص بنا ، وكذلك استدعاء طريقة Boottrap typeahead. داخل قوس الرأس الطباعي ، ستلاحظ قوسًا متعرجًا وإغلاقًا متعرجًا {} . يتم استخدام هذه الأقواس لإنشاء كائن JavaScript ، وتخزين بعض المعلومات حول مربع البحث الخاص بنا.
أول قطعة من المعلومات هي مصفوفة المصدر . في أبسطها ، المصفوفة هي قائمة مرتبة من الأشياء. هنا هي قائمة لاعبي الغيتار. سيكون كل لاعب جيتار يتم إضافته إلى الصفيف متاحًا كنتيجة لإدخال البحث. الجزء الثاني من الكائن ، العناصر: 5 يخبر مربع البحث بالحد الأقصى لعدد النتائج المراد إظهارها.
هذه ليست سوى اثنين من العديد من الخيارات المتاحة. إنني أشجعك على الاطلاع على وثائق Boottrap typeahead واختبار التكوينات المختلفة. يجب أن تبدو الشاشة الأخيرة لهذه الخطوة مشابهة لهذه:
استنتاج
أصبح Bootstrap عنصرًا أساسيًا في سير العمل الأمامي. يسمح لي باختبار عندما تكون التكرارات غير مؤلمة نسبياً ، وجرب عدة طرق مختلفة في نفس الوقت. تساعد هذه الاكتشافات في توجيه قرارات التصميم النهائية ، وتساعد على تجنب التغييرات التي تستغرق وقتًا طويلاً خلال دورة التطوير الكاملة. من خلال التعامل مع إطارات سلكية كجزء أساسي من تجربة المستخدم ، أتمكن من إنشاء أدوات أكثر طبيعية وأكثر إرضاءً.
لقد خدشت فقط سطح Bootstrap ، وما هو ممكن باستخدام طقم الأجزاء. تعد الأطر الزجاجية مكانًا رائعًا للبدء في التعرف على الخلاصات - فهي مصممة لتكون نماذج حديثة لاختبار التطبيقات الكاملة القادمة. يمكن للعملاء والزملاء اختبار الافتراضات لدينا ، ومساعدتنا على صقل سريع ، مع ضياع الوقت الضئيل.
آمل أن تكونوا قد أحببت هذا البرنامج التعليمي ، شكرًا للقراءة!
