آموزش Bootstrap

بوت استرپ چیست؟

بوت استرپ یک پلتفرم برای توسعه وب بر اساس یک چارچوب فرانت اند است. برای ایجاد طرح‌های استثنایی با استفاده از HTML و CSS استفاده می‌شود. این قالب ها برای فرم ها، جداول، دکمه ها، تایپوگرافی، مدل ها، تصاویر  و ... استفاده می شود. بوت استرپ همچنین دارای پلاگین های جاوا اسکریپت است که اختیاری هستند. بوت استرپ بیشتر برای توسعه برنامه های کاربردی وب  و موبایل ترجیح داده می شود. بوت استرپ پس از انتشار در سال 2011 محبوبیت فوق العاده ای به دست آورد. بوت استرپ در بین طراحان و توسعه دهندگان وب محبوب است زیرا همه کاره و ساده برای استفاده است.مزایای کلیدی آن این است که از نظر طراحی واکنش گرا است، از طیف وسیعی از مرورگرها پشتیبانی می کند، طراحی ثابتی را ارائه می دهد، و استفاده و درک آن ساده است.

چرا بوت استرپ برای توسعه وب سایت ترجیح داده می شود؟

بوت استرپ در مقایسه با سایر پلتفرم های توسعه وب دارای ویژگی های بهتری است. تقریباً برای همه مرورگرهای شناخته شده مانند Opera، Chrome، Firefox، Safari و غیره را پشتیبانی میکند و  پشتیبانی گسترده ای از مرورگر را ارائه می دهد. اگر با CSS و HTML به خوبی آشنا باشید، توسعه وب در Bootstrap آسان می شود. ما دوره اموزش جامع html و css  را داریم که میتوانید تهیه کنید. همچنین از برنامه های موبایل با کمک طراحی ریسپانسیو پشتیبانی می کند به جای ایجاد چندین فایل، تنها یک فایل ایجاد می کند که کار یک توسعه دهنده را کاهش می دهد.

اجزای کلیدی بوت استرپ چیست؟

اجزای اصلی بوت استرپ عبارتند از:

CSS: شامل  فایل‌های CSS مختلف است Scaffolding:  ساختاری اساسی با سیستم Grid، سبک‌های پیوند و مؤلفه‌های لایه‌بندی پس‌زمینه ارائه می‌کند.

این فهرستی از مؤلفه‌های طرح‌بندی پلاگین‌های جاوا اسکریپت را نشان می‌دهد: شامل بسیاری از افزونه‌های jQuery و جاوا اسکریپت است. سفارشی کردن: برای دریافت نسخه خود چارچوب، شما می توانید اجزای خود را سفارشی کنید.

برخی از ویژگی های بوت استرپ عبارتند از:

این یک منبع باز برای استفاده فراهم می کند. بوت استرپ سازگاری با همه مرورگرها دارد.

کلاس لودرها در بوت استرپ چیست؟

کلاس loader بخشی از JRE یا Java Runtime Environment است که کلاس‌های Java را در محیط مجازی جاوا بارگیری می‌کند. بارگذارهای کلاس نیز فرآیند تبدیل یک کلاس نامگذاری شده به شکل باینری معادل آن را انجام می دهند.

 کلاس های متنی جدول در بوت استرپ چیست؟

.فعال:رنگ شناور را روی یک ردیف یا سلول خاص اعمال می کند

.موفقیت:نشان دهنده یک اقدام موفق یا مثبت است

.هشدار:هشداری را که ممکن است نیاز به توجه داشته باشد شناسایی می کند

.خطر:یک عمل خطرناک یا بالقوه منفی را نشان می دهد

 چند نوع طرح بندی در بوت استرپ موجود است؟

دو طرح اصلی برای Bootstrap وجود دارد:

Fluid Layout- این طرح‌بندی برای ایجاد برنامه‌ای ضروری است که 100٪ عریض‌تر است و تمام عرض صفحه را پوشش می‌دهد.

Fixed Layout- فقط برای یک صفحه استاندارد (940 پیکسل) استفاده می‌شود. هر دو طرح‌بندی را می‌توان برای ایجاد یک طراحی واکنش‌گرا استفاده کرد.

Bootstrap Grid System چیست؟

Bootstrap شامل یک سیستم شبکه سیال  و پاسخگو است که با افزایش اندازه دستگاه یا درگاه دید، به طور مناسب تا 12 ستون مقیاس می شود. این شامل کلاس های از پیش تعریف شده برای گزینه های طرح بندی آسان، و همچنین میکس های قدرتمند برای تولید طرح بندی های معنایی بیشتر است.

چرا از Jumbotron در بوت استرپ استفاده می کنیم؟

Jumbotron برای برجسته کردن محتوا در بوت استرپ استفاده می شود. این می تواند یک شعار یا احتمالاً یک تیتر باشد. اندازه عنوان را افزایش می دهد و برای محتوای صفحه فرود حاشیه ایجاد می کند. برای پیاده سازی Jumbotron در بوت استرپ، باید از موارد زیر استفاده کنید:

یک ظرف <div> با کلاس .jumbotron ایجاد کنید
برای مثال، اگر نمی‌خواهید Jumbotron به لبه صفحه‌نمایش برسد،
از <div class=”container”> استفاده کنید

انواع لیست های پشتیبانی شده توسط بوت استرپ 

بوت استرپ از سه نوع لیست پشتیبانی می کند:

فهرست‌های مرتب‌شده - فهرست مرتب‌شده فهرستی است که به نوعی ترتیب متوالی قرار می‌گیرد و با اعداد پیش گفته می‌شود.

لیست های نامرتب - لیست نامرتب لیستی است که ترتیب خاصی ندارد و به طور سنتی با گلوله ها استایل بندی می شود. اگر نمی‌خواهید گلوله‌ها ظاهر شوند، می‌توانید با استفاده از class .list-unstyled استایل را حذف کنید.

لیست‌های تعریف - در این نوع فهرست، هر مورد فهرست می‌تواند از عناصر <dt> و <dd> تشکیل شده باشد. <dt> مخفف عبارت تعریف است. پس از آن، <dd> تعریف <dt> است.

مدیا شی در بوت استرپ چیست و چه انواعی دارد؟

اشیاء رسانه ای در بوت استرپ به شما کمک می کنند تا شی رسانه ای مانند تصویر، ویدئو یا صدا را در سمت چپ یا راست بلوک های محتوا قرار دهید. عنصر رسانه را می توان با استفاده از class .media ایجاد کرد و منبع را با استفاده از class .media-object مشخص کرد. رسانه-اشیاء دو نوع هستند.

دو نوع شی رسانه عبارتند از:

.media.media-listQ20. کاربردهای پلاگین چرخ و فلک در بوت استرپ را توضیح دهید.

پلاگین Carousel در بوت استرپ برای ساختن اسلایدر در صفحات وب یا سایت شما استفاده می شود. چندین پلاگین چرخ و فلک وجود دارد که در بوت استرپ برای نمایش محتویات بزرگ در یک فضای کوچک با افزودن اسلایدرها استفاده می شود.

مثال‌ها: .carousel (گزینه‌ها)، .carousel ("مکث")، .carousel (چرخه)، .carousel ("قبلی")، .carousel ("بعدی").

چگونه می توان عناصر Nav را در Bootstrap ایجاد کرد؟

Bootstrap گزینه های مختلفی را برای استایل دادن به عناصر ناوبری ارائه می دهد. همه اینها از نشانه گذاری و کلاس پایه .nav یکسان استفاده می کنند. برای ایجاد ناوبری یا تب های جدولی باید مراحل زیر را انجام دهید:

با یک لیست نامرتب اولیه با کلاس پایه .navAdd class .nav-tabsQ22 شروع کنید.

گلیفیکون ها چیست؟ چگونه از آنها استفاده کنیم؟

