آموزش Front-End

آموزش بوت استرپ ، گروه های لیست ( Bootstrap List Groups )

ابتدایی ترین گروه لیست عبارت است از یک لیست نامنظم که دارای آیتم های لیست می باشد برای ایجاد یک گروه لیست مقدماتی، عنصرِ<ul> را به کلاسِ.list-group بیفزایید و عنصرهای <li> را به کلاسِ list-group-item اضافه کنیدبرای این کار، ابتدا باید آن را فعال کنیم: [crayon-5a333692ef4e0048001338/] گروه لیست با نشان ها ( Badges ) امکان اضافه نمودنِ badge (نشانگرِ تعداد آیتم های مرتبط با لینک) به گروه لیست وجود دارد Badge ها به صورت اتوماتیک در قسمت راست قرار می گیرند [crayon-5a333692ef4f0252655270/] با استفاده از دستور زیر و استفاده از کلاس .sticky می توان بر روی صفحه، المانی به عنوان یک استیکی نوت داشته باشم: [crayon-5a333692ef4f7098491946/] گروه لیست با آیتم های لینک شده ( Linked Items ) آیتم های موجود ...

ادامه مطالب
آموزش بوت استرپ ، پاپ اور ( Popover )

پاپ اور Popover در بوت استرپ، همانند تولتیپ tooltip عمل می کند. به این صورت که با کلیک روی المان مورد نظر، یک tooltip در کنار آن، نشان داده می شود. که با توجه به نوع تولتیپ، می تواند در هر چهار طرف المان قرار بگیرد. برای این کار، ابتدا باید آن را فعال کنیم: [crayon-5a333692f09d1591389863/] اکنون، پس از فعالسازی، با کد زیر، می توانی یک Popover داشته باشیم: [crayon-5a333692f09db219156762/] با استفاده از دستورات زیر، می توان popover در در اطراف المان تعیین کرد:   [crayon-5a333692f09e1950527111/] Popover با قابلیت بسته شدن با استفاده از این کد، می توانیم با کلیک بر روی المان، popover را ببندیم: [crayon-5a333692f09e9220656692/] با استفاده از دستور زیر و استفاده از کلاس .sticky می توان بر روی ...

ادامه مطالب
آموزش بوت استرپ ، همترازی عمودی ( Vertical Alignment )

با استفاده از کلاس های .align-baseline, .align-top, .align-middle, .align-bottom, .align-text-bottom, .align-text-top می توان بنا به نیاز، عنصر مورد نظر را تراز عمودی کرد. [crayon-5a333692f1224145943048/] همانطور که در این مثال ها می بینید، با استفاده از کلاس های ترازبندی در بوت استرپ، حتی عناصر جدول ها هم می توانیم تراز بندی کنیم. [crayon-5a333692f122e098589946/] موقعیت عناصر با استفاده از دستورات کمکی بوت استرپ، می توان به سادگی موقعیت عناصر در صفحه را تعیین کرد. مثلاً: [crayon-5a333692f1235269392230/] موقعیت ثابت Fixed با استفاده از این موقعیت، می توانیم عناصر را در هر جایی از صفحه، به عنوان یک عنصر ثابت داشته باشیم: [crayon-5a333692f123c969431016/] با استفاده از دستور زیر و استفاده از کلاس .sticky می توان بر روی صفحه، المانی به عنوان یک استیکی نوت داشته باشم: [crayon-5a333692f1242636707950/] حاشیه ها در ...

ادامه مطالب
آموزش بوت استرپ ، نوار پیشرفت ( Progress Bar )

یکی از مهم ترین عناصر در برای نشان دادن پیشرفت یک پروژه ،  نمودار میله ای جهت آمارگیری و ... نوار پیشرفت می باشد. نوار پیشرفت ( Progress Bar ) همان تگ <progress> در html5 می باشد که بوت استرپ با ترکیب این المان با css و کمی جاوااسکریپت، به جذابیت بصری آن افزوده است و علاوه بر این، آن را به صورت ریسپانسیو نیز درآورده است. نکته: نوارهای پیشرفت در اینترنت اکسپلورر9 و ورژن های قبلی آن پشتیبانی نمی شود ( زیرا آنها از transition ها و animation ها برای ایجاد بعضی افکت های خود استفاده می کنند ). با استفاده از کلاس .progress در <div> اصلی و استفاده از .progress-bar در تگ های والد می توان یک ...

ادامه مطالب
آموزش بوت استرپ ، صفحه بندی ( Pagination Bootstrap )

با استفاده از بوت استرپ، می توانیم بلوک بزرگی از صفحات مرتبط را به وسیله صفحه بندی به هم متصل کنیم. بی آنکه صفحه ی بزرگی داشته باشم و بدون آنکه تعداد صفحات را زیاد کنیم. Pagination به وسیله لیست های html ساخته می شود و شبیه به <nav> عمل می کند؛ با این تفاوت که با کلیک روی هر یک از آن ها، صفحه جدید باز نمی شود. [crayon-5a333692f220b514551728/] استفاده از آیکون ها در صفحه بندی: به جای استفاده از کلمه next و previous می توانیم از آیکون ها استفاده کنیم. کافیست از کلاس .sr-only استفاده کنیم. [crayon-5a333692f2216585638515/]   وضعیت فعال و غیرفعال در pagination برای غیرفعال کردن یکی از حالت های موجود در صفحه بندی، از کلاس ...

