05-05-2019, 10:37 AM
در دنیای طراحی سایت امروزه، فریم ورک بوت استرپ با امکاناتی که برای کاربران خود در نظر گرفته توانسته به یکی از محبوب‌ترین فریم ورک‌های css تبدیل شود. بوت استرپ به جهت کاربرد آسانش، توانست خیلی سریع از دیگر رقیبانش پیشی بگیرد و به نخستین انتخاب طراحان سایت تبدیل شود. استفاده از این فریم ورک برای افرادی که با HTML، CSS و اندکی جاوا اسکریپت آشنایی دارند بسیار آسان است و می‌توانند در مدت زمانی کوتاه آن را فراگیرند.
در حقیقت در این آموزش ما سعی داریم تا هرآنچه شما لازم است درباره سیستم گرید(Grid) بوت استرپ بدانید را با شما در میان بگذاریم. سیستم گرید در بوت استرپ از سرفصل‌های مهمی است که هر توسعه‌دهنده وب باید نسبت به آن آگاهی و مهارت کافی داشته باشد. این سیستم به شما امکان خواهد داد تا سایتی ریسپانسیو و متناسب با اندازه صفحه نمایش دستگاه‌های مختلف طراحی کنید.
۱- سطرها و ستون‌ها:
سیستم گرید بوت استرپ، در واقع از مجموعه‌ای سطر و ستون تشکیل شده‌است که به شما امکان خواهد داد تا بتوانید براحتی المان‌های وب سایت خود را به صورت عمودی / افقی در کنار یکدیگر قرار دهید. باید بدانید که سطرها در بوت استرپ دارای خاصیت block–level هستند به این معنی که یک سطر تمام فضای آن خط را به خودش اختصاص می‌دهد. برای درک آسانتر شما می‌توانید به سطرها به چشم خطی جدید نگاه کنید. ترازبندی افقی المان‌ها با کمک ستون‌ها صورت می‌گیرد.
در واقع تنها ستون‌ها هستند که می‌توانند به المان‌های داخل یک سطر جهت دهند، در نتیجه تمامی محتویات و المان‌ها باید در داخل ستون‌ها قرار گیرند.
[code]
<!-- Wrong -->
<div class="row">
Some content
</div>
<!-- Correct -->
<div class="row">
<div class="col-md-12">Content Goes Here</div>
</div>
[/code]
نکته: سطرها و ستون‌ها در این سیستم از ارتباط جالبی تبعیت می‌کنند به این صورت که، ستون‌ها دارای فاصله حاشیه‌ای ۱۵px می‌باشند بنابراین محتویات داخل آن‌ها با فاصله‌ای مناسب از یکدیگر قرار خواهند گرفت. اما مشکل اینجاست که ستون اول و آخر با فاصله ۱۵ پیکسلی از والد خود قرار می‌گیرند که برای جبران آن برای هر ردیف، فاصله حاشیه‌ای منفی 15 پیکسلی در نظر گرفته شده است تا در هر ردیف ستون‌ها بدرستی کنار یکدیگر قرار گیرند.
۲. تقسیم‌بندی سطرها به ۱۲
در بوت استرپ هر سطر را به ۱۲ بخش مساوی تقسیم کرده‌اند و شما نیز به هنگام طراحی سایت باید بطور دقیق مشخص کنید هریک از ستون‌های شما قرار است چند بخش از این ۱۲ بخش را به خود اختصاص دهند. این کار با اضافه کردن کلاس col-md-NUMBER. انجام خواهد شد. در این کلاس عبارت NUMBER می‌تواند هر عدد صحیحی مابین ۱ تا ۱۲ باشد و با توجه به عددی که اختصاص داده می‌شود، مشخص می‌شود هر ستون قرار است چه درصدی از یک سطر را به خود اختصاص دهد. برای مثال عدد ۶، ۵۰ درصد(۱۲/۶) ، عدد ۳، ۲۵ درصد (۱۲/۳) و به همین ترتیب.
مثال زیر این مساله را برای شما روشن‌تر خواهد کرد:
[code]
<div class="row">
<div class="col-md-12">Full width</div>
</div>
<div class="row">
<div class="col-md-3">25%</div>
<div class="col-md-3">25%</div>
<div class="col-md-6">50%</div>
</div>
[/code]
۳. Column Wrapping
در بوت استرپ قانونی وجود دارد که مجموع اندازه ستون‌های یک سطر نباید از ۱۲ بیشتر شود در غیر اینصورت ستون بعدی به سطر بعد انتقال خواهد یافت. به این اتفاق Column Wrapping گفته می‌شود. به مثال کاربردی زیر نگاهی بیندازید:
همانطور که میبینید ابتدا در سطر ما، دو ستون با اندازه‌های ۴ و ۸ انتخاب شده‌اند که موجب شدند سطرمان پر شود. در نتیجه، دیگر برای ستون سوم فضای کافی وجود نداشته وبه خط بعدی منتقل می‌شود.
[code]
<div class="row">
<div class="col-md-8"></div>
<div class="col-md-4"></div>
<div class="col-md-9">This column will move to the next line.</div>
</div>
[/code]
۴. کلاس‌های مختلف برای صفحه نمایش‌های متفاوت
کلاس col-md-NUMBER. را که پیش‌تر به آن اشاره کردیم به یاد دارید؟ در این کلاس - md – به معنای Medium است.
توجه داشته باشید که زمانی که شما از یک قاعده برای سایزهای مختلف دستگاه‌ها استفاده می‌کنید، سایزهای دیگر نیز این قاعده را به ارث می‌برند مگر آنکه برای آن‌ها قاعده جدید دیگری تعریف کرده باشید. مثال زیر به خوبی چگونگی سازگاری لایه بندی‌های گوناگون با سایزهای مختلف مرورگر شما را نشان خواهد داد.
[code]
<div class="row">
<div class="col-md-6"><p>Try resizing the browser to see this text and the image rearrange for optimal viewing. </p></div>
<div class="col-md-6"><img src="city.jpg" class="img-responsive"></div>
</div>
[/code]
5.Clearfix
در برخی سناریوها، زمانی که یک ستون دارای محتویات به نسبت زیادی باشد و ارتفاع خیلی بیشتری را نسبت به دیگر ستون‌ها به خود اختصاص دهد، ستون‌های بعدی دیگر از قانون قرارگیری به صورت پشت سرهم تبعیت نخواهند کرد و با پشته‌ای از سلول‌ها در سلول با ارتفاع کمتر مواجه خواهید شد. برای جلوگیری از چنین مشکلی بوت استرپ کلاس clearfix را معرفی کرده است. برای استفاده از آن می‌توانید از یک div کمکی با کلاس clearfix استفاده کنید. این کلاس تمام ستون‌ها را مجبور خواهد کرد که به ترتیب و پشت سرهم قرارگیرند. که البته برای بوت استرپ ۴ کاربرد ندارد و در بوت استرپ ۳ استفاده می‌شود.
[code]
<div class="row">
<div class="col-md-6 tall-column">A column much taller than the rest.</div>
<div class="col-md-6"></div>
<div class="clearfix"></div>
<div class="col-md-6"></div>
</div>
[/code]
۶. آفست‌ها (Offset)ها دوستان شما هستند
به صورت پیش‌فرض ستون‌ها به صورت کاملاً بهم چسبیده، بدون هیچ فضای اضافی میانشان، کنار هم قرار می‌گیرند. می‌توانید با استفاده از کلاس offsetها، حاشیه‌هایی را به سمت چپ ستون‌های خود اضافه کنید. برای مثال با اضافه کردن کلاس offset-2. به هر ستونی، آن ستون به سمت راست حرکت خواهد کرد به صورتی که انگار یک سلول نامرئی به اندازه col-md-2 در سمت چپ آن واقع شده‌است. شما می‌توانید با بکارگیری پسوندهای xs, sm, md, lg و xl آفست‌های مختلفی را برای صفحات نمایش با سایزهای متفاوت تعریف کنید.
شما همچنین می‌توانید از آفست‌ها برای قرارگیری ستون‌هایتان در وسط صفحه بهره ببرید.
[code]
<div class="row">
<div class="col-md-6 offset-md-3"></div>
<div class="col-md-10 offset-md-1"></div>
</div>
[/code]
۷. Reordering
کلاس reordering. به شما این اجازه را خواهد داد تا متناسب با سایز صفحه نمایش ترتیب ستون‌ها در سطرهایتان را اولویت بندی کنید. از کلاس -order. برای مدیریت ترتیب محتویات در هر سطر استفاده کنید. این کلاس‌ها به صورت کاملا ریسپانسیو تعریف شده‌اند و شما می‌توانید آن‌ها را به صورت order-1 , order-md-1, …. تعریف کنید. در واقع شما می‌توانید این کلاس را برای ۵ گرید مختلف تعریف شده در بوت استرپ استفاده کنید و برای تعیین اولویت آن‌ها از اعداد صحیح ۱ تا ۱۲ استفاده کنید.
[code]
<div class="container">
<div class="row">
<div class="col">
First, but unordered
</div>
<div class="col order-12">
Second, but last
</div>
<div class="col order-1">
Third, but first
</div>
</div>
</div>
[/code]
از سویی دیگر کلاس‌های ریسپانسیو .order-first و order-last نیز می‌توانند ترتیب المان‌ها را عوض کنند. در‌واقع با قراردان مقدارهای order: -1 و oredr: 13 به ترتیب اولویت‌های محتویات را تغییر می‌دهد.
[code]
<div class="container">
<div class="row">
<div class="col order-last">
First, but last
</div>
<div class="col">
Second, but unordered
</div>
<div class="col order-first">
Third, but first
</div>
</div>
</div>
[/code]
نتیجه گیری:
با خواندن این مقاله، اکنون شما با بخش‌های مهم و حیاتی در سیستم گرید بوت استرپ آشنا شده‌اید و آماده اید تا طراحی سایت ریسپانسیو خود را آغاز کنید. البته برای یادگیری بیشتر این موضوع می‌توانید به مستندات بوت استرپ مراجعه کنید.
منبع: طراحی سایت خلاقانه ستروکیت
در حقیقت در این آموزش ما سعی داریم تا هرآنچه شما لازم است درباره سیستم گرید(Grid) بوت استرپ بدانید را با شما در میان بگذاریم. سیستم گرید در بوت استرپ از سرفصل‌های مهمی است که هر توسعه‌دهنده وب باید نسبت به آن آگاهی و مهارت کافی داشته باشد. این سیستم به شما امکان خواهد داد تا سایتی ریسپانسیو و متناسب با اندازه صفحه نمایش دستگاه‌های مختلف طراحی کنید.
۱- سطرها و ستون‌ها:
سیستم گرید بوت استرپ، در واقع از مجموعه‌ای سطر و ستون تشکیل شده‌است که به شما امکان خواهد داد تا بتوانید براحتی المان‌های وب سایت خود را به صورت عمودی / افقی در کنار یکدیگر قرار دهید. باید بدانید که سطرها در بوت استرپ دارای خاصیت block–level هستند به این معنی که یک سطر تمام فضای آن خط را به خودش اختصاص می‌دهد. برای درک آسانتر شما می‌توانید به سطرها به چشم خطی جدید نگاه کنید. ترازبندی افقی المان‌ها با کمک ستون‌ها صورت می‌گیرد.
در واقع تنها ستون‌ها هستند که می‌توانند به المان‌های داخل یک سطر جهت دهند، در نتیجه تمامی محتویات و المان‌ها باید در داخل ستون‌ها قرار گیرند.
[code]
<!-- Wrong -->
<div class="row">
Some content
</div>
<!-- Correct -->
<div class="row">
<div class="col-md-12">Content Goes Here</div>
</div>
[/code]
نکته: سطرها و ستون‌ها در این سیستم از ارتباط جالبی تبعیت می‌کنند به این صورت که، ستون‌ها دارای فاصله حاشیه‌ای ۱۵px می‌باشند بنابراین محتویات داخل آن‌ها با فاصله‌ای مناسب از یکدیگر قرار خواهند گرفت. اما مشکل اینجاست که ستون اول و آخر با فاصله ۱۵ پیکسلی از والد خود قرار می‌گیرند که برای جبران آن برای هر ردیف، فاصله حاشیه‌ای منفی 15 پیکسلی در نظر گرفته شده است تا در هر ردیف ستون‌ها بدرستی کنار یکدیگر قرار گیرند.
۲. تقسیم‌بندی سطرها به ۱۲
در بوت استرپ هر سطر را به ۱۲ بخش مساوی تقسیم کرده‌اند و شما نیز به هنگام طراحی سایت باید بطور دقیق مشخص کنید هریک از ستون‌های شما قرار است چند بخش از این ۱۲ بخش را به خود اختصاص دهند. این کار با اضافه کردن کلاس col-md-NUMBER. انجام خواهد شد. در این کلاس عبارت NUMBER می‌تواند هر عدد صحیحی مابین ۱ تا ۱۲ باشد و با توجه به عددی که اختصاص داده می‌شود، مشخص می‌شود هر ستون قرار است چه درصدی از یک سطر را به خود اختصاص دهد. برای مثال عدد ۶، ۵۰ درصد(۱۲/۶) ، عدد ۳، ۲۵ درصد (۱۲/۳) و به همین ترتیب.
مثال زیر این مساله را برای شما روشن‌تر خواهد کرد:
[code]
<div class="row">
<div class="col-md-12">Full width</div>
</div>
<div class="row">
<div class="col-md-3">25%</div>
<div class="col-md-3">25%</div>
<div class="col-md-6">50%</div>
</div>
[/code]
۳. Column Wrapping
در بوت استرپ قانونی وجود دارد که مجموع اندازه ستون‌های یک سطر نباید از ۱۲ بیشتر شود در غیر اینصورت ستون بعدی به سطر بعد انتقال خواهد یافت. به این اتفاق Column Wrapping گفته می‌شود. به مثال کاربردی زیر نگاهی بیندازید:
همانطور که میبینید ابتدا در سطر ما، دو ستون با اندازه‌های ۴ و ۸ انتخاب شده‌اند که موجب شدند سطرمان پر شود. در نتیجه، دیگر برای ستون سوم فضای کافی وجود نداشته وبه خط بعدی منتقل می‌شود.
[code]
<div class="row">
<div class="col-md-8"></div>
<div class="col-md-4"></div>
<div class="col-md-9">This column will move to the next line.</div>
</div>
[/code]
۴. کلاس‌های مختلف برای صفحه نمایش‌های متفاوت
کلاس col-md-NUMBER. را که پیش‌تر به آن اشاره کردیم به یاد دارید؟ در این کلاس - md – به معنای Medium است.
توجه داشته باشید که زمانی که شما از یک قاعده برای سایزهای مختلف دستگاه‌ها استفاده می‌کنید، سایزهای دیگر نیز این قاعده را به ارث می‌برند مگر آنکه برای آن‌ها قاعده جدید دیگری تعریف کرده باشید. مثال زیر به خوبی چگونگی سازگاری لایه بندی‌های گوناگون با سایزهای مختلف مرورگر شما را نشان خواهد داد.
[code]
<div class="row">
<div class="col-md-6"><p>Try resizing the browser to see this text and the image rearrange for optimal viewing. </p></div>
<div class="col-md-6"><img src="city.jpg" class="img-responsive"></div>
</div>
[/code]
5.Clearfix
در برخی سناریوها، زمانی که یک ستون دارای محتویات به نسبت زیادی باشد و ارتفاع خیلی بیشتری را نسبت به دیگر ستون‌ها به خود اختصاص دهد، ستون‌های بعدی دیگر از قانون قرارگیری به صورت پشت سرهم تبعیت نخواهند کرد و با پشته‌ای از سلول‌ها در سلول با ارتفاع کمتر مواجه خواهید شد. برای جلوگیری از چنین مشکلی بوت استرپ کلاس clearfix را معرفی کرده است. برای استفاده از آن می‌توانید از یک div کمکی با کلاس clearfix استفاده کنید. این کلاس تمام ستون‌ها را مجبور خواهد کرد که به ترتیب و پشت سرهم قرارگیرند. که البته برای بوت استرپ ۴ کاربرد ندارد و در بوت استرپ ۳ استفاده می‌شود.
[code]
<div class="row">
<div class="col-md-6 tall-column">A column much taller than the rest.</div>
<div class="col-md-6"></div>
<div class="clearfix"></div>
<div class="col-md-6"></div>
</div>
[/code]
۶. آفست‌ها (Offset)ها دوستان شما هستند
به صورت پیش‌فرض ستون‌ها به صورت کاملاً بهم چسبیده، بدون هیچ فضای اضافی میانشان، کنار هم قرار می‌گیرند. می‌توانید با استفاده از کلاس offsetها، حاشیه‌هایی را به سمت چپ ستون‌های خود اضافه کنید. برای مثال با اضافه کردن کلاس offset-2. به هر ستونی، آن ستون به سمت راست حرکت خواهد کرد به صورتی که انگار یک سلول نامرئی به اندازه col-md-2 در سمت چپ آن واقع شده‌است. شما می‌توانید با بکارگیری پسوندهای xs, sm, md, lg و xl آفست‌های مختلفی را برای صفحات نمایش با سایزهای متفاوت تعریف کنید.
شما همچنین می‌توانید از آفست‌ها برای قرارگیری ستون‌هایتان در وسط صفحه بهره ببرید.
[code]
<div class="row">
<div class="col-md-6 offset-md-3"></div>
<div class="col-md-10 offset-md-1"></div>
</div>
[/code]
۷. Reordering
کلاس reordering. به شما این اجازه را خواهد داد تا متناسب با سایز صفحه نمایش ترتیب ستون‌ها در سطرهایتان را اولویت بندی کنید. از کلاس -order. برای مدیریت ترتیب محتویات در هر سطر استفاده کنید. این کلاس‌ها به صورت کاملا ریسپانسیو تعریف شده‌اند و شما می‌توانید آن‌ها را به صورت order-1 , order-md-1, …. تعریف کنید. در واقع شما می‌توانید این کلاس را برای ۵ گرید مختلف تعریف شده در بوت استرپ استفاده کنید و برای تعیین اولویت آن‌ها از اعداد صحیح ۱ تا ۱۲ استفاده کنید.
[code]
<div class="container">
<div class="row">
<div class="col">
First, but unordered
</div>
<div class="col order-12">
Second, but last
</div>
<div class="col order-1">
Third, but first
</div>
</div>
</div>
[/code]
از سویی دیگر کلاس‌های ریسپانسیو .order-first و order-last نیز می‌توانند ترتیب المان‌ها را عوض کنند. در‌واقع با قراردان مقدارهای order: -1 و oredr: 13 به ترتیب اولویت‌های محتویات را تغییر می‌دهد.
[code]
<div class="container">
<div class="row">
<div class="col order-last">
First, but last
</div>
<div class="col">
Second, but unordered
</div>
<div class="col order-first">
Third, but first
</div>
</div>
</div>
[/code]
نتیجه گیری:
با خواندن این مقاله، اکنون شما با بخش‌های مهم و حیاتی در سیستم گرید بوت استرپ آشنا شده‌اید و آماده اید تا طراحی سایت ریسپانسیو خود را آغاز کنید. البته برای یادگیری بیشتر این موضوع می‌توانید به مستندات بوت استرپ مراجعه کنید.
منبع: طراحی سایت خلاقانه ستروکیت