با سلام به وب یاری های عزیز، در مجموعه مقالات آموزش بوت استرپ با آموزش کلاس های well و jumbotron ادامه می دهیم. همچنین این جلسه با ایجاد header برای صفحه در بوت استرپ آشنا خواهید شد. پس در ادامه با تیم طراحی سایت اصفهان وب یار همراه باشید.
با استفاده از کلاس 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>
خروجی این کد را می توانید در تصویر زیر مشاهده کنید.
برای جلب توجه کاربران به یک سری از اطلاعات از کلاس 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>
خروجی کد بالا:
جهت ایجاد 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>
خروجی کد بالا در تصویر زیر نشان داده شده است.
خب دوستان، این جلسه هم به پایان رسید. اگر به یادگیری بوت استرپ علاقمند هستید می توانید مرجع اموزش بوت استرپ و نیز مقالات شبکه بندی در بوت استرپ، استایل دهی به متن در بوت استرپ، تصاویر در بوت استرپ و جداول در بوت استرپ را مطالعه کنید. در مقالات آینده آموزش بوت استرپ ادامه خواهد داشت. با عضویت در کانال webyar_net@ از آخرین آموزش های تیم وب یار با خبر شوید.
چرا دانش برنامه نویسی برای هک و امنیت اهمیت دارد؟چه زبانی را برای شروع باید انتخاب کنیم؟ هک واژه ای است که این روز ها برای همه افراد ، به خصوص افرادی که در حوزه IT و فناوری اطلاعات فعالیت می کنند بسیار جالب و هیجان انگیز است. به یک هکر یک اسباب بازی جدید بده، اولین کاری که می کنه جدا کردن قطعاتش و…
این روزها ، داشتن یک صفحه اینستاگرام پر بازدید، آرزوی خیلی‌هاست. در دنیای امروز رسانه‌های اجتماعی به یکی از ابزارهای قدرتمند و پرطرفدار تبدیل شده‌اند و هر روز به میزان محبوبیت آن‌ها افزوده می‌شود. در کشور ما، رسانه اجتماعی اینستاگرام محبوبیت بسیار زیادی دارد و بخش قابل توجهی از ایرانیان در گروه‌های سنی مختلف زمان زیادی را به حضور در این رسانه اختصاص می‌دهند. در…
“اگه برنامه تون درست کار نمی‌کنه اصلاً نگران نشید چرا که اگر همه‌چیز درست کار کنه، شما بیکار می‌شید.” قانون موشر چرا این مقاله را با این جمله معروف از موشر بزرگ شروع کردیم؟ شرکت های طراحی اپلیکیشن ، در بین همه شرکت ها و مجموعه هایی که در زمینه برنامه نویسی فعالیت می کنند ، خدمات بزرگی را به جوامع و کسب و کار…