آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

آموزش List در Bootstrap

Twitter Bootstrap Lists

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

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

شما می توانید سه نوع مختلف لیست تعریف کنید . لیست های بدون ساختار –لیست یارآیتم ها که درآن ترتیب مهم نیست. آیتم های لیست در لیست های بدون ساختار با نقطه های گرد مشخص شده اند. لیست های منظم – لیست یارآیتم ها که در آن ترتیب مشخص میباشد. آیتم های لیست درلیست منظم با اعداد مشخص می شوند. لیست تعریف –لیست یار آیتم ها با توصیفات مربوط به آن ها.

لیست های منظم و نامنظم بدون سبک

گاهی اوقات ممکن است لازم باشد طراحی پیش فرض را از آیتم های لیست حذف کنید. این کار را می توانید به راحتی با به کار بردن گروه .list-unstyled برای عناصر مربوط به Ul یا ol انجام دهید.

مثال :

  • Home
  • Products
    • Gadgets
    • Accessories
  • About Us
  • Contact

خروجی مثال بالا مانند زیر می باشد .

آموزش php

ایجاد قالب با نمای سه ستونه (3 columns layout)

به همین ترتیب می توانید بر اساس اصل ذکر شده، نما و layout های متنوع و متفاوت طراحی نمایید. مثال زیر یک نمای سه ستونه برای صفحه نمایش لپ تاپ و دسکتاپ تعریف می کند. این layout یا طرح بندی در تبلت هایی که محتوا را با نمای افقی (landscape mode) نمایش داده و وضوح تصویر آن ها بیشتر یا برابر 992 پیکسل می باشد (مانند Apple iPad) نیز قابل استفاده می باشد. اما در نمای عمودی (portrait mode) مثل حالت پیش فرض افقی می باشد.

مثال :

		
        
نکته:

کلاس .visible-md-block تنها در دستگاه هایی که عرض صفحه ی نمایش آن ها متوسط است کلاس .clearfix را اعمال می کند.

Bootstrap
نکته:

گروه .list-unstyledسبک پیش فرض لیست و لایه گذاری چپ را فقط از آیتم هایی مربوط به لیست حذف می کند که زیرمجموعه های اولیه ی عنصر ul یا ol می باشند.

قرار دادن آیتم های لیست های منظم و نامنظم درون خط

اگر تمایل دارید با استفاده از لیست های منظم و نامنظم مورد نیاز یک منوی افقی ایجاد کنید لازم است تمام آیتم ها را در یک خط قرار دهید، برای مثال در کنار یکدیگر. شما می توانید این کار را به راحتی با به کار بردن گروه بوت استرپ .list-inline برای عناصر مربوط به انجام دهید. گروه .list-inline همچنین لایه های چپ و راست به همه ی آیتم های لیست اضافه می کند.

مثال :

    
  • Home
  • About Us
  • Products
  • Services
  • Contact

خروجی مثال بالا مانند زیر می باشد .

Bootstrap

ایجاد لیست های تعریف افقی

ترم ها و توصیفات در لیست های تعریف با استفاده از گروه بوت استرپ .dl-horizontal می توانند کنار یکدیگر قرار بگیرند.اگر ترم ها در لیست های افقی تعریف برای قرار گرفتن در ستون طولانی باشند، کوتاه می شوند. به هرحال در ویوپورت های باریک تر پیش فرض لی اوت را تغییر می دهند.

	
                    
User Agent
An HTML user agent is any device that interprets HTML documents.
Client-side Scripting
Client-side scripting generally refers to the category of computer programs on the web that are executed client-side i.e. by the user's web browser.
Document Tree
The tree of elements encoded in the source document.

خروجی مثال بالا مانند زیر می باشد .

Bootstrap
نکته:

اصطلاح های کوتاه در لیست های تعریف افقی به وسیله ی حذف به قرینه و سه نقطه (...)نشان داده خواهد شد.

گروه های لیست تویتر بوت استرپ

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

    
  • Pictures
  • Documents
  • Music
  • Videos

خروجی مثال بالا مانند زیر می باشد.

Bootstrap

به علاوه می توانید آیتم های گروه لیست را با تغییر کوچک در نشانه گذاری HTML لینک کنید. را با برچسب < a>جایگزین کنید و از عنصر < div> به عنوان منبع به جای < ul> استفاده کنید. همچنین می توانید icons و badges را به این لیست اضافه کنید تا آن را زیباتر کنید. مولفه ی برچسب ها به طور خودکار در سمت راست قرار می گیرد.



خروجی مثال بالا مانند تصویر زیر خواهد بود.

Bootstrap
نکته:

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

شما همچنین می توانید عناصر HTMLدیگری مانند تیترها و پاراگراف را به این لیست ها اضافه کنید.

	
                    

خروجی مثال بالا مانند زیر می باشد.

Bootstrap یا
  • 1733
  •    2028
  • تاریخ ارسال :   1394/07/27

دانلود PDF دانلود سورس کد دانشجویان گرامی اگر این مطلب برای شما مفید بود لطفا ما را در GooglePlus محبوب کنید
رمز عبور: tahlildadeh.com یا www.tahlildadeh.com
ارسال دیدگاه نظرات کاربران
شماره موبایل دیدگاه
عنوان پست الکترونیک

ارسال

آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

تمامی حقوق این سایت متعلق به آموزشگاه تحلیل داده می باشد .