Glyphicons فونت های نمادی هستند که می توانند در پروژه های وب شما استفاده شوند. Glyphicons Halflings رایگان نیستند و نیاز به مجوز دارند. با این حال، خالق آنها آنها را بدون هیچ هزینه ای برای پروژه های بوت استرپ در دسترس قرار داده است.برای استفاده از آیکون ها، فقط باید از کد زیر تقریباً در هر نقطه از کد خود استفاده کنید. بین آیکون و متن فاصله بگذارید تا padding مناسب باشد.

مراحل ایجاد فرم های پایه یا عمودی چیست؟

مراحل ایجاد فرم های عمودی یا پایه عبارتند از:

ابتدا، یک فرم نقش را می توان به عنصر والد  <form>  اضافه کرد.

در مرحله بعد، باید با قرار دادن برچسب‌ها و کنترل در <div> و با استفاده از تابع «class.form-group» فاصله‌های مناسب را اضافه کنید.

در نهایت، تابع "class .form-control" را روی عناصر مختلف مانند URL متنی <input>، <textarea> و <select> اعمال کنید.

اشیاء رسانه ای بوت استرپ چیست؟

اشیاء رسانه ای سبک های آبجکت انتزاعی برای ساخت انواع مختلف مؤلفه ها مانند نظرات وبلاگ، توییت ها و غیره هستند. دارای یک تصویر تراز چپ یا راست چین در کنار محتوای متنی است. هدف رسانه این است که کد توسعه این بلوک های اطلاعاتی را به شدت کوتاهتر کند. و این هدف با اعمال کلاس ها برای برخی از نشانه گذاری های ساده به دست می آید.

 مراحل ایجاد یک نوار پیشرفت متحرک با استفاده از بوت استرپ چیست؟

مراحل ایجاد یک نوار پیشرفت متحرک به شرح زیر است:

یک <div> با کلاس .progress و .progress-striped اضافه کنید. همچنین کلاس .active را به .progress-striped اضافه کنید.

در مرحله بعد، داخل <div> بالا، یک <div> خالی با کلاس .progress-bar اضافه کنید.

یک ویژگی سبک با عرض بیان شده به صورت درصد اضافه کنید. به عنوان مثال، سبک = "60٪"؛ نشان می دهد که نوار پیشرفت در 60٪ بود.

منظور شما از ترتیب ستون در بوت استرپ چیست؟

ترتیب ستون یکی از جالب ترین ویژگی هایی است که در بوت استرپ یافت می شود. با استفاده از توابع مناسب، می توان ستون ها را به راحتی و همچنین به ترتیب تعریف شده نوشت. همچنین می توانید آنها را در ستون دیگری نشان دهید. برای تغییر یا تغییر ترتیب ستون به راحتی، می توان از توابع .col-md-push-* و .col-md-pull-* استفاده کرد.

 سیستم Bootstrap Grid چیست؟

سیستم Bootstrap Grid یک سیستم پاسخگو و اولین تلفن همراه است که با توجه به افزایش اندازه دستگاه یا درگاه دید، تا 12 ستون مقیاس می شود. این سیستم دارای کلاس‌های از پیش تعریف‌شده برای گزینه‌های طرح‌بندی آسان و ترکیب‌های قدرتمند برای ایجاد طرح‌بندی‌های معنایی مؤثر است.

. چگونه با استفاده از بوت استرپ تصاویر کوچک ایجاد کنیم؟

برای ایجاد ریز عکسها با استفاده از Bootstrap باید موارد زیر را انجام دهید:

یک برچسب <a> با کلاس .thumbnail در اطراف یک تصویر اضافه کنید. چهار پیکسل لایه و یک حاشیه خاکستری اضافه می کند. اکنون، با شناور، یک درخشش متحرک تصویر را مشخص می کند.Q28. Bootstrap Container چیست؟

