• ارسال کننده: زهرا صانعی
  • تاریخ انتشار: 2017 / 09 / 02

آشنایی با اجزای بوت استرپ

در مقاله قبلی وبسایت یاد بگیر دات کام با عنوان “ایجاد سایت های زیبا و واکنش گرا با بوت استرپ“، در مورد نحوه شروع به کار با بوت استرپ، قالب اولیه بوت استرپ و ویژگی های آن، منوهای ناوبری اصلی، تایپوگرافی و لینک ها در بوت استرپ و … توضیحاتی ارائه شد، این مقاله که در ادامه مقاله قبل تهیه شده است شما را با ویژگی های دیگر بوت استرپ، مثل دکمه ها در بوت استرپ، نشان های درون خطی، هشدارها، نوارهای هدایتی، عناصر و تم های دیگر بوت استرپ و اجزای آن  آشنا خواهد کرد.

آشنایی با اجزای بوت استرپ

دکمه ها در بوت استرپ

استایل های مختلفی برای دکمه ها در تویتر بوت استرپ وجود دارد. کلاس های پیش فرض دکمه ها و رنگ و نحوه استفاده از آنها در شکل زیر آمده است. مثلا:

btn-success: دکمه نشان دهنده یک فعالیت موفق است.

btn-warning: نشان میدهد که طی انجام این فعالیت باید احتیاط کرد.

btn-danjer: یک فعالیت خطرناک را نشان میدهد.

البته تویتر بوت استرپ قابلیت های بسیار دیگری را در خصوص دکمه ها در اختیار شما میگذارد نظیر مقیاس بندی دکمه ها (ایجاد دکمه با اندازه های مختلف) و ایجاد دکمه های غیر فعال و … که از گنجایش این مقاله بیرون است.

دکمه ها در بوت استرپ

 نشان های درون خطی (Badge)

شما می توانید در بوت استرپ از نشان های درون خطی استفاده کنید. این نشان ها معمولا callouts عددی هستند که بعد از آیتم های ناوبری مختلف مثل لینک ها قرار می گیرند و می توانند تعداد پیام ها و یا اطلاعیه های جدیدی که در انتظار خوانده شدن هستند و یا وجود بروزرسانی جدیدی را به کاربر اطلاع دهند. عمده استفاده چنین عناصری در ایمیل و سایت های شبکه های اجتماعی است. ایجاد این نشان های درون خطی آسان است و کافیست عنصر <span> ی با کلاس Badge تعریف کرده و عدد مربوطه را درون آن قرار دهید.

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

ایجاد این نشان های درون خطی

 هشدارها(Alerts)

شما ممکن است نیاز داشته باشید که برخی اعلانیه ها، اخطارها و پیام های خطا را در اختیار مخاطبانتان قرار دهید. در اینجاست که کلاس alert بدردتان میخورد. البته در بوت استرپ برای نشان دادن پیام های تائید، اطلاعاتی، هشدار و خطا، 4 کلاس مختلف وجود دارد که میتوانید در کنار کلاس استاندارد alert بکار بگیرید. هر کدام از این کلاس ها رنگ متفاوتی را به پس زمینه پیغام شما می افزایند.

هشدارها در بوت استرپ

 نوارهای هدایتی (Navbars) و منوها

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

قالب ما دارای یک نوار ناوبری استاندارد است اما بوت استرپ، در رابطه با Navbars از گزینه های استایل بندی بیشتری پشتیبانی می کند. برای مثال می توانید در صورت نیاز به جای ایجاد Navbarهای افقی، Navbar های عمودی ایجاد کنید، به نوارهای هدایتی خود زیرمنوهای کشویی اضافه کنید و یا برای صرفه جویی در پهنای صفحه از منوهایی نظیر tab ها و pill ها استفاده کنید که در بالای عناصر دیگر قرار می گیرند. برای ایجاد اینگونه منوها، کافیست که یک لیست نامرتب ایجاد کرده و به آن کلاس پایه  nav و کلاس nav-tabs (و یا nav-pills ) را بیفزایید و درون این لیست تب هایتان را در قالب لینک ایجاد کنید.

