• آموزش بوت استرپ ، اسلایدر ( Carousel )
  • آموزش بوت استرپ ، استفاده از فرم ها ( Form )
  • آموزش بوت استرپ ، استفاده از دکمه ها
  • آموزش بوت استرپ ، استفاده از جدول
آموزش بوت استرپ ، پاپ اور ( Popover )
آموزش Front-End آموزش بوت استرپ
آموزش بوت استرپ ، پاپ اور ( Popover ) سجاد رحمانی نژاد ۲۴ آبان ۱۳۹۶ 21 بازدید
پاپ اور Popover در بوت استرپ، همانند تولتیپ tooltip عمل می کند. به این صورت که با کلیک روی المان مورد نظر، یک tooltip در کنار آن، نشان داده می شود. که با توجه به نوع تولتیپ، می تواند در هر چهار طرف المان قرار بگیرد. برای این کار، ابتدا باید آن را فعال کنیم: [crayon-5a0f1aa039aa1146038747/] اکنون، پس ...
کامل بخوانید
آموزش بوت استرپ ، همترازی عمودی ( Vertical Alignment )
آموزش Front-End آموزش بوت استرپ
آموزش بوت استرپ ، همترازی عمودی ( Vertical Alignment ) سجاد رحمانی نژاد ۲۴ آبان ۱۳۹۶ 20 بازدید
با استفاده از کلاس های .align-baseline, .align-top, .align-middle, .align-bottom, .align-text-bottom, .align-text-top می توان بنا به نیاز، عنصر مورد نظر را تراز عمودی کرد. [crayon-5a0f1aa03ad44620838140/] همانطور که در این مثال ها می بینید، با استفاده از کلاس های ترازبندی در بوت استرپ، حتی عناصر جدول ها هم می توانیم تراز بندی کنیم. [crayon-5a0f1aa03ad4c282800754/] موقعیت عناصر با استفاده از دستورات کمکی بوت استرپ، می توان ...
کامل بخوانید
آموزش بوت استرپ ، نوار پیشرفت ( Progress Bar )
آموزش Front-End آموزش بوت استرپ
آموزش بوت استرپ ، نوار پیشرفت ( Progress Bar ) سجاد رحمانی نژاد ۲۴ آبان ۱۳۹۶ 21 بازدید
یکی از مهم ترین عناصر در برای نشان دادن پیشرفت یک پروژه ،  نمودار میله ای جهت آمارگیری و ... نوار پیشرفت می باشد. نوار پیشرفت ( Progress Bar ) همان تگ <progress> در html5 می باشد که بوت استرپ با ترکیب این المان با css و کمی جاوااسکریپت، به جذابیت بصری آن افزوده است و علاوه بر این، ...
کامل بخوانید
آموزش بوت استرپ ، صفحه بندی ( Pagination Bootstrap )
آموزش Front-End آموزش بوت استرپ
آموزش بوت استرپ ، صفحه بندی ( Pagination Bootstrap ) سجاد رحمانی نژاد ۲۴ آبان ۱۳۹۶ 21 بازدید
با استفاده از بوت استرپ، می توانیم بلوک بزرگی از صفحات مرتبط را به وسیله صفحه بندی به هم متصل کنیم. بی آنکه صفحه ی بزرگی داشته باشم و بدون آنکه تعداد صفحات را زیاد کنیم. Pagination به وسیله لیست های html ساخته می شود و شبیه به <nav> عمل می کند؛ با این تفاوت که با ...
کامل بخوانید
آموزش بوت استرپ ، Dropdowns در بوت استرپ چیست ؟
آموزش Front-End آموزش بوت استرپ
آموزش بوت استرپ ، Dropdowns در بوت استرپ چیست ؟ سجاد رحمانی نژاد ۲۴ آبان ۱۳۹۶ 20 بازدید
دراپ داون ها برای نمایش لیست پیوند ها و موارد دیگر به کار می روند که به وسیله ی پلاگین های جاوا اسکریپت در بوت استرپ ساخته شده اند. با استفاده از کلاس .dropdown در ترکیب با عناصر <a> یا <button>  می توان یه منوی پایین انداز ایجاد کرد. [crayon-5a0f1aa03be96001497951/] در اینجا، از دکمه و کلاس .btn استفاده کردیم. [crayon-5a0f1aa03bea0965976075/] در ...
کامل بخوانید
آموزش بوت استرپ ، اسلایدر ( Carousel )
آموزش بوت استرپ
آموزش بوت استرپ ، اسلایدر ( Carousel ) سجاد رحمانی نژاد ۲۴ آبان ۱۳۹۶ 20 بازدید
کَروسِل، اسلایدری است که برای عکس، متن و برخی محتواها به کار می رود که با استفاده از CSS و جاوا اسکریپت ساخته شده است.​ دقت داشته باشید که در هر صفحه، فقط یکبار می توان از carousel استفاده کرد. ( در واقع carousel های تو در تو )​ مثال اولیه برای درک بیشتر از اسلایدر بوت استرپ، با صورت زیر ...
کامل بخوانید
آموزش بوت استرپ ، کاربرد کلاس well در Bootstrap
آموزش Front-End آموزش بوت استرپ
آموزش بوت استرپ ، کاربرد کلاس well در Bootstrap سجاد رحمانی نژاد ۱۸ آبان ۱۳۹۶ 30 بازدید
گاهي اوقات در طراحي صفحات وب جهت متمايز کردن يک بخش متون از قسمت هاي ديگر لازم است تا بخش محتواي متمايز شده را داخل جعبه اي خاص يا کادري مشخص قرار دهيد. کلاس well در Bootstrap يک کلاس تعريف شده در بوتسترپ مي باشد که به شما اين امکان را مي دهد تا متن مورد نظر خود ...
کامل بخوانید
آموزش بوت استرپ ، Jumbotron یا جامبوترون چیست ؟
آموزش Front-End آموزش بوت استرپ
آموزش بوت استرپ ، Jumbotron یا جامبوترون چیست ؟ سجاد رحمانی نژاد ۱۸ آبان ۱۳۹۶ 37 بازدید
عبارت Jumbotron که از کلمه Jumbovision اقتباس شده است اولین بار توسط کمپانی سونی برای تلویزیون های بسیار عریض و بزرگ خود استفاده شد. هدف از ساخت این تلوزیون ها که معمولا در خیابان ها یا استادیوم های ورزشی نصب می گردید ،جلب توجه مردم جهت درج تبلیغات و یا برنامه های زنده بود. در بوت استرپ Jumbotron به ...
کامل بخوانید
آموزش بوت استرپ ، استفاده از فرم ها ( Form )
آموزش Front-End آموزش بوت استرپ
آموزش بوت استرپ ، استفاده از فرم ها ( Form ) سجاد رحمانی نژاد ۱۸ آبان ۱۳۹۶ 39 بازدید
همانطور که می دانید در صفحه وب فرمها ابزاری جهت تعامل کاربران با سرور می باشند. به همین دلیل طراحان سعی می کنند تا در طراحی و پیاده سازی فرم ها کمال دقت و سلیقه را در نظر بگیرند تا کاربران هر چه راحت تر با آنها ارتباط برقرار کنند. بوت استرپ با اضافه کردن کلاس هایی ...
کامل بخوانید
آموزش بوت استرپ ، استفاده از دکمه ها
آموزش بوت استرپ
آموزش بوت استرپ ، استفاده از دکمه ها سجاد رحمانی نژاد ۵ آبان ۱۳۹۶ 98 بازدید
بوت استرپ امکان ایجاد 7 نوع دکمه مختلف را به شما می دهد. حالت اصلی دکمه ها در bootstrap توسط کلاس btn تعریف می شود. این کلاس فقط روی تگ های a ، input و button کار می کند. در مثال زیر حالت کلی دکمه را برای تگ a تعریف می کنیم : [crayon-5a0f1aa03d816109802969/] برای تعریف حالت های ...
کامل بخوانید
آموزش بوت استرپ ، استفاده از جدول
آموزش بوت استرپ
آموزش بوت استرپ ، استفاده از جدول سجاد رحمانی نژاد ۵ آبان ۱۳۹۶ 74 بازدید
در فریم ورک بوت استرپ می توانید جداولی با طرح سبک و تمیز و البته خیلی سریع ایجاد کنید. این جداول با padding ملایم وسطرهایی افقی فراهم شده اند. بعضی از تگ های اصلی که برای ساخت جدول توسط بوت استرپ پشتیبانی می شود عبارتند از : [crayon-5a0f1aa0581ba538799201/] از قبل با تگ های بالا آشنایی لازم را ...
کامل بخوانید
آموزش بوت استرپ ، تایپوگرافی
آموزش Front-End آموزش بوت استرپ
آموزش بوت استرپ ، تایپوگرافی سجاد رحمانی نژاد ۲۵ مهر ۱۳۹۶ 87 بازدید
بوت استرپ Bootstrap به صورت پیش فرض از فونت های Helvetica Neue, Helvetica, Arial, and sans-serif و اندازه فونت 14 پیکسل و فاصله خطوط 1.428 پیکسل برای متون استفاده می کند. تنظیمات از پیش تعریف شده ( شکل و شمایل ) برای تگ های مختلف در Bootstrap سبب نمایش بهتری از تگ ها به صورت پیش فرض ...
کامل بخوانید