مجله خبری هاست ایران » طراحی و توسعه » نصب Bootstrap و سیستم Bootstrap Grid
  • mag-telegram.jpg
  • landing96-300-420.jpg
توسعه وب طراحی و توسعه

نصب Bootstrap و سیستم Bootstrap Grid

نصب Bootstrap و سیستم Bootstrap Grid

بوت استرپ چندین سال است که در وب کاربرد دارد. به‌عنوان یک فریم ورک طراحی واکنش گرا یا Responsive که برای ساخت وب‌سایت‌ها یا اپلیکیشن­‌های پویا (Dynamic) و ثابت (Static) استفاده می‌­شود، Bootstrap شهرت بسیاری در Github به دست آورده است و به یک ابزار مفید و کارآمد برای طراحان وب و برنامه نویسان تبدیل‌شده تا با کمک آن وب‌سایت‌های Responsive را در کمترین زمان طراحی کنند.

به دلیل کلاس­‌های ساده برای استفاده و فریم ورک وابسته به ماژول، Bootstrap کار دولوپرها را بسیار ساد‌ه‌­تر کرده است چرا که با استفاده از آن برنامه نویسان می‌­توانند به‌راحتی با استفاده از طراحی‌های مدرن مختلف و استاندارد، کمتر کد بزنند.

بوت استرپ از jQuery نیز پشتیبانی می­‌کند و بسیاری از المان‌­ها و عناصر محبوب جاوا اسکریپت ازجمله carousel، gallery و موارد دیگر را نیز در خود دارد. فقط کافی است کلاس‌­های درستی را به روی مارک‌آپ یا زبان نشانه‌گذاری خود قرار دهید تا کارتان ساده شود.


مقاله مرتبط: Bootstrap چیست؟


در این آموزش، یاد می‌گیرید که چطور با بوت استرپ کار کنید و آن را برای طراحی‌­های گوناگون شخصی‌سازی کنید.

چند سایت طراحی‌شده با Bootstrap

پیش از اینکه شروع به کندوکاو در دنیای Bootstrap کنیم می‌­خواهیم به برخی از بهترین نمونه وب­سایت‌­هایی که با بوت استرپ ساخته‌شده‌اند نگاهی بیندازیم:

The Eddy NYC Restaurant

The Eddy NYC Restaurant

Eddy یک رستوران در منطقه East Village است که از آوریل ۲۰۱۴ شروع به کار کرده است. این سایت با استفاده از فریم ورک بوت استرپ و با یک طراحی ساده و حداقل رنگ­‌ها طراحی ‌شده است.

Morphie

Morphie

Morphie بهترین سازنده قاب باطری آیفون است که سایت آن با استفاده از یک اسلایدر بزرگ مدرن و رنگ‌بندی‌های ساده با کمک ماژول Bootstrap طراحی شده است.

چه چیز جدیدی در Bootstrap 3.3 وجود دارد؟

پس از اینکه برخی از ایرادات و باگ­‌ها برطرف شد و پیشرفت­‌هایی صورت گرفت، Bootstrap به نسخه‌­ی سوم رسید. برخی از ویژگی‌­های جدید در این نسخه­ به شرح زیر است:

  • رویکرد استفاده برای موبایل (Mobile-first approach)
  • تغییرات در کلاس‌­های اصلی (تغییر نام متغیرها)
  • ترکیب CSS استاندارد و واکنش­گرا در یک فایل
  • آیکون فونت­‌ها، حذف تصاویر PNG قدیمی
  • حذف پشتیبانی از IE7 و ۶ و پشتیبانی کردن از IE8 و نسخه‌­های جدیدتر آن
  • استایل­‌های سبک­‌تر carousel

دانلود و نصب Bootstrap

برای شروع، باید فایل bootstrap.zip را از سایت رسمی Bootstrap دانلود کنید؛ اما پیش از شروع، ما می­‌خواهیم کمی درباره ویژگی شخصی­‌سازی که می­‌توانیم به روی پکیج Bootstrap انجام دهیم صحبت کنیم.


مقاله مرتبط: آموزش بوت استرپ ٤: کار با NPM ، Grunt.js و Sass – قسمت اول


