/Twitter Bootstrap tutorial – Scaffolding

Twitter Bootstrap tutorial – Scaffolding

 

للاطلاع على الجزء الاول من هنا.

اتكلمنا المرة اللي فاتت عن ايه هو الـ bootstrap  واستخدمه ازاي ووصلنا اننا ربطناه بالبروجكت بتاعنا واصبح جاهز للاستخدام.

قبل ما نبدأ بأول خاصيه او ممكن نقول اول tool في الـ bootstrap   اللي هي الـ Grid System  في شوية Global Settings  الاول لازم اتأكد منها واعرفها.

1- Require html5 doctype

استخدام الـ bootstrap  بيتطلب استخدام html 5.

فلازم في بداية كل html docs اللي هي Include فيها أكتب <!DOCTYPE html> وبكده تكون كل من النوع html 5.

** طب اشمعنى html 5  و هي حاجه مختلفه عن html العاديه يعني ؟

Html  ببساطة لغه ببني بيها الويب سايت واللي تعليمها سهل جدا مجرد انك تتعرف على ال syntax  بتاعها يبقى كده تمام اوي.

Html 5 بقى ممكن نقول انها html  معاد هيكلتها بس بشكل رائع بحيث انها استبدلت كتير اوي من التقنيات المستخدمه في الويب زي الفلاش والسيلفير لايت زائد انها فيها مجموعة من API  و tags اللي اتضافت فيها  و مميزات بتمكن المبرمج انه يعمل Application تفاعليه ومتميزه بشكل سهل ده غير ان معظم المتصفحات او الـ browsers دلوقتي بتدعمها بشكل كامل

2- Basic global display, typography, and link styles

مجرد ما بربط الـ bootsrap فالـ basic style اللي بيكون موجود ساعتها :

  • لا يوجد أي margin على الـ body.
  • الـ body الـ background-color: white;
  •  بيحط الـ @baseFontFamily, @baseFontSize, and @baseLineHeight كـ attributes اساسية للـ typographic base.
  •  و الـ link color بيكون من خلال الـ @linkColor وخاصية الـ underline له مش بتكون موجوده الا بس لو كان :hover.

3- الـ Reset

الهدف الرئيسي من css reset file  ده عموما ، انه يقلل تناقضات الـ browsers  في الخصائص الـ defult اللي فيهم زي ارتفاع الخطوط و حجم خط الـ tags اللي زي h1,h2,… وده لازم يكون موجود في كل بروجكت عموما.

في الـbootstrap  موجود الـ css reset style الخاص بيه ومش محتاج انك تدور على واحده او تعمله.

4-Grid System

فايده الـ grid system ده انه بيقسملي الصفحة لاعمده بحيث انها توفر عليا موضوع تظبيط مقاسات الصفحة ومكان العناصر اللي عايزه احطها عليها والحاجات دي.

فهو هنا هو عباره عن 12 عمود متقسمه على 940 بكسل لو كنت شغاله على الستايل اللي مش responsive  لكن لو كنت شغاله عليه الـ grid system  هيتكيف ويبقى 724 و 1170 بكسل على حسب الـ viewport بقى.

وبيكون بالشكل اللي في الصوره دي “ملحوظة : دي عباره عن صورة توضيحيه فقط علشان بس نفهم السيستم لكن وانا بستخدمه مش هيكون ظاهر بالشكل ده”

في شويه مسميات كده بس هحتاج اني اكون فاهماها ، مثلا زي:

  1. Span ممكن نقول انها بمعنى قطعه ، وعلى حسب رقم ال span بيكون واخد عدد قد ايه من العواميد مثلا span3 واخد عرض 3 عواميد وهكذا.

  2. Row معناه صف ، يعني كل العناصر اللي بتكون على صف واحد بحطها جوا row  مع بعضها.

  3. الـ offset هو المسافه اللي بتكون قبل ال span.

فكل span  بيبقى بشكل افتراضي قبليه المسافه البيضا اللي هي بين كل عمود وعمود دي لكن لو حبيت ابعده اكتر مسافه عمودين كمان مثلا فانا هحطله offset2.

وعلشان نفهم الموضوع اكتر انا هبتدي بمثال بسيط علطول.

انا هكمل على الكود بتاع المره اللي فاتت ، انا شلت بس جزئية ال js بما اننا مش محتاجنها يعني دلوقتي.

وهاجي في فولدر الـ css  وهعمل فايل main.css وده اللي هحط فيه الـ custom style  بتاعي اللي عايزه اضيفه ، لكن مش بآجي ناحية كود ملفات الـ bootstrap تماما.

ده هيكون محتوى index.html

ومحتوى main.css

هنا احنا بس حطين لون خلفيه للعناصر علشان نعرف نشوف الفرق بينهم ونلاحظه.

بتجربة شوية امثله كمان ممكن تتضح ليك الفكرة اكتر ، ممكن تجرب تحط صورة مثلا وتحاول تظبط ليها الspan والoffset المناسب وهكذا.

وفي المقال القادم هنتكلم عن الجزء التاني من الـ scaffolding  بإذن الله.