نمایش پست تنها
  #12  
قدیمی 02-04-2014
کارگر سایت آواتار ها
کارگر سایت کارگر سایت آنلاین نیست.
ادمین در لباس کارگر!
 
تاریخ عضویت: Aug 2007
محل سکونت: کرمانشاه
نوشته ها: 1,444
سپاسها: : 907

4,877 سپاس در 836 نوشته ایشان در یکماه اخیر
کارگر سایت به Yahoo ارسال پیام
پیش فرض تویتر بوت استرپ سایتهای مفید Twitter Bootstrap Snippt - layout - component

تویتر بوت استرپ سایتهای مفید Twitter Bootstrap Snippt - layout - component






Bootstrap


Sleek, intuitive, and powerful front-end framework for faster and easier web development.




اين روزها ديگه همه تويتر بوت استرپ رو ميشناسند و اكثرا باهاش كار كرده اند در حالي كه من هنوز تصميم نگرفته ام كه قالب هام رو با بوت استرپ ايجاد كنم اما با 3 سايت مفيدي كه در يكي از اموزش هاي خوب سايت كوئيك لرن quicklearn.ir معرفي شده بود ميتونيد خيلي از كارهاي سريع و دم دستيتون رو به چشم به هم زدني باهاش راه بندازيد .



بوت استرپ چيه :‌ در امور برنامه نويسي و طراحي و ... در زمينه كامپيوتر هميشه براي انجام يك سري كارهاي روتين ساختارمند دقيق و تميز نياز به فريمورك هايي هست كه يك برخي كارها رو كه شما قاعدتا با اصولش اشنا هستيد براتون انجام بده كه شما وقت كنيد كارهاي اساسي تر رو انجام بدهيد



ميدونيد كدهاي css و javascript و html تگهاي زيادي داره و عموما شلوغ هستند حتي با وجود IDE ها و اديتورهاي خوبي كه intelligence editor هستند يعني كدها رو براتون كامل ميكنند



باز هم بسيار پردردسر و ستم ! است كه همه كدها رو هربار خود شما بنويسيد



هر چند كه هر كاربر حرفه اي و برنامه نويسي به مرور خود صاحب يك فريمورك نصفه نيمه براي خود ميشود



بوت استرپ يك فريم ورك براي css html javascript و ... است



اما مهمتر از فريمورك بودن



بوت استرپ اين روزها بيشتر به خاطر پشتيباني از طراحي responsive مورد استفاده قرار ميگيره



يعني طراحي صفحاتي كه وابسته به سايز صفحه در دستگاه هاي مختلف موبايل - تبلت و ... نباشد



و عرض پويا و قابل تنظيمي داشته باشند



چون اين روزها ديگه يوزرهاي سايتها فقط كامپيوترهاي دسكتاپ پي سي نيستند بلكه عموما تبلت و گوشي هاي موبايل هم اضافه شده اند و طراحي سايت به گونه اي كه در انها شكل وشمايل سايت به هم نريزد و ايتمها به خوبي قابل دسترس باشند بر مشكل قبلي كه عدم سازگاري برخي كدها با برخي مرورگرهاي سرطان زا ! اضافه شده است بنابراين هندل كردن اين 2 مشكل بزرگ وسط يك پروژه عجله اي 3-4 روزه براي يك برنامه نويس دست و پا گير و كشنده ست به همين خاطر استفاده از يك فريمورك كه سعي بر اين داره كه اين مسائل رو از قبل رعايت كرده باشه ضروري به نظر ميرسه .



اما تويتر بوت استرپ خيلي ساده س شكل و شمايل و تمپليت كارهايي كه توليد ميكنه البته اين اصلا گناه بوت استرپ نيست چون اين يك فريم ورك از طراحي هاي پايه css است نه يك تم ميكر



اين خود طراح هست كه بايد تم رو زيبا بسازه



اما با بررسي 99 درصد سايتهاي معتبر و غير معتبري كه با بوت استرپ ساخته شده ديده ميشه كه همه ي اونها هم ساده طراحي شده اند



از سايت جديد نت بانك سامان گرفته تا بسيار سايتهاي بزرگ و مطرح خارجي !



و ما جامعه برنامه نويس و طراحاي ايراني هميشه توي يه برزخي بين جديد و قديم هستيم



دنياي طراحي وب دوباره داره بر ميگرده به سمت ميني ماليسم و سادگي و فلت بودن لاي اوت سايت



اما توي ايران عادت بر زرق و برق و شلوغي شده



اينقدري كه اقاي دكتر م.ك.ف از ساده بودن طراحي هاي من و برخي دوستان انتقاد ميكردند و هشدار نميخرند نميخرند ميدادند ما مجبور بوديم كه از قالب پيچيده تر و نرم افزارهاي طراحي ديگري كه تم و لاي اوت بهتري طراحي ميكنند استفاده كنيم



بنابراين طراح بايد يه خرده هشيار باشه كه با چي چيو از دست ميده و چيو به دست مياره



