Loading...بوت استرپ چندین سال است که در وب کاربرد دارد. به‌عنوان یک فریم ورک طراحی واکنش گرا یا Responsive که برای ساخت وب‌سایت‌ها یا اپلیکیشن‌های پویا (Dynamic) و ثابت (Static) استفاده می‌شود، Bootstrap شهرت بسیاری در Github به دست آورده است و به یک ابزار مفید و کارآمد برای طراحان وب و برنامه نویسان تبدیل‌شده تا با کمک آن وب‌سایت‌های Responsive را در کمترین زمان طراحی کنند.
به دلیل کلاس‌های ساده برای استفاده و فریم ورک وابسته به ماژول، Bootstrap کار دولوپرها را بسیار ساد‌ه‌تر کرده است چرا که با استفاده از آن برنامه نویسان می‌توانند به‌راحتی با استفاده از طراحی‌های مدرن مختلف و استاندارد، کمتر کد بزنند.
بوت استرپ از jQuery نیز پشتیبانی می‌کند و بسیاری از المان‌ها و عناصر محبوب جاوا اسکریپت ازجمله carousel، gallery و موارد دیگر را نیز در خود دارد. فقط کافی است کلاس‌های درستی را به روی مارک‌آپ یا زبان نشانه‌گذاری خود قرار دهید تا کارتان ساده شود.
مقاله مرتبط: Bootstrap چیست؟
در این آموزش، یاد می‌گیرید که چطور با بوت استرپ کار کنید و آن را برای طراحی‌های گوناگون شخصی‌سازی کنید.
چند سایت طراحی‌شده با Bootstrap
پیش از اینکه شروع به کندوکاو در دنیای Bootstrap کنیم می‌خواهیم به برخی از بهترین نمونه وبسایت‌هایی که با بوت استرپ ساخته‌شده‌اند نگاهی بیندازیم:
The Eddy NYC Restaurant
Eddy یک رستوران در منطقه East Village است که از آوریل ۲۰۱۴ شروع به کار کرده است. این سایت با استفاده از فریم ورک بوت استرپ و با یک طراحی ساده و حداقل رنگ‌ها طراحی شده است.
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 – این پوشه شامل نسخه فایل جاوا اسکریپت معمولی و خلاصه‌شده بوت استرپ است.
ساختار فایل برای این آموزش
قبل از شروع باید ساختار فایل خودمان را ایجاد کنیم. ما سه پوشه و یک فایل HTML خواهیم داشت که نقش هر یک را در ادامه توضیح میدهیم:
- Html – این فایل اصلی ما خواهد بود. تمام طراحی‌های ما به روی این فایل انجام می‌شود.
- پوشه js – برای فایل‌های جاوا اسکریپت انتخاب شده است.
- پوشه fonts- برای فونت‌های glyphicons ساخته‌شده است.
- پوشه images – برای قرار گرفتن تصاویر ساخته‌شده است.
- پوشه css- stylesheets در این پوشه قرار می‌گیرد.
زبان نشانه‌گذاری (Markup)
قبل از اینکه کار کردن با بوت استرپ را آغاز کنیم باید ابتدا فایل HTML را ایجاد کرده و آن را به فایل‌های CSS و جاوا اسکریپت متصل کنیم. اولین دستورات به شرح زیر هستند.
|
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ ۱۰ ۱۱ ۱۲ ۱۳ ۱۴ ۱۵ |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta content="width=device-width, initial-scale=1.0" name="viewport"> <title>Bootstrap Grid System</title> <link href='http://fonts.googleapis.com/css?family=Lato:300,400,700,900|Raleway:400,300,500,600,700,800,900' rel='stylesheet' type='text/css'> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="css/custom.css"> </head> <body> </body> </html> |
سیستم گرید ستونی بوت استرپ (Bootstrap’s Column Grid System)
اگرچه بوت استرپ ۲ یک CSS انتخابی سازگار با موبایل به فریم ورک خود اضافه کرد، بوت استرپ ۳ یک سیستم گرید ۱۲ ستونی در پکیج خود دارد که رویکرد «Mobile First» را دنبال می‌کند، بدین معنا که همه‌چیز در این نسخه جدید ابتدا برای سایزهای صفحه‌نمایش‌های موبایل طراحی شده و سپس به صفحه‌نمایش‌های بزرگ‌تر می‌رسد.
این نسخه، چهار سایز گرید دارد:
- دستگاه‌های بسیار کوچک (col-xs) – برای تلفن‌های همراهی که نمایش‌گر آن‌ها کوچک‌تر از ۷۶۸ پیکسل است.
- دستگاه‌های کوچک (col-sm) – برای تبلت‌هایی که صفحه‌نمایش آن‌ها برابر یا بزرگ‌تر از ۷۶۸ پیکسل است.
- دستگاه‌های متوسط (col-md) – برای دسکتاپ‌هایی که صفحه‌نمایش آن‌ها بزرگ‌تر یا برابر ۹۹۲ پیکسل است.
- دستگاه‌های بزرگ (col-lg) – برای دسکتاپ‌هایی که صفحه‌نمایش آن‌ها بزرگ‌تر یا برابر با ۱۲۰۰ پیکسل است.
مدیا کوئری‌های زیر را ببینید.
|
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ ۱۰ ۱۱ |
/* Extra small devices (phones, less than 768px) */ /* No media query since this is the default in Bootstrap */ /* Small devices (tablets, 768px and up) */ @media (min-width: @screen-sm-min) { ... } /* Medium devices (desktops, 992px and up) */ @media (min-width: @screen-md-min) { ... } /* Large devices (large desktops, 1200px and up) */ @media (min-width: @screen-lg-min) { ... } |
برای بزرگ کردن عرض حداکثری که برای سایز هر دستگاه در نظر گرفته شده، بوت استرپ از مدیا کوئری‌های زیر استفاده می‌کند. برای اطلاعات بیشتر صفحه bootstrap CSS را ببینید.
|
۱ ۲ ۳ ۴ |
@media (max-width: @screen-xs-max) { ... } @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... } @media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... } @media (min-width: @screen-lg-min) { ... } |
Container و Row
پیش از اینکه ما از این کلاس‌های آماده برای گرید خود استفاده کنیم، باید یک قالب برای سایت ایجاد کنیم که با کلاس «Container» و «Row» انجام می‌شود. مثال زیر را ببینید.
|
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ |
<div class="container"> <div class="row"> <div class="col-md-3">col-md-۳</div> <div class="col-md-3">col-md-۳</div> <div class="col-md-3">col-md-۳</div> <div class="col-md-3">col-md-۳</div> </div> </div> |
اگر می‌خواهید کنترل بیشتری به روی چیزی که در سایز خاصی از نمایش‌گر ظاهر می‌شود داشته باشید، می‌توانید کلاس‌های دیگری را در کلاس گرید اول قرار دهید. به‌عنوان‌مثال، اگر می‌خواهید دو ستون در سمت راست و چپ دستگاه‌های کوچک‌تر ایجاد کنید می‌توانید col-sm-6 را در کنار کلاس col-md-4 قرار دهید. مثال زیر را ببینید.
|
۱ ۲ ۳ ۴ ۵ ۶ ۷ |
<div class="container"> <div class="row"> <div class="col-md-4 col-sm-6">col-md-۴ with col-sm-۶</div> <div class="col-md-4 col-sm-6">col-md-۴ with col-sm-۶</div> <div class="col-md-4 col-sm-6">col-md-۴ with col-sm-۶</div> </div> </div> |
اجرای دستورات
حالا که می‌دانیم چطور می‌توانیم از کلاس‌های گرید ساده و اولیه استفاده کنیم، نوبت آن می‌رسد که آن‌ها را در یک مثال واقعی اجرا کنیم. دستورات زیر برای ستون‌ها و گریدهای ما هستند.
|
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ ۱۰ ۱۱ ۱۲ ۱۳ ۱۴ ۱۵ ۱۶ ۱۷ ۱۸ ۱۹ ۲۰ ۲۱ ۲۲ ۲۳ ۲۴ ۲۵ ۲۶ ۲۷ ۲۸ ۲۹ ۳۰ ۳۱ ۳۲ ۳۳ ۳۴ ۳۵ ۳۶ ۳۷ ۳۸ ۳۹ ۴۰ ۴۱ ۴۲ ۴۳ ۴۴ ۴۵ ۴۶ ۴۷ ۴۸ ۴۹ ۵۰ ۵۱ ۵۲ ۵۳ ۵۴ ۵۵ ۵۶ ۵۷ ۵۸ ۵۹ ۶۰ ۶۱ ۶۲ ۶۳ ۶۴ ۶۵ ۶۶ ۶۷ ۶۸ ۶۹ ۷۰ ۷۱ ۷۲ ۷۳ ۷۴ ۷۵ ۷۶ ۷۷ ۷۸ ۷۹ |
<!-- HEADER --> <header> <div class="container"> <!-- TEXT ROW --> <div class="row"> <div class="col-lg-12 col-sm-11"> <h1>Bootstrap ۳</h1> <h2>This is how you work with Bootstrap Grid System</h2> </div> </div> <!-- IPHONE ROW --> <div class="row"> <div class="col-lg-10 col-lg-12"> <div class="col-md-4 col-sm-12 conceal"> <img alt="iphone" src="images/iphone.png"> </div> <div class="col-lg-4 col-sm-3 "> <img alt="iphone" src="images/iphone.png"> </div> <div class="col-lg-4 col-sm-3 conceal"> <img alt="iphone" src="images/iphone.png"> </div> </div> </div> </div> </header> <section> <div class="container"> <!-- ۳ BOXES ROW --> <div class="row"> <div class="col-md-3 col-sm-2"> <span class="glyphicon glyphicon-download-alt"></span> <h3>Download</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div class="col-md-3 col-sm-2"> <span class="glyphicon glyphicon-bullhorn"></span> <h3>Advertise</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <aside class="col-lg-3 col-sm-2"> <h3>Offset</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> <img src="images/ipad.png" alt="ipad"/> </aside> </div> </div> </section> <section class="call-to-action"> <div class="container"> <!-- CALL TO ACTION ROW --> <div class="row"> <div class="col-lg-12 col-md-11"> <h2> You want to learn how to use Bootstrap? </h2> <button type="button" class="btn btn-default center">Back to the Article</button> </div> </div> </div> </section> <footer> <p class="center">© ۲۰۱۵ <a href="https://designmodo.com" target="_blank">designmodo</a>. Bootstrap - Grid System</p> </footer> |
همان‌طور که می‌توانید در کدهای ما ببینید، ما چندین ردیف در یک کانتینر ایجاد کرده‌ایم. درون هر ردیف تگ‌های هدر، تصاویر و موارد دیگر با سایزهای گرید مخصوص به خود قرار گرفته‌اند. در نظر داشته باشید که ما از دو کلاس برای سایز هر گرید استفاده کرده‌ایم تا ظاهری که ایجاد می‌کنیم برای سایزهای مختلف قابل‌کنترل باشد.
حالا چند CSS سفارشی برای لغو و اصلاح کردن استایل‌های پیش‌فرضی که توسط بوت استرپ ارائه‌شده است اضافه می‌کنیم.
|
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ ۱۰ ۱۱ ۱۲ ۱۳ ۱۴ ۱۵ ۱۶ ۱۷ ۱۸ ۱۹ ۲۰ ۲۱ ۲۲ ۲۳ ۲۴ ۲۵ ۲۶ ۲۷ ۲۸ ۲۹ ۳۰ ۳۱ ۳۲ ۳۳ ۳۴ ۳۵ ۳۶ ۳۷ ۳۸ ۳۹ ۴۰ ۴۱ ۴۲ ۴۳ ۴۴ ۴۵ ۴۶ ۴۷ ۴۸ ۴۹ ۵۰ ۵۱ ۵۲ ۵۳ ۵۴ ۵۵ ۵۶ ۵۷ ۵۸ ۵۹ ۶۰ ۶۱ ۶۲ ۶۳ ۶۴ ۶۵ ۶۶ ۶۷ ۶۸ ۶۹ ۷۰ ۷۱ ۷۲ ۷۳ ۷۴ ۷۵ ۷۶ ۷۷ ۷۸ ۷۹ ۸۰ ۸۱ ۸۲ |
/* Custom CSS here */ body{ width: ۱۰۰%; font-family: 'Lato', sans-serif; } header{ background-color: #۶۲۴۸۸a; width: ۱۰۰%; } header{ background-color: #۶۲۴۸۸a; width: ۱۰۰%; margin: ۰; padding: ۴۰px ۰ ۰ ۰; } h1{ font-family: 'Raleway', sans-serif; font-size: ۷۰px; text-align: center; color: #fff; font-weight: ۶۰۰; margin: ۲۲px ۰; } h2{ font-family: 'Lato', sans-serif; font-size: ۳۰px; text-align: center; color: #fff; font-weight: ۳۰۰; margin: ۲۲px ۰; } h3{ font-family: 'Raleway', sans-serif; font-size: ۲۸px; font-weight: ۶۰۰; text-align: center; } section{ width: ۱۰۰%; padding: ۶۰px ۰; } .center{ margin: ۰ auto; text-align: center; display: block; } .glyphicon { font-size: ۷۰px; margin: ۱۵px auto; display: block; width: ۸۳px; } .call-to-action{ background-color: #۱۳c4af; } img{ margin: ۰ auto; display: block; } footer{ padding: ۲۰px 0px; } @media screen and (max-width: ۷۶۸px){ .conceal{ display: none; } } |
چیزی که با این کدها می‌سازید چیزی شبیه به تصویر زیر است.
تنظیم عرض ستون‌ها با استفاده از Offset
مورد بعدی که بررسی خواهیم کرد، ویژگی‌های Offset بوت استرپ است که به کمک آن می‌توانیم بین ستون‌ها فاصله بیندازیم. اگر به تصویری که از نتیجه‌ی کدهای ما به دست آمد با دقت بیشتری نگاه کنید میبینید سه آیفونی که در تصویر دیده می‌شوند، بیشتر در سمت چپ صفحه‌نمایش قرار گرفته‌اند و باکس Advertise و Download طوری در کنار هم قرار گرفته‌اند که انگار هیچ فاصله‌ای با هم ندارند.
برای ایجاد فضا در اینجا باید از کلاس offset در میان کلاس‌های گرید استفاده کنیم. کد ترکیبی ما باید این‌گونه باشد: col-gridsize-offset-number-of-columns. ما می‌خواهیم یک offset-2 تعریف کنیم، بدین معنا که می‌خواهیم فاصله‌ای بین دو ستون ایجاد کنیم که با این کار ستون را به نقطه دلخواه‌مان در صفحه ببریم. این را در نظر داشته باشید که فاصله همیشه در سمت چپ اضافه می‌شود و می‌بایست با سایزهای فعلی گرید هماهنگ باشد.
حالا این کلاس را به سایزهای آیفون و ستون‌های مربوط به تبلیغات و دانلود اضافه می‌کنیم. کدهای زیر را ببینید.
|
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ ۱۰ ۱۱ ۱۲ ۱۳ ۱۴ ۱۵ ۱۶ ۱۷ ۱۸ ۱۹ ۲۰ ۲۱ ۲۲ ۲۳ ۲۴ ۲۵ ۲۶ ۲۷ ۲۸ ۲۹ ۳۰ ۳۱ ۳۲ ۳۳ ۳۴ ۳۵ ۳۶ ۳۷ ۳۸ ۳۹ ۴۰ ۴۱ ۴۲ ۴۳ ۴۴ ۴۵ ۴۶ ۴۷ ۴۸ ۴۹ ۵۰ ۵۱ ۵۲ ۵۳ ۵۴ ۵۵ ۵۶ ۵۷ ۵۸ ۵۹ ۶۰ ۶۱ ۶۲ |
<!-- HEADER --> <header> <div class="container"> <!-- TEXT ROW --> <div class="row"> <div class="col-lg-12 col-sm-11"> <h1>Bootstrap ۳</h1> <h2>This is how you work with Bootstrap Grid System</h2> </div> </div> <!-- IPHONE ROW --> <div class="row"> <div class="col-lg-10 col-lg-12 col-lg-offset-1"> <div class="col-md-4 col-sm-12 conceal"> <img alt="iphone" src="images/iphone.png"> </div> <div class="col-lg-4 col-sm-3 "> <img alt="iphone" src="images/iphone.png"> </div> <div class="col-lg-4 col-sm-3 conceal"> <img alt="iphone" src="images/iphone.png"> </div> </div> </div> </div> </header> <section> <div class="container"> <!-- ۳ BOXES ROW --> <div class="row"> <div class="col-md-3 col-sm-2 col-lg-offset-1"> <span class="glyphicon glyphicon-download-alt"></span> <h3>Download</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div class="col-md-3 col-sm-2 "> <span class="glyphicon glyphicon-bullhorn"></span> <h3>Advertise</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <aside class="col-lg-3 col-sm-2 col-lg-offset-1"> <h3>Offset</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> <img src="images/ipad.png" alt="ipad"/> </aside> </div> </div> </section> |
در این کدها، ما فاصله‌ای بین ستون مربوط به تصاویر آیفون و همچنین ستون‌های 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 – ستون مورد نظر را به سمت چپ و به تعداد ستون‌ها حرکت می‌دهد، شروع حرکت آن نیز جایی است که به‌طور معمول قرار می‌گیرد.
حالا این مثال را در عمل نشان میدهیم:
|
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ ۱۰ ۱۱ ۱۲ ۱۳ ۱۴ ۱۵ ۱۶ ۱۷ ۱۸ ۱۹ ۲۰ ۲۱ ۲۲ ۲۳ ۲۴ ۲۵ ۲۶ ۲۷ ۲۸ |
<section> <div class="container"> <!-- ۳ BOXES ROW --> <div class="row"> <aside class="col-lg-3 col-sm-2 col-lg-push-8"> <h3>Offset</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> <img src="images/ipad.png" alt="ipad"/> </aside> <div class="col-md-3 col-sm-2 col-lg-offset-1"> <span class="glyphicon glyphicon-download-alt"></span> <h3>Download</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div class="col-md-3 col-sm-2 col-lg-pull-6"> <span class="glyphicon glyphicon-bullhorn"></span> <h3>Advertise</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> </div> </div> </section> |
در این کد، محل قرار گرفتن باکس offset تغییر پیدا کرده و در بالای دو ستون دیگر قرار گرفته است. سپس، یک push برای ۸ ستون نسبت به باکس offset و یک pull برای ۶ ستون از باکس تبلیغات تنظیم‌شده است. این بار باکس‌ها به‌درستی ردیف می‌شوند اما در صفحه‌نمایش‌های کوچک‌تر ابتدا باکس offset نمایش داده می‌شود.
ستون‌های تو در تو
Bootstrap این امکان را می‌دهد که یک row درون row دیگر بسازید و برای آن سایز گرید تعریف کنید. نکته خوبی که دراین‌باره وجود دارد این است که برای این کار نیاز نیست از تمام ۱۲ ستون موجود استفاده کنید.
در این مثال چند ستون در هم می‌سازیم تا ببینیم چطور کار می‌کند.
همان‌طور که میبینید، ما چند Row درون هم ساختیم و از ۶ سایز گرید ستون استفاده کردیم. نتیجه این کد چیزی شبیه به تصویر زیر خواهد بود:
جمع‌بندی
ما در این آموزش نکات اولیه‌ی سیستم Bootstrap Grid را آموختیم، شما می‌توانید این دستورات و کلاس‌ها را در کار خودتان اعمال کنید و نتیجه آن را ببینید. پیشنهاد می‌کنیم برای اطلاعات بیشتر درباره کلاس‌ها، نگاهی به مستندات بوت استرپ داشته باشید.
افزودن دیدگاه