کانتینر بوت استرپ کلاسی است که مفید است و یک ناحیه مرکزی در صفحه ایجاد می کند که محتوای سایت ما می تواند در آن قرار گیرد. مزیت bootstrap .container این است که پاسخگو است و تمام کدهای HTML دیگر ما را قرار می دهد.

. صفحه بندی در بوت استرپ چیست و چگونه طبقه بندی می شوند؟

صفحه بندی، مدیریت یک لیست نامرتب توسط بوت استرپ است. اگر می خواهید صفحه بندی را مدیریت کنید، بوت استرپ کلاس های زیر را ارائه می دهد:

.pagination: برای دریافت صفحه بندی در صفحه خود باید این کلاس را اضافه کنید

.disabled، .active: پیوندها را با .disabled برای پیوندهای غیرقابل کلیک و .active برای نشان دادن صفحه فعلی سفارشی کنید.

.pagination-Ig, .pagination-sm: از این کلاس ها برای دریافت آیتم با اندازه های مختلف استفاده کنید

هشدارهای بوت استرپ چیست و چگونه آنها را ایجاد می کنید؟

Bootstrap Alerts راهی برای استایل دادن به پیام ها به کاربر ارائه می دهد. آنها پیام های بازخورد متنی را برای اقدامات معمول کاربر ارائه می دهند. می توانید یک نماد بسته اختیاری برای هشدار اضافه کنید. همچنین، می توانید با ایجاد یک wrapper <div> و افزودن یک کلاس .alert و یکی از چهار کلاس متنی، یک هشدار اولیه اضافه کنید.

 چگونه یک هشدار رد بوت استرپ ایجاد می کنید؟

برای ایجاد هشدار اخراج باید چند مرحله را دنبال کنید:

ابتدا باید با ایجاد یک wrapper <div> و اضافه کردن یک کلاس .alert و یکی از چهار کلاس متنی، یک هشدار اولیه اضافه کنید.

همچنین .alert-dismissable اختیاری را به کلاس <div> بالا اضافه کنید.

بعد، شما باید یک دکمه بستن اضافه کنید.

در نهایت، از عنصر <button> با ویژگی data-dismiss = "alert" استفاده کنید.

 مراحل ایجاد نوار پیشرفت با استفاده از بوت استرپ چیست؟

برای ایجاد یک نوار پیشرفت اولیه، باید موارد زیر را انجام دهید:

یک <div> با کلاس .progress اضافه کنید.

سپس، در داخل <div> بالا، یک <div> خالی با یک کلاس از .progress-bar اضافه کنید.

یک ویژگی سبک با عرض به صورت درصد اضافه کنید. به عنوان مثال، سبک = "40٪"؛ نشان می دهد که نوار پیشرفت در 40٪ بود.

. کاربردهای پلاگین چرخ و فلک در بوت استرپ را توضیح دهید.

پلاگین Carousel در بوت استرپ برای ساختن اسلایدر در صفحات وب یا سایت شما استفاده می شود. چندین پلاگین چرخ و فلک وجود دارد که در بوت استرپ برای نمایش محتویات بزرگ در یک فضای کوچک با افزودن اسلایدرها استفاده می شود.

مثال‌ها: .carousel (گزینه‌ها)، .carousel ("مکث")، .carousel (چرخه)، .carousel ("قبلی")، .carousel ("بعدی").

 چگونه می توان عناصر Nav را در Bootstrap ایجاد کرد؟

Bootstrap گزینه های مختلفی را برای استایل دادن به عناصر ناوبری ارائه می دهد. همه اینها از نشانه گذاری و کلاس پایه .nav یکسان استفاده می کنند. برای ایجاد ناوبری یا تب های جدولی باید مراحل زیر را انجام دهید:

با یک لیست نامرتب اولیه با کلاس پایه .navAdd class .nav-tabs شروع کنید.

گلیفیکون ها چیست؟ چگونه از آنها استفاده کنیم؟

