تلگرام
۰۵۱-۳۸۸۴۶۰۲۷ ۰۹۱۲۰۲۴۸۱۱۲ ۰۹۳۶۷۹۸۸۱۱۲

معرفی ساختار سیستم شبکه بندی بوت استرپ (Grid system)

فریم ورکهایی مثل Bootstrap یا Foundation از گریدبندی صفحه استفاده میکنند و صفحه وب سایت را بصورت ستونهایی شبیه سازی میکنند. شما با استفاده از این ویژگی میتوانید سایتهای رسپانسیو را به راحتی طراحی کنید.
برای مشاهده گریدبندی سایتی که با این فریم ورک ها طراحی شده، میتوانید افزونه grid displayer را در مرورگر فایرفاکس نصب کنید.
سیستم شبکه بندی بوت استرپ بر اساس ۱۲ ستون و n ردیف تنظیم شده است و براساس این ستون ها، سایت بخش بندی می گردد، به عنوان مثال میتوانیم تعیین کنیم ۴ تا ستون به سایدبار اختصاص داده شود و ۸ ستون محتوای سایت را دربرگیرد.
از ستون ها برای بخش بندی قسمت های مختلف سایت مانندHeader ,content ,footer ,sidebar , … استفاده میکنیم و از ردیف ها برای دسته بندی و مرتب سازی المان ها. برای ایجاد شبکه بندی در بوت استرپ از کلاس ها کمک میگیریم.

معرفی کلاس های بوت استرپ

کلاس container-fluid  :
محتوایی که در این کلاس قرار میگیرد، دارای عرض ۱۰۰ درصد خواهد بود.
نکته : در بوت استرپ به فاصله ی شیار بین ستون ها gutter گفته میشود.
کلاس container :
محتوایی که در این کلاس قرار میگیرد، وسط چین خواهد شد ولی این کلاس عرض ثابتی ندارد و در diviceهای مختلف عرض آن تغییر میکند. بنابراین بر اساس عرض container، عرض ستون ها متفاوت خواهد بود ولی مقدار gutter ستون ها ۳۰px ثابت خواهد بود که این مقدار به چپ و راست ستون داده میشود( دو تا ۱۵ پیکسل).
دقت کنید که برای بدست آوردن عرض واقعی ستون ها باید مقدار عرض ستون را از مقدار شیار کم کنید.

مقدار استاندارهای عرض کلاس container :
۱۵۶۰
۱۱۷۰
۹۷۰
۷۵۰
۴۸۰ تبلت – صفحه نمایش های xtra small
۳۲۰ – صفحه نمایش ۳اینچ به پایین portrate

نقاط اصلی شکست مدیا کوئری ها در بوت استرپ بصورت زیر است:

۴۸۰ – ۷۶۸ – ۱۰۲۴
مدیا کوئری برای اسکرین ها با صفحه نمایش خاص :
۷۲۰ – ۷۶۸ تبلت ها – آی پد
۳۲۰-۴۸۰ فاتبلت ها = first generation تبلت های نسل اول
کمتر از ۳۲۰ = low resolution اسمارت فون های بسیار کوچک
۷۶۸-۹۰۰ = portrait tablet تبلت عمودی
۹۰۰-۱۰۲۴ =  تبلت افقیlandscape
۱۰۲۴-۱۲۰۰ = دسکتاپ ها
۱۲۰۰ به بالا = ultra wide screenها (صفحه نمایش های خیلی عریض)
کلاس row :
برای ایجاد ردیف های افقی در بوت استرپ از این کلاس استفاده میکنیم. اگر داخل کلاس های container کلاس row  را قرار ندهیم، ستون ها زیر هم قرار میگیرند. چون تراز ما افقی است باید این کلاس را بگذاریم.
کلاس well:
این کلاس یک باکس خاکستری با padding داخلی ۱۵px از چپ و راست ایجاد میکند.
نکته : هر عنصری با هر کلاسی داخل کانتینر، ۱۵px از چپ و راست فاصله دارد به جز عنصر با کلاس row
کلاس col:
برای ایجاد ستون ها در بوت استرپ از کلاس col استفاده میکنیم. ولی برای تعیین تعداد ستون در رزولوشن های مختلف باید از کلاس col بصورت زیر استفاده کنیم :
کلاس col-lg = صفحه نمایش بزرگ  با رزولوشن ۱۲۰۰ به بالا
کلاس col-md = مانیتور با رزولوشن ۹۹۹px – ۱۲۰۰px
کلاس col-sm = صفحه نمایش تبلت ها ( رزولوشن ۷۶۸px – ۹۹۹px )
کلاس col-xs = صفحه نمایش کوچکتر از ۷۶۸px (موبایل)

برای تعیین تعداد ستون نیز از این کلاس بصورت زیر استفاده میکنیم :
Col-lg-6 => در رزولوشن بزرگ عنصر مورد نظر ۶ ستون را اشغال کند.

سوالات متداول

بله ، تمام قالب های توس وب دارای پشتیبانی بوده و در صورت بروز خطا ، بعد از بررسی مشکل برطرف می شود.

پشتیبانی حرفه ای ، کد نویسی بهینه و سرعت لود بالا ، کاملا ایرانی (عدم فارسی سازی) ، سئو حرفه ای ، برخی از تفاوت قالب های فروشگاه توس وب با دیگر قالب ها می باشد.

خیر ، کار کردن با سایت بسیار ساده و آسان است ، زیرا پنل تنظیمات و مدیریت سایت کاملاً فارسی بوده و آموزش کامل آن در اختیار مشتری قرار می گیرد.

بله ، پس از خرید ، فایل آموزشی به همراه قالب در اختیار مشتریان قرار می گیرد.

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

بله ، برای حذف کپی رایت می توانید از طریق بخش پشتیبانی اقدام نمایید.

خیر ، قالب برای یک دامنه به شما فروخته می شود و برای استفاده مجدد نیاز است دو سوم هزینه قالب را پرداخت نمایید.

تیم توس وب تلاش کرده تا تمامی موارد امنیتی که مربوط به کدنویسی قالب ها بوده را رعایت کند.

بله، قالب هایی که توسط توس وب طراحی می شوند منطبق با آخرین استانداردهای جهانی وب ( استاندارد کنسرسیوم جهانی وب = html css
استاندارد ECMA = استاندارد کدهای جاوا اسکریپت ) می باشد.

خیر، تمام قالب ها به صورت اختصاصی و با سلیقه ایرانی از پایه طراحی شده و کاملا بومی بوده و دلیل کیفیت بالای قالب ها نیز عدم فارسی سازی قالب میباشد.

به محض پرداخت وجه ، شما می توانید فایل قالب را دانلود و استفاده نمائید .

چرا به توس وب اعتماد کنیم ؟

توس وب یک سایت رسمی می باشد و همچنین دارای گواهی نامه های معتبر ( نماد اعتماد الکترونیک از مرکز توسعه و تجارت الکترونیک , نماد ساماندهی از وزارت ارشاد و درگاه پرداخت ایمن بانک ملت ) می باشد

نماد اعتماد
نظرات برخی مشتریان درباره توس وب