تویتر بوت استرپ سایتهای مفید 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"