Glyphicons فونت های نمادی هستند که می توانند در پروژه های وب شما استفاده شوند. Glyphicons Halflings رایگان نیستند و نیاز به مجوز دارند. با این حال، خالق آنها آنها را بدون هیچ هزینه ای برای پروژه های بوت استرپ در دسترس قرار داده است.

برای استفاده از آیکون ها، فقط باید از کد زیر تقریباً در هر نقطه از کد خود استفاده کنید. بین آیکون و متن فاصله بگذارید تا padding مناسب باشد.

<span class = "glyphicon glyphicon-search"></span>Q23.

مراحل ایجاد فرم های پایه یا عمودی چیست؟

مراحل ایجاد فرم های عمودی یا پایه عبارتند از:

ابتدا، یک فرم نقش را می توان به عنصر والد  <form>  اضافه کرد.

در مرحله بعد، باید با قرار دادن برچسب‌ها و کنترل در <div> و با استفاده از تابع «class.form-group» فاصله‌های مناسب را اضافه کنید.

در نهایت، تابع "class .form-control" را روی عناصر مختلف مانند URL متنی <input>، <textarea> و <select> اعمال کنید.

منظور شما از Bootstrap well چیست؟

چاه بوت استرپ چیزی نیست جز محفظه ای که باعث می شود محتوا غرق شده به نظر برسد. گاهی اوقات ممکن است یک افکت داخلی در صفحه وب نیز ایجاد کند. بنابراین، یک توسعه‌دهنده می‌تواند یک چاه ایجاد کند و همچنین محتوا را با کمک  <div> و class .well در چاه بپیچد. محتوا مطابق میل شما ظاهر می شود.

 گروه های ورودی در بوت استرپ چیست؟

گروه های ورودی، کنترل های فرم توسعه یافته هستند. شما به راحتی می توانید متن یا دکمه ها را به ورودی های متنی با کمک گروه های ورودی اضافه و اضافه کنید. همچنین، می توانید عناصر مشترک را به ورودی کاربر اضافه کنید. به عنوان مثال، می توانید نماد دلار، @ را برای نام کاربری توییتر یا هر چیز دیگری که ممکن است برای رابط برنامه شما رایج باشد اضافه کنید.

برای اضافه کردن یا اضافه کردن عناصر به یک .form-control باید کارهای زیر را انجام دهید:

آن را در یک <div> با class .input-group بپیچید

در مرحله بعد، محتوای اضافی خود را در یک <span> با class .input-group-addon قرار دهید.

اکنون این <span> را قبل یا بعد از عنصر <input>  قرار دهید.

Breadcrumbs بوت استرپ چیست؟

Breadcrumbs یک راه عالی برای نشان دادن اطلاعات مبتنی بر سلسله مراتب برای یک سایت است. در مورد وبلاگ ها، سوخاری ها می توانند تاریخ انتشار، دسته ها یا برچسب ها را نشان دهند. آنها مکان صفحه فعلی را در یک سلسله مراتب ناوبری نشان می دهند.یک breadcrumb در Bootstrap به سادگی یک لیست نامرتب با یک کلاس از .breadcrumb است. جداکننده به طور خودکار توسط CSS اضافه می شود.

 نرمال سازی در بوت استرپ چیست؟

Bootstrap از Normalize برای ایجاد سازگاری بین مرورگرها استفاده می کند.

Normalize.css یک جایگزین مدرن و آماده HTML5 برای تنظیم مجدد CSS است. این یک فایل CSS کوچک است که سازگاری بهتری بین مرورگرها در استایل پیش فرض عناصر HTML فراهم می کند.

پانل های بوت استرپ چیست؟ نحوه ایجاد پنل بوت استرپ با عنوان را توضیح دهید.