tab ها و pill ها این امکان را به شما میدهند که با استفاده از مکانیزم بخشبندی، محتوای زیادی را در یک فضای محدود به کاربر نشان دهید. کاربر در هر لحظه می تواند یکی از بخش ها را انتخاب کرده و محتویات آن را مشاهده کند. درنتیجه از ایجاد صفحات مجزا یا طویل کاسته می شود.

نوارهای هدایتی (Navbars) و منوها در بوت استرپ

 Navbar ها هم به شیوه مشابه منوها ساخته می شوند منتها کمی پیچیده تر هستند. این Navbar ها با عناصر <div> و  <nav> که دارای کلاس navbar هستند شروع می شوند.

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

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

عناصر دیگر بوت استرپ

در بوت استرپ می توان همان جداول HTML را با سبک های بهتری ایجاد کنید. مثلا جداول راه راه ایجاد کرد، می شود برچسب های درون خطی (labels) را با سبک دکمه های بوت استرپ ایجاد نمود، برای ایجاد نوار پیشرفت (progress bar : نواری که میزان پیشرفت یک پروسه را به مخاطب نشان میدهد)، سبک های متعددی وجود دارد که می توانید هر کدام را با توجه به نیازتان انتخاب کنید. List Groups and panels را که دارای بخش عنوان و محتوا هستند ایجاد کنید.

همچنین می توانید در Navbarها، منوهای کشویی رو به پایینی ایجاد کنید که گزینه های استایل دهی بیشتری نسبت به عنصر<select> اچ تی ام را داشته باشند.

 

ایجاد جدول در بوت استرپ

برچسب های درون خطی در بوت استرپایجاد نوار پیشرفت در بوت استرپ

ایجاد بخش عنوان و محتوا در بوت استرپ

تم های دیگر بوت استرپ

شما می توانید بسته به نیاز خود تم پیش فرض بوت استرپ را با تغییر دادن برخی یا همه ویژگی ها و فایل های css آن و تنظیم مجدد رنگ ها و سبک هایش گسترش دهید. اما اگر مایلید که کارتان را با تم های آماده شروع کنید، بهتر است بدانید که می توانید به گالری های متعددی از تم های بوت استرپ که به صورت آنلاین عرضه شده اند دسترسی پیدا کنید. از جمله این سایت های ارائه دهنده می توان به سایت (WrapBootstrap.com  عرضه کننده انواع تم های تجاری) و Bootswatch.com (ارائه دهنده تم های رایگان) اشاره کرد. البته اگر توان خریداری تم های غیر رایگان را هم داشتید که چه بهتر. برخی از این قالب های پولی نسبت به قالب پبش فرض بوت استرپ قابلیت های بیشتری را در اختیار شما قرار میدهند نظیر پشتیبانی از منوهای مدیریتی و داشبوردهایی با نمودارها و ابزارهای سنجش.

به عنوان مثال از این قالب های پولی می توان به قالب Inspinia اشاره نمود که در حال حاضر قیمیتی معادل 30 دلار دارد. اسکرین شاتی از این قالب را در تصویر زیر ملاحظه می کنید.

تم در بوت استرپ

اگر زمانی خواستید که تم بوت استرپ خود را تغییر دهید، کافیست فایل bootstrap.css را برای تم مورد نظرتان در فولدر wwwroot/css قرار داده و آدرس دهی ها را در _Layout.cshtml  به صورت زیر تغییر دهید تا فایل های css شما را مکان یابی کند (کدهای زیر را به مجموعه کدهای_Layout.cshtml  بیفزایید):

تغییر تم در بوت استرپ

 همچنین اگر خواستید داشبورد دلخواه خود را بسازید می توانید کارتان را با مثال رایگانی که در آدرس زیر قرار دارد شروع کنید.

http://getbootstrap.com/examples/dashboard/.

اجزای دیگر بوت استرپ

علاوه بر عناصری که قبلا عنوان شد، بوت استرپ از مولفه های رابط کاربری درون ساخته ای هم پشتیبانی می کند. آیکن های نمادین (Glyphicons) از جمله این اجزا هستند.

 Glyphicons

