در خدمت شما هستیم با آموزش Bootstrap جلسه پنجم (تمرینcolوrow)
آموزش Bootstrap جلسه پنجم (تمرینcolوrow) از سری آموزش های تک قسمتی است.
سلام برنامه در این جلسه یک مثال عملی از نحوه چیدمان عناصر در بوت استرپ را آموزش میدهد.
ما در این آموزش باکس هایی مشابه باکس های یک سایت طراحی میکنیم و آن را برای دستگاه های مختلف مرتب میکنیم.
بر اساس col ها و row ها صفحه ای متناسب برای دکستاپ و موبایل میسازیم.
ساخت col ها به شکل زیر است که برای شما لیست کرده ایم:
- col-lg : از این col که اعداد ۱ تا ۱۲ را به خود میگیرد برای صفحه نمایش های عریض استفاده میشود.
- col-md : این col نیز اعداد ۱ تا ۱۲ به خود میگیرد و برای صفحه نمایش های معمولی استفاده میشود.
- col-sm : این col برای تبلت ها و کتاب خوان ها استفاده میشود و مقدار عددی ۱ تا ۱۲ میگیرد.
- col-xs: برای گوشی های هوشمن و موبایل های تا ۷ اینچ استفاده میشود و مقدار عددی ۱ تا ۱۲ میگیرد.
شما میتوانید از تمام مقادیر بالا در کنار هم استفاده کنید به قطعه کد زیر دقیت کنید.
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12"></div>
در کد بالا ما برای یک div گفتیم که در حالت مانیتور عریض مقدار ۴ بگیرد در معمولی ۴ در تبلت ۴ و در موبایل ۱۲
این یعنی اگر یک row مقدار ۱۲ باشد ۴ قسمت آن متعلق به این div در حالت مانیتور است.
مثال زیر یک حالت کلی از اجرای col ها در حالت sm است:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>
<div class="col-sm-8" style="background-color:lavenderblush;">.col-sm-8</div>
</div>
<Br>
<div class="row">
<div class="col-sm-2" style="background-color:lavender;">.col-sm-2</div>
<div class="col-sm-8" style="background-color:lavenderblush;">.col-sm-8</div>
<div class="col-sm-2" style="background-color:lavender;">.col-sm-2</div>
</div>
</div>
</body>
</html>
همانطور که در بالا میبینید در یک row که نهایت تعداد آن ۱۲ است ما ۲ col با مقدار ۴ و ۸ قرار دادیم.
در خط بعدی نیز ۳ col با مقادیر ۲ ۸ ۲ قار دادیم که هر دو خط مجموعشان میشود ۱۲٫
می توانید دیگر قسمت ها را در لینک زیر ببینید
آموزش Bootstrap جلسه چهارم (col/row)
آموزش Bootstrap جلسه ششم (تایپوگرافی)
شما می توانید این آموزش را به صورت آنلاین از ویدیو زیر ببینید
آموزش Bootstrap جلسه پایانی (Design Template)
آموزش Bootstrap جلسه سی و پنجم (Simple Template)
آموزش Bootstrap جلسه سی و چهارم (Affix)
آموزش Bootstrap جلسه سی و سوم (Scrollspy)
آموزش Bootstrap جلسه سی و دوم (Popover)