bootstrap

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

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

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

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

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

در فریم ورک بوت استرپ می توانید جداولی با طرح سبک و تمیز و البته خیلی سریع ایجاد کنید. این جداول با padding ملایم وسطرهایی افقی فراهم شده اند. بعضی از تگ های اصلی که برای ساخت جدول توسط بوت استرپ پشتیبانی می شود عبارتند از : [crayon-5a1283e9ae99c728302908/] از قبل با تگ های بالا آشنایی لازم را دارید فقط توجه داشته باشید که <caption> حامل توضیحاتی درباره جدول می باشد. برای ساخت یک جدول ساده با طرحی زییا به صورت basic کافی است به تگ <table> کلاس ".table" را اضافه کنید. به مثال زیر توجه کنید: [crayon-5a1283e9ae9a4404980517/] ویژگی های اختیاری برای جداول در Bootstrap : در کنار جدول اصلی که با کلاس table ایجاد می شود، ویژگی ...

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

یکی از مهم ترین عناصر در محتوای یک وب سایت تصاویر می باشد. تصاویر، محتوای تان را جذاب می کند و محتوایی که دارای تصاویر بهینه باشند، از نظر موتورهای جستجو دارای اهمیت بالایی هستند. سبک دهی و واکنشگرا بودن تصاویر یکی از موضوعات اصلی در طراحی وب است که بوت استرپ کلاس های کاربردی زیادی را برای سبک دهی و واکنشگرایی به تصاویر ارائه کرده است. ریسپانسیو ( Responsive ) یا واکنشگرا کردن تصاویر در بوت استرپ : یکی از امکانات خوب بوت استرپ، ریسپانسیو کردن خودکار تصاویر در صفحه وب است. با اضافه کردن کلاس img-responsive به تگ <img> به راحتی می توانید تصاویر خود را در تمام سایزهای صفحه نمایش به صورت کاملا واکنشگرا نمایش ...

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

به خاطر داشته باشید دانستن این نکته بسیار مهم است که کتابخانه های جاوااسکریپت در بوت استرپ، به جی کوئری نیازمند می باشند. کدهای از پیش ساخته شده بوت استرپ: در نسخه دانلود شده ی بوت استرپ، اگر فولدرها را از حالت zip خارج کنید، چیزی شبیه به درختواره ی زیر می بینید: bootstrap/ ├── css/ │ ├── bootstrap.css │ ├── bootstrap.css.map │ ├── bootstrap.min.css │ └── bootstrap.min.css.map └── js/ ├── bootstrap.js └── bootstrap.min.js

ادامه مطالب
آموزش Bootstrap بخش پنجم- مثالی از ستون های تودرتو در بوت استرپ

با سلام به کابران محترم سایت مردان وردپرس. در ادامه مباحث قبلی ازسری مقالات آموزش بوت استرپ، می خواهیم مثالی از چیدمان ستونها بصورت تودرتو یا Nested را داشته باشیم. در این مثال ما دو ستون داریم که کلاس بندی آن ها از تبلت ها شروع شده و تا صفحات نمایش بزرگ تر مقیاس گذاری می شوند و دو ستون مساوی درون ستون بزرگ تر وجود دارد. درون موبایل ها این دو ستون و ستون های داخلی، همگی بصورت پشت سر هم یا stack قرار خواهند گرفت. [crayon-5a1283e9af4f5784747699/]   همانطور که در مثال می بینید، پس از کلاس col-sm-8، با گذاشتن کلاس row باعث شکست به خط بعدی شده، و با احتساب آن ستون، ...

ادامه مطالب
آموزش Bootstrap بخش چهارم- تقسیم بندی در دستگاهای متوسط و بزرگ

با سلام خدمت کاربران محترم سایت مردان وردپرس. در این مقاله سعی برآن داریم تا با نحوه تقسیم بندی صفحه با فریمورک بوت استرپ، در دستگاه های متوسط و بزرگ آشنا شویم. دستگاه های medium در بخش قبل، مثالی از تقسیم بندی در bootstrap را برای دستگاه های کوچک ارائه دادیم. از دو div (ستون) استفاده کردیم، که اندازه 25% و 75% را به آنها دادیم. که در زیر مشاهده می کنید: [crayon-5a1283e9af9de028300400/] اما در دستگاه های متوسط یا medium، تقسیم بندی صفحه بصورت 50% 50% مناسب تر به نظر می آید. نکته: دستگاه های medium، دستگاه هایی با صفحات نمایشی با عرض 992px تا 1199px تعریف ...

ادامه مطالب
آموزش Bootstrap بخش  دوم – ساختار کلی بوت استرپ

در این بخش قصد داریم توضیحی در مورد ساختار کلی فریمورک bootstrap ارائه نماییم. همانطور که می دانید، بوت استرپ محبوب ترین فریمورک HTML، CSS وJavaScript برای طراحی و توسعه وب سایت های واکنشگرا می باشد. طراحی وب واکنشگرا به معنای ساخت وب سایت هایی می باشد که بصورت خودکار خودشان را برای خوب به نظر رسیدن در همه دستگاه ها از موبایل های کوچک تا دسکتاپ های بزرگ، تنظیم می کنند.  در بوت استرپ 3، استایل های mobile-first بخشی از هسته فریمورک  می باشند. همچنین بوت استرپ با همه مرورگرهای مدرن مانند Chorme, Firefox, Internet Explorer, Safari و Opera سازگار می باشد. با توجه به مطالب بخش اول از مقالات مردان وردپرس، بعد از آماده سازی بوت استرپ که می ...

ادامه مطالب
معرفی پلاگین وردپرسی ، My Bootstrap Menu

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

ادامه مطالب
آموزش Bootstrap بخش اول – معرفی و فراخوانی

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

ادامه مطالب