بوت استرپ دارای 200 عدد آیکن رایگان می باشد که برای مقیاس پذیری و سهولت استفاده، در قالب فونت عرضه شده اند بطوریکه دیگری نیازی به لود هیچ تصویری در این خصوص ندارید و کافیست در هر جایی که از بوت استرپ استفاده می کنید یک تگ <span> نوشته و کلاس glyphicon و کلاس مخصوص هر آیکن  را به آن اضافه کنید. در اینجا چند نمونه کوچک از این مجموعه بزرگ را برایتان نمایش داده ایم.

آیکن ها در بوت استرپ

نمونه هایی از آیکن ها

 Input groups

 Input groups در بوت استرپ

 با استفاده ازinput group ها می توانید متن و یا دکمه های اضافی تری را به ابتدا یا انتهای عناصر (کنترل های) ورودی فرم اضافه کنید و در نتیجه تجربه شهودی بیشتری را برای کاربر فراهم نمایید. مثلا میتوانید علامت $ را به ورودی هایی از نوع پولی اضافه کنید. بدین منظور کافیست یک تگ Div ایجاد کرده و تمام کنترل هایتان را داخل آن قرار دهید و سپس به آن کلاس input-group را بیفزایید. یک تگ span نوشته و کلاس input-group-addon را به آن اختصاص دهید و در مرحله بعد، این تگ را قبل یا بعد از کنترل ورودی مورد نظر قرار دهید.

افزودن عناصر به ورودی ها در بوت استرپ

شماره گذاری صفحات (pagination) و نشانگر صفحات (Breadcrumbs)

چنانچه سایتی با تعداد صفحات زیاد داشته باشید ممکن است مجبور شوید که نوعی از شماره گذاری صفحات را به هر صفحه سایت خود اعمال کنید. برای ایجاد این نوع شماره گذاری، کافیست که یک لیست ul ایجاد نموده و کلاس pagination را به آن بیفزایید. یقینا نمونه ای از کاربرد این ویژگی بوت استرپ را در نمایش محدود نتایج گوگل دیده اید و خودتان هم میتوانید برای نمایش محدود پست ها و یا نظرات سایت خود از آن بهره بگیرید.

همچنین می توانید با استفاده از عناصری نظیر <iframe> : ،<embed>، <video>،<object> ، ویدیوها و اسلایدشوهای ریسپانسیوی ایجاد کنید. بوت استرپ به صورت خودکار این عناصر را استایل دهی می کند.

شماره گذاری صفحات در بوت استرپ

Breadcrumbs

Breadcrumbs در بوت استرپ

Breadcrumb یکی از رایجترین اجزای رابط کاربری است که موقعیت فعلی کاربر را در ساختار سلسله مراتبی سایت به او نشان میدهد. همچنین لینک هایی را در اختیار کاربر قرار میدهد تا در صورت نیاز بتواند به صفحات قبلی مورد بازدیدش بازگردد. برای ایجاد یک Breadcrumb، کافیست با استفاده از تگ<ol> یا <ul>، یک لیست ایجاد کرده و به آن کلاس breadcrumb  را اعمال کنید.

 

ترجمه: رقیه آقایاری

 

این محتوا اختصاصاً برای یاد بگیر دات کام تهیه شده است استفاده از آن با ذکر منبع همراه با لینک آن و نام نویسنده یا مترجم مجاز است
برچسب ها:



 

در یاد بگیر دات کام مشترک شوید و آخرین مطالب را در ایمیل خود دریافت نمایید

نظر شما چیست؟

پرسش های خود را در بخش پرسش و پاسخ مطرح کنید



تبلیغات اینترنتی

رپورتاژ آگهی



بستن تبلیغات

طراحی سایت
تبلیغات اینترنتی در یاد بگیر دات کام



صفحه ما را در فیس بوک دنبال کنید صفحه ما را در توییتر دنبال کنید صفحه ما را در  اینستاگرام دنبال کنید صفحه ما را در لینکداین دنبال کنید