اجزای پانل بوت استرپ برای قرار دادن جزء DOM شما در یک جعبه استفاده می شود. برای دریافت یک پنل پایه، به سادگی کلاس های .panel و .panel-default را به عنصر <div> اضافه کنید. دو راه برای اضافه کردن عنوان پانل به پانل بوت استرپ وجود دارد:از هر یک از تگ های  <h1>، <h2>، <h3>، <h4>، <h5>، یا <h6> با یک کلاس .panel-title استفاده کنید. همچنین می توانید از کلاس .panel-heading استفاده کنید.

 هدف از استفاده از افزونه Scrollspy چیست؟

هدف از استفاده از افزونه Scrollspy در Bootstrap این است که به شما امکان می دهد بخش های خاصی از صفحه را بر اساس موقعیت اسکرول هدف قرار دهید. پس از آن، می‌توانید کلاس‌های .active را بر اساس موقعیت اسکرول به نوار ناوبری Bootstrap اضافه کنید.

چرا از افزونه affix در بوت استرپ استفاده می کنیم؟

ما از افزونه affix در Bootstrap برای الصاق <div> به مکان خاصی در یک صفحه وب استفاده می کنیم. این افزونه همچنین امکان روشن و خاموش کردن پین کردن <div> الصاق شده را فراهم می کند. آیکون های اجتماعی محبوب ترین نمونه استفاده از افزونه affix در بوت استرپ هستند.

 <div> از یک مکان خاص در صفحه وب شروع می‌شود و با آن حرکت می‌کند. با این حال، پس از یک علامت مشخص، در جای خود قفل می شود، بنابراین پیمایش با بقیه صفحه وب متوقف می شود.

 پانل بوت استرپ چیست؟

هنگامی که نیاز به قرار دادن محتویات در یک جعبه حاشیه دار با مقداری بالشتک در اطراف وجود دارد، از اجزای پانل استفاده می شود. آنها را می توان با کلاس .panel ایجاد کرد و محتوای داخل پانل از یک کلاس .panel-body تشکیل شده است. برای ایجاد یک پنل پایه، باید class .panel را به عنصر <div> اضافه کنید و کلاس .panel-default را به این عنصر اضافه کنید.

گروه Button چیست و کدام کلاس برای گروه دکمه های پایه استفاده می شود؟

گروه‌های دکمه‌ای اجازه می‌دهند چندین دکمه در یک خط روی هم چیده شوند. وقتی می‌خواهید مواردی مانند دکمه‌های تراز را در کنار هم قرار دهید، می‌توانید از این استفاده کنید.

برای گروه دکمه‌های پایه، از کلاس btn-group استفاده می‌شود. در اینجا، می‌توانید یک سری از دکمه‌ها را با کلاس .btn در گروه btn. بپیچید.

 ظاهر بوت استرپ پیش فرض هشدار ایجاد شده با این کد زیر چگونه خواهد بود:<div class="alert" role="alert">هشدار! من چیزی را از دست داده ام.</div>

پیام های هشدار برای ارائه پیام بازخورد استفاده می شود و معمولاً توجه کاربر را می طلبد. در اینجا مهم است که توجه داشته باشید که Bootstrap Alerts کلاس پیش فرض ندارد. اگر یک کلاس متنی مانند .alert-success، .alert-info، .alert-warning یا .alert-danger ارائه نشود، یک هشدار خاکستری پیش فرض ایجاد می شود..

 چرا باید از بوت استرپ استفاده کنیم؟

بوت استرپ مزایای عمده ای را برای یک توسعه دهنده فراهم می کند. برخی از آنها عبارتند از:

این یک چارچوب طراحی وب رایگان و منبع باز است.

Bootstrap از همه مرورگرهای وب مانند Internet Explorer، Google Chrome، Firefox، Opera، Safari و غیره پشتیبانی می‌کند.

این یک چارچوب بسیار قدرتمند برای تلفن همراه اول جلویی است.

همچنین، شروع آن بسیار آسان است، زیرا برای کار کردن با آن، فقط باید ایده ای از HTML و CSS داشته باشید.

ما می‌توانیم یک وب‌سایت واکنش‌گرا (Responsive) از طریق آن طراحی کنیم که بر روی دسک‌تاپ، رایانه لوحی و تلفن همراه تنظیم شود.

