مشاوره رایگان
دریافت لینک های دانلود دریافت پستی درب منزل مبلغ کل: تومان
جهت دریافت کد تخفیف به کانال تلگرام مراجعه و یا با پشتیبان آنلاین هماهنگ نمایید

جدول بندی در بوت استرپ : موبایل ، تبلت و دسکتاپ ها


ما در مقاله قبل ، مثالی را برای دستگاه های متوسط و بزرگ ارائه نمودیم. اکنون اجازه دهید آن را به سطح دیگری ببریم ، که در آن می خواهیم سیستم grid را برای اندازه خیلی کوچک گوشی نیز تغییر دهیم. به عبارتی ما می خواهیم گزینه ای برای ستون ها اضافه کنیم که برای تبلت ها به 75%/25% تقسیم شود ، مانند مورد زیر:

<div class = "col-sm-3 col-md-6 col-lg-4">....</div>
<div class = "col-sm-9 col-md-6 col-lg-8">....</div>

این کار ، 3 چیدمان ستون مختلف در هر نقطه به ما می دهد. در تلفن ، در سمت چپ 75٪ و در سمت راست 25٪ خواهد بود. در یک تبلت ، این میزان دوباره  50%/50% خواهد بود ، و در نمایشگر بزرگ ، 33%/66% خواهد بود. سه چیدمان مختلف برای هر یک از سه اندازه ، به صورت واکنش گرا خواهد بود . در مثال زیر آن را بررسی نمایید. (در اینجا برای هر ستون یک سبک بندی استفاده می شود. شما می توانید از آن اجتناب کنید.)

<div class = "container">
   <h1>Hello, world!</h1>

   <div class = "row">
      <div class = "col-sm-3 col-md-6 col-lg-8" style = "background-color: #dedef8; 
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing 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.</p>

         <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem 
            accusantium doloremque laudantium, totam rem aperiam, eaque ipsa 
            quae ab illo inventore veritatis et quasi architecto beatae vitae 
            dicta sunt explicabo.</p>
      </div>

      <div class = "col-sm-9 col-md-6 col-lg-4" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem 
            accusantium doloremque laudantium.</p>

         <p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, 
            consectetur, adipisci velit, sed quia non numquam eius modi tempora 
            incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p>
      </div>
      
   </div>
</div>

کد فوق ، نتیجه زیر را می دهد :

 

 

فصلِ: 5 , تعداد قسمت ها: 176 , سطح: صفر تا صد

این فصل در یک نگاه:

در این فصل پس از بررسی سیستم مسیریابی و طراحی صفحه نمایش ویدیو ها، به سراغ پنل کاربری خواهیم رفت و مباحث Model Binding و…

توجه: این دوره آموزشی به صورت پیوسته بر اساس آخرین نسخه ی ASP.NET Core بروزرسانی خواهد شد.   آموزش صفر تا صد طراحی سایت اشتراک ویدیو مشابه آپارات با استفاده از  ASP.NET CORE  MVC 3.0 و V…
فصلِ: 5 , تعداد قسمت ها: 135 , سطح: صفر تا صد

این فصل در یک نگاه:

توضیحات کلی مجموعه: در این مجموعه آموزشی، با استفاده از جدیدترین تکنولوژی ها و ابزار های مایکروسافت (دات نت)، به یک پروژه جذاب مدیریت آگهی مشابه دیوار می پردازیم. این آموزش در دو بخش کلی و…
فصلِ: 2 , تعداد قسمت ها: 13 , سطح: صفر تا صد
موضوعات: آموزش Bootstrap

این فصل در یک نگاه:

مباحث ریسپانسیو سازی شامل نقاط شکست مختلف - گرید سیستم - فلکس باکس - …

توجه : این دوره هیچ پیش نیازی ندارد و تمام مطالب از صفر آموزش داده شده است. از این رو شما برای شروع این دوره به هیچ مقدمه یا دوره دیگری نیاز ندارید. ویژگی های دوره آموزش بوت استرپ ۵ : - آم…
فصلِ: 6 , تعداد قسمت ها: 23 , سطح: صفر تا صد
موضوعات: آموزش Bootstrap

این فصل در یک نگاه:

