آموزش کلاس well و کاربرد آن در Bootstrap

1396/5/11 علیرضا حاتمی نیا 162

well clas in bootstrap

مقدمه

درود خدمت شما دوستان و علاقه مندان به آموزش برنامه نويسي و طراحي وب. همچنان در خدمت شما هستم با آموزش بوت استرپ . اگر به خاطر داشته باشيد در جلسه قبل با آموزش ساخت جامبوترون در بوت استرپ آشنا شديم. در اين جلسه با آموزش کلاس well در بوت استرپ در خدمت شما هستم. 

کاربرد کلاس well در Bootstrap

گاهي اوقات در طراحي صفحات وب جهت متمايز کردن يک بخش متون از قسمت هاي ديگر لازم است تا بخش محتواي متمايز شده را داخل جعبه اي خاص يا کادري مشخص قرار دهيد. کلاس well در Bootstrap يک کلاس تعريف شده در بوت استرپ مي باشد که به شما اين امکان را مي دهد تا متن مورد نظر خود را داخل کادري با گوشه هاي گرد و پس زمينه اي خاکستري قرار دهيد. البته اين استايل پيش فرض کلاس well مي باشد و شما مي توانيد بنا به سليقه خود آن را تغيير دهيد. 
در مثال زير يک تگ <div> را با کلاس well و متن داخل آن نمايش مي دهيم. 
<div class="container">
   <h1> Wells in Bootstrap </h1>
   <div class="well">
     Bootstrap Basic Well
  </div>
</div> 

wells in bootstrap

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>

wells size in bootstrap

 

 
 

 

کلمات کلیدی

علیرضا حاتمی نیا
طراح و برنامه نویس وب
طراحی وبسایت های واکنش گرا
طراحی و پیاده سازی سیستم مدیریت محتوا
سئو و بهینه سازی سایت