برای این کار، فقط به روی دکمه‌­ی «Customize» در منوی بالای سایت رسمی بوت استرپ کلیک کنید. با این کار می‌­توانید مشخص کنید می­‌خواهید چه چیزهایی در پکیج بوت استرپ دانلودی شما قرار بگیرد که این می‌­تواند شامل پلاگین­‌های LESS یا jQuery و موارد این‌چنینی شود. برای این آموزش، ما همه موارد را انتخاب کرده و همان پکیج پیش‌فرض بوت استرپ را دانلود می‌­کنیم. در این آموزش از بوت استرپ نسخه‌­ی ۳.۳.۲ استفاده شده است.

ساختار فولدر بوت استرپ

ساختار فولدر بوت استرپ

وقتی پکیج بوت استرپ دانلود شده را باز کنید، سه پوشه در آن می‌­بینید:

  • پوشه css – شامل شش فایل با نام‌­های زیر است:
  • Css – این فایل CSS بوت استرپ، حاوی فضای بیشتری برای خواناتر کردن و بزرگ‌تر کردن سایز آن در قیاس با نسخه­‌ی خلاصه‌سازی شده است.
  • Min – این فایل CSS بوت استرپ، خلاصه‌سازی و تمامی فضاهای اضافی آن حذف‌شده تا سایز فایل کمی کوچک­‌تر شود.
  • Bootstrap-theme.css – این فایل CSS حاوی استایل­‌های بیشتری ازجمله دکمه‌­های سه‌بعدی، گرادینت و موارد دیگر است. این فایل همانند فایل css معمولی، اما کمی بزرگ‌تر از فایل قدیمی است.
  • Bootstrap-theme.min.css – این فایل نسخه‌­ی خلاصه‌شده‌ی فایل bootstrap-theme.css است.
  • map و bootstrap-theme.css.map – این دو، نقشه‌­های منبع ایجاد شده توسط LESS هستند. هدف اصلی این فایل‌­های نقشه این است که برای اتصال کد منبع CSS به کد منبع LESS در developer’s tool استفاده شوند.
  • پوشه Fonts – این پوشه شامل ۴ فرمت فونت برای پشتیبانی فونت­‌های glyphicons داخل بوت استرپ است.
  • پوشه js – این پوشه شامل نسخه فایل جاوا اسکریپت معمولی و خلاصه‌شده بوت استرپ است.

ساختار فایل برای این آموزش

ساختار فایل برای آموزش bootstrap

قبل از شروع باید ساختار فایل خودمان را ایجاد کنیم. ما سه پوشه و یک فایل HTML خواهیم داشت که نقش هر یک را در ادامه توضیح می‌‍­دهیم:

  • Html – این فایل اصلی ما خواهد بود. تمام طراحی­‌های ما به روی این فایل انجام می‌­شود.
  • پوشه js – برای فایل­‌های جاوا اسکریپت انتخاب شده است.
  • پوشه fonts- برای فونت­‌های glyphicons ساخته‌شده است.
  • پوشه images – برای قرار گرفتن تصاویر ساخته‌شده است.
  • پوشه css- stylesheets در این پوشه قرار می‌­گیرد.

زبان نشانه‌گذاری (Markup)

قبل از اینکه کار کردن با بوت استرپ را آغاز کنیم باید ابتدا فایل HTML را ایجاد کرده و آن را به فایل‌­های CSS و جاوا اسکریپت متصل کنیم. اولین دستورات به شرح زیر هستند.

سیستم گرید ستونی بوت استرپ (Bootstrap’s Column Grid System)

اگرچه بوت استرپ ۲ یک CSS انتخابی سازگار با موبایل به فریم ورک خود اضافه کرد، بوت استرپ ۳ یک سیستم گرید ۱۲ ستونی در پکیج خود دارد که رویکرد «Mobile First» را دنبال می‌­کند، بدین معنا که همه‌چیز در این نسخه جدید ابتدا برای سایز­های صفحه‌نمایش‌های موبایل طراحی شده و سپس به صفحه‌نمایش‌های بزرگ‌تر می‌­رسد.

این نسخه، چهار سایز گرید دارد:

  • دستگاه­‌های بسیار کوچک (col-xs) – برای تلفن‌­های همراهی که نمایش‌گر آن‌­ها کوچک‌تر از ۷۶۸ پیکسل است.
  • دستگاه‌­های کوچک (col-sm) – برای تبلت­‌هایی که صفحه‌نمایش آن­‌ها برابر یا بزرگ‌تر از ۷۶۸ پیکسل است.
  • دستگا­ه‌­های متوسط (col-md) – برای دسکتاپ­‌هایی که صفحه‌نمایش آن‌­ها بزرگ‌تر یا برابر ۹۹۲ پیکسل است.
  • دستگاه‌­های بزرگ (col-lg) – برای دسکتاپ­‌هایی که صفحه‌نمایش آن‌­ها بزرگ‌تر یا برابر با ۱۲۰۰ پیکسل است.

مدیا کوئری‌­های زیر را ببینید.

برای بزرگ­ کردن عرض حداکثری که برای سایز هر دستگاه در نظر گرفته شده، بوت استرپ از مدیا کوئری­‌های زیر استفاده می­‌کند. برای اطلاعات بیشتر صفحه bootstrap CSS را ببینید.

Container و Row

پیش از اینکه ما از این کلاس­‌های آماده برای گرید خود استفاده کنیم، باید یک قالب برای سایت ایجاد کنیم که با کلاس «Container» و «Row» انجام می­‌شود. مثال زیر را ببینید.

اگر می‌­خواهید کنترل بیشتری به روی چیزی که در سایز خاصی از نمایش‌گر ظاهر می­‌شود داشته باشید، می­‌توانید کلاس­‌های دیگری را در کلاس گرید اول قرار دهید. به‌عنوان‌مثال، اگر می­‌خواهید دو ستون در سمت راست و چپ دستگاه‌­های کوچک‌­تر ایجاد کنید می‌­توانید col-sm-6 را در کنار کلاس col-md-4 قرار دهید. مثال زیر را ببینید.

احرای دستورات بوت استرپ

اجرای دستورات

حالا که می­‌دانیم چطور می‌­توانیم از کلاس­‌های گرید ساده و اولیه استفاده کنیم، نوبت آن می­‌رسد که آن­‌ها را در یک مثال واقعی اجرا کنیم. دستورات زیر برای ستون­‌ها و گریدهای ما هستند.

همان‌طور که می­‌توانید در کدهای ما ببینید، ما چندین ردیف در یک کانتینر ایجاد کرده‌­ایم. درون هر ردیف تگ‌­های هدر، تصاویر و موارد دیگر با سایزهای گرید مخصوص به خود قرار گرفته‌اند. در نظر داشته باشید که ما از دو کلاس برای سایز هر گرید استفاده کرده‌­ایم تا ظاهری که ایجاد می‌­کنیم برای سایزهای مختلف قابل‌کنترل باشد.

حالا چند CSS سفارشی برای لغو و اصلاح کردن استایل‌­های پیش­‌فرضی که توسط بوت استرپ ارائه‌شده است اضافه می­‌کنیم.

چیزی که با این کدها می­‌سازید چیزی شبیه به تصویر زیر است.

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

تنظیم عرض ستون­‌ها با استفاده از Offset

مورد بعدی که بررسی خواهیم کرد، ویژگی‌­های Offset بوت استرپ است که به کمک آن می­‌توانیم بین ستون­‌ها فاصله بیندازیم. اگر به تصویری که از نتیجه‌­ی کدهای ما به دست آمد با دقت بیشتری نگاه کنید می­‌بینید سه آیفونی که در تصویر دیده می‌­شوند، بیشتر در سمت چپ صفحه‌نمایش قرار گرفته‌­اند و باکس Advertise و Download طوری در کنار هم قرار گرفته‌اند که انگار هیچ فاصله‌­ای با هم ندارند.