فصل ششم: پروژهپروژه ا : ساخت یک قالب واکنشگرای گروه موسیقیپروژه 2 : ساخت قالب واکنشگرای سایت 5040…

سرفصل دوره آموزش فریم ورک بوت استرپ فصل اول : معرفی بوت استرپ طراحی واکنشگرا ( Responsive Design ) چیست ؟ با مفهوم طراحی واکنشگرا آشنا خواهید شد و تفاوت بین سایت واکنشگرا و سایت نسخه ی …
فصلِ: 4 , تعداد قسمت ها: 78 , سطح: متوسط

این فصل در یک نگاه:

در این دوره آموزشی، وبسایت ورزش3 را با استفاده از ASP.NET Core پیاده سازی می کنیم و همچنین اپ اندروید آن را هم با Xamarin متصل به سرور سایت طراحی و در نهایت نحوه انتشار آن در مارکت هایی مثل …
فصلِ: 4 , تعداد قسمت ها: 240 , سطح: صفر تا صد

این فصل در یک نگاه:

طراحی پنل مدیریت(دسته بندی)- دسته بندی یا category - نمایش دسته های فرعی در view با ورود به یکی از دسته های اصلی و آشن…

توضیحات کلی مجموعه: این مجموعه توسط فریمورک محبوب و دوست داشتنی bootstrap  و به صورت تضمینی  و صفر تا صد جهت یادگیری کارآموزان عزیز ارائه گردیده و دوستانی که این دوره را به طور کامل و دقیق…
فصلِ: 5 , تعداد قسمت ها: 201 , سطح: صفر تا صد

این فصل در یک نگاه:

ایجاد پروژه آژانس مسافرتی.....…

فصل اول: آشنایی با مبانی برنامه نویسی اندروید   آشنایی با معماری برنامه های اندرویدی ساخت شبیه ساز جهت تست پروژه اندروید آشنایی با دستور Toast و حلقه for در برنامه های اندروی…
فصلِ: 1 , تعداد قسمت ها: 2 , سطح: متوسط

این فصل در یک نگاه:

بهترین و پر بازده ترین روش تبدیل بازدیدکننده سایت به مشتری تبلیغات هدفمند و برند سازی هوشمندانه با ایمیل می باشد. ایمیل…

  وبینار(سمینار آنلاین) آموزش تکنیک های ایمیل مارکتینگ   اگر تا انتها این متن را مطالعه کنید نظر شما در مورد ایمیل مارکتینگ 180 درجه عوض می شود!! بر هیچکس پوشیده نیست که از سال 1972 که ای…
فصلِ: 4 , تعداد قسمت ها: 368 , سطح: صفر تا صد

این فصل در یک نگاه:

مباحث تکمیلی فریم ورک لاراول…

فصل اول :آموزش مقدماتی فریم ورک لاراول معرفی فریم ورک لاراول و پیشنیازهای انجام کار انجام کانفیگ های اولیه برای نصب و راه اندازی فریم ورک معرفی روش های نصب پروژه لاراولی از طریق سایت گی…
فصلِ: 1 , تعداد قسمت ها: 155 , سطح: صفر تا صد

این فصل در یک نگاه:

مباحث مقدماتی فریم ورک react.js…

توضیحات کلی مجموعه: فصل اول : آشنایی با مباحث مقدماتی فریم ورک react.js نصب و راه اندازی node.js  و کلیه پیش نیازهای لازم نصب فریم ورک react روی لوکال و انجام تست های لازم آغاز آشنایی …

تولید شده توسط کلیک سایت

پشتیبانی آنلاین
آماده پاسخگویی هستیم
انتخاب تصویر جهت ارسال:
در حال ضبط صدا

(جهت توقف و یا لغو ضبط از دکمه های زیر استفاده کنید)

توقف و ارسال :
لغو ضبط
در حال حاضر تمامی کارشناسان آفلاین هستند. همواره می توانید با شماره تلگرام / واتساپ 09010005000 به صورت آنلاین با ما در ارتباط باشید. جهت ورود به واتساپ کلیک کنید
0 پیام جدید
پشتیبان در حال تایپ ...
ارسال تصویر ضبط صدا
0 کارشناسان آنلاین می باشند
این گفت و گو توسط پشتیبان به اتمام رسید