شايد بد نباشه براي طرح هايي كه چندان ريسپانسيو بودن براي اون ها مهم نيست خصوصا نرم افزارهاي اداري تحت وب , طراحي اوليه سايت رو با نرم افزارها و استفاده از يك سري تمپليتهاي زيباي از پيش اماده



انجام داد و بعد css , js بوت استرپ رو به اون اضافه كرد و از اين فريمروك حداقل در بخش كامپوننت هاي جاوااسكريپت و ماژولهاي مختلفي كه براي اون ايجاد شده استفاده كرد



در هر حال بوت استرپ رو ياد بگيريد بعد ديگه خودتون ميدونين هركاري باهاش خواستين بكنين







تا قبل از اشنايي با اين 3 سايت تصميمي بر معرفي بوت استرپ براي كساني كه ميخوان سريع كارشون راه بيفته رو نداشتم اما اين 3 تا سايت خيلي كار رو براي شما راحت تر هم ميكنه .







------------------------
بوت استرپ رو از سايت http:/getbootstrap.com ميتونين دانلود كنين چند تا فايل css , js و image هست
و ميتونين در تمام صفحاتتون وارد كنيد .
خيلي سريع ميتونين كامپوننتها و جاوااسكريتهاي اين فريمورك رو در اينجا ببينيد و تست كنيد
http://getbootstrap.com/components
http://getbootstrap.com/javascript


كه ببينيد چيا داره و چه شكليه .
----------------------------------------


بعد از اينكه با بوت استرپ اشنا شديد كد نويسيش رو ياد ميگيرين و استفاده ميكنيد


------------
اما معرفي اجمالي سه سايت فوق :



اول بريد به اين صفحه :
http://www.bootsnipp.com/buttons



ميبينيد كه خيلي سريع كد دكمه دلخواه شما رو بهتون ميده
باتن جنريت ميكنه واستون
رنگ سايز اضافه كردن ايكون به داخل دكمه جهت اون و عرض فول يا ثابت رو براش تنظيم ميكنيد


مثلا يه كد مثل اين بهتون ميده :



کد:
<a href="#" class="btn btn-block btn-primary btn-success"><span class="glyphicon glyphicon-sd-video"></span> Default text here</a>

و اين صفحه يك فرم بيلدر هست :
http://www.bootsnipp.com/forms




خيلي سريع فرمهاتون رو ميسازيد و كدش رو بهتون ميده .




اما قسمت اصلي سايت چي هست ؟

يك سري كدهاي اماده كوچولو براي قسمتهاي كوچولو ! ازسايتتون




خصوصا اونجاها كه جاوااسكريپتي هست بسيار مفيد و كول هستند




ميتونين به بخش دسته بندي تگ ها برين ببينين چيا داره
http://www.bootsnipp.com/tags


25 Snippets tagged with "login"

48 Snippets tagged with "forms"


17 Snippets tagged with "table"


8 Snippets tagged with "admin dashboard"


4 Snippets tagged with "jQuery plugin"


6 Snippets tagged with "toolbar"




مثلا در اين كد : Table row count and sortable bootstrap


http://www.bootsnipp.com/snippets/featured/table-row-count-and-sortable


شما يك جدول با قابليت جابجا كردن سطرها رو داريد (ببينيد تست كنيد )


يا در اينجا
JS Table Filter simple insensitive
http://www.bootsnipp.com/snippets/featured/js-table-filter-simple-insensitive


ميتونين روي جداول html سرچ انجام بديد (فيييلتر كنيد )


يا در اينجا
Dynamic Table row creation and Deletion
به صورت پويا سطر اضافه ميكنين به جدول يا ازش پاك ميكنين
http://www.bootsnipp.com/snippets/featured/dynamic-table-row-creation-and-deletion


----------------------------------------------------


سايت http://www.layoutit.com


ديدن فيلم خودش خالي از لطف نيست
http://www.youtube.com/watch?feature=player_embedded&v=PmJ4OSRod8I




شما در اين سايت ميتونين خيلي سريع و به صورت ويژوال قطعات مختلف مثل كامپوننت ها يا المان هاي اصلي html رو در چارچوب بوت استرپ به صفحه-تون اضافه كنيد يعني از ليست سمت چپ درگ كنيد به صفحه تون


مثل "كنترل" هايي كه در محيطهاي برنامه نويسي ويژوال شركت مايكروسافت در فريمورك دات نت وجود داره
دكمه - تكست باكس - و ... رو داخل c# در نظر بگيريد كه چطوري به فرمتون اضافه ميكنين
در اين سايت هم به اين شيوه ميتونين كار رو انجام بدين


با اين قابليت كه ميتونين اين المان ها رو به صورت تودرتو و nested به كار ببرين .
اخر سرم كدش رو ازش بخواهيد !.
-------------


و اخريش
http://bootply.com/new


خودتون ببينين !
نصف از اولي رو داره نصف از دومي اما در كل ضعيفتر .
------------------


ویرایش توسط کارگر سایت : 02-04-2014 در ساعت 06:43 AM
پاسخ با نقل قول
کاربران زیر از کارگر سایت به خاطر پست مفیدش تشکر کرده اند :
جای تبلیغات شما اینجا خالیست با ما تماس بگیرید