نویسنده پشتیبانی وب یار
امتیاز مطلب
تعداد بازدید 3428
تاریخ بروزرسانی ۲۵ فروردین ۱۴۰۱

آموزش بوت استرپ و کلاس های well  و jumbotron

آموزش بوت استرپ و کاربرد کلاس ها

با سلام به وب یاری های عزیز، در مجموعه مقالات آموزش بوت استرپ با آموزش کلاس های well  و jumbotron ادامه می دهیم. همچنین این جلسه با ایجاد header برای صفحه در بوت استرپ آشنا خواهید شد. پس در ادامه با تیم طراحی سایت اصفهان وب یار همراه باشید.

 

کلاس well در بوت استرپ

با استفاده از کلاس well می توان یک کادر با گوشه های گرد و پس زمینه ی خاکستری رنگ در اطراف یک عنصر ایجاد کرد. برای استفاده شی well کافی است کلاس well را به یک div اضافه کنید. همچنین این کلاس مقداری padding دارد. لازم به ذکر است که به طور پیش فرض اندازه ی شی well در حالت متوسط قرار دارد که با استفاده از کلاس های well-sm و well-lg می توان این سایز را تغییر داد.

کلاس well-sm برای کوچکتر نشان دادن شی well استفاده می شود.
کلاس well-lg برای بزرگتر نشان دادن سایز well در بوت استرپ به کار برده می شود.

در کد زیر نحوه ی استفاده از این کلاس ها نشان داده شده است.

<div class="well">well class in Bootstrap</div>
<div class="well well-sm">well-sm class in Bootstrap</div>
<div class="well well-lg">well-lg class in Bootstrap</div>

 

خروجی این کد را می توانید در تصویر زیر مشاهده کنید.

کلاس well در بوت استرپ

 

آموزش کلاس jumbotron در بوت استرپ

برای جلب توجه کاربران به یک سری از اطلاعات از کلاس jumbotron استفاده می کنیم. این کلاس همانند کلاس well به صورت یک جعبه ی خاکستری رنگ با گوشه های گرد شده نمایش داده می شود. تفاوت آن با کلاس well در این است که در کلاس jumbotron برای جلب توجه کاربر اندازه ی فونت متن در کادر خاکستری رنگ، بزرگ است. کلاس jumbotron در تگ div استفاده می شود. همه ی عناصر HTML، همه ی کلاس ها و عناصر بوت استرپ را می توان در این کلاس استفاده کرد.
شما می توانید از jumbotron هم در داخل کلاس container و هم خارج از آن استفاده کنید. در صورتی که از jumbotron در خارج از کلاس container  استفاده کنید، جعبه ی jumbotron تا لبه ی صفحه گسترش می یابد. ولی اگر از آن در داخل کلاس container استفاده کنید، جعبه ی jumbotron با لبه های صفحه فاصله خواهد داشت.

در کد زیر نحوه ی استفاده از این کلاس را مشاهده کنید.

<div class="jumbotron">
<h3>What is Responsive Web Design?</h3>
<p> Responsive web design is about creating web sites which automatically adjust themselves to look good on all devices, from small phones to large desktops. </p>
</div>

خروجی کد بالا:

کلاس jumbotron در بوت استرپ

 

ایجاد header برای صفحه در Bootstrap

جهت ایجاد header برای صفحه در بوت استرپ کافی است در تگ div از کلاس page-header استفاده کنید. این کلاس یک خط افقی زیر heading و همچنین یک فضای اضافی در اطراف عناصر ایجاد می کند. به کد زیر دقت کنید.

<div class="page-header">
<h1>Bootstrap</h1>
</div>
<p> A page header is like a section divider. The .page-header class adds a horizontal line under the heading (+ adds some extra space around the element): </p>

 

خروجی کد بالا در تصویر زیر نشان داده شده است.

ایجاد header در بوت استرپ

خب دوستان، این جلسه هم به پایان رسید. اگر به یادگیری بوت استرپ علاقمند هستید می توانید  مرجع اموزش بوت استرپ و نیز مقالات شبکه بندی در بوت استرپ، استایل دهی به متن در بوت استرپ، تصاویر در بوت استرپ و جداول در بوت استرپ را مطالعه کنید. در مقالات آینده آموزش بوت استرپ ادامه خواهد داشت. با عضویت در کانال webyar_net@ از آخرین آموزش های تیم وب یار با خبر شوید.

 

مقالات مرتبط

نشانی ایمیل شما منتشر نخواهد شد.