/Twitter Bootstrap Tutorial – Base CSS II

Twitter Bootstrap Tutorial – Base CSS II

نكمل في مقال النهارده ال Base CSS

Tables :

في Styles للجداول جاهزه في ال bootstrap فمثلا ً في ال style الاساسي اللي هيظهرلي ، يعني لو فقط اكتفيت ب

<table class="table"></table>

هيكون بالشكل ده

1

ولو اضفت انه table-striped هيكون بالشكل ده

2

وهكذا بالنسبة لبقية ال classes والاشكال اللي موقع bootstrap عارضها عنده

 

مش بس كده ، كمان بيتيح ليك انك ت style الصفوف بشكل معين ايا كانت مثلا sucess او error …. في حالة لو انت حبيت مثلا تعمل جدول في بيانات ما وحبيت وقت ما اليوزر يدخل بيان جديد في الجدول يظهر بشكل معين بحيث اليوزر يعرف ان تم عملية الادخال بشكل صحيح على سبيل المثال

3

بعد كده موضح ال html tags اللي تبع الجداول اللي بيدعمها ال bootstrap وممكن يتعامل معاها وازاي تستخدمها

4

Forms :

هنأجلها للمقال اللي جاي علشان نشرح فيها باستفاضه اكتر شويه 🙂

 

Buttons :

برضه هنا ال bootstrap بيقدملك اشكال لل buttons جاهزة تقدر تستخدمها على اساس الهدف منها

5

كمان في styles جاهزه لحجم الزرار و اذا كنت عايزه active او disabled

في بقى tools على بعض المواقع بتمكنك انك تعمل Style سريع جدا للbutton بتاع ال bootstrap باللون  والشكل اللي انت عايزه زي مثلا اللي في الموقع هنا او هنا

وممكن تدورعلى tools او ما يسموا ب bootstrap button generators وتختار الانسب ليك

 

ملحوظه : الزراير في الbootstrap ممكن تستخدم سواء ك link او button بيقدم وظيفه معينه او input او Submit button

بمجرد اني استدعي ال class بتاعته بس ، زي ما هو موضح في المثال :

<a class="btn" href="">Link</a>
<button class="btn" type="submit">Button</button>
<input class="btn" type="button" value="Input">
<input class="btn" type="submit" value="Submit">

Images:

هنا بيوفرلك امكانيه وضع الصورة في اطار بشكل معين ، دائري او مستطيل او مستطيل مستدير الحواف

6

مع ملاحظة ان .img-rounded و.img-circle مش مدعومين في IE7-8

 

Icons :

Bootstrap بيوفرلك تقريبا كل ال icons اللي ممكن تحتاجها وباللونين الابيض والرمادي الغامق ، علشان تستخدم اللي يناسبك على حسب لون العنصر اللي هتحطهم فيه ، و Glyphicons هم اللي صمموا ال Icons بالشكل الرائع ده

بتقدر تستخدمها بمجرد انك تستدعي class = “icon-name” وبتحط اسم الicon اللي عايز تستخدمه

و هنا مديك شويه امثله حلوه على استخدامها

في المقال اللي جاي ان شاء الله هنتكلم على ال forms style وساعتها نكون خلصنا جزئية ال Base CSS ان شاء الله

اي استفسارات او اقتراحات انا تحت امركم 🙂

تحياتي

 

Faculty of Engineering, Computer and Control Systems Department, Mansoura University - 2014