این شامل اجزای داخلی کاربردی است که به راحتی قابل سفارشی کردن هستند.

مزایای بوت استرپ چیست؟

برخی از مزایای بوت استرپ به شرح زیر است:استفاده از بوت استرپ ساده است و هر کسی که درک اولیه ای از HTML و CSS داشته باشد می تواند شروع به کار کند. ویژگی هایی که با تلفن ها، تبلت ها و دسکتاپ ها سازگار می شوند: CSS پاسخگوی بوت استرپ با تلفن ها، تبلت ها و دسکتاپ ها سازگار است. استراتژی اول موبایل: موبایل- اولین سبک ها در چارچوب بوت استرپ تعبیه شده اند. بوت استرپ 4 با تمام مرورگرهای مدرن از جمله کروم، فایرفاکس، اینترنت اکسپلورر 10+، اج، سافاری و اپرا سازگار است.

 Bootstrap Container چیست و چگونه کار می کند؟

ظرف بوت استرپ یک کلاس مفید است که یک منطقه مرکزی در صفحه ایجاد می کند که می توانیم محتوای سایت خود را در آن قرار دهیم. بوت استرپ .container این مزیت را دارد که پاسخگو است و همه کدهای HTML دیگر ما را در بر می گیرد. ظروف برای قرار دادن محتویات درون آنها استفاده می شود و دو نوع ظروف وجود دارد:

کلاس .container یک محفظه با عرض ثابت ایجاد می کند که پاسخگو است.

کلاس .container-fluid یک کانتینر با عرض کامل ایجاد می کند که کل عرض درگاه دید را در بر می گیرد.

تنظیمات متنی پیش فرض بوت استرپ چیست؟

اندازه فونت پیش‌فرض در Bootstrap 4 16 پیکسل و ارتفاع خط 1.5 است.خانواده فونت های پیش فرض "Helvetica Neue" است که شامل Helvetica، Arial و سایر فونت های sans-serif می شود.  Margin-top: 0 و margin-bottom: 1rem نیز روی همه عناصر <p> تنظیم شده است (به طور پیش فرض 16 پیکسل).

درباره سیستم Bootstrap Grid چه می دانید؟

Bootstrap Grid System یک سیستم شبکه ای پاسخگو و پاسخگو است که با استفاده از تلفن همراه اول است که با افزایش اندازه دستگاه یا درگاه دید، تا 12 ستون مقیاس می شود. کلاس های از پیش تعریف شده برای گزینه های طرح بندی سریع و ترکیب های قدرتمند برای ایجاد طرح بندی های معنایی موفق در سیستم گنجانده شده است.

پنج کلاس در سیستم شبکه Bootstrap 4 وجود دارد:

col- برای دستگاه های بسیار کوچک، که عرض صفحه نمایش آنها کمتر از 576 پیکسل است.. col-sm- دستگاه های کوچک، که عرض صفحه آنها برابر یا بیشتر از 576 پیکسل است.. col-md- دستگاه های متوسط، که عرض صفحه نمایش آنها برابر یا بزرگتر از 768px..col-lg- دستگاه های بزرگ، که عرض صفحه آنها برابر یا بیشتر از 992px است..col-xl- دستگاه های بسیار بزرگ، که عرض صفحه نمایش آنها برابر یا بیشتر از 1200px است.کلاس های ذکر شده در بالا را می توان برای ساخت طرح بندی هایی که پویاتر و سازگارتر هستند ترکیب کرد.

تفاوت بین Bootstrap 4 و Bootstrap 5 چیست؟

گروه Button چیست و کلاس اصلی Button Group چیست؟

چندین دکمه را می توان با استفاده از گروه های دکمه در یک خط کنار هم قرار داد. شما می توانید از این برای گروه بندی اشیا با هم استفاده کنید، مانند دکمه های تراز. کلاس btn-group برای گروه های دکمه های پایه استفاده می شود. می توانید از کلاس .btn برای قرار دادن مجموعه ای از دکمه ها در گروه btn. استفاده کنید.

 چگونه می توان از بوت استرپ برای ساختن ریز عکس ها استفاده کرد؟

