کامپوننت ناوبری بوتسترپ

کامپوننت ناوبری بوتسترپ

در این آموزش با دستورات:

  1. تب ها و قرص ها(pills)
  2. صفحه بندی و breadcrumb
  3. برچسب ها

آشنا خواهید شد.


تب ها و قرص ها(pills)

کلاس توضیحات
nav nav-tabs. تب های ناوبری را ایجاد می کند.
nav nav-pills. قرص های(pills) ناوبری را ایجاد می کند.
nav nav-pills nav-stacked. قرص های(pills) ناوبری عمودی را ایجاد می کند.
nav-justified. در صفحه های نمایش پهن تر از ۷۶۸px،عرض قرص ها یا تب های ناوبری را برابر با والد آنها می کند. در صفحه های نمایش کوچکتر، قرص ها یا تب های ناوبری دسته بندی می شوند.
disabled. یک تب یا قرص غیر فعال(غیر قابل کلیک) را مشخص می کند.
تب های ناوبری به همراه منوهای کشویی Try it
قرص های ناوبری به همراه منوهای کشویی Try it

صفحه بندی و breadcrumb

کلاس توضیحات
breadcrumb. یک breadcrumb را ایجاد می کند.
pager. لینک های صفحه بندی ساده را مشخص می کند(صفحه ی قبل یا بعد).
previous. دکمه ی قبلی(previous) از کلاس pager. را به سمت چپ ترازبندی می کند.
next. دکمه ی بعدی(next) از کلاس pager. را ترازبندی می کند.
disabled. یک لینک غیرقابل کلیک را مشخص می کند.
pagination. لینک های صفحه بندی را ارائه می دهد.
pagination-lg. برای ارائه دادن لینک های صفحه بندی بزرگتر، از آن به همراه کلاس pagination. استفاده کنید.
pagination-sm. برای ارائه دادن لینک های صفحه بندی کوچکتر، از آن به همراه کلاس pagination. استفاده کنید.
disabled. یک لینک غیر قابل کلیک را مشخص می کند.
active. صفحه ی جاری را مشخص می کند.

برچسب ها

کلاس توضیحات
label label-default. یک برچسب پیش فرض و خاکستری را مشخص می کند.
label label-primary. یک برچسب آبی را از نوع “primary” مشخص می کند.
label label-success. یک برچسب سبز را از نوع “success” مشخص می کند.
label label-info. یک برچسب آبی کم رنگ را از نوع “info” مشخص می کند.
label label-warning. یک برچسب زرد را از نوع “warning” مشخص می کند.
label label-danger. یک برچسب قرمز را از نوع “danger” مشخص می کند.
badge. آیتم های جدید یا خوانده نشده را مشخص می کند.
jumbotron. یک جعبه ی بزرگ را برای ایجاد یک اطلاعات مهم و ویژه ایجاد می کند.
(jumbotron (extra. برای اینکه اجازه دهیم تا جعبه ی jumbotron. بصورت تمام صفحه، گسترش یابد، و همچنین گوشه های آن نیز گرد نباشد، آن را بیرون از کلاس container. قرار دهید.


اگه خوشت اومد به اشتراک بزار


اگه به اشتراک نزاشتی حداقل لایک کن:(

نظر شما در رابطه با این آموزش چیست


بالا

تمامی حقوق مادی و معنوی این وبسایت محفوظ میباشد و متعلق است به Webtekar.ir.
Google