ادامه مطالب
آموزش بوت استرپ ، Dropdowns در بوت استرپ چیست ؟

دراپ داون ها برای نمایش لیست پیوند ها و موارد دیگر به کار می روند که به وسیله ی پلاگین های جاوا اسکریپت در بوت استرپ ساخته شده اند. با استفاده از کلاس .dropdown در ترکیب با عناصر <a> یا <button>  می توان یه منوی پایین انداز ایجاد کرد. [crayon-5a333692f2a61666128441/] در اینجا، از دکمه و کلاس .btn استفاده کردیم. [crayon-5a333692f2a6b931591435/] در اینجا از تگ لینک <a> استفاده کردیم. ایجاد dropdown های رنگی با استفاده از کلاس تعریف شده در بوت استرپ: با استفاده از کلاس از پیش تعریف شده .dropdown-toggle-split می توان دکمه های مجزا برای استفاده در dropdown ها ایجاد کرد. کاربرد آن ( که در قطعه کد زیر آمده است ) برای نمایش دکمه هایی است که برای ...

ادامه مطالب
آموزش بوت استرپ ، کاربرد کلاس well در Bootstrap

گاهي اوقات در طراحي صفحات وب جهت متمايز کردن يک بخش متون از قسمت هاي ديگر لازم است تا بخش محتواي متمايز شده را داخل جعبه اي خاص يا کادري مشخص قرار دهيد. کلاس well در Bootstrap يک کلاس تعريف شده در بوتسترپ مي باشد که به شما اين امکان را مي دهد تا متن مورد نظر خود را داخل کادري با گوشه هاي گرد و پس زمينه اي خاکستري قرار دهيد. البته اين استايل پيش فرض کلاس well مي باشد و شما مي توانيد بنا به سليقه خود آن را تغيير دهيد.  در مثال زير يک تگ <div> را با کلاس well و متن داخل آن نمايش مي دهيم.  [crayon-5a333692f346c084218614/] Well در اندازه هاي مختلف کلاس هاي کمکي براي ...

ادامه مطالب
آموزش بوت استرپ ، Jumbotron یا جامبوترون چیست ؟

عبارت Jumbotron که از کلمه Jumbovision اقتباس شده است اولین بار توسط کمپانی سونی برای تلویزیون های بسیار عریض و بزرگ خود استفاده شد. هدف از ساخت این تلوزیون ها که معمولا در خیابان ها یا استادیوم های ورزشی نصب می گردید ،جلب توجه مردم جهت درج تبلیغات و یا برنامه های زنده بود. در بوت استرپ Jumbotron به کادر بزرگ و عریضی گفته می شود که برای جلب توجه کاربران به مطالب ، تصاویر یا محتواهای خاص مورد استفاده قرار می گیرد. کادر Jumbotron به صورت پیش فرض دارای رنگ خاکستری و متون بزرگ و لبه های گرد می باشد که می توانید آن را به سلیقه خود تغییر دهید. توجه داشته باشید که در Jumbotron میتوانید از ...

ادامه مطالب
آموزش بوت استرپ ، استفاده از فرم ها ( Form )

همانطور که می دانید در صفحه وب فرمها ابزاری جهت تعامل کاربران با سرور می باشند. به همین دلیل طراحان سعی می کنند تا در طراحی و پیاده سازی فرم ها کمال دقت و سلیقه را در نظر بگیرند تا کاربران هر چه راحت تر با آنها ارتباط برقرار کنند. بوت استرپ با اضافه کردن کلاس هایی به فرمها کار طراحی را بسیار آسان کرده است. شما در بوت استرپ می توانید فرم هایی زیبا و واکنشگرا را به راحتی در اختیار داشته باشید. انواع فرم ها در Bootstrap فرم ها در بوت استرپ به 3 نوع مختلف دسته بندی می شوند : فرم های عمودی یا Vertical form (حالت پیش فرض) فرم های خطی یا inline form فرم های ...

ادامه مطالب
آموزش بوت استرپ ، تایپوگرافی

بوت استرپ Bootstrap به صورت پیش فرض از فونت های Helvetica Neue, Helvetica, Arial, and sans-serif و اندازه فونت 14 پیکسل و فاصله خطوط 1.428 پیکسل برای متون استفاده می کند. تنظیمات از پیش تعریف شده ( شکل و شمایل ) برای تگ های مختلف در Bootstrap سبب نمایش بهتری از تگ ها به صورت پیش فرض در صفحه می شود. در ادامه به معرفی این ویژگی ها برای تگ های مختلف می پردازیم. [crayon-5a333693005cf007655358/] عنوان فرعی خطی یا Inline Subheadings : جهت اضافه کردن عنوان فرعی به هر کدام از تگ های <h1> تا <h6> به صورت خطی می توانید از تگ <small> استفاده کنید. همچنین می توانیم از کلاس .small استفاده کنیم. [crayon-5a333693005d9344998227/] عنوان خطی فرعی در ...

ادامه مطالب