اضافه کردن ستون به صفحه وب
بسیار خب! تا به اینجا تنها با یک خط کد موفق شدید چندین استایل مختلف به عنصر خود اضافه کنید. حال می‌خواهیم یک بلوک جدید ایجاد کرده، و داخل آن سه ستون مشترک ایجاد کنیم. برای اینکار نیز از container ها استفاده می‌کنیم. اگر بخواهید ستون‌ها را در یک ردیف ایجاد کنید، باید از یک کلاس دیگر به نام row استفاده کنید. بنابراین کدهای پیش‌فرض زیر را در قسمت body صفحه وب خود اضافه کنید.
<div class="container">
<div class="row">
<div>
<h3>ستون 1</h3>
<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است</p>
<p>... چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است</p>
</div>
<div>
<h3>ستون 2</h3>
<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است</p>
<p>... چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است</p>
</div>
<div>
<h3>ستون 3</h3>
<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است</p>
<p>... چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است</p>
</div>
</div>
</div>همانطور که ممکن است متوجه شده باشید، ستون ها به پایین عنصر چسبیده‌اند. بنابراین بهتر است یک margin-top با مقدار 5 به تگ اصلی خود اضافه کنیم. مانند زیر کلاس container را ویرایش کنید.
<div class=”container mt-5″>
نتیجه تا به اینجا بدین صورت خواهد بود.
حال برای اینکه ستون‌ها در یک ردیف قرار گیرند از یک کلاس به نام col استفاده می‌کنیم. این کلاس را به هر یک از ستون‌ها اضافه کنید. نتیجه به صورت زیر خواهد بود.
در نهایت تمامی کدهای لازم برای طراحی ستون این صفحه به صورت زیر خواهد بود.
<div class="container mt-5">
<div class="row">
<div class="col">
<h3>ستون 1</h3>
<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است</p>
<p>... چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است</p>
</div>
<div class="col">
<h3>ستون 2</h3>
<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است</p>
<p>... چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است</p>
</div>
<div class="col">
<h3>ستون 3</h3>
<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است</p>
<p>... چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است</p>
</div>
</div>
</div>در این پست به صورت مقدماتی درمورد بوت استرپ صحبت کردیم و برخی از مهم‌ترین کلاس‌های آن را آموزش دادیم
همه درس ها به ترتیب
دستورات ضروری