bootstrap
دکمه های گروهی در بوت استرپ – آموزش بوت استرپ تیم طراحی سایت اصفهان وب یار در این مقاله به آموزش دکمه ها در بوت استرپ می پردازد. در این آموزش شما با دکمه های گروهی در بوت استرپ، تنظیم سایز دکمه های گروهی، ایجاد دکمه های گروهی عمودی، Justified Button Groups ، ایجاد منوی کشویی برای دکمه های گروهی در بوت استرپ و Split Button Dropdowns آشنا خواهید شد. مباحث دکمه ها در بوت استرپ، روش های مختلف ایجاد دکمه، سایز دکمه ها در بوت استرپ، ایجاد دکمه با عرض کامل و دکمه های فعال و غیر فعال در بوت استرپ در مقاله ی دکمه ها در بوت استرپ – قسمت اول ذکر شده است که می توانید با مطالعه ی آن اطلاعات خود را درباره ی دکمه ها در بوت استرپ تکمیل نمایید. ایجاد دکمه های گروهی در بوت استرپ شما می توانید در بوت استرپ دکمه ها را به صورت خطی گروه بندی کنید. برای این منظور کافی است از کلاس btn-group در تگ div استفاده کنید و دکمه ها را در این div قرار دهید. به کد زیر دقت کنید. <div class=”btn-group”> <button type=”button” class=”btn btn-primary”>ok</button> <button type=”button” class=”btn btn-primary”>cancel</button> <button type=”button” class=”btn btn-primary”>Apply</button> </div> خروجی کد بالا را می توانید در تصویر زیر مشاهده کنید. جالب است بدانید که شما می توانید برای […]
سایز دکمه ها در بوت استرپ – آموزش بوت استرپ در این مقاله، آموزش دکمه ها در بوت استرپ را خواهید خواند که توسط تیم طراحی سایت اصفهان وب یار برای شما عزیزان آماده شده است. در این آموزش شما با دکمه ها در بوت استرپ، روش های مختلف ایجاد دکمه، سایز دکمه ها در بوت استرپ، ایجاد دکمه با عرض کامل و دکمه های فعال و غیر فعال در بوت استرپ آشنا می شوید. دکمه ها برای اهداف مختلفی مانند submit یا reset کردن یک فرم، نمایش دادن یا مخفی کردن یک مطلب در سایت و موارد دیگر استفاده می شوند. بنابراین دکمه ها یک بخش لازم در طراحی سایت هستند. در ادامه همراه ما باشید تا با دکمه ها در بوت استرپ آشنا شوید. معرفی دکمه ها در bootstrap همانطور که می دانید تگ button برای ایجاد دکمه استفاده می شود. حال برای این که استایلی را که بوت استرپ برای دکمه ها در نظر گرفته است، به تگ button اضافه کنیم، کافی است از کلاس های بوت استرپ برای دکمه ها استفاده کنیم. این کلاس ها به شرح زیر می باشد. btn-default : برای ایجاد یک دکمه ی پیش فرض به رنگ خاکستری است. btn-primary : برای مشخص کردن دکمه ی اصلی از این کلاس استفاده می شود. btn-success : این کلاس مشخص کننده ی یک عملیات […]
هشدارها در بوت استرپ در مبحث آموزش بوت استرپ، در این بخش میخوایم با آموزش مبحث هشدارها در بوت استرپ ادامه دهیم. در این آموزش شما با انواع هشدارها در بوت استرپ، بستن آن ها و کلاس alert-link آشنا خواهید شد. هشدارها برای نمایش اعلان به کاربر استفاده می شوند. در واقع هر کدام از هشدارها یک باکس رنگی متفاوت را ایجاد می کنند که با مضمون پیام همخوانی دارد. در ادامه با تیم طراحی سایت اصفهان وب یار همراه باشید تا نحوه تنظیم هشدارها را باهم بیاموزیم. انواع هشدارها در بوت استرپ برای ایجاد هشدار از کلاس alert در تگ div استفاده می شود. این هشدارها می توانند مشخص کننده یک عملیات موفقیت آمیز، یک عمل خنثی، اطلاعات هشداردهنده و یا عملیات خطرناک باشند که با نوشتن کلاس های زیر در ادامه ی کلاس alert می توانید نوع هشدار را برای کاربر مشخص کنید. alert-success: این هشدار نشان دهنده ی یک عمل مثبت یا موفقیت آمیز است. alert-info: این هشدار یک سری اطلاعات مفید را در اختیار کاربران قرار می دهد. alert-warning: این جعبه ی هشدار، یک هشدار به کاربر می دهد. alert-danger: این هشدار مشخص کننده ی یک اطلاعات منفی یا خطرناک است. در کد زیر می توانید نحوه استفاده از این کلاس ها را مشاهده کنید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<div class="container"> <div class="alert alert-success"> This alert box could indicate a successful or positive action. </div> <div class="alert alert-info"> This alert box could indicate a neutral informative change or action </div> <div class="alert alert-warning"> This alert box could indicate a warning that might need attention. </div> <div class="alert alert-danger"> This alert box could indicate a dangerous or potentially negative action. </div> </div> |
خروجی این کد در تصویر زیر نمایش داده شده […]
ایجاد عکس واکنش گرا در بوت استرپ با سلام به همراهان همیشگی وب یار، این جلسه مبحث تصاویر در بوت استرپ را به شما آموزش می دهیم. در این مقاله به مباحثی از جمله تصویر با لبه های گرد – عکس دایره ای – عکس بندانگشتی، ایجاد عکس واکنش گرا در بوت استرپ و ایجاد گالری تصاویر پرداخته می شود. در ادامه با وب یار همراه باشید تا با نحوه ایجاد تصاویر در بوت استرپ آشنا شوید. تصاویر در بوت استرپ با.img-fluid. max-width: 100%; وheight: auto;به تصویر اعمال می شود تا با عنصر والد مقیاس شود. انواع تصاویر استفاده از تصاویر در سایت به دلیل جذب مخاطبان اهمیت ویژه ای دارد. بوت استرپ کلاس هایی را برای تصاویر در نظر گرفته که با استفاده از این کلاس ها حالت های متفاوتی را برای تصاویر ایجاد می کند. این کلاس ها به شرح زیر می باشد. کلاس img-rounded باعث گرد شدن گوشه های عکس می شود. کلاس img-circle عکس را به صورت دایره نمایش می دهد. کلاس img-thumbnail عکس مورد نظر را به صورت یک عکس بند انگشتی در می آورد. در کد زیر می توانید با نحوه ی استفاده از این کلاس ها آشنا شوید.
|
1 2 3 |
<img src="img/index.jpg" class="img-rounded" alt="tabiat" width="200" height="140"> <img src="img/images.jpg" class="img-circle" alt="tabiat" width="140" height="140"> <img src="img/index.jpg" class="img-thumbnail" alt="tabiat" width="200" height="140"> |
در شکل زیر می توانید انواع تصاویر را که با کد بالا ایجاد می شود را ببینید. ایجاد عکس واکنش گرا در بوت استرپ عکس واکنش […]
آموزش استایل دهی به متن در bootstrap در این مطلب می خواهیم آموزش استایل دهی به متن در بوت استرپ را توسط تیم طراحی سایت اصفهان وب یار را ارائه دهیم. در مبحث استایل دهی به متن در bootstrap ، با معرفی تگ های mark,small,hgroup در خدمت شما هستیم. در جلسه قبل با آموزش طراحی ریسپانسیو و بوت استرپ که مقدمه ای برای شروع آموزش بوت استرپ بود همراه شما بودیم.در مقاله ی آموزشی امروز تگ هایی برای استایل دهی به متن به شما آموزش داده خواهد شد. همچنین در این مقاله درباره ی کاربرد متن های رنگی در بوت استرپ و کلاس ها برای رنگ پس زمینه متن ها صحبت می شود. پس با ما همراه باشید تا با مثال های ساده و واضح این تگ ها را به شما آموزش دهیم. معرفی تگ های پرکاربرد در بوت استرپ تگ blockquote در بوت استرپ تگ blockquote برای نقل قول استفاده می شود. بوت استرپ به نقل قول ظاهر زیبایی می دهد. تنها کافی است که برای نقل قول از تگ blockquote استفاده شود. به کد زیر دقت کنید تا نحوه ی استفاده از این عنصر را یاد بگیرید. بوت استرپ این تگ را به صورتی که در خروجی زیر می بینید استایل دهی می کند. برای نشان دادن نقل قول در سمت راست از کلاس blockquote-reverse استفاده می کنیم. […]
ریسپانسیو کردن لیست و div های تودر تو :Flexbox آموزش لیست های چند ستونه ریسپانسیو با با آموزشی دیگر از ریسپانسیو کردن صفحات وب سایت ها در خدمت شما دانش آموختگان آنلاین هستیم, امروز میخواهیم ریسپانسیو کردن لیست های چند ستونه را به شما آموزش بدهیم, تا ببینید به چه راحتی میتوانید لیست های چند ستونه خود را ریسپانسیو کنید,البته این آموزش میتواند با ایده ای شما تکمیل شود و شما با اضافه کردن کدهای سی اس اس css بیشتر استایل های زیباتری به آن ببخشید,پس در آموزش این جلسه از ریسپانسیو کردن لیست ها با وب یار همراه باشید. آموزش لیست ها ی چند ستونه ریسپانسیو انعطاف پذیر: در آموزش ریسپانسیو کردن لیست ها میخواهیم ابتدا N ایتم را تعریف کنیم ,که این N ایتم در Z تعداد ستون نمایش داده خواهند شد, خب توجه کنید که تعداد این Z ستون با توجه به عرض صفحه نمیش ما width میتواند بیشتر شود و یا اینکه حتی کمتر نیز شود, پس این تغییر تعداد ستون ها در صفحه نمایش های دستگاههای گوناگون با عرض های مختلف به چه چیزی بستگی دارد؟؟؟؟ پاسخ خیلی واضح و مشخص است این تعداد ستون های گوناگون به عرض صفحه ی نمایش بستگی دارد و در صفحه نمایش های گوناگون باعرض های مختلف این تعداد ستون ها تغییر میکند و همچنین با تغییر سایز […]