برای ساختن ریز عکسها با بوت استرپ، مراحل زیر را طی کنید:یک تصویر را در یک تگ <a> با کلاس .thumbnail قرار دهید. یک حاشیه خاکستری و چهار پیکسل بالشتک اضافه می کند. اکنون یک نور متحرک وقتی تصویر را روی آن قرار می دهد، طرح کلی آن را نشان می دهد.

 در بوت استرپ دو کد برای نمایش کد کدامند؟

در Bootstrap دو راه ساده برای نمایش کد وجود دارد:

عنصر <code> برای نمایش بخشی از کد درون خطی استفاده می شود. شما می توانید از تگ <pre> برای نمایش کدی که دارای چندین خط یا حتی یک عنصر بلوک است استفاده کنید.

 در بوت استرپ 4 فلکس باکس چیست؟

Flexbox یک ماژول طرح بندی برای جعبه های انعطاف پذیر است. بدون استفاده از شناور یا موقعیت یابی، می توانید به سرعت یک طرح چیدمان انعطاف پذیر با flexbox ایجاد کنید.

 در Bootstrap چگونه عناصر ناوبری را می سازید؟

عناصر ناوبری در Bootstrap را می توان به روش های مختلفی استایل کرد. کلاس نشانه گذاری و پایه در همه این .nav یکسان است. برای ساخت ناوبری یا تب های جدولی، مراحل زیر را انجام دهید:

با ایجاد یک لیست نامرتب با استفاده از کلاس پایه .nav شروع کنید. کلاس .nav-tabs باید اضافه شود.

از چه کلاس های متنی می توان برای استایل دادن به پانل ها استفاده کرد؟

برای معنادارتر کردن پانل برای یک زمینه خاص، از کلاس‌های حالت متنی مانند panel-primary، panel-success، panel-info، panel-warning و panel-danger استفاده کنید.

چگونه می توان یک هشدار در بوت استرپ ایجاد کرد؟

یک wrapper <div> ایجاد کنید و یک کلاس از .alert و یکی از کلاس های متنی را برای ایجاد یک هشدار اولیه اضافه کنید (به عنوان مثال، .alert-success، .alert-info، .alert-warning، .alert-danger، .alert- اولیه، هشدار-ثانویه، هشدار-نور یا هشدار-تاریکی).

 کارت بوت استرپ چیست و چگونه آن را ایجاد می کنید؟

در Bootstrap 4، کارت یک جعبه حاشیه‌دار است که محتویات آن را محصور کرده است. دارای گزینه هایی برای سرصفحه ها، پاورقی ها، محتوا و رنگ ها و موارد دیگر است.

1گروه های ورودی را در بوت استرپ توضیح دهید.

کلاس .input-group محفظه ای برای افزایش ورودی با افزودن نماد، متن یا دکمه «متن راهنما» در جلو یا پشت فیلد ورودی است.برای افزودن متن راهنما در جلوی ورودی، از .input-group-prepend و برای اضافه کردن آن در پشت ورودی، از .input-group-append استفاده کنید. در نهایت، متن راهنمای ارائه شده را با کلاس .input-group-text استایل دهید.

جدول Bootstrap و کلاس‌های مختلفی را که می‌توانند ظاهر جدول را تغییر دهند، بحث کنید.

یک جدول پایه Bootstrap 4 دارای تقسیم‌بندی‌های افقی و بالشتک‌های سبک است. کلاس .table به یک جدول یک استایل اولیه می‌دهد. جدول. کلاس .table-bordered حاشیه هایی را به جدول و سلول ها در همه طرف اضافه می کند. در ردیف های جدول، کلاس .table-hover یک افکت شناور (رنگ پس زمینه خاکستری) اضافه می کند.