شما می توانید در هر یک ستون های بوت استرپی خود ، ستون های 12 تایی جدیدی را تشکیل داده و در طرح خود بسازید . این کار بوسیله ی ساخت سطری جدید در داخل ستون مورد نظر و سپس ایجاد ستون های جدید انجام می شود .
بخش 16 – طراحی وب واکنش گرا ، ستون های تو در تو در بوت استرپ bootstrap
شما می توانید در هر یک ستون های بوت استرپی خود ، ستون های 12 تایی جدیدی را تشکیل داده و در طرح خود بسازید . این کار بوسیله ی ساخت سطری جدید در داخل ستون مورد نظر و سپس ایجاد ستون های جدید انجام می شود . اما در نظر داشته باشید که پهنای سطر و ستون های جدید به والد خود محدود خواهد شد و به اندازه ی آن در خواهد آمد .
بگذارید تا این اتفاق را با یک تمرین به شما نشان دهیم . در پروژه ی HTML خود یک فایل جدید با عنوان nested.html ایجاد کنید . و سپس کدهای اولیه ی Bootstrap را که در تمرین های قبلی برایتان شرح دادیم به آن اضافه نمایید . و همچنین فایل CSS به نام iliasoft.css را که قبلن برایتان ایجاد کرده بودیم را به کدهای خود ضمیمه کنید . در این صورت فایل HTML شما باید بصورت زیر در آمده باشد :
اجازه دهید تا یک container و یک سطر بصورت زیر به آن اضافه نماییم :
هدف ما نمایش سایز متوسط یا medium-size می باشد که در اینجا دو ستون ایجاد خواهیم کرد . و می دانیم که اگر بخوانیم دو ستون بوت استرپی ایجاد کنیم باید هر کدام از آنها را شش تایی تعریف کنیم . بنابراین برای اینکار باید از کلاس col-md-6 برای هر ستون استفاده می کنیم .
همچنین در این تمرین ما دو کلاس col1 و col2 را برای هر ستون در نظر گرفته ایم که از فایل iliasoft.css می آیند تا به ما کمک کنند که برای مجزا کردن هر ستون از رنگ پس زمینه ی متفاوتی استفاده نمایید . حال صفحه ی HTML ما بعد از اجرا باید شبیه به تصویر زیر شده باشد :
حال می خواهیم در ستون اول col1 یک سطر جدید ایجاد کرده و در آن ستون های تودرتو بسازیم . برای ایجاد سطر جدید کد زیر را به ستون اول خود اضافه می کنیم :
حالا که سطر جدید را ایجاد کردیم ، درون سطر دو ستون جدید ایجاد خواهیم کرد .
مشاهده می کنید که دو ستون جدید را در ستون قبلی ایجاد کردیم و همچنین از کلاس های col3 و col4 که در تمرین های قبلی در فایل iliasoft.css ساخته بودیم استفاده نمودیم تا پس زمینه ی رنگی برایشان ایجاد کنیم .
توانایی طراحی ستون های تو در تو هنگامی که طرح های پیچیده ای زدید دستتان خواهد آمد . شما همچنین می توانید زیرمجموعه های بیشتر و تودرتو تری را داخل هم ایجاد کنید و به سطوح بیشتری از پیچیدگی دست پیدا کنید . این روند می تواند تا جایی که به طرح دلخواه خود دست پیدا کنید ادامه پیدا کند .
دانلود سورس تمرین این قسمت
شاد و سلامت باشید
محمد جعفری فوتمی