با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن . و کاربرانی که دوره آموزش کامل Bootstrap 3 را دنبال می کنند. اگر به محتوا و مطالب وب سایت های دیگر توجه کرده باشید اغلب برای نمایش نکات ، عبارت کلیدی ، یا حتی هشدارها، از یک عنصر html به عنوان یک کادری که اطراف آن محتوا قرار می گیرد استفاده می کنند. تا مانند ویژگی jumbotron آن بخش از متن را برجسته تر نمایش داده و اهمیت آن را نشان دهد، در Bootstrap 3 از عنصر ساده ای به نام Well برای اینگونه اعمال استفاده می شود. در ادامه ی مباحث فوق، برای آشنایی با ویژگی Well در Bootstrap 3 و چگونگی استفاده از آن، با ما همراه باشید.
آشنایی با ویژگی Well در Bootstrap 3
در Bootstrap 3، از کلاس .well
برای ایجاد یک box خاکستری با گوشه های گرد در اطراف بخشی از متن، استفاده می شود.
آشنایی با ویژگی Well در Bootstrap 3
اندازه ی Well در Bootstrap 3
تغییر دادن اندازه پیش فرض Well در Bootstrap 3:
کلاس .well-sm
را برای اندازه ی کوچک و کلاس .well-lg
را برای اندازه ی بزرگ به ویژگی Well در Bootstrap 3 ، اضافه کنید:
مثال:
1 2 | <div class="well well-sm">Small Well</div> <div class="well well-lg">Large Well</div> |
نکته: اندازه ی Well در حالت پیش فرض متوسط است.
البته عنصری بهتر و کاربردی تر از Well در Bootstrap 3 به نام Alert وجود دارد.
Alert از Style های متنوع و کاملتری برای نمایش متن های مهم استفاده می کند. که ما در آموزش بعدی فصل جاری به این مبحث نیز می پردازیم.
عناصر Alert
عناصر Well گزینه ی مناسبی برای ایجاد یک کادر ساده در اطراف محتواهای مهم و نکته ای در صفحات وب به شمار می روند، همچنین می توان از این عناصر برای دسته بندی مطالب و محتوای وب سایت استفاده کرد. اما برای نمایش متن های مهمی از جمله هشدارها و اخطارها، به شما عناصر Alert را پیشنهاد می کنیم که در مبحث بعدی بطور مفصل به بررسی آن خواهیم پرداخت، امیدواریم که مباحث آشنایی با ویژگی Well در Bootstrap 3 ، برای شما مفید واقع شده باشد.