برای ایجاد فضا در اینجا باید از کلاس offset در میان کلاس­‌های گرید استفاده کنیم. کد ترکیبی ما باید این‌گونه باشد: col-gridsize-offset-number-of-columns. ما می­‌خواهیم یک offset-2 تعریف کنیم، بدین معنا که می‌­خواهیم فاصله­‌ای بین دو ستون ایجاد کنیم که با این کار ستون را به نقطه دلخواه‌مان در صفحه ببریم. این را در نظر داشته باشید که فاصله همیشه در سمت چپ اضافه می­‌شود و می‌بایست با سایزهای فعلی گرید هماهنگ باشد.

حالا این کلاس را به سایزهای آیفون و ستون­‌های مربوط به تبلیغات و دانلود اضافه می‌­کنیم. کدهای زیر را ببینید.

در این کدها، ما فاصله‌­ای بین ستون مربوط به تصاویر آیفون و همچنین ستون­‌های Download و Advertise اضافه کردیم. نتیجه را در تصویر زیر ببینید.

آموزش بوت اسرتپ و گرید سیستم

ترتیب ستون­‌ها با Push و Pull

گاهی ممکن است نیاز باشد تا ترتیب اجزای صفحه با توجه به سایز خاص نمایش‌گر، به‌خصوص در دستگاه­‌های کوچک‌­تر، تغییر کند. در این صورت، استفاده از گرید­ها همیشه کارساز نخواهد بود. به همین دلیل ویژگی‌­های Push و Pull در Bootstrap ایجاد شده­‌اند تا به کمک شما بیایند. Push و Pull به‌سادگی ستون­‌ها را حرکت خواهند داد.

در مثالی که زدیم، همان‌طور که می­بینید باکس offset در سمت راست صفحه قرار دارد. با کوچک­‌تر شدن صفحه ابتدا دو باکس تبلیغات و دانلود در بالای صفحه و باکس offset زیر آن­‌ها قرار می­‌گیرد؛ اما اگر بخواهید اول این باکس نمایش داده شود چه باید بکنیم؟

این بار از ویژگی push و pull در بوت استرپ به شکل زیر استفاده می­‌کنیم:

  • col-grid-size-push-number-of-column – ستون موردنظر را به سمت راست و به تعداد ستون­‌ها حرکت می­‌دهد، شروع حرکت آن جایی است که به‌طورمعمول قرار می‌­گیرد.
  • col-grid-size-pull-number-of-column – ستون مورد نظر را به سمت چپ و به تعداد ستون­‌ها حرکت می‌­دهد، شروع حرکت آن نیز جایی است که به‌طور معمول قرار می‌گیرد.

حالا این مثال را در عمل نشان می­‌دهیم:

در این کد، محل قرار گرفتن باکس offset تغییر پیدا کرده و در بالای دو ستون دیگر قرار گرفته است. سپس، یک push برای ۸ ستون نسبت به باکس offset و یک pull برای ۶ ستون از باکس تبلیغات تنظیم‌شده است. این بار باکس‌­ها به‌درستی ردیف می‌­شوند اما در صفحه‌نمایش­‌های کوچک‌­تر ابتدا باکس offset نمایش داده می‌­شود.

ستون­‌های تو در تو

Bootstrap این امکان را می­‌دهد که یک row درون row دیگر بسازید و برای آن سایز گرید تعریف کنید. نکته خوبی که دراین‌باره وجود دارد این است که برای این کار نیاز نیست از تمام ۱۲ ستون موجود استفاده کنید.

در این مثال چند ستون در هم می­‌سازیم تا ببینیم چطور کار می­‌کند.

همان‌طور که می­‌بینید، ما چند Row درون هم ساختیم و از ۶ سایز گرید ستون استفاده کردیم. نتیجه این کد چیزی شبیه به تصویر زیر خواهد بود:

راهنمای نصب بوت استرپ

جمع‌بندی

ما در این آموزش نکات اولیه‌­ی سیستم Bootstrap Grid را آموختیم، شما می‌­توانید این دستورات و کلاس­‌ها را در کار خودتان اعمال کنید و نتیجه آن را ببینید. پیشنهاد می‌­کنیم برای اطلاعات بیشتر درباره کلاس­‌ها، نگاهی به مستندات بوت استرپ داشته باشید.

 

ابزار بهینه سازی وب هاست ایران

افزودن دیدگاه

کلیک برای ثبت دیدگاه