آموزش بوت استرپ

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

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

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

بوت استرپ امکان ایجاد 7 نوع دکمه مختلف را به شما می دهد. حالت اصلی دکمه ها در bootstrap توسط کلاس btn تعریف می شود. این کلاس فقط روی تگ های a ، input و button کار می کند. در مثال زیر حالت کلی دکمه را برای تگ a تعریف می کنیم : [crayon-5a33368ab95f0399631947/] برای تعریف حالت های خاص دکمه که در تصویر بالا مشاهده می کنید هر یک از کلاس های زیر را به کلاس btn اضافه می کنیم. default : حالت پیش فرض دکمه می باشد. این دکمه به رنگ خاکستری کمرنگ و با رنگ متن سیاه است که می توانید از این دکمه در موارد دلخواه یا تعریف دکمه جدید استفاده کنید. این ...

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

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

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

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

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

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

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

حتما تا به حال به چهارچوب و نحوه نمایش مطالب و محتوا در مجلات ، روزنامه ها و صفحات وب دقت کرده اید. هر سیستم بنا به نیاز مخاطب خود محتوا را در ستون های مختلف طراحی کرده اند.گاهی وبسایت ها دارای سه ستون و گاهی دو ستون و ... می باشند که حتی داخل هر ستون مجددا ستون بندی های دیگری انجام شده است. سیستم شبکه بندی یا گریدبندی در Bootstrap به 12 ستون در یک سطر تقسیم بندی می شود. به هرکدام از این ستون ها گرید ( شبکه ) ...

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

Container تگ ( container ) پایه ای ترین المان در بوت استرپ است که برای استفاده از سیستم پیش فرض شبکه ای ( Grid System ) کاملاً ضروری است. ( این تگ، همانند تگ body عمل می کند و تا زمانی که نوشتن کدهای بوت استرپ به اتمام نرسیده، این تگ به پایان نمی رسد. ) [crayon-5a33368abb8e0685945308/] با استفاده از کلاس .container-fluid می توان از تمام عرض صفحه استفاده کرد. [crayon-5a33368abb8e7569251590/] از زمانی که بوت استرپ طراحی شد و توسعه پیدا کرد، استفاده از مدیا کوئری ( به شکل سابق )

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

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

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

برای شروع سریع تر می توانید از MaxCDN استفاده نمایید. به این صورت که با قرار دادن آدرس زیر در header وبسایت، مستقیماً از مرجع رسمی بوت استرپ، کلاس ها و فایل ها را فراخوانی کنید. نکته قابل توجه در این روش این است که این کار، باعث کاهش سرعت بارگذاری سایت و در نتیجه کند شدن آن شود ( که توصیه نمی گردد ) [crayon-5a33368abc121880176312/] همچنین افزودن برخی پلاگین های جاوا اسکریپت در انتهای صفحه و قبل از </body> توصیه می شود. دلیل انجام این کار، قابل شناسایی ...

ادامه مطالب
طراحی صفحه ریسپانسیو یا سایت واکنشگرا چیست ؟

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

ادامه مطالب