مقدمه
درود خدمت شما دوستان و علاقه مندان به آموزش برنامه نویسی و طراحی وب. همچنان در خدمت شما هستم با آموزش بوت استرپ . اگر به خاطر داشته باشید در جلسه قبل با آموزش ساخت جامبوترون در بوت استرپ آشنا شدیم. در این جلسه با آموزش کلاس well در بوت استرپ در خدمت شما هستم.
کاربرد کلاس well در Bootstrap
گاهی اوقات در طراحی صفحات وب جهت متمایز کردن یک بخش متون از قسمت های دیگر لازم است تا بخش محتوای متمایز شده را داخل جعبه ای خاص یا کادری مشخص قرار دهید. کلاس well در Bootstrap یک کلاس تعریف شده در بوت استرپ می باشد که به شما این امکان را می دهد تا متن مورد نظر خود را داخل کادری با گوشه های گرد و پس زمینه ای خاکستری قرار دهید. البته این استایل پیش فرض کلاس well می باشد و شما می توانید بنا به سلیقه خود آن را تغییر دهید.
در مثال زیر یک تگ <div> را با کلاس well و متن داخل آن نمایش می دهیم.
<div class="container"> <h1> Wells in Bootstrap </h1> <div class="well"> Bootstrap Basic Well </div> </div>
Well در اندازه های مختلف
کلاس های کمکی برای کلاس well این امکان را به شما می دهند تا کادرهایی با 3 اندازه مختلف بزرگ، متوسط و کوچک داشته باشید. این کلاس ها عبارتند از :
- کلاس well-lg برای کادرهایی با سایز بزرگ یا large
- کلاس well-sm برای کادرهایی با سایز کوچک یا small
نکته : به این نکته توجه داشته باشید که خود کلاس well به صورت پیش فرض به عنوان اندازه متوسط یا normall معرفی شده است.
در مثال زیر کلاس well را در 3 سایز مختلف نمایش می دهیم
<div class="container"> <h1> Wells in Bootstrap </h1> <div class="well well-lg"> Large Well </div> <div class="well"> Normal Well </div> <div class="well well-sm"> Small Well </div> </div>
