مشاهده نسخه کامل
: saeed410
30-12-2014, 10:12
آموزش بوت استرپ : صفحه بندی
در این قسمت از آموزش ها میخواهیم با کلاس های مختلف صفحه بندی که بوت استرپ برای طراحی سایت در نظر گرفته است آشنا شویم. صفحه بندی ها در طراحی سایت میتوانند در قسمت های مختلفی مورد استفاده قرار گیرند. به عنوان مثال برای نمایش محصولات میتوانید از صفحه بندی استفاده کنید.
صفحه بندی در بوت استرپ:
جدول زیر خلاصه کلاسهای مورد استفاده بوت استرپ برای صفحه بندی را نمایش می دهد:
[ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ]
صفحه بندی پیش فرض در بوت استرپ:
برای ایجاد یک صفحه بندی ساده در بوت استرپ کافی است یک لیست ایجاد کنید و آنها را داخل یک کلاس pagination قرار دهید. مثال :
برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید
تصویر این کد به صورت زیر است:
[ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ]
وضعیتهای صفحه بندی در بوت استرپ:
میتوانید یک دکمه را به عنوان فعال و بقیه دکمه ها را به عنوان غیر فعال انتخاب کنید. برای این کار از کلاس active و disabled استفاده کنید. مثال :
برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید در این مثال شماره 2 غیر فعال است و اگر ماوس را روی آن ببریم به صورت غیر فعال و وورد ممنوع نمایش داده میشود.تصویر این کد به صورت زیر است:
[ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ]
اندازه صفحه بندی در بوت استرپ :
برای تغییر اندازه صفحه بندی در بوت استرپ میتوانید از کلاسهای pagination-lg ,pagination-sm استفاده کنید.مثال:
برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید
تصویر کدبالا به صورت زیر است:
[ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ]
صفحه بندی متنی در بوت استرپ:
اگر میخواهید در طراحی سایت خود از صفحه بندی متنی به صورت کلیدهای بعدی و قبلی استفاده کنید میتوانید از کلاس pager استفاده کنید. جدول زیر کلاسهای مختلف مورد استفاده برای ایجاد دکمه ها را نشان میدهد:
[ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ]
صفحه بند متنی پیش فرض در بوت استرپ:
مثال زیر ایجاد یک صفحه بند متنی ساده را نمایش میدهد:
برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید تصویردموی کد بالا به صورت زیراست:
[ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ]
کمه های ترازبندی شده :
برای ایجاد این دکمه ها میتوانید ازکلاسهای previous و next استفاده کنید:
برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید
تصویر کد بالا به صورت زیر است:
[ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ]
وضعیت ها:
برای فعال یا غیر فعال کردن هریک از دکمه ها براحتی میتوانید از کلاس disabled استفاده کنید:
برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید
تصویر کد بالا به صورت زیر است:
[ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ]
در این قسمت از آموزش ها میخواهیم با کلاس های مختلف صفحه بندی که بوت استرپ برای طراحی سایت در نظر گرفته است آشنا شویم. صفحه بندی ها در طراحی سایت میتوانند در قسمت های مختلفی مورد استفاده قرار گیرند. به عنوان مثال برای نمایش محصولات میتوانید از صفحه بندی استفاده کنید.
صفحه بندی در بوت استرپ:
جدول زیر خلاصه کلاسهای مورد استفاده بوت استرپ برای صفحه بندی را نمایش می دهد:
[ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ]
صفحه بندی پیش فرض در بوت استرپ:
برای ایجاد یک صفحه بندی ساده در بوت استرپ کافی است یک لیست ایجاد کنید و آنها را داخل یک کلاس pagination قرار دهید. مثال :
برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید
تصویر این کد به صورت زیر است:
[ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ]
وضعیتهای صفحه بندی در بوت استرپ:
میتوانید یک دکمه را به عنوان فعال و بقیه دکمه ها را به عنوان غیر فعال انتخاب کنید. برای این کار از کلاس active و disabled استفاده کنید. مثال :
برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید در این مثال شماره 2 غیر فعال است و اگر ماوس را روی آن ببریم به صورت غیر فعال و وورد ممنوع نمایش داده میشود.تصویر این کد به صورت زیر است:
[ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ]
اندازه صفحه بندی در بوت استرپ :
برای تغییر اندازه صفحه بندی در بوت استرپ میتوانید از کلاسهای pagination-lg ,pagination-sm استفاده کنید.مثال:
برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید
تصویر کدبالا به صورت زیر است:
[ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ]
صفحه بندی متنی در بوت استرپ:
اگر میخواهید در طراحی سایت خود از صفحه بندی متنی به صورت کلیدهای بعدی و قبلی استفاده کنید میتوانید از کلاس pager استفاده کنید. جدول زیر کلاسهای مختلف مورد استفاده برای ایجاد دکمه ها را نشان میدهد:
[ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ]
صفحه بند متنی پیش فرض در بوت استرپ:
مثال زیر ایجاد یک صفحه بند متنی ساده را نمایش میدهد:
برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید تصویردموی کد بالا به صورت زیراست:
[ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ]
کمه های ترازبندی شده :
برای ایجاد این دکمه ها میتوانید ازکلاسهای previous و next استفاده کنید:
برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید
تصویر کد بالا به صورت زیر است:
[ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ]
وضعیت ها:
برای فعال یا غیر فعال کردن هریک از دکمه ها براحتی میتوانید از کلاس disabled استفاده کنید:
برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید
تصویر کد بالا به صورت